Clase 3 Introducción a Wordpress pagina web.pdf

Breve descripción para una pagina web en wordpress

2. UNIDAD 3
Diseño web HTML5 + CSS
Introducción a Wordpress

3. O1Diseño web HTML5 + CSS
¿Qué es Wordpress?
¿Por qué utilizar WordPress?
Video
https://www.youtube.com/watch?v=T18XD1yAfWU
Es un gestor de contenidos (CMS Content Manager System) con el que podremos llegar a crear
cualquier sitio Web. WordPress nació en el año 2004 y está desarrollado en PHP, es gratuito y libre.
Su creador es Matt Mullenweg, y este CMS es una modificación del desaparecido cafelog.
Es gratuito, es seguro, cuenta con una gran comunidad de desarrolladores que crea
funcionalidades todos los días, hay soluciones para casi todo. En sus años de historia ha tenido una
gran evolución hacia un gestor de contenidos flexible, su uso es muy fácil y su curva de aprendizaje
muy rápida, además cuentas con miles de diseños gratuitos para tener tu proyecto Web con las
últimas tendencias de diseño.
1Crear un sitio en WordPress

4. O2 Diseño web HTML5 + CSS
Blogs
¿Qué puedo hacer con WordPress?
Es tan completo, que podemos hacer cualquier cosa. Algunos proyectos que se pueden crear con
este gestor de contenidos son:
Webs corporativas
Periódicos o revistas
Foros
Tiendas online
Portfolio
Redes sociales
Webs de suscripción
Web de subastas
Wikis

5. O3
Una página creada con WordPress es una página amiga de los buscadores, por lo que posicionar
nuestra web en las primeras posiciones no será una tarea difícil. Creando buen contenido para
nuestra Web y con la ayuda de alguno de los plugins que haydisponible para el SEO, será muy fácil. En
pocas semanas verás grandes resultados.
Cuando hablamos de WordPress.com, estamos hablando de un servicio "gratuito" donde tendremos
nuestra web/blog solo con registrarse y elegir un nombre. Sólo podremos elegir entre 70 diseños,
escribir entradas, crear páginas y pocas funcionalidades más... Además, para poder utilizar algunas
opciones tendremos que pagar por ello.
WordPress.org es el gestor de contenidos, para poder instalarlo necesitaremos un servidor que
maneje PHP y MySQL.
1. Diseña la estructura y contenidos del sitio
2. Elige dominio y hosting o crea una cuenta gratuita en WordPress.com.
3. Selecciona e instala un tema de WordPress.
4. Configura todas las opciones de tu tema WordPress.
5. Carga todos los contenidos.
Diseño web HTML5 + CSS
Fácil de optimizar para hacer un buen SEO
WordPress.org y WordPress.com, las diferencias
Pasos para crear una página en WordPresshttps://developer.mozilla.org/es/docs/Web/HTML/Element/p

6. O4
1. Diseña la estructura y contenidos del sitio
Diseño web HTML5 + CSS
Un sitio web es una herramienta de comunicación, por ello debemos tener en claro
qué es lo que queremos transmitir, cómo lo haremos y los recursos necesarios para
hacerlo correctamente.
a) Definir objetivos
Al empezar definiendo el fin y los objetivos de nuestro sitio web nos basamos en el
principio de que todas las cosas se crean dos veces: siempre primero hay una
creación mental y luego una creación real o física (aunque sea digital).
Al trabajar con las ideas que tenemos en nuestra mente de una manera organizada e
intencional podremos llegar a una imagen clara de lo que queremos construir o crear.
Si nuestra página es de un Club deportivo debemos mostrar las instalaciones, qué
deportes se practican, si las actividades son con profesor/a, dónde está ubicado, etc.
Nuestro objetivo, para este caso, será lograr motivar al visitante a que se asocie y
pueda disfrutar de todas las actividades propuestas.
b) Determinar el público objetivo
Este paso es muy importante para determinar las personas a quienes querés
transmitir tu mensaje. Conocer con el mayor detalle posible a estas personas, te
permitirá comunicarlo de manera más efectiva y esto es así porque una
comunicación sólo es efectiva cuando la parte receptora entiende el mensaje tal
como quisiste que se entienda.

7. O5Diseño web HTML5 + CSS
Diferentes tipos de selectores
Analizando factores como edad, género, intereses, etc. de tu público objetivo tendrás
una mejor idea del contenido que podés crear.
c) Crear la estructura
La estructura es muy importante especialmente para diagramar toda la información
en forma clara y previsible para el usuario.
Los elementos de una correcta estructura son:
Cabecera o header: normalmente se coloca en la parte superior de la página.
Logo: es la marca o título que tiene la página
Menú: es el elemento principal de navegación entre los apartados. Lo
podemos encontrar también en el pie de página.
Cuerpo de la página o body: donde introducimos los contenidos principales.
Pie de página o footer: cierre, copyright, créditos…https://developer.mozilla.org/es/docs/Web/HTML/Element/strong

8. Diseño web HTML5 + CSSO6
La estructura es un elemento dinámico, no tenemos por qué seguir siempre la misma.
Cuanto más diferente sea, más creativa será. Aunque hay ciertos límites. Cuanto más cambiemos el orden de
estos elementos, más compleja se volverá la navegación y la comprensión de esta página, lo que reducirá
irremediablemente el número de usuarios capaces de navegar por esa página. Esto no significa que siempre
tengamos que hacer todas las estructuras iguales, solo que debemos tener en cuenta nuestro público
objetivo antes de diseñar la página.
Luego habrá que definir el mapa de navegación que generalmente son los ítems que se utilizan el en menú
Un mapa de navegación común cuenta como mínimo con los siguientes elementos que podremos organizar
en varias paginas o en una sola.

9. O7Diseño web HTML5 + CSS
d) Crear el contenido
Esta parte es la más difícil para la mayoría. Crear el contenido no significa sólo el
texto, sino también las imágenes que vas a usar, iconos, logo, etc.
Para el texto se puede crear un documento en Word, Notepad o cualquier editor de
texto por cada una de las páginas que tendrá el sitio.
Las imágenes tienen que tener buena resolución y en caso de no ser propias es
importante tener en cuenta los derechos de autor.
Hay muchas páginas en internet con imágenes de calidad gratuitas.

10. O8 Diseño web HTML5 + CSS
https://www.pexels.com/es-es/
https://pixabay.com/es/
https://latincloud.com/
https://www.hostinger.com.ar/
https://donweb.com/es-int/
2. Elige dominio y hosting o crea una cuenta gratuita en WordPress.com.
https://www.freepik.com/
Hoy en día, la mayoría de los hostings pagos incluyen WordPress por lo que no hace
falta saber de instalaciones ni aspectos técnicos tediosos. En Argentina estas son
algunas de las empresas de hosting:
Para el desarrollo del curso utilizaremos el servicio gratuito de WordPress.com por lo
que tendremos que crear una cuenta siguiendo las instrucciones del siguiente video
Video Usuario Workpress.mp4

11. Diseño web HTML5 + CSS O9
Selecciona e instala un tema de WordPress.
¿Qué es un tema?
Un tema es el aspecto general que tiene tu sitio. Los temas definen el lugar de tu sitio en el que se
muestran los menús y widgets, además de la combinación de colores y el diseño por defecto de las
páginas y entradas.
Existen temas gratuitos y otros pagos

12. Diseño web HTML5 + CSS10
Para ello utilizaremos el Personalizador. Desde esta sección puedes cambiar el título y la
descripción corta del sitio, añadir widgets en la barra lateral o el pie de página, crear menús
personalizados, cambiar la configuración de la página de inicio y mucho más.
4. Configura todas las opciones de tu tema WordPress.

13. 11
WordPress divide los contenidos en entradas y páginas
¿Qué diferencia hay entre una entrada y una página?
Las páginas se usan más para el contenido que no cambia con mucha frecuencia. Entre
los ejemplos de páginas estaría una página de inicio, una página Acerca de, una página de
contacto e incluso una página en la que se enumeren productos o servicios.
Las entradas o publicaciones del blog se parecen más bien a los artículos de noticias.
Entre los ejemplos de entradas estarían las actualizaciones sobre el sector, un diario
personal, críticas sobre películas y otras redacciones similares. Todas las páginas creadas
en WordPress.com tienen la posibilidad de añadir un blog, pero no es necesario que lo
uses.
Para todo ello se utiliza el Editor de Bloques que analizaremos más adelante
5. Carga todos los contenidos.
Diseño web HTML5 + CSS

14. 12