Diseño de Sitios Web con CMS

1. Diseño de Sitios Web con CMS David Chura

2. Sesión 1

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

4. ¿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.

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

6. 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)

7. CMS más utilizados • WordPress • Drupal • Joomla

8. WordPress: requerimientos, Instalación y Configuración

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

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

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

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

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

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

15. Administrando WordPress: Post, Páginas, Usuarios

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

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

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

19. Otras elementos • Enlaces • Medios • Menús • Widgets • Dependiendo de los plugins o temas: FAQs, Portfolio, Slides, etc.

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

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

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

23. Continuamos la siguiente semana

24. Sesión 2

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

26. 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/

27. Wordpress Codex, Frameworks CSS Responsive, Plugins Avanzados

28. Codex • http://codex.wordpress.org • Es la documentación Oficial para desarrolladores en WordPress • Se pude crear un tema desde Cero

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

30. Plugins Avanzados • Seguridad • Herramientas de Administración • Carritos de compras • Configuración SMTP • … • Personalizar los plugins

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

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

33. LMS: Moodle como plataforma educativa • Si bienMoodle 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…

34. Otras alternativas en otras tecnologías • PHP…. • Java: Asbru, Walrus, Pulse, … • Kentico, Dot Net Nuke…

35. Fin