Armando nuestra primer nota de blog

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.

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

Que fácil es insertar lo bloques:

Tip:

Cuando agreguen un link desde la caja de herramientas, SÍ activen “Abrir 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 “afuera” 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.

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/

🛠💻 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

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 “semilla”, 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 “Có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