No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Armando nuestra primer nota de blog

7/13
Recursos

Aportes 53

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Gutenberg me hace acordar mucho a Notion, que belleza.

Notion para tomar los apuntes de los cursos de Platzi y WordPress para documentar nuestros avances y compartirlo orgullosos con el mundo.

Mucha gente ha sido reacia a utilizar Gutenberg (me incluyo) y actualmente todav铆a los hay, incluso prefieren usar el editor cl谩sico, aunque hay que reconocer a Gutenberg como una gran herramienta, tanto para crear, como personalizar el contenido en WordPress. Excelente clase, me pareci贸 muy interesante.
脷ltimamente me inclin茅 m谩s por usar Elementor y Divi, pero voy a empezar a aprender Gutenberg, esta clase me convenci贸 de lo interesante que puede ser.

Que f谩cil es insertar lo bloques:

si estas empezando desde cero con wordpress este curso es un desastre

Tip:

Cuando agreguen un link desde la caja de herramientas, S脥 activen 鈥淎brir en una nueva pesta帽a鈥 para que la p谩gina se dirija a otra pesta帽a diferente a la de su sitio. As铆 provocar谩n que los usuarios se queden en su sitio, no se vayan 鈥渁fuera鈥 y se distraigan con otros contenidos. Eso les puede provocar fuga de atenci贸n de los visitantes.

No me gusto la forma de explicar del docente me parece desordenado borra a cada rato, recomendar铆a tenga algo ya preparado para las personas que est谩n iniciando reci茅n con el tema.

6. Armando nuestra primer nota de blog

Wodpress usa Gutemberg como editor de posts por defecto, este trabaja en base a bloques.

Es muy interesante el avance de WordPress hacia su objetivo el cual es el Full Site Editing. E inclusivo he visto que han agregado un curso al respecto, espero que con esta carrera est茅 listo para trabajar haciendo sitios WordPress con temas personalizados.

Para este proyecto de wordpress trabajare un pagina que comenzara a darle vida a mi marca personal:

https://www.albasan.live

Les agradecer铆a que un poco de su importante feedback

Armando nuestra primer nota del blog


Ahora que ya sabemos crear una entrada, sabemos como gestionar Etiquetas y Categor铆as, pero a煤n no hemos visto c贸mo generara contenido dentro de nuestras Entradas. Para esto, WordPress usa un editor visual que se llama Guntenberg, el cual ya viene instalador con el c贸digo fuente de WordPress.

  • En este caso para el ejemplo vamos a copiar una entrada de un Blog de Platzi
  • WordPress detecta si estamos copiando y pegando enlaces o alguna otra cosa, pero de todos modos hay que asegurarnos de que se haga correctamente

Gutenberg - Editor de bloques


Si no vamos a copiar texto, sino que vamos a trabajar directamente con Gutenberg, tenemos que presionar el 铆cono de + para agregar un nuevo bloque.

馃挕 Para deshacer cambios desde el editor tambi茅n podemos utilizar el atajo: Ctrl + z

Bloques


  • Al agregar un nuevo bloque nos va a mostrar algunas opciones por defecto:
    • Bloque de: P谩rrafo, Imagen, Encabezado.
  • Gutenberg se maneja con bloques, bloques de contenido:
    • Por ejemplo, si queremos poner un encabezado, elegimos el bloque de Encabezado 鈫 en este caso para poder utilizar desde el h1 al h4.
    • P谩rrafo 鈫 texto plano
    • Lista 鈫 para listar elementos
    • Cl谩sico 鈫 editor cl谩sico de WordPress que se utilizaba antes de que se agregara Gutenberg

Patrones


Adem谩s de los bloques, tambi茅n tenemos patrones de dise帽o, es decir, la plantilla nos sugiere columnas o tipos de formato de contenido.

  • B谩sicamente, son como plantillas con acomodos de informaci贸n de determinada manera

Trabajando con Gutenberg


  • Podemos ir copiando y pegando texto o p谩rrafos de alg煤n otro sitio web, Gutenberg lo que va a hacer es detectar los estilos o las estructuras de cada elemento del p谩rrafo y los va a traer tal cual.
  • Cada p谩rrafo que copiamos y pegamos en Gutenberg se agrega como un bloque m谩s
  • Para colocar la imagen, utilizamos el bloque de imagen:
    • Subir 鈫 subir archivo desde el equipo
    • Biblioteca de medios 鈫 (recomendado) para administrar todas nuestras im谩genes y medios cargados previamente a WordPress, en este apartado podemos reutilizar las im谩genes
    • Insertar desde una URL 鈫 copiar URL de la imagen que queremos colocar
    • Una vez que cargamos la imagen, Gutenberg nos da algunas opciones:
      • aplicar un filtro, alinear la imagen, poner un link, recortar, ponerle texto, reemplazar por otra imagen
      • Si seleccionamos el bot贸n 鈿, podemos aplicar efectos de marco a la imagen, como ponerla en c铆rculo, 贸valo, etc.
        • Podemos modificar tambi茅n el tama帽o de la imagen.

          馃挕 Cuando cargamos una imagen a WordPress redimensiona la imagen 4 veces: Miniatura, Medio, Grande, Tama帽o completo

馃挕 Es importante colocar el texto alternativo a nuestra imagen para temas de accesibilidad

  • Para insertar un v铆deo en Gutenberg lo podemos hacer de 2 maneras:

    • bloque HTML personalizado 鈫 es decir, pegar un bloque de HTML y que WordPress lo renderice por nosotros
    • Para pegar este bloque, tenemos que ir al v铆deo en YouTube y desde ah铆 seleccionar la opci贸n Compartir > Incorporar video 鈫 copiamos el c贸digo y lo pegamos en Gutenberg
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Gw2ISACieqs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    
  • Pero existe otra manera m谩s r谩pida de compartir un v铆deo de YouTube, Gutenberg tiene un bloque de YouTube, y con esta opci贸n solo tenemos que colocar la URL del v铆deo

  • Si copiamos y pegamos todo el texto que falta, incluidos encabezados e im谩genes, WordPress incrusta los elementos tal cual como no los estamos copiando.

    • En el caso de la imagen, tenemos el detalle que hace referencia al Blog de Platzi, osea que la imagen no se encuentra en nuestra biblioteca de medios.

      • Pero podemos agregar esa imagen a la biblioteca si damos clic en los 3 puntos y seleccionamos la opci贸n de Reemplazar > Subir

      La podemos subir directamente o agregar la imagen a la biblioteca de medios

Aporte mi resumen de la clase:
WordPress usa un editor visual que se llama Gutenberg, el cual ya viene instalado con su c贸digo fuente, por lo cual no es necesario instalar ning煤n plugin.
En entradas vamos a a帽adir una nueva, All铆 tenemos la opci贸n de copiar y pegar en el caso que tengamos nuestro escrito en un documento externo, o tenemos la opci贸n de escribir directamente en WordPress. Dando clic al bot贸n de m谩s, vamos a encontrar bloques con diferentes opciones (p谩rrafo, imagen, encabezado). Gutenberg se maneja con bloques de contenido. En la parte superior de la pantalla vamos a encontrar otro signo m谩s con muchas opciones de bloques de contenido o patrones de dise帽o predeterminados que la plantilla nos sugiere.
En el bloque de imagen vamos a encontrar las opciones de subirlas por medio de una url de la imagen en internet, o subirla directamente desde la computadora, o desde la biblioteca de medios que es la m谩s recomendada, por que nos da la opci贸n de administrar esas im谩genes.
Una vez subida la imagen nos va a dar la opci贸n de recortar, a帽adir texto, remplazar etc. Desde las opciones del engranaje nos va a permitir darle un estilo a la imagen y lo m谩s importante podemos incorporar el texto alt, que nos sirve para darle una descripci贸n de la imagen y nos ayuda con el posicionamiento SEO.

Hay dos opciones de subir un video de YouTube. Una utilizando el bloque de HTML personalizado, para ello vamos al video en YouTube y en la opci贸n de compartir vamos a incorporar y copiamos el HTML (inframe). La otra opci贸n y que es la m谩s r谩pida es usando directamente el bloque de YouTube donde solamente me va a pedir la url.

馃洜馃捇 Las nuevas actualizaciones de Wordpress est谩 genial .con su versi贸n de Gutenberg la hace m谩s amigable.

Aunque me parece complicado hacer el SEO cuando llegue abrir Wordpress, pero es una buena opci贸n para abrir un Blog.

Sinceramente, abrir un Blog en: Wordpress, Ghost, Notion y Substack se han convertido en tendencias y buenas opciones.

Pero Wordpress me ha impactado y emocionado para crear un Blog.

Elementor tambi茅n es otra forma de amor WP!

RECUERDA!!
Texto Alt: atributo que ira dentro del codigo cuando se genere, serviera tanto para:

  • Accesibilidad
  • Posicionamiento

me encanto la clase, estoy usando wp desde local sin pagar que bien

Hola compa帽eros, hice este blog para una empresa, les dejo aqu铆 el link, cu茅ntenme que tal les parece

https://chavja.com/2022/05/23/whatsapp-marketing/

Personalmente prefiero WP Bakery Builder, es pago y lo incluyen los temas pagos鈥 no me gust贸 Gutenberg o Elementor

Genial, es muy genial

As铆 va quedando mi blog, bastante b谩sico pero ya lo ir茅 mejorando 馃槂

https://elblogdejack.wordpress.com/

Dejar茅 un dato extra para los casos de Youtube

  • Puedes copiar y pegar el link de Youtube, y al guardarlo , se carga solo 馃槂
  • Tambi茅n si usas word o documentos de Google, copias y pegas todo. Solamente debes editar la est茅tica, y listo

Hoy descubr铆 una poderosa herramienta. Aunque antes era diferente en un cuadro con las herramientas que nos acostumbra un procesador de texto como Word, hay que usar las mejoras que nos da este CMS WordPress. Que tengan un feliz d铆a, y nunca pares de aprender.

Los bloques nos permiten a帽adir diferentes secciones y contenido a nuestro blog como lo es (im谩genes, p谩rrafos, video y m谩s).

Les comparto mi blog personal, poco a poco lo ir茅 construyendo. Ya dej茅 la 鈥渟emilla鈥, lo continuar茅 conforme sigamos con la clase. 馃槂

https://memorias.dvprotocol.com/multitasking/

Elementor toda la vida

Yo viv铆 el cambio a Gutenberg y entre en el p谩nico del editor cl谩sico. 隆Caray! veo que ya evoluciono bastante y hace m谩s f谩cil la vida m谩s para las personas que editan el contenido de las entradas pocas veces pensamos en ellas. I 鉂わ笍 bloques.

Interesante

.

鉁嶏笍 Notas

  • Para agregar contenido a las entradas de blog, se utiliza el editor visual Gutenberg.
  • Gutember funciona a partir de bloques de contenido.
  • Estos bloques pueden ser de diferentes tipos, como encabezados, p谩rrafos, enlaces, im谩genes, videos, y m谩s.

El editor Gutenberg es el editor de bloques integrado en WordPress desde la versi贸n 5.0. Este editor se basa en la idea de que todo el contenido se construye con bloques, que son elementos b谩sicos que se pueden combinar para crear cualquier tipo de dise帽o. Los bloques son unidades independientes que permiten trabajar con diferentes tipos de contenido de manera m谩s flexible y visual.

Algunos bloques relevantes en Gutenberg son:

  • Bloque de texto: el bloque de texto es uno de los bloques m谩s b谩sicos de Gutenberg y permite escribir texto en el editor. Ofrece opciones de formato de texto y estilos de fuente.
  • Bloque de imagen: el bloque de imagen permite insertar im谩genes en el contenido. Es posible ajustar el tama帽o de la imagen y a帽adir texto alternativo (texto alt) para mejorar la accesibilidad.
  • Bloque de video: el bloque de video permite insertar videos de YouTube, Vimeo y otros servicios. Tambi茅n es posible cargar videos directamente en WordPress y ajustar su tama帽o.
  • Bloque de galer铆a: el bloque de galer铆a permite crear una galer铆a de im谩genes en el contenido, con diferentes opciones de dise帽o.

Gutenberg tambi茅n ofrece patrones de dise帽o, que son combinaciones predefinidas de bloques que permiten crear dise帽os complejos de manera m谩s f谩cil. Adem谩s, permite cargar im谩genes y videos arrastr谩ndolos y solt谩ndolos en el editor. Es importante mencionar que se debe agregar texto alternativo (texto alt) a las im谩genes para mejorar la accesibilidad de la p谩gina.

A mi me aparec铆a un error que no me dejaba montar imagenes

Unable to Create Directory wp-content/uploads. Is its Parent Directory Writable by the Server in WordPress

lo que hice fue cambiar los permisos de la carpeta wp-content.

En la terminal ubicate en la carpeta wordpress y escribe este comando:

sudo chmod 777 wp-content/

Esto si no estoy mal es un hueco de seguridad pero no le veo mucho problema si apenas est谩s haciendo tus primero proyectos peque帽os como es mi caso

Hasta ahora no he tenido mayor problema con el curso, lo sigo con un ambiente local en linux(Ubuntu), est谩 incre铆ble.

Este nuevo editor de WordPress nos facilita a煤n m谩s las cosas, es bastante pr谩ctico, por nuestra parte nos toca experimentar con las caracter铆sticas de acuerdo al sitio que estemos creando.

驴Qu茅 es el editor de bloques de Gutenberg?

Gutenberg, conocido alternativamente como el 芦editor de bloques de WordPress禄 o simplemente el 芦editor de WordPress禄, es el editor de contenido de WordPress introducido en聽WordPress 5.0, lanzado el 6 de diciembre de 2018.

La gran diferencia entre el editor de WordPress Gutenberg y el anterior editor de WordPress (ahora llamado 芦editor cl谩sico禄 o 芦editor TinyMCE禄) es un nuevo enfoque basado en bloques para crear contenido.

Con Gutenberg, cada elemento de tu contenido es un bloque, lo que permite manipular f谩cilmente el contenido. Cada p谩rrafo es un bloque, cada imagen es un bloque, cada bot贸n es un bloque鈥 隆lo entiendes!

Los desarrolladores de terceros tambi茅n pueden crear bloques personalizados, lo que est谩 ayudando a acabar con el asunto de WordPress聽con los shortcodes. Digamos que quieres聽incrustar un formulario de contacto. En lugar de tener que a帽adir un shortcode (por ejemplo, [your-form-shortcode]) como hac铆as antes, ahora puedes simplemente colocar el bloque de tu plugin de formulario.

Adem谩s, tambi茅n puedes utilizar los bloques para crear dise帽os m谩s complejos, como la configuraci贸n de un dise帽o de varias columnas o la agrupaci贸n de bloques para crear una secci贸n cohesionada.

馃挕Ideas principales de 鈥淐贸mo empezar a escribir un blog鈥

  1. 馃槂 Crear un blog mejora la presencia de tu marca personal en internet.
  2. 鈽戯笍 Para comenzar un blog, es importante definir un nicho, idioma, plataforma y una apariencia atractiva, y establecer una rutina de escritura regular.

jejej estoy en los 2 en este y en el de escritura online xD

La 煤nica manera de aprender todos los conceptos de las clases es creando blogs, aunque sea algo simple.

Buen dia compa帽eros les comparto mi blog tipo pagina web.
https://www.comercioexpress.com.co

Es m谩s f谩cil usar constructores como divi y elemento .

En este caso quisiera saber si podemos agregar fuentes para mantener la misma fuente correspondiente a la marca de la empresa. Si alguien sabe, podr铆a apoyarme con eso. Gracias.
Cargar las im谩genes en una biblioteca es muy recomendado, ya sub铆 todas las fotograf铆as ordenados por carpetas, es recomendable 100%. Ser铆a bueno tambi茅n poder ordenar los link de YouTube en la biblioteca.

Gutemberg es muy sencilla de usar y practica, pero me gusta mucho Elementor ya que me da mas funcionalidades profecionales .

Gracias

Es sencillo, solo hay que ir viendo cada pesta帽a he ir probando cada una.

Muy facil e intuitivo el trabajo con Guttemberg. Saludos

Muy bien todo, claro y preciso, muy bueno el curso hasta ahora.

Los Invito a ver Mi Blog creado bajo otro tema, agradeciera aportes para seguir mejorandolo : https://pvlinversiones.com/blog/

Gracias, excelente clase

Excelente con este video me motive a dejar de usar elementor

los bloques facilitan la vida un mont贸n, no hay que saber programar para trabajar en wordpress

Estoy usando bloques para agregar videos de Youtube, pero cuando visualizo mi entrada desde el m贸vil se nota as铆 antes de reproducir. 驴C贸mo puedo hacer para que se vea m谩s est茅tica la previsualizaci贸n?

Por defecto esta en editor de codigo y no explicaste que tenia que ponerlo en editor visual para poder editar el texto . -1 Punto

Les recomiendo ampliamente que ya que tengan el dise帽o de su blog, aprendan lo b谩sico de HTML y sus jerarqu铆as ya que poner m谩s de un <h1> o todo en <p>, <span>, causa problemas en SEO y la visibilidad que le dan los motores de b煤squeda:

馃彈 HTML
馃弲 SEO

El editor es parecido al de Elementor