Diseño de Sitios Web con CMSDavid Chura

Sesión 1

Contenido

• Examinando CMS: Características• WordPress: requerimientos, Instalación y Configuración• Administrando WordPress: Post, Páginas, Usuarios• Modificando el diseño y funcionalidad, Plugins, Plantillas.

¿Qué es un CMS?

• Sistema de Administración de Contenidos• En un sistema o programa desarrollado para la creación y

administración de contenidos. Usualmente una página web.

Alternativas

• Desarrollar un sistema: Costo y Tiempo• Emplear uno ya existente: CMS (La mayoría son gratuitos)

Arquitectura

• El servidor web Linux o Windows usualmente de acuerdo a ello se elige el CMS apropiado

• La información se almacena en un servidor web remoto, específicamente en una base de datos (MySQL, SQL Server, Oracle)

• El CMS se ejecuta en el servidor y es desarrollado usualmente en un lenguaje de servidor: PHP (PHP), ASP.NET (C#), JSP (Java)

CMS más utilizados

• WordPress• Drupal• Joomla

WordPress: requerimientos, Instalación y Configuración

WordPress

• Es el CMS más utilizado en el mundo.(w3techs.com)• Inicialmente para Blogs, ahora para websites, portales,

carritos de compra, tec.• Basado en tecnología PHP/MySQL• Wordpress.com• Wordpres.org

Características

• Gratuito• Fácil de Usar• La mas grande cantidad de Themes.• Enorme cantidad de plugins para aumentar la funcionalidad • Extensa documentación y soporte.• La mas grande y creciente comunidad de usuarios de

Wordpress

Requerimientos

• Para Desarrollar:– Wampserver, Appserver, XAMPP o similares los cuales son un pack que

contienen:• Apache.• MySQL.• PHP.• PhpMyAdmin y algunos otros utilitarios.

– Estos se instalan en Windows XP, Vista, 7 u 8.– En Mac: MAMP.– También hay para otras plataformas.

Requerimientos

• En el servidor (Para producción)– Preferentemente Linux. Usualmente ya viene Apache, PHP y MySQL– Windows Debe instalarse si no lo tiene Apache, PHP y MySQL (Luego

hay que tener consideraciones en algunos casos como servidor de correo SMTP

Instalación

• Para desarrollo– Descargar los instaladores de Wordpress.org– Copiarlos a la carpeta de publicación del servidor (usualmente: www o

httpdocs)– Crear la base de datos– Proceder a la instalación

• Para el servidor el proceso es similar, aunque al mayoría de servidores tienen un utilitario para instalar rapidamente

Configuración

• Luego de Instalar WordPress, se configura con las características básicas del sitio web.

• Para ello se inicia sesión con el usuario administrador, luego en las opciones de Ajustes se personaliza

Administrando WordPress: Post, Páginas, Usuarios

Post

• Los Post son las entradas o registro de cada articulo o contenido que irá como información usualmente muy cambiante o de alta rotación

• Pueden contener imágenes, enlaces a videos, animaciones, etc.

• Los post se clasifican en Categorías

Páginas

• Las páginas son contenido más estático• En algunos casos puede ser utilizado como portada o home• Pueden contener imágenes, enlaces a videos, animaciones,

etc.• Las páginas también pueden clasificarse en categorías

Usuarios

• Para un mejor control del ingreso de información existen niveles de usuario– Administrador– Editor– Autor– Colaborador– Suscriptor

Otras elementos

• Enlaces • Medios• Menús• Widgets• Dependiendo de los plugins o temas: FAQs, Portfolio, Slides,

etc.

Modificando el diseño y funcionalidad, Plantillas y Plugins.

Modificando el diseño

• En la apariencia se pueden cambiar de Tema• Se pueden modificar los temas con herramientas del Tema• Se puede modificar la hoja de estilo• También acceder al PHP del Tema.• Hay temas gratuitos y otros que tienen un precio

Plugins

• Los plugins permiten implementar funcionalidad• Hay plugins gratuitos y otros cuestan• Existen diversos de plugins:

– Galerías de imagen– Redes Sociales– Formularios de Contacto– Etc.

Continuamos la siguiente semana

Sesión 2

Contenido

• Adobe y Microsoft apuestan por las CMS • Wordpress Codex, Frameworks CSS Responsive, Plugins

Avanzados• Publicación• Examinando Drupal y Joomla• LMS: Moodle como plataforma educativa• Otras alternativas en otras tecnologías

Adobe y Microsoft apuestan por las CMS

• Dreamweaver CS6 Es el entorno ideal para desarrollar en WrodPress, Drupal y Joomla.

• Microsoft: http://www.microsoft.com/web/webmatrix/

Wordpress Codex, Frameworks CSS Responsive, Plugins Avanzados

Codex

• http://codex.wordpress.org• Es la documentación Oficial para desarrolladores en

WordPress• Se pude crear un tema desde Cero

Frameworks CSS Responsive

• Muchos Temas comerciales están basados en Frameworks• Si bien se pude crear temas desde cero, como muchos

proyectos web se pueden crear a partir de Frameworks CSS como Skeleton o normalize.

• Elegir el Framework que les es más fácil de usar y que logren el diseño que requieran

Plugins Avanzados

• Seguridad• Herramientas de Administración• Carritos de compras• Configuración SMTP• …• Personalizar los plugins

Publicación

• Copiar el contenido del WordPress de Desarrollo al servidor• Copia de Seguridad de la base de datos (sql).• Crear base de datos en el servidor• Cambiar los datos en el archivo sql con un Buscar y

Reemplazar por los datos del servidor• Importar el archivo sql de la base de datos zipeado al servidor• Modificar el contenido del archivo wp-config.php con los

datos del servidor.

Examinando Drupal y Joomla

• Drupal: Lo emplea el 70% de las páginas del Gobierno de los Estados Unidos

• Joomla: Es bastante completo lo usan desde varios años en nuestro país, y tiene una gran cantidad de desarrolladores que le dan soporte

LMS: Moodle como plataforma educativa

• Si bien Moodle no es un CMS pero es algo similar• Moodle es un LMS: Una plataforma para aprendizaje• El problema es que hay pocas plantillas para Moodle y la

mayorías de sitios Moodle son bastante mal personalizados.• Otras opciones son Dokeos, Chamilño, Claroline y otros…

Otras alternativas en otras tecnologías

• PHP….• Java: Asbru, Walrus, Pulse, …• Kentico, Dot Net Nuke…

Fin