Especialista en desarrollo  de aplicaciones web JORNADA 8 cid deza,  moisés [email_address]
CMSMS – Tipos de Usuario <ul><li>Diseñador : Se encarga del diseño del sitio. Generar y administrar las plantillas (CSS y ...
CMSMS – Conceptos Básicos <ul><li>Plantillas : Permite definir el diseño, la distribución, la apariencia de la página web....
CMSMS – Pasos para crear un sitio <ul><li>Los pasos que se deben seguir: </li></ul><ul><ul><li>Planificación : Determinar ...
CMSMS – Planificación <ul><li>Paso 1 : </li></ul><ul><ul><li>En este paso el objetivo es determinar la estructura y el dis...
CMSMS – Crear las plantillas <ul><li>Paso 2 : </li></ul><ul><ul><li>En este paso anterior se ha obtenido como resultado el...
CMSMS – Crear las plantillas <ul><li>Paso 2a : Alta de la Plantilla en CMSMS </li></ul><ul><ul><li>Esta operación se lleva...
CMSMS – Crear las plantillas <ul><li>Paso 2b :  </li></ul><ul><ul><li>Alta de la Hoja de Estilos en CMSMS </li></ul></ul><...
CMSMS – Elementos de una plantilla <ul><li>En una plantilla de CMSMS, además del código XHTML se pueden introducir etiquet...
CMSMS – Ejemplo de una plantilla <ul><li>Ejemplo de una plantilla de CMSMS con  Tags </li></ul>{process_pagedata}  <!DOCTY...
CMSMS – Algunas Tags <ul><li>Tags frecuentemente utilizadas: </li></ul><ul><ul><li>{title}  – Será reemplazada con el títu...
CMSMS – Algunas Tags <ul><li>Tags frecuentemente utilizadas: </li></ul><ul><ul><li>{metadata}  – Esta etiqueta debe coloca...
CMSMS – Crear las páginas <ul><li>Paso 3 : </li></ul><ul><ul><li>En este paso anterior se crearon las plantillas de CMSMS....
CMSMS – Tipos de Páginas <ul><li>Paso 3 :  </li></ul><ul><ul><li>CMSMS diferencia  5 tipos de páginas web  en función del ...
CMSMS – Tipos de Páginas <ul><li>Paso 3 :  </li></ul><ul><ul><li>CMSMS diferencia 5 tipos de páginas web en función del co...
CMSMS –  Crear Páginas de Contenido <ul><li>El proceso de añadir páginas nuestro sitio web se lleva a cabo desde  Contenid...
CMSMS – Visualizar las páginas del sitio Web <ul><li>Para poder ver las páginas web que forman parte del sitio se accede a...
CMSMS – Otros contenidos <ul><li>Hasta el momento se ha visto como agregar al sitio contenidos de tipo  página . </li></ul...
CMSMS – Añadir contenido de tipo Imagen <ul><li>Para poder utilizar una imagen en una página web es necesario haberla dado...
CMSMS – Añadir contenido de tipo Imagen <ul><li>Añadir contenido de tipo Imagen </li></ul><ul><ul><li>Contenido    Gestió...
CMSMS – Añadir contenido de tipo Fichero <ul><li>Al igual que ocurre con las imágenes, para poder utilizar un fichero en u...
CMSMS – Añadir contenido de tipo Fichero <ul><li>Añadir contenido de tipo Fichero </li></ul><ul><ul><li>Se realiza desde  ...
CMSMS – Extensiones <ul><li>En CMSMS las extensiones pueden ser de los siguientes tipos: </li></ul><ul><ul><li>Etiquetas (...
Upcoming SlideShare
Loading in...5
×

Especialista Web J8

754

Published on

Cómo gestionar contenido con el CMS "CMS Made Simple"

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
754
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Especialista Web J8

  1. 1. Especialista en desarrollo de aplicaciones web JORNADA 8 cid deza, moisés [email_address]
  2. 2. CMSMS – Tipos de Usuario <ul><li>Diseñador : Se encarga del diseño del sitio. Generar y administrar las plantillas (CSS y XHTML). </li></ul><ul><li>Editor : Se encarga de crear/mantener contenidos (noticias, nuevas páginas, texto de las páginas, etc). </li></ul><ul><li>Administrador : Diseñador + Editor + Gestor de usuarios + Gestor de seguridad = Control total </li></ul>
  3. 3. CMSMS – Conceptos Básicos <ul><li>Plantillas : Permite definir el diseño, la distribución, la apariencia de la página web. </li></ul><ul><ul><li>Debe crearla el diseñador utilizando XHTML+CSS. </li></ul></ul><ul><ul><li>Todas las páginas de un CMS están basadas en plantillas y, por tanto, todo lo que esté en una plantilla aparecerá en las páginas que utilicen esa plantilla. </li></ul></ul><ul><ul><li>CMSMS dispone de plantillas predefinidas, aunque se pueden añadir nuevas. </li></ul></ul><ul><li>Páginas : Determinan la estructura del sitio. </li></ul><ul><ul><li>Sitio= Conjunto de páginas que se basan en plantillas. </li></ul></ul><ul><li>Navegación/Menú : Enlaces que ayudan al usuario a navegar por las páginas del sitio web. </li></ul><ul><ul><li>En un CMS, serán generados automáticamente por CMSMS a partir de la estructura de las páginas. </li></ul></ul><ul><li>Contenido : Es la información de las páginas. </li></ul>
  4. 4. CMSMS – Pasos para crear un sitio <ul><li>Los pasos que se deben seguir: </li></ul><ul><ul><li>Planificación : Determinar la estructura y el diseño. </li></ul></ul><ul><ul><ul><li>Estructura : Páginas que tendrá el sitio </li></ul></ul></ul><ul><ul><ul><li>Diseño : XHTML + CSS </li></ul></ul></ul><ul><ul><li>Crear las plantillas </li></ul></ul><ul><ul><ul><li>Un sitio puede tener una o varias plantillas. P. ej: podría existir una plantilla para las páginas de primer nivel, otra para las páginas de segundo nivel, etc. </li></ul></ul></ul><ul><ul><ul><li>CMSMS dispone de plantillas por defecto. </li></ul></ul></ul><ul><ul><li>Crear las páginas </li></ul></ul><ul><ul><ul><li>Se deben crear las páginas </li></ul></ul></ul><ul><ul><ul><li>Añadirles contenido </li></ul></ul></ul><ul><ul><ul><li>Decidir que plantilla se quiere utilizar para cada una de ellas. </li></ul></ul></ul>
  5. 5. CMSMS – Planificación <ul><li>Paso 1 : </li></ul><ul><ul><li>En este paso el objetivo es determinar la estructura y el diseño del sitio. </li></ul></ul><ul><ul><li>Una vez finalizado este paso, se deberá contar con: </li></ul></ul><ul><ul><ul><li>Estructura del sitio : Organizado por niveles y teniendo claro qué páginas van en qué niveles. </li></ul></ul></ul><ul><ul><ul><li>Diseño XHTML+CSS : Es decir, el código fuente XHTML que será común a todas las páginas, junto con las hojas de estilo necesarias para darles formato. Es muy probable que se necesite más de un diseño. Generalmente existirá un diseño de página por cada nivel. </li></ul></ul></ul><ul><ul><li>Ejemplo. </li></ul></ul>
  6. 6. CMSMS – Crear las plantillas <ul><li>Paso 2 : </li></ul><ul><ul><li>En este paso anterior se ha obtenido como resultado el diseño (XHTML+CSS) y la estructura del sitio. Es decir, ya se dispone del: </li></ul></ul><ul><ul><ul><li>Código XHTML </li></ul></ul></ul><ul><ul><ul><li>Código CSS </li></ul></ul></ul><ul><ul><li>Ahora hay que convertir el XHTML y el CSS en plantillas de CMSMS que posteriormente estarán disponibles para se utilizadas por las páginas web del sitio. </li></ul></ul><ul><ul><li>La creación de las plantillas de CMSMS se lleva a cabo en 2 fases: </li></ul></ul><ul><ul><ul><li>Alta de la plantilla en CMSMS : Contiene el código XHTML y otros elementos ( Tags ). </li></ul></ul></ul><ul><ul><ul><li>Alta de las hojas de estilo : Contiene el código CSS que utilizarán las plantillas. </li></ul></ul></ul>
  7. 7. CMSMS – Crear las plantillas <ul><li>Paso 2a : Alta de la Plantilla en CMSMS </li></ul><ul><ul><li>Esta operación se lleva a cabo desde el menú Diseño  Plantilla </li></ul></ul><ul><li>A partir de este momento, esta plantilla ya estará disponible para ser utilizada por las páginas web del sitio. </li></ul>
  8. 8. CMSMS – Crear las plantillas <ul><li>Paso 2b : </li></ul><ul><ul><li>Alta de la Hoja de Estilos en CMSMS </li></ul></ul><ul><ul><ul><li>Esta operación se lleva a cabo desde el menú Diseño  Hojas de Estilo </li></ul></ul></ul><ul><ul><ul><li>Una vez dada de alta la hoja de estilos, hay que indicar esta hoja de estilos va a ser utilizada por una plantilla en concreto. </li></ul></ul></ul><ul><ul><li>Asociar la Hoja de Estilos a la Plantilla </li></ul></ul><ul><ul><ul><li>Esta operación se lleva a cabo desde el menú Diseño  Plantillas , o bien desde Diseño  Hojas de Estilo. </li></ul></ul></ul><ul><li>A partir de este momento, CMSMS ya sabe qué CSS(s) debe utilizar con cada plantilla. </li></ul>
  9. 9. CMSMS – Elementos de una plantilla <ul><li>En una plantilla de CMSMS, además del código XHTML se pueden introducir etiquetas o Tags . </li></ul><ul><li>Tag : Reserva un espacio dentro de cada plantilla para situar elementos como la barra de navegación, el menú, etc. </li></ul><ul><ul><li>Cuando un usuario visita una página, ésta se genera automáticamente a partir de la plantilla y las etiquetas se reemplazan por su contenido automáticamente. </li></ul></ul><ul><ul><li>Ejemplo: {menu} {breadcrumbs} </li></ul></ul>
  10. 10. CMSMS – Ejemplo de una plantilla <ul><li>Ejemplo de una plantilla de CMSMS con Tags </li></ul>{process_pagedata} <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot; > <head> <title> {sitename} - {title} </title> {metadata} {stylesheet} </head> <body> <!-- start header --> <div id=&quot;header&quot;> <h1> {sitename} </h1> </div> <!-- end header --> <!-- start menu --> <div id=&quot;menu&quot;> {menu} </div> <!-- end menu --> <!-- start content --> <div id=&quot;content&quot;> <h1> {title} </h1> {content} </div> <!-- end content --> </body> </html> Nombre del sitio Título de la pág. Menú autogenerado
  11. 11. CMSMS – Algunas Tags <ul><li>Tags frecuentemente utilizadas: </li></ul><ul><ul><li>{title} – Será reemplazada con el título escogido a la hora de crear la página </li></ul></ul><ul><ul><li>{stylesheet} – Ésta debe estar entre las etiquetas <head></head> . Enlaza a todas las hojas de estilo que hayan sido adjuntadas a la plantilla. Si no se indica esta tag la página aparecerá sin estilos. </li></ul></ul><ul><ul><li>{content} – Será reemplazada con el contenido real de la página seleccionada. El contenido que puedes editar en Contenido  Páginas . </li></ul></ul><ul><ul><li>{breadcrumbs} – Se reemplazará con la ruta al contenido seleccionado. </li></ul></ul>
  12. 12. CMSMS – Algunas Tags <ul><li>Tags frecuentemente utilizadas: </li></ul><ul><ul><li>{metadata} – Esta etiqueta debe colocarse entre las etiquetas <head> del HTML. Su función es la de enlazar información específica de la página y del sitio, así como la de exportar la etiqueta <base> , que es necesaria para generar la estructura jerárquica de las URL. </li></ul></ul><ul><ul><li>{menu} – Este es uno de los menús más comunes. El menú será generado automáticamente a partir de tus páginas allí donde sitúes esta marca. Esta etiqueta puede recibir parámetros para mostrar el menú de diversas maneras. Por ejemplo, {menu collapse='1'} para que los subelementos del menú aparezcan colapsadas, y sólo se muestren los subelementos del elemento seleccionado actualmente. </li></ul></ul><ul><li>El listado completo de Tags que se pueden utilizar se puede encontrar en Extenciones  Tags . Dispone de una pequeña ayuda que explica el significado y lo acompaña con un ejemplo. </li></ul>
  13. 13. CMSMS – Crear las páginas <ul><li>Paso 3 : </li></ul><ul><ul><li>En este paso anterior se crearon las plantillas de CMSMS. </li></ul></ul><ul><ul><li>El objetivo de este paso es crear/dar de alta las páginas web del sitio a través del panel de administración del CMS. </li></ul></ul><ul><ul><li>Esta gestión del las páginas web del sitio se lleva a cabo desde el menú Contenido de CMSMS. </li></ul></ul>
  14. 14. CMSMS – Tipos de Páginas <ul><li>Paso 3 : </li></ul><ul><ul><li>CMSMS diferencia 5 tipos de páginas web en función del contenido que vayan a mostrar/visualizar: </li></ul></ul><ul><ul><ul><li>Páginas de Contenido : Son las páginas normales . El diseño de este tipo de páginas se controla a través de las plantillas que se definieron en el paso anterior. Para cada página de contenido se le debe asociar una plantilla . </li></ul></ul></ul><ul><ul><ul><li>Páginas de Enlace : Éstas son justo lo que indica su nombre, un enlace a otra página ya sea interna o externa. </li></ul></ul></ul><ul><ul><ul><li>Páginas de Encabezado de sección : Las de este tipo se usan para dividir los menús en grupos más pequeños, es decir, en secciones. Este tipo no tienen ningún contenido asociado, ni enlazan a ninguna página. Sólo son letreros que aparecen en el menú para dar nombre al grupo de enlaces que le siguen. </li></ul></ul></ul>
  15. 15. CMSMS – Tipos de Páginas <ul><li>Paso 3 : </li></ul><ul><ul><li>CMSMS diferencia 5 tipos de páginas web en función del contenido que vayan a mostrar/visualizar: </li></ul></ul><ul><ul><ul><li>Páginas Separador : Éstas son, como su propio nombre indica, separadores que pueden aparecen en los menús para separar grupos de opciones. Se puede seleccionar su posición dentro de la jerarquía. </li></ul></ul></ul><ul><ul><ul><li>News (Noticias) : Las de este tipo muestran la página de resumen de la(s) categoría(s) de noticias que selecciones, gracias al módulo news . Aparecen en el menú en la posición que marques dentro de la jerarquía, y se pueden seleccionar varios parámetros como por ejemplo el número de noticias que se quieren mostrar. Sin embargo, también puedes insertar noticias en páginas de contenido mediante el uso de la etiqueta {cms_module module=&quot;News&quot;} (consulta su ayuda dentro de Extensiones -> Módulos -> News -> Ayuda para más información). </li></ul></ul></ul>
  16. 16. CMSMS – Crear Páginas de Contenido <ul><li>El proceso de añadir páginas nuestro sitio web se lleva a cabo desde Contenido  Páginas  Añadir contenido </li></ul><ul><li>Se mostrará un formulario en el que se deberán indicar una serie de datos de la página: </li></ul><ul><ul><li>Se comienza por seleccionando el tipo de contenido de la página. Para una página normal se utilizará el tipo por defecto que es Contenido . </li></ul></ul><ul><ul><li>A continuación se introduce el título de la página. </li></ul></ul><ul><ul><li>A continuación introduce el texto que aparecerá en el menú. Este texto puede ser diferente del título de la página. </li></ul></ul><ul><ul><li>Si la página que se añade va a ser un hijo de otra página, hay que seleccionar a su padre del árbol de páginas existentes. </li></ul></ul><ul><ul><li>Después se debe seleccionar la plantilla que se va a utilizar para esta página. </li></ul></ul><ul><ul><li>A continuación se introduce el contenido de la página. </li></ul></ul><ul><ul><li>Finalmente se pulsa uno de los botones siguientes: </li></ul></ul><ul><ul><ul><li>Submit -- Guardar los cambios y volver a Contenido -> Páginas . </li></ul></ul></ul><ul><ul><ul><li>Preview -- Previsualizar la página sin grabarla ni dejar la ventana de edición. </li></ul></ul></ul><ul><ul><ul><li>Cancel -- Volver a Contenido -> Páginas sin aplicar ningún cambio. </li></ul></ul></ul><ul><ul><ul><li>Apply -- Aplicar los cambios realizados, pero sin abandonar la ventana de edición. </li></ul></ul></ul>
  17. 17. CMSMS – Visualizar las páginas del sitio Web <ul><li>Para poder ver las páginas web que forman parte del sitio se accede a Contenido  Páginas . </li></ul><ul><ul><li>De cada página se aporta la siguiente información: </li></ul></ul><ul><ul><ul><li>Título -- es el título de la página (no debe confundirse con el texto del menú). </li></ul></ul></ul><ul><ul><ul><li>Plantilla -- indica el nombre de la plantilla que usa cada página. </li></ul></ul></ul><ul><ul><ul><li>Tipo -- es el tipo de contenido de la página. </li></ul></ul></ul><ul><ul><ul><li>Autor -- muestra el usuario que creó la página. </li></ul></ul></ul><ul><ul><ul><li>Activo -- una página sólo puede ser visitada si está activa. Si no lo está no se muestra en el menú y tampoco puede ser visitada, aunque permanece en el sistema en estado latente (no se borra). Así puedes editar una página tantas veces como sea necesario, y publicarla marcándola como activa cuando esté lista para ser visitada. </li></ul></ul></ul><ul><ul><ul><li>Defecto -- la página por defecto es la página que se muestra al visitante nada más entrar en tu sitio. </li></ul></ul></ul><ul><ul><ul><li>Mover -- pulsa la flechas para subir o bajar la página dentro de la jerarquía. </li></ul></ul></ul><ul><ul><ul><li>Los tres iconos de la derecha significan: </li></ul></ul></ul><ul><ul><ul><ul><li>Ver -- muestra esa página en una nueva ventana. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Editar -- hace lo mismo que si pulsas sobre el título de la página. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Borrar -- elimina la página ¡y no se puede deshacer! </li></ul></ul></ul></ul>
  18. 18. CMSMS – Otros contenidos <ul><li>Hasta el momento se ha visto como agregar al sitio contenidos de tipo página . </li></ul><ul><li>CMSMS permite añadir por defecto otros tipos de contenido como son: </li></ul><ul><ul><li>Imágenes </li></ul></ul><ul><ul><li>Ficheros </li></ul></ul><ul><ul><li>Noticias </li></ul></ul>
  19. 19. CMSMS – Añadir contenido de tipo Imagen <ul><li>Para poder utilizar una imagen en una página web es necesario haberla dado de alta ( subirla ) previamente en el CMS. </li></ul><ul><li>Las imágenes se almacenan por defecto en la carpeta: </li></ul><ul><ul><li>/carpeta_cms/uploads/images </li></ul></ul><ul><li>Es importante tener en cuenta que esta carpeta debe tener los permisos necesarios para poder copiar en ella las imágenes. </li></ul>
  20. 20. CMSMS – Añadir contenido de tipo Imagen <ul><li>Añadir contenido de tipo Imagen </li></ul><ul><ul><li>Contenido  Gestión de imágenes. </li></ul></ul><ul><ul><li>Ir a la carpeta en la que se encuentra la imagen que se va a subir. </li></ul></ul><ul><ul><li>Pulsar el botón ”Seleccionar archivo” que hay en la zona inferior. </li></ul></ul><ul><ul><li>Seleccionar la imagen que quieres añadir. </li></ul></ul><ul><ul><li>Pulsa Enviar . </li></ul></ul><ul><li>Ver vídeo </li></ul><ul><li>A partir de este momento, será posible utilizar esta imagen en cualquier página web del sitio. </li></ul>
  21. 21. CMSMS – Añadir contenido de tipo Fichero <ul><li>Al igual que ocurre con las imágenes, para poder utilizar un fichero en una página web es necesario haberlo dado de alta ( subirlo ) previamente en el CMS. </li></ul><ul><li>Los ficheros se almacenan por defecto en la carpeta: </li></ul><ul><ul><li>/carpeta_cms/uploads </li></ul></ul><ul><li>Es importante tener en cuenta que esta carpeta debe tener los permisos necesarios para poder copiar en ella los ficheros. </li></ul>
  22. 22. CMSMS – Añadir contenido de tipo Fichero <ul><li>Añadir contenido de tipo Fichero </li></ul><ul><ul><li>Se realiza desde Contenido  Gestión de ficheros . </li></ul></ul><ul><ul><li>Es muy similar a la gestión de imágenes, y también permite la creación de carpetas para estructurar mejor los ficheros que se suben. </li></ul></ul><ul><li>Ver vídeo </li></ul><ul><li>A partir de este momento, será posible utilizar el fichero desde cualquier página web del sitio. </li></ul>
  23. 23. CMSMS – Extensiones <ul><li>En CMSMS las extensiones pueden ser de los siguientes tipos: </li></ul><ul><ul><li>Etiquetas (Tags) : son pequeños trozos de código PHP que se almacenan físicamente en el directorio /carpeta_cms/plugins y que se pueden insertar en las plantillas de las páginas </li></ul></ul><ul><ul><ul><li>Un ejemplo es la etiqueta {sitemap} </li></ul></ul></ul><ul><ul><li>Módulos : Permite reutilizar funciones complejas. Se crean con PHP y permite aumentar la funcionalidad de CMSMS </li></ul></ul><ul><ul><ul><li>Un ejemplo es el libro de visitas </li></ul></ul></ul><ul><ul><li>Etiquetas Personalizadas </li></ul></ul><ul><li>Están accesibles a través del menú Extensiones </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×