El Sistema de Tema de Drupal Experiencia en Infomed.

Slides:



Advertisements
Presentaciones similares
Drupal Theming Themes Control del diseño HTML, CSS, imágenes, Javascript, etc.
Advertisements

HTML (Historia) Rogelio Ferreira Escutia. 2 HTML, septiembre 2010 ¿Qué es? HTML, siglas de HyperText Markup Language.
Repaso desde HTML a XHTML
RECURSOS INTERACTIVOS. Cualificaciones_ NIVELES Permite añadir una definición clara, pública y personalizada de los criterios de calificación para aplicarlos.
Gestionar y organizar los elementos del correo electrónico
INTRODUCCION A CSS.
DOM ( Document Object Model) Prof. Franklin Cedeño.
"java del lado del servidor" Servlet y JSP Java Server Pages.
INTERFAZ DE ACCES DISEÑO DE BASE DE DATOS
ADMINISTRACIÓN DE LOS PORTALES WEB DE LOS OBSERVATORIOS DE RECURSOS HUMANOS EN SALUD 24 y 25 de abril de 2012 Marco A. Ramírez Chávez.
Personalización en diseño visual y comportamiento de la plantilla
Introducción al desarrollo de proyectos RIA.
DESARROLLANDO TEMPLATES PARA JOOMLA! 1.5 Ing. Edwin Rolando Paredes Calderón. Comercio Electrónico.
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
DISEÑO DE SITIOS WEB FRONTPAGE 2003.
TUTORIAL M.A. Fabiola Suseth López Aguirre Espacio Educativo NTIC Universidad de Sonora Septiembre de 2013.
Actividad 3: Estructura de un CMS
CREACIÓN DE SITIOS WEB REINALDO DUQUE S. Profesor de tecnología COLEGIO CLERMONT Febrero de 2008.
Curso de Creación aplicaciones dinámicas web con PHP y MySQL Continuamos.
Para acceder a la plataforma existen dos vías. Si ya tienes un usuario en el portal del Observatorio para la Calidad de la Formación en Salud, puedes.
Aula Virtual Continental
ASP.NET es una nueva y potente tecnología para escribir páginas web dinámica. Es una importante evolución respecto a las antiguas páginas ASP de Microsoft.
Colegio de Bachilleres Plantel 13 Xochimilco-Tepepan Integrantes: Karen Elizabeth González Monroy Elizabeth De Jesús Vergara Grupo:308.
 ¿Qué es PowerPoint? ¿Qué es PowerPoint?  Buscar y aplicar una plantilla Buscar y aplicar una plantilla  Crear una presentación Crear una presentación.
POWERPOINT.
Publicación de bases de datos Access en la web
 Diseño de Página  Encabezados  Importar Datos  Inmovilizar paneles  Bloqueo de Celdas  Impresión.
Módulos de Drupal Yazna García Vega Dpto Desarrollo.
Introducción al Lenguaje. ¿Qué es PHP? O Es un lenguaje de programación que es interpretado por un servidor web. O El lenguaje es genérico. PHP está orientado.
Piktochart M.I.S.T. Miguel Ángel Romero Ochoa Hermosillo, Sonora, México. Octubre 2014 Espacio educativo: Nuevas Tecnologías de la Información y la Comunicación.
Ingresa a Ingresas el nombre de tu pagina, debe estar relacionado con el contenido. Ingresas tu correo electrónico, te llegara un mensaje.
Introducción al Lenguaje. ¿ Qué es PHP ? O Hypertext Pre-processoes (PHP) es un lenguaje de "código abierto" interpretado, de alto nivel, embebido en.
PowerPoint 2007 Es una aplicación que permite la creación de presentaciones gráficas, al estilo de diapositivas que pueden combinar texto, diagramas,
Introducción a las Tecnologías Informáticas Oscar Bedoya
Universidad de Sonora Espacio Educativo NTIC M.A. Fabiola Suseth López Aguirre Noviembre de 2013.
Nombre: Segura Delgado Anel Materia: Tics Grupo: 221 Matricula: I Fecha de entrega: 22 de junio del 2010.
Clase 7 Tecnología de la Comunicación II Lics. en Com. Social y Periodismo F AC. DE C S. H UMANAS. UNSL. Sitio Web: construcción en In Design.
Profesora: Laura Patricia Pinto Prieto Ingeniera de sistemas Introducción a Programación 3.
CMS DRUPAL HERRAMIENTAS DE DISEÑO CARLOS LLANOS V. JENNIFER QUINDE G. JUAN MACIAS B. KERLY UBE.
WEB Y MULTIMEDIA INTEGRANTES: Piero Álvarez Milena Gómez Cristhian Rodríguez Mónica Pasaca Andrea Deleg Veronica Castillo.
MANUAL DE USO DE WORDPRESS NOMBRE: GUIDO GONZALEZ FECHA: 28/03/2015. CURSO: 1RO BACHILLERATO “C”
¿QUE SON LAS ACTUALIZACIONES?  Las actualizaciones son adiciones al software que pueden evitar problemas o corregirlos, mejorar el funcionamiento del.
UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001: Ing. Ángela Yanza Montalván, M.Sc. Mg. DOCENTE UNIVERSIDAD ECOTEC FACULTAD DE CIENCIAS COMPUTACIONALES.
CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007 (Sesión 5) Ricardo Ferrís Castell ( ) Departament D ’ Informàtica.
Internet y Navegadores
Recursos y actividades transmisivas Ciro Espinoza.
Lo primero Presentación: página inicial de tu wiki.
Internet y Navegadores Unidad 5. Fecha: 1 de agosto de 2011 Periodo# : 2 Objetivo: identificar el contenido de una dirección web Tema: Elementos de una.
UNIDAD EDUCATIVA CALASANZ ANDRES SANTIAGO DIAZ R. 1RO B.
Lenguaje de Programación Web Dinámico Multiplataforma Estándar abierto y accesible Elementos nuevos Retrocompatible Nueva filosofía de trabajo Impulsado.
Formas, Tablas, Numeración y viñetas, Imágenes y WordArt
Conceptos Básicos ¿Qué es un blog? Un blog, (también se conocen como weblog o bitácora), es un sitio web que recopila cronológicamente textos o artículos.
Capítulo 9: Detección de Errores MSc. Alexis Cabrera Mondeja.
Colegio de Bachilleres Plantel 13 Xochimilco - Tepepan
Introducción a GDevelop
Introducción al Lenguaje. ¿Qué es PHP? O Es un lenguaje de programación que es interpretado por un servidor web. O El lenguaje es genérico. PHP está orientado.
Temas: El Ordenador | Redes | ¿Qué es un wiki? | Diseño Web | Programación informática | Hojas de cálculo El OrdenadorRedes¿Qué.
Este curso de introducción a Wordpress es un curso de creación un blog desde 0, en el aprenderemos los fundamentos de un blog y por qué son tan famosos.
WORDPRESS. UNIDAD EDUCATIVA “CALASANZ” ISAÍAS SILVA PRIMERO DE BACHILLERATO “D”
USB-Ingeniería de Sistemas Programación en Internet Agosto 2015 Introducción al Html.
WordPress. Nombre del Sitio Web Enlaces permanente.
CURSO DE FORMACIÓN AL PORTAL WEB DE LA UNIVERSIDAD CARLOS III DE MADRID ORACLE PORTAL Manual disponible en:
Google docs Tutorial para elaborar una presentación en línea con Google docs Prof. Edgar Oswaldo González Bello Prof. Adolfo Castillo Navarro Universidad.
Controla los componentes básicos visuales de una página. Los bloques son cajas de contenido representado en una zona o región, de una página web. Versión:
Drupal CARLOS GARCÍA MONTORO. Introducción Drupal es un CMS. Requiere: ◦Un servidor web (Apache, Nginx, Microsoft IIS). ◦Una base de datos (MySQL, PostgreSQL,
Propuesta de Creación de Página en Google Sites o ExeLearning USS VIRTUAL.
características  WampServer también tiene un "TrayIcon" que le permite administrar simple y configurar sus servidores, sin afectar a los archivos de.
Andrea Fernanda Salazar Rueda María Paula Peña Fernández Yuleny Osorio López.
Curso teórico-práctico de El código es poesía. Sistema de gestión de contenidos enfocado a la creación de Blogs (sitios web periódicamente actualizados).
CLASE 6 “Creación de Sitios para la Web en WIX. Agregado de elementos multimediales, enlaces e hipermedia” TECNOLOGÍA DE LA COMUNICACIÓN Lics. en Comunicación.
Transcripción de la presentación:

El Sistema de Tema de Drupal Experiencia en Infomed

Componentes del Sistema de tema Los componentes del sistema de drupal estan compuesto por las sgtes capas de adstracción: template languages theme engines themes

Template Languages and Theme Engines Smarty PHPTAL PHPTemplate La comunidad de Drupal ha creado su propio motor de tema optimizado para Drupal y es el PHPTemplate.

Template Languages and Theme Engines Instale el motor de tema colocándolo dentro del directorio engines para su sitio sites/ sitename/themes/engines Coloque el motor de tema dentro del directorio sites/all/themes/engines para que este accesible para todos los sitios en una instalación multisitio.

Temas Los temas son colecciones de archivos (imágenes, css, javascript, plantillas, etc.) que constituyen la apariencia del sitio. Se pueden descargar desde Template File Extension Theme Engine.theme PHP.tpl.php PHPTemplate*.tal PHPTAL.tpl Smarty * PHPTemplate es el motor de tema por defecto de Drupal Infomed escogio el motor PHPTemplate como base para la creación de los Temas de nuestra propuesta.

Instalando un tema Instale el tema colocándolo dentro del directorio themes para su sitio sites/ sitename/themes Coloque el tema dentro del directorio sites/all/themes para que este accesible para todos los sitios en una instalación multisitio.

Construyendo Tema en PHPTemplate La construcción de un tema depende del material inicial que se tenga, pero los paso principales son los sgtes: 1.Crear o modificar un archivo de HTML para el sitio. 2.Crear o modificar un archivo de CSS para el sitio. 3.Crear un fichero.info para describir su nuevo tema. 4.Estandarizar los nombre de ficheros según motor de tema de Drupal (page.tpl.php). 5.Inserción de las variables disponibles en la plantilla. 6.Crear los archivos adicionales para los tipos del nodo individuales, los bloques, y así sucesivamente (node.tpl.php, block.tpl.php, etc.). Para la construcción de los temas infomed tomo como base el proyecto Zen de Drupal Todas las modificaciones se realizaron tomandohttp://drupal.org/project/zen como base este tema genérico.

Tema Zen El tema Zen es muy flexible, semánticamente estándar con XHTML, puede ser fácilmente modificado a través de CSS y es una versión reforzada del sistema de plantilla de Drupal ya que implementa la mayoría de sus características avanzadas, entre sus principales características están: Posee bien documentados los archivos php y css. Muchas de las clases y id son de fácil acceso para diseñadores de CSS. Redimensionamiento automático (table-less) de columna para diseños de 1, 2, y 3 columnas. Separado fichero layout.css para permitir cambiar el tipo de diseño de la columna. Posee el archivo print.css que optimiza mostrar la impresión automáticamente cuando se envía a imprimir la página — quita los elementos laterales, los de navegación, optimiza el tamaño de la fuente, agrega texto a los enlaces para mostrar los href, etc. Un buen comentario acerca del tema Zen puede ser encontrado en la sgte url

Tema Zen Bien documentado. Capacidad de hacer subtemas heredando características de uno base. Capacidad de configuración avanzada. Compatible con características de accesibilidad y usabilidad. Compatible con todas las versiones de Drupal al partir de la 5.0.

Tema STARTERKITBASE Tema construido sobre la base del tema Zen. Se le desactivo la capacidad de crear subtemas a partir de este. Construido para construir los temas de las principales propuestas de los sitios de especialidades (ejemplo: bvsite, cencomed, htatema, etc). Posee un fichero README.txt donde explica como crear un temas a partir del mismo.

Temas realizados tomando como base el STARTERKITBASE temaeltiempo ( bvsite ( temasoporte ( cencomed ( htatema (

infotemaci infotemacidesplegable infotemacontitulo infotemacontituloydesplegable Temas realizados tomando como base el STARTERKITBASE Conjunto de temas que intentan resolver de forma genérica la apariencia de los sitios de la propuesta de los sitios de especialidades y temáticos.

Infotemacidesplegable Tema construido para resolver de forma generica la apariencia de los sitios de especialidades. Surge como respuesta a los requisitos planteados por la propuestas de diseño el grupo WEB. Subir dos imagenes Color de fondo del cabezal. Subir CSS adicionar para personalización de los bloques. Depende del módulo nice_menus para crear los menús despleglable

Entendiendo los ficheros de plantillas La plantilla page.tpl.php es la base de todos los ficheros de plantillas, y proporciona el diseño global del sitio. Todos las demás plantillas se insertan en el page.tpl.php

Entendiendo los ficheros de plantillas Cada archivo de plantilla de PHPTemplate, tales como page.tpl.php, node.tpl.php, block.tpl.php, etc - se le pasa un conjunto de contenidos dinámicos dentro de variables específicos para cada archivo de plantilla. A continuación se listan los ficheros de plantillas fundamentales de Drupal: page.tpl.php - Controla apariencia de página de Drupal. node.tpl.php - Controla apariencia de los nodos. block.tpl.php - Controla apariencia de los bloques. comment.tpl.php - Controla apariencia de los comentarios. La única plantilla que es obligatoria es el page.tpl.php

Como trabaja la función theme() A continuación se muestra que ocurre cuando se visualiza una simple página tal como El sistema de menú de Drupal recibe la petición y le pasa el control al módulo node. Después de la construcción de la estructura de datos del nodo, se llama a la función theme( 'nodo', $nodo, $teaser, $page). Esta busca la función de tema correcta o archivo de plantilla, define el lote de variables que la plantilla puede utilizar, y se la aplica a la plantilla, lo que termina con la generación del HTML para el nodo. (Si hay varios nodos, como sucede con un blog, este proceso ocurre para cada nodo). Si el módulo comment está habilitado, cualquier comentario se convierten en HTML y se adiciona al HTML del nodo.

Este conjunto global de HTML es devuelto (se puede ver en la variable $return en el index.php) y pasado a la función theme () nuevamente como theme('page', $return). Antes de procesar la plantilla de la página, Drupal realiza algunos procesamientos tales como descubrir qué regiones están disponibles y qué bloques deben mostrarse en cada una de las regiones. Cada bloque se convierte en HTML llamando a la función theme('blocks', $region), qué define variables y se la aplica a la plantilla de bloque. Finalmente, Drupal define el lote de variables para la plantilla de la página a usar y la aplica a la plantilla. Como trabaja la función theme()