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

2
PorquénecesitassaberusarunCMS.
ParaquésirveunCMS.
LosprincipalesCMS.
UnCMS esunextraordinarioRestaurante.
¿CómofuncionaunCMS?
Eleditordetexto:introducircontenidos.
Resumenyejerciciosprácticos.
1
2
3
4
5
6
7

1
2
¿Porqué
necesitas
saberusarun
CMS?

1
2
Laformamásprofesionalyeconómica
detenertupropiaweb
• 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.

1
2
Tresnivelesdeuso
A.Usuario
Te permite publicar y editar el contenido de tu web o
blog ya instalado y personalizado por un profesional.

1
2
Tresnivelesdeuso
A.Usuario
B.Profesional
Instalación y personalización del espacio web.

1
2
Tresnivelesdeuso
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.

1
2
Tambiénpuedesinstalarlotú
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,

1
2
2 Sin coste económico,

1
2
2 Sin coste económico,
3 Poniendo empeño y un montón de horas.

2
2 UnCMSesunamaravilla,deverdad
• 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.

1
2
Joomla.
• Tú mismo puedes gestionar el contenido.

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

2
Joomla.
• Según tus conocimientos, podrás modificar el diseño.
• Trabajarás de forma rápida, económica, con gran
calidad.

2
2 SistemadeGestióndeContenidos
CMS son las iniciales de
ContentManagerSystem
que significa Sistema de Gestión de Contenidos.
Pero esta definición no parece nada clara...

2
2 UnCMSesunaaplicacióngratuita
• Un CMS es un programa gratuito que sirve para crear
sitios web.

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

1
2
sitios web.
• Una vez creado, permite un mantenimiento fácil e
intuitivo.

2
sitios web.
• Una vez creado, permite un mantenimiento fácil e
intuitivo.
• Está desarrollado con código libre (open source).

2
2 ¿Sitioweb?
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í,sitioweb.
Elemento Conjunto

2
2 Sí,sitioweb
Elemento Conjunto
Páginadeunlibro Libro

2
2 Sí,sitioweb
Elemento Conjunto
Artículodeprensa Periódico

2
2 Sí,sitioweb
Elemento Conjunto
Artículodeprensa Periódico
Páginaweb Sitioweb

2
2 ElCMSestructuravariaspáginasweb
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 web
página
web
página
web
página
web

2
sitio web
página
web
página
web
página
web
página
web
página
web

2
sitio web
página
web
página
web
página
web
página
web
página
webpágina
web
página
web

2
2 Unsitioweb=unnombre
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 Unsitioweb=unhosting
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 yo@midominio.com)
• Otros servicios web necesarios como: la Base de datos,
ftp, etc.

1
2
3 Cualesson
WordPress Joomla

1
2
3 Cualesson
WordPress Joomla Drupal

1
2
3 Cualesson
WordPress Joomla Drupal
Prestashop

1
2
3 Cualesson
WordPress
Magento
Joomla Drupal
Prestashop

2
3 Cualesson
WordPress
Magento
Joomla
Moodle
Drupal
Prestashop

1
2
3 ¿Quétienenencomún?
• Todos son aplicaciones web y son gratuitos.

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

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

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

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

1
2
• 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

1
2
3 WordPress
Lobueno
• Es el más usado de todo el mundo.

1
2
3 WordPress
Lobueno
• Ideal para empezar con un blog simple.

1
2
3 WordPress
Lobueno
• Es el más fácil de usar.

1
2
3 WordPress
Lobueno
Lomalo
• No preparado de serie para multilenguaje.

2
3 WordPress
Lobueno
Lomalo
• No preparado de serie para multilenguaje.
• No dispone de diferentes privilegios para diferentes
niveles de administrador. No intrega foros.

1
2
3 Joomla
Lobueno
• Es el más potente y completo de todo el mundo.

1
2
3 Joomla
Lobueno
• Ideal para sitios web que necesitan un blog integrado en
una web más compleja.

1
2
3 Joomla
Lobueno
• Preparado para multilenguaje, foros y diferentes
privilegios para administradores/colaboradores.

2
3 Joomla
Lobueno
• Preparado para multilenguaje, foros y diferentes
privilegios para administradores/colaboradores.
Lomalo
• Para aprender a usarlo hay que insistir.

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

1
2
Tiendasonline
Prestashop
Magento
• Es muy bueno también para tienda online, pero
tampoco se integra en una web o blog.
3

2
Tiendasonline
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

1
2
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
Brevecomparativa
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

2
4
UnCMSesun
extraordinario
Restaurante

1
2
CMS:unrestaurantedecalidad
Permíteme una licencia.
A partir de ahora CMS significará, para nosotros:
ComidaMuySana
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
¿Quétieneunbuenrestaurante?
Un restaurante está compuesto por:
1.Lagerencia
• El propietario.
• El administrador.
4
Gerencia
CMS

2
4 ¿Quétieneunbuenrestaurante?
2.Lacocina
• 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étieneunbuenrestaurante?
3.Elcomedor
• Varios camareros que sirven las mesas.
• Los platos servidos.
• Las mesas.
• Los clientes o comensales.
Gerencia
Cocina Comedor
CMS

2
4 ¿QuétieneelrestauranteCMS?
El Restaurante CMS está compuesto por:
1.Lagerencia
• El jefe eres tú!
• El administrador tiene varios nombres,
dependiendo del CMS en concreto que
hayas elegido para tu web.
Gerencia
CMS

2
4 Nombredeladministrador
• 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
Lacocinaeselfamososervidor
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 ¿Quieneselchef?
¿El chef se llama Ferran Adrià? No, pero casi :-)
El chef se llama:
PepeHacePlatos
• 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¿quiendiseñalosplatos?
• El emplatador, que monta los platos con
diseño, se llama:
ConSalsaySalero
• 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

1
2
4 Ladespensa
• La despensa es la:
Gerencia
Cocina
CMS

1
2
4 Ladespensa
BasedeDatos
Gerencia
Cocina
CMS

1
2
4 Ladespensa
BasedeDatos
• donde se encuentran almacenados
todos los ingredientes de la web
Gerencia
Cocina
CMS

2
4
PHP CSS
Ladespensa
BasedeDatos
• 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

1
2
Elcomedoreslacasadelusuario
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

1
2
• Crome
Gerencia
Servidor Usuario
CMS

1
2
• Crome, Firefox
Gerencia
Servidor Usuario
CMS

1
2
• 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.

1
2
4 Platos=PáginasHTML
• Los platos servidos son las páginas HTML.
Gerencia
Servidor Usuario
CMS

2
4 Platos=PáginasHTML
• Los platos servidos son las páginas HTML.
Gerencia
Servidor Usuario
CMS

1
2
Mesas=Dispositivos
• Las mesas son las pantallas de los ordenadores.
4
Gerencia
Servidor Usuario
CMS

2
Mesas=Dispositivos
• Las mesas son las pantallas de los ordenadores.
4
Gerencia
Servidor Usuario
CMS

2
4 Clientes=Tuaudiencia
• 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

1
2
4 Clientes=Tuaudiencia
• 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

2
4 Unametáforaesunametá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 Restaurantetipopack
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

1
2
5 Túponesloscontenidos
No hay que saber nada de cocina, ni de programación.
Contenidos

1
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.
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

1
2
5 Todofuncionacoordinado
• De la despensa...

1
2
• De la despensa va al estratega PHP.
PHP

1
2
• 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 Tuwebeselresultado
Lo importante es que, al final, los camareros servirán
comida exquisita, muy bien presentada, a tus clientes.

2
5 Tuwebeselresultado
Y los clientes (tus clientes) pagarán la comida que hayan
comido.
Te pagarán a ti, que eres el propietario.
500€

2
6
Eleditor
detexto:
introducir
contenidos.

2
6 Introducircontenidos
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 Eleditordetexto
Nos pararemos a entender el funcionamiento del
Editordetexto
porque es básico para el mantenimiento de una web.

2
6 CadaCMS,sueditor
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:
Editordetexto
• 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.

1
2
6 Lapuertadeladespensa
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
lapuertade
ladespensa

1
2
Es como un filtro que organiza todos tus contenidos:

1
2
los textos

1
2
los textos, las imágenes

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

2
6 ¡Muchocuidado!
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 LoseditoresdelosCMSsonmalos
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 Nuestroaliado:SublimeText
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
Resumeny
ejercicios
prácticos
7

2
7 Resumendelmó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 ¿Quientienequeescribir?
¿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 Algunosejemplos
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.

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

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

Recently uploaded

Recently uploaded (16)

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