Haz tu web con un CMS - (Módulo 2 del curso de HTML5)

Haz tu web con un CMS2

PHP CSS

2Por qué necesitas saber usar un CMS.

Para qué sirve un CMS.

Los principales CMS.

Un CMS es un extraordinario Restaurante.

¿Cómo funciona un CMS?

El editor de texto: introducir contenidos.

Resumen y ejercicios prácticos.

1

2

3

4

5

6

7

12

¿Por qué necesitas saber usar un CMS?

12

La forma más profesional y económica de tener tu propia web

• La forma profesional y, también, más económica de hacer un sitio web es a través de un CMS.

• A un ciudadano del siglo XXI le es totalmente necesario saberlo usar.

• Para tener el control y poder actualizar de forma constante el contenido de su espacio web.

12

Tres niveles de uso

A. Usuario

Te permite publicar y editar el contenido de tu web o blog ya instalado y personalizado por un profesional.

12

Tres niveles de uso

A. Usuario


B. Profesional

Instalación y personalización del espacio web.

12

Tres niveles de uso

A. Usuario


B. Profesional

Instalación y personalización del espacio web.

C. Desarrollador

Las comunidades de algunos CMS están abiertas a la aportación de programadores.

12

También puedes instalarlo tú

Si eres espabilado y te gusta esto de estar liado con un ordenador conectado a internet, un CMS te permite:

1 Instalar tú solo tu propia web,

12




2 Sin coste económico,

12




2 Sin coste económico,

3 Poniendo empeño y un montón de horas.

2

2 ¿Para qué sirve un CMS?

2

2 Un CMS es una maravilla, de verdad

• Te permite tener tu propia web o tu blog, de forma profesional y a bajo coste.

2



• Los dos más conocidos y usados son WordPress y Joomla.

12




• Tú mismo puedes gestionar el contenido.

12





• Según tus conocimientos, podrás modificar el diseño.

2





• Según tus conocimientos, podrás modificar el diseño.

• Trabajarás de forma rápida, económica, con gran calidad.

2

2 Sistema de Gestión de Contenidos

CMS son las iniciales de

Content Manager Systemque significa Sistema de Gestión de Contenidos.

Pero esta definición no parece nada clara...

2

2 Un CMS es una aplicación gratuita

• Un CMS es un programa gratuito que sirve para crear sitios web.

12



• Se puede descargar sin coste desde la web de la empresa o institución desarrolladora.

12




• Una vez creado, permite un mantenimiento fácil e intuitivo.

2




• Una vez creado, permite un mantenimiento fácil e intuitivo.

• Está desarrollado con código libre (open source).

2

2 ¿Sitio web?

A menudo usamos la expresión página web para nombrar lo que en realidad es un sitio web.

• Una página web es eso, sólo una página.

• Un conjunto de páginas integradas forman un sitio web.

• Es un pequeño ecosistema en el mundo virtual...

También le podemos llamar espacio web.

2

2 Sí, sitio web.

Elemento Conjunto

2

2 Sí, sitio web

Elemento Conjunto

Página de un libro Libro

2

2 Sí, sitio web

Elemento Conjunto


Artículo de prensa Periódico

2

2 Sí, sitio web

Elemento Conjunto


Artículo de prensa Periódico

Página web Sitio web

2

2 El CMS estructura varias páginas web

Con un CMS vamos creando páginas web (artículos, capítulos, notícias, productos...) que están integradas dentro de una estructura mayor, el sitio web.

sitio web

2



sitio webpáginaweb

páginaweb

páginaweb

2



sitio webpáginaweb

páginaweb

páginaweb

páginaweb

páginaweb

2



sitio webpáginaweb

páginaweb

páginaweb

páginaweb

páginawebpágina

web

páginaweb

2

2 Un sitio web = un nombre

Cada sitio web tiene su nombre de dominio.

• google.com, crosimasso.net, pepitodelospalotes.es,

De la misma forma que cada persona tiene su nombre, o cada móvil tiene su número de teléfono asignado.

Este nombre hay que comprarlo a una entidad registradora.

El precio varía según la extensión. El .COM a día de hoy, cuesta unos 12 $/año.

2

2 Un sitio web = un hosting

Cada sitio web requiere, asimismo de un hosting.

Un hosting es un espacio en la nube, contratado por ti a través de una empresa de hosting (valga la redundancia :-)

El hosting incluye:

• Tu web

• Tu propio email (tipo [email protected])

• Otros servicios web necesarios como: la Base de datos, ftp, etc.

2

3 Los principales CMS

12

3 Cuales son

WordPress

12

3 Cuales son

WordPress Joomla

12

3 Cuales son

WordPress Joomla Drupal

12

3 Cuales son

WordPress Joomla Drupal

Prestashop

12

3 Cuales son

WordPress

Magento

Joomla Drupal

Prestashop

2

3 Cuales son

WordPress

Magento

Joomla

Moodle

Drupal

Prestashop

12

3 ¿Qué tienen en común?

• Todos son aplicaciones web y son gratuitos.

12



• Vienen con un diseño preestablecido, muy simple.

12




• Las plantillas para el diseño son de pago (bajo coste).

12





• Aunque hay diferencias, son fáciles de usar.

12






• El editor de texto es más bien normalillo.

12







• Pueden ser ampliables con extensiones o plugins.

2







• Pueden ser ampliables con extensiones o plugins.

• Programación open source basada en los mismos lenguajes: PHP, CSS, Base de Datos MySQL y HTML5

12

3 WordPress

Lo bueno

• Es el más usado de todo el mundo.

12

3 WordPress

Lo bueno


• Ideal para empezar con un blog simple.

12

3 WordPress

Lo bueno



• Es el más fácil de usar.

12

3 WordPress

Lo bueno




Lo malo

• No preparado de serie para multilenguaje.

2

3 WordPress

Lo bueno




Lo malo

• No preparado de serie para multilenguaje.

• No dispone de diferentes privilegios para diferentes niveles de administrador. No intrega foros.

12

3 Joomla

Lo bueno

• Es el más potente y completo de todo el mundo.

12

3 Joomla

Lo bueno


• Ideal para sitios web que necesitan un blog integrado en una web más compleja.

12

3 Joomla

Lo bueno



• Preparado para multilenguaje, foros y diferentes privilegios para administradores/colaboradores.

2

3 Joomla

Lo bueno



• Preparado para multilenguaje, foros y diferentes privilegios para administradores/colaboradores.

Lo malo

• Para aprender a usarlo hay que insistir.

12

Tiendas online

Prestashop

• Ideal si sólo se desea una tienda online, independiente, sin integrarla en una web o blog.

3

12

Tiendas online

Prestashop


Magento

• Es muy bueno también para tienda online, pero tampoco se integra en una web o blog.

3

2

Tiendas online

Prestashop


Magento

• Es muy bueno también para tienda online, pero tampoco se integra en una web o blog.

Con un complemento gratuito WordPress y Joomla, son también una tienda online, integrada a la web.

3

12

Otros

Drupal

• Es un excelente CMS al estilo de WordPress y Joomla.

• Su dificultad le hace más apropiado para desarrolladores web.

3

2

Otros

Drupal

• Es un excelente CMS al estilo de WordPress y Joomla.

• Su dificultad le hace más apropiado para desarrolladores web.

Moodle

• Es la estrella de los CMS para gestionar cursos online.

• Ayuda a los educadores a crear comunidades de aprendizaje online.

3

2

Breve comparativa

Los niveles de uso han ido variando a lo largo del tiempo.

Con Google Trends podemos saber la popularidad de los CMS en el mundo.

WordPress

Joomla

Drupal

Prestashop

Puedes consultar la gráfica online en: Comparativa: los 4 principales CMS en el mundo. Es dinámica; puedes variar los términos de búsqueda y también los países y regiones del mundo que te interese conocer.

Google Trends es la herramienta de tendencias de búsqueda de Google. Las gráficas de Google Trends representan la frecuencia con que se realiza la búsqueda de un término particular en varias regiones del mundo y en varios idiomas. El eje horizontal de la gráfica representa el tiempo (desde 2004), y el eje vertical representa la frecuencia con la que se ha buscado el término globalmente.

3

http://www.google.es/trends/explore?hl=es#q=WordPress%2C%20Joomla%2C%20Drupal%2C%20Prestashop&cmpt=q&tz=Etc%2FGMT-1

2

4 Un CMS es un extraordinario Restaurante

12

CMS: un restaurante de calidad

Permíteme una licencia.

A partir de ahora CMS significará, para nosotros:

Comida Muy Sana

Es más fácil de recordar.

La estructura, herramientas y objetivos de un CMS son muy parecidos a los de un buen restaurante.

4

2

4

CMS

Comida Muy Sana

2

¿Qué tiene un buen restaurante?

Un restaurante está compuesto por:

1. La gerencia

• El propietario.

• El administrador.

4

Gerencia

CMS

2

4 ¿Qué tiene un buen restaurante?

2. La cocina

• El chef y los cocineros.

• El emplatador, que prepara y decora los platos.

• La despensa con todos los ingredientes. Gerencia

Cocina

CMS

2

4 ¿Qué tiene un buen restaurante?

3. El comedor

• Varios camareros que sirven las mesas.

• Los platos servidos.

• Las mesas.

• Los clientes o comensales.Gerencia

Cocina Comedor

CMS

2

4 ¿Qué tiene el restaurante CMS?

El Restaurante CMS está compuesto por:

1. La gerencia

• El jefe eres tú!

• El administrador tiene varios nombres, dependiendo del CMS en concreto que hayas elegido para tu web.

Gerencia

CMS

2

4 Nombre del administrador

• En Joomla le llaman administrator

• En WordPress se le llama wp-admin

• En Prestashop tiene un nombre variable

• En Drupal, se le llama user

Hay otros...Gerencia

CMS

2

La cocina es el famoso servidor

La cocina del Restaurante CMS está en un lugar muy remoto llamado servidor.

Es ese lugar etéreo que has oído hablar tantas veces y que te causa (dime la verdad) una cierta angustia.

Pero, no. No pasa nada.

El servidor, a partir de ahora, es, simplemente, la cocina del Restaurante CMS.

4

Gerencia

Servidor

CMS

2

4 ¿Quien es el chef?

¿El chef se llama Ferran Adrià? No, pero casi :-)

El chef se llama:

Pepe Hace Platos

• Abreviado se escribe PHP.

• Éste es el crack del Restaurante CMS, el maestro que crea las recetas y combina los sabores con genialidad.

PHP

Gerencia

Cocina

CMS

2

4 Y ¿quien diseña los platos?

• El emplatador, que monta los platos con diseño, se llama:

Con Salsa y Salero• Abreviado se escribe CSS.

• Éste es el artista, el que cuida la presentación de cada plato, con diseño. ¡Olé!

CSS

Gerencia

Cocina

CMS

12

4 La despensa

• La despensa es la:

Gerencia

Cocina

CMS

12

4 La despensa


Base de Datos

Gerencia

Cocina

CMS

12

4 La despensa


Base de Datos• donde se encuentran almacenados

todos los ingredientes de la web

Gerencia

Cocina

CMS

2

4

PHP CSS

La despensa


Base de Datos• donde se encuentran almacenados

todos los ingredientes de la web

• En la despensa está todo bien ordenado. Hay los textos, las imágenes, los links, etc.

Gerencia

Cocina

CMS

12

El comedor es la casa del usuario

El comedor es móvil. Está allí donde esté el usuario.

En su casa. En la oficina.

En el Metro.

Allí donde esté el usuario, allí estará el comedor. Para que pueda saborear el contenido HTML de tu web.

Pero, ¿en el lavabo, se puede usar el móvil?

4

Gerencia

Servidor Usuario

CMS

2

4 Camareros = Navegadores

• Los camareros son los navegadores:

Gerencia

Servidor Usuario

CMS

12



• Crome

Gerencia

Servidor Usuario

CMS

12



• Crome, Firefox

Gerencia

Servidor Usuario

CMS

12



• Crome, Firefox, Safari

Gerencia

Servidor Usuario

CMS

2



• Crome, Firefox, Safari, Explorer...

• Estos son los responsables de hacer llegar los platos a los clientes hambrientos.

12

4 Platos = Páginas HTML

• Los platos servidos son las páginas HTML.

Gerencia

Servidor Usuario

CMS

12



Gerencia

Servidor Usuario

CMS

12



Gerencia

Servidor Usuario

CMS

2



Gerencia

Servidor Usuario

CMS

12

Mesas = Dispositivos

• Las mesas son las pantallas de los ordenadores.

4Gerencia

Servidor Usuario

CMS

12



4Gerencia

Servidor Usuario

CMS

12



4Gerencia

Servidor Usuario

CMS

2



4Gerencia

Servidor Usuario

CMS

2

4 Clientes = Tu audiencia

• Los clientes son los usuarios, tu audiencia, que además de pagarte a ti, hablan bien de ti a tus futuros clientes :-)

Gerencia

Servidor Usuario

CMS

12



Gerencia

Servidor Usuario

CMS

12



Gerencia

Servidor Usuario

CMS

12



Gerencia

Servidor Usuario

CMS

12



Gerencia

Servidor Usuario

CMS

12



Gerencia

Servidor Usuario

CMS

12



Gerencia

Servidor Usuario

CMS

2

4 Una metáfora es una metáfora

Está claro que toda metáfora:

• No es científicamente exacta,

• Pero es muy útil para explicar conceptos abstractos.

• Explica la esencia de algo difícil de explicar.

2

5 ¿Cómo funciona un CMS?

2

5 Restaurante tipo pack

Muy fácil.

Un CMS, una vez instalado, se comporta como un restaurante, tipo pack, todo incluido.

Tú, como propietario, a través del administrador, introducirás todos los ingredientes (es decir: el contenido de tu web).

Gerencia

Servidor Usuario

CMS

12

5 Tú pones los contenidos

No hay que saber nada de cocina, ni de programación.

Contenidos

12


Tú vigilas la calidad de la chicha que pondrás, las verduras tienen que ser frescas, la fruta de la temporada...

No se vale copiar.

Contenidos

2


Tú vigilas la calidad de la chicha que pondrás, las verduras tienen que ser frescas, la fruta de la temporada...

No se vale copiar. El mensaje tiene que ser claro.

Contenidos

12

5 Todo funciona coordinado

• De la despensa...

12


• De la despensa va al estratega PHP.

PHP

12



• CSS pone los toques de diseño...

CSSPHP

2



• CSS pone los toques de diseño

• Y lo entrega a los navegadores.

CSSPHP

2

5 Tu web es el resultado

Lo importante es que, al final, los camareros servirán comida exquisita, muy bien presentada, a tus clientes.

2

5 Tu web es el resultado

Y los clientes (tus clientes) pagarán la comida que hayan comido.

Te pagarán a ti, que eres el propietario.

500€

2

6 El editor de texto: introducir contenidos.

2

6 Introducir contenidos

Tú trabajo será introducir los contenidos. ¿Cómo?

1 Usando el administrador

2 Introduciendo texto con HTML básico en el editor de texto del CMS.

3 Si quieres ir más allá en la personalización, aprende a ser emplatador, CSS. ¡Su trabajo es espectacular! Es el indiscutible artista responsable por el atractivo de todas las páginas web del mundo.

2

6 El editor de texto

Nos pararemos a entender el funcionamiento del

Editor de textoporque es básico para el mantenimiento de una web.

2

6 Cada CMS, su editor

Si has trabajado alguna vez con algún CMS, ya sabes que los artículos y módulos (en Joomla) o las entradas y páginas (en WordPress) se escriben (o se pegan desde Word) en un:

Editor de texto• Mac tiene su propio editor de texto: TextEdit y Windows

también, el Bloc de Notas.

• El editor de texto más popular es el Word.

12

6 La puerta de la despensa

En el símil del Restaurante CMS, hemos visto que:

• la Base de Datos es como una despensa en la que guardamos todos los ingredientes.

2


En el símil del Restaurante CMS, hemos visto que:

• la Base de Datos es como una despensa en la que guardamos todos los ingredientes.

El editor sería algo así como

la puerta de la despensa

12


Es como un filtro que organiza todos tus contenidos:

12



los textos

12



los textos, las imágenes

2



los textos, las imágenes, los links...

2

6 ¡Mucho cuidado!

Si no introducimos los ingredientes de manera correcta:

• PHP, el chef del CMS, llamará los ingredientes y aplicará sus reglas pero, sin orden.

• CSS se hará un lío padre y montará unos platos sin diseño

• Y los navegadores servirán comida HTML sin sabor y con una presentación inaceptable.

¡Y esto, sin exagerar, es lo que ocurre en muchas webs!

2

6 Los editores de los CMS son malos

Como ya te anticipé, los editores de texto de WordPress y de Joomla son más bien malos. Son tipo Bloc de notas. Si queremos procesar texto como si fuera un Word, te ayudan, pero poco.

Word aún sería peor porque añade códigos raros que te harán estirarte de los cabellos, muy a menudo.

¿Cómo podemos resolver este grave problema?

2

6 Nuestro aliado: Sublime Text

Ya hablamos de él en el Módulo 1 de este curso.

Es nuestro aliado. Él nos ayudará a introducir los textos y todo el contenido en la despensa, sin riesgos de descalabro.

Miremos cómo.

2

Resumen y ejercicios prácticos

7

2

7 Resumen del módulo

1. Un CMS es la forma profesional de hacer una web.

2. Tú, como usuario, puedes mantener tu web.

3. Los principales CMS: WordPress y Joomla.

4. Un CMS es parecido a un buen Restaurante.

5. Cómo funciona el Restaurante CMS

6. El editor de texto: puerta de entrada de los contenidos.

7. Sublime Text, nuestro aliado.

2

7 ¿Quien tiene que escribir?

¿Te acuerdas?

TúEso. Tú tienes la función de administrar el Restaurante.

Tú eres el que sabe lo que hay qué hablar y cómo.

Recuerda: la web es tuya. Los clientes, son los que, si lo has hecho bien, te pagarán :-)

2

7 Algunos ejemplos

En este video podrás ver el Módulo 2 más desarrollado.

Al final del video, además, hay ejemplos prácticos de:

• Como puede salvarte Sublime Text.

• Introducir textos en el editor de WordPress.

• Introducir textos en el editor de Joomla.

http://crosimasso.net/html5/2-necesitas-un-cms.php#video

Cros i Massó

Internet

Haz tu web con un CMS - (Módulo 2 del curso de HTML5)