Clase 5- Agregando contenido al sitio.pdf

Guia rapida para ingresar datos al sitio web

2. UNIDAD 5
Diseño web HTML5 + CSS
Agregando contenido al sitio

3. O1Diseño web HTML5 + CSS
WordPress está construido en torno de dos conceptos básicos. Las Entradas y las Páginas. Las
entradas son típicamente publicaciones de un blog. Una serie de artículos, listados (por lo general)
en orden cronológico inverso. Las Páginas son usadas para un contenido más estático (es decir,
contenido que no necesita ser modificado o que se modifica con muy poca frecuencia). La página
“Quiénes somos” es un ejemplo de Página en un sitio web típico. En la mayoría de los casos, usted se
encontrará con que el contenido de la página “Quiénes somos” no cambia casi nunca. Ahora, puede
que pienses: “pero yo no necesito un blog”. Esto puede ser cierto, pero también puede usar el
concepto de blog si tenés un sitio donde necesita mostrar sus últimas novedades’ o incluso las
actualizaciones de la empresa. Básicamente, cualquier información que es actualizada con una
frecuencia regular puede beneficiarse de la funcionalidad de un blog. Sea un blog tradicional, o las
‘últimas noticias’ de su empresa, o hasta tus propias actualizaciones personales.
Entradas
Luego de hacer clic en el menú Entradas se desplegará la lista de Entradas que contiene el sitio.
Entre la información mostrada está el título de la Entrada, el Autor, la/s Categoría/s, las Etiquetas,
el Número de comentarios y la Fecha, tanto de la entrada Publicada, como Programada, así como
la última fecha de modificación de los borradores. La pantalla de Entradas se verá similar a esta
imagen.

4. O2 Diseño web HTML5 + CSS
En la parte superior de la página podrás ver cuántas Entradas en total tiene el sitio, cuántas han
sido publicadas por vos, o están Publicadas, Programadas, Fijas, Pendientes, en Borrador o en la
Papelera.

5. O3
Al posar el puntero del ratón sobre cada fila, aparecerán algunos enlaces debajo del título de la
Entrada.
• Editar – Le permitirá modificar la Entrada. Es lo mismo que hacer clic sobre el
título de la Entrada
• Edición rápida – Le permite editar información básica de la Entrada, como el
Título, Slug, Fecha, además de otras opciones.
• Papelera – Enviará una Entrada a la Papelera. Una vez que se vacía la Papelera,
la página es eliminada.
• Ver – Muestra la Entrada. Si la entrada aún no ha sido publicada, dirá Vista
previa
Después de hacer clic en el menú Páginas se desplegará la lista de Páginas que contiene la web. Entre
la información mostrada está el título de la Página, el Autor, el Número de Comentarios y la Fecha,
tanto de la página Publicada, como Programada, así como la última fecha de modificación de los
borradores. La pantalla de Páginas se verá similar a la siguiente imagen.
Diseño web HTML5 + CSS
Páginas

6. O4 Diseño web HTML5 + CSS
En la parte superior de la página podrá ver cuántas Páginas en total tiene el sitio, cuántas han
sido publicadas por usted, o están Publicadas, en Borrador o en la Papelera.https://developer.mozilla.org/es/docs/Web/HTML/Element/p

7. O5Diseño web HTML5 + CSS
En la parte superior de la página podrá ver cuántas Páginas en total tiene el sitio, cuántas han
sido publicadas por usted, o están Publicadas, en Borrador o en la Papelera.
Al posar el puntero del ratón sobre cada fila, aparecerán algunos enlaces debajo del título de la
Página.
• Editar – Le permitirá modificar la Página. Es lo mismo que hacer clic sobre el
título de la Página
Edición rápida – Le permite editar información básica de la Página, como el
Título, Plug, Fecha, además de otras opciones.
• Papelera – Enviará una Página a la Papelera. Una vez que se vacía la Papelera,
la página es eliminada.
• Ver – Muestra la Página. Si la página aún no ha sido publicada, dirá Vista
previa
Una vez creada una entrada o una página nueva tendremos que editar el contenido,
para ello desde Wordpress 5.0 se implementa un nuevo llamado Gutenberg.
Editor de bloques

8. Diseño web HTML5 + CSSO6
Si no ves el panel de configuración a la derecha, hacé clic en el icono del engranaje,
situado junto a Publicar.
Funciona como el conjunto de bloques que cimientan tu sitio web. Podés añadir
contenido a la página insertando varios bloques. Para ello, debés hacer clic en el
icono de inserción de bloques +, que se encuentra en varios lugares del editor.

9. O7
Hay muchas formas de añadir un bloque y elegir el tipo que necesitas.
- Hacé clic en +, a la izquierda de cualquier bloque vacío.
- Hacé clic en +, en la parte superior izquierda del editor.
- En el bloque elegido, hacé clic en la tecla Entrar para crear un nuevo
bloque debajo.
- Hacé clic en +, en la parte superior central de un bloque existente, para
añadir un bloque encima de él.
- Hacé clic en los tres puntos que hay justo encima de un bloque elegido
y elige si quieres añadir un bloque encima o debajo del actual.https://developer.mozilla.org/es/docs/Web/HTML/Element/meta
Diseño web HTML5 + CSShttps://fonts.google.com/

10. O8 Diseño web HTML5 + CSS
Hay todo tipo de bloques que se pueden añadir: párrafos, imágenes, galerías,
columnas, tablas y muchos más.

11. Diseño web HTML5 + CSS O9

12. Diseño web HTML5 + CSS10
Entre los bloques de uso frecuente se encuentran los siguientes:
Bloque de párrafo: el bloque por defecto que Podés utilizar para añadir texto normal a una
entrada o página.
Bloque de imagen: te permite añadir imágenes individuales dentro de la entrada o página.
Bloque de fondo: te permite añadir texto en la parte superior de una imagen.
Bloque de columnas: te permite colocar unos bloques al lado de otros fácilmente.
Bloque de encabezado: te permite añadir el texto del encabezado dentro de la entrada o página.
Al hacer clic en el icono de inserción de bloques +, podés buscar diferentes tipos de bloques o
desplazarte hacia abajo y ampliar las listas para ver qué hay disponible. Una vez añadido un
bloque, podés reordenarlos mediante las flechas de la izquierda y derecha o haciendo clic y
arrastrando. Si agregas un bloque y lo elegís, verás que hay más ajustes del bloque en la parte
derecha del editor. Cada bloque tiene su propia configuración que podés ajustar. Cambia a la
pestaña “Documento” en la parte superior para volver a la configuración de la página.https://developer.mozilla.org/es/docs/Web/HTML/Elemento/h1 https://developer.mozilla.org/es/docs/Web/HTML/Element/Heading_Elements

13. 11Diseño web HTML5 + CSS

14. 12
Cómo eliminar un bloque
Para eliminar un bloque, selecciónalo, hacé clic en el menú de tres puntos y
elige Quitar bloque.
Cuando estés satisfecho con el aspecto de tu página, hacé clic en Publicar en la
esquina superior derecha.
El siguiente video da un vistazo al manejo de bloques.https://developer.mozilla.org/es/docs/Web/HTML/Element/a
Diseño web HTML5 + CSS
https://www.youtube.com/watch?v=IKwGmqLM8l8&t=8s

15. 13
Menús
Diseño web HTML5 + CSS
Los menús del sitio son la lista de enlaces que suelen aparecer como el menú de navegación
principal de tu sitio. La ubicación del menú puede variar en función del tema que tengas; algunos
de ellos ofrecen menús adicionales como menús de enlaces de redes sociales.

16. 14
En el siguiente video se muestran los pasos para crear un menú simple
Además de las páginas que ya has publicado, puedes añadir varios tipos de
elementos del menú a tu menú personalizado:
Enlace personalizado: una URL personalizada que enlaza a otro sitio.
Páginas: un enlace a otra página de tu sitio.
Entradas: una entrada de blog de tu sitio.
Testimonios: un enlace a los testimonios.
Proyectos: un enlace a una página de tus proyectos de portafolio.
Categorías: un feed de entradas de blog de una determinada categoría.
Etiquetas: un feed de entradas de blog de una determinada etiqueta.
Tipos de proyectos: un enlace a un tipo específico de proyecto de
portafolio.
Etiquetas del proyecto: un enlace a una etiqueta específica de
proyecto de portafolio.
https://www.youtube.com/watch?v=xJZsg2KIZ7s
Diseño web HTML5 + CSS