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

Slides:



Advertisements
Presentaciones similares
Drupal Exposición global para su empresa CATIC 2010 | ULATINA | Costa Rica 2010.
Advertisements

Departamento de Comunicación Instituto Tecnológico y de Estudios Superiores de Monterrey, Campus Estado de México Instituto Tecnológico y de Estudios.
HTML (Historia) Rogelio Ferreira Escutia. 2 HTML, septiembre 2010 ¿Qué es? HTML, siglas de HyperText Markup Language.
CSS Rogelio Ferreira Escutia. 2 Hojas de estilo cascada, mayo 2010 Definición La hojas de estilo en cascada (en inglés.
I. Sesión 2 Noviembre 2010 Claudio Chaucca Umana
Una página web es una fuente de información adaptada para la World Wide Web(WWW) y accesible mediante un navegador de Internet. Un sitio web es un conjunto.
Repaso desde HTML a XHTML
Hojas de estilo en cascada (CSS)
Laboratorio 5 Hojas de Estilo CSS
Herramientas Ofimáticas Insertar tablas. Insertar tablas Ficha Insertar Grupo tablas Comando : – Insertar tabla – Definir en el panel el numero de columnas.
Visualización de documentos XML con CSS
Mi Primer Sitio con Drupal 7
Universidad del Cema – Facultad de Ingeniería Carrera de Ingeniería Informática en la UCEMA A partir de 2007 dicha carrera se dictará de lunes a viernes.
¿Qué es Drupal?. Es un sistema de administración de contenidos Es un framework para construir aplicaciones web con un API muy bien documentado.
Aprende a hacer sitios web con wordpress
Aplicaciones semánticAS con Drupal
¿Cómo se construyo la web del periódico Digital ERBOL?
LinkDesigns.com.
Instructor :LIC. Jairo Flores de la o
HTML y CSS. Desarrollo de interfaces web Concepto Usabilidad Experiencia de usuario Tecnologías Estándares Licencias.
Prototype es un Framework JavaScript que busca facilitar el desarrollo de aplicaciones Web dinámicas. Ofrece un conjunto de herramientas orientado a objetos.
INTRODUCCION A HTML Y JAVASCRIPT Ing. Diego J. Arcusin
Tu empresa Ing. Diego J. Arcusin Universidad del Cema – Facultad de Ingeniería En Internet? ¿Cómo crear.
Autogestiona tu página web en UGR
Framework Hexápodo PHP fácil, rápido y sin dolor
CSS 3.
T a b l a s.
Internet y la Web social: Diseño de páginas web
HERRAMIENTAS DE DISEÑO WEB
Sócrates: su filosofía
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.
Presenta: ¿Editar un blog es difícil?. Para empezar con este práctico tutorial, tengo dos indicaciones por seguridad: 1. Entra a tu blog, en la pestaña.
Multilenguaje, multillenguatge, 多语言 Llegar a todos. Arribar a tot el món. 大家达成.
HTML/CSS Marcas básicas.
Psicoafirma. Contenidos home tratamientos Niños y adolescents Hiperactividad / Desatencion Problemas de conducta Victimas de maltrato Ansiedad, Miedos.
Curso de Diseño Web Profesor: Mario Figge. El Modelo de Cajas (Box Model)
Anatomía de la declaración La declaración consta de dos partes:  Propiedad  Valor Selector Propiedad Valor A { color: #000013;}  La propiedad es una.
PLANTILLAS Tutorial de práctica. Plantillas en DW Las plantillas son archivos que estandarizan la forma en que se ven los sitios web, de esta manera podremos.
Disposición de la división de las páginas: La zona de contenido principal tendrá 25 píxeles de espacio en blanco en la parte izquierda superior. /*División.
DESARROLLANDO TEMPLATES PARA JOOMLA! 1.5 Ing. Edwin Rolando Paredes Calderón. Comercio Electrónico.
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
Curso: XML, de los datos a la presentación Julio de 2005 CAPTIVA · eXtensible Stylesheet Language Formatting Objects.
DESARROLLO DE APLICACIONES
CSS div.
Portafolio Electrónico (Google site)
CSS Estructura.
3 PROGRAMAR EN UN LENGUAJE DE HIPERTEXTO L.I. OSWALDO MARTINEZ C. EDPW.
960 Grid + Drupal Themes Guía de supervivencia Drupal Camp | Guatemala 2010.
Por principio un DIV, aunque su contenido sea muy pequeño ocupa todo el ancho de su padre generalmente el body, ya que son elementos de bloque. Recordar.
DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas Posicionamiento con CSS.
El Sistema de Tema de Drupal Experiencia en Infomed.
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.
UNIVERSIDAD CAPITÁN GENERAL GERARDO BARRIOS FACULTAD DE CIENCIA Y TECNOLOGIA LICENCIATURA EN COMPUTACIÓN MÓDULO I: DISEÑO GRAFICO DOCENTE: ING. EDWIN ROLANDO.
Diseño Web y Multimedia 1 Clase 4 Docente: Josué Fortis.
. ¿Cómo crear y administrar una web con Wordpress? Santiago, 1 de octubre 2012.
Karina Quispe. Multiplataforma Simple Esta en todos lados No es mas que simple texto Libre.
LAS PAGINAS WEB. LAS PAGINAS WEB ¿QUE ES UNA PAGINA WEB? Una página Web, también conocida como una página de Internet, es un documento electrónico.
Tablas Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación.
Scripts para elementos adaptables + Metodología
GUIA DE CSS 3 BASICA AUTOR: CARLOS BERBECI QUE ES CSS3 ? CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML.
Explicación del trabajo académico y Proyecto Final
Páginas web Una página web es un documento visible en la World Wide Web mediante un navegador. Tipos de web EstáticasDinámicas Un sitio web es un conjunto.
HTML. HTML 5 Características –Es una versión basada en HTML 4 –Manejo de la aplicación y multimedia. –Tags específicos para diferentes contenidos.
INTRODUCCIÓN HTML. QUE ES HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. HTML es un lenguaje de hipertexto.
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,
¿Qué es el theming? Es el proceso de generar html y css a partir de los datos de nuestra aplicación. El diseño de una aplicación web hecha con Drupal lo.
Pintando Drupal Marco Villegas
EJEMPLOS DE IMÁGENES EN PHOTOSHOP por SISTEMAS.
Transcripción de la presentación:

Drupal Theming

Themes Control del diseño HTML, CSS, imágenes, Javascript, etc.

Drupal Theming Apariencia : Photoshop, Illustrator, Fireworks, etc. Hojas de estilo (CSS) Adaptar HTML generado por drupal

3 pasos 1. Info Files (.info) 2. Template Files (.tpl.php) 3. Adaptar funciones

Estructura Theme

1. Info File 2. Template Files.tlp.php 3. Funciones y variables.

Primer Paso:.Info File Nombre y descripción Screenshot ó imagen Core (Versión Drupal) CSS Regiones Features Características

Nombre y descripción name = Drupal México description = Theme elaborado en el taller de Drupal

Screenshot screenshot = images/screenshot.png

Core core = 6.x base theme = zen

CSS stylesheets[all][] = styles.css

Definir Regiones regions[left] = left sidebar regions[right] = right sidebar regions[navbar] = navigation bar regions[content_top] = content top regions[header] = header regions[footer] = footer

Características features[] = logo features[] = name features[] = slogan

2 paso : Template Files (.tpl.php) Existen 5 templates básicos Page.tpl.php block.tpl.php node.tpl.php box.tpl.php comment.tpl.php

Templates Básicos Page.tpl.php

Templates Básicos block.tpl.php

Templates Básicos node.tpl.php

Templates Básicos box.tpl.php

Templates Básicos comment.tpl.ph p

Templates dinámicos Duplicar node.tpl.php Reenombrar node-nodetype.tpl.php node- blog.tpl.php

Templates dinámicos Front disponible en Drupal 6.-x

Templates dinámicos

Importante! Copiar desde el Core al Theme

Templates dinámicos

3 Paso: Funciones template.tpl.php Consultar API Drupal

Zen & 960.gs

¿Que demonios es Zen? Theme Framework

Zen Garden

960.gs CSS Framework Basado en grid de 12 y 16 columnas

960.gs Clases CSS container grid prefix suffix alpha omega

960.gs ejemplos CONTENIDO

960.gs Area disponible 940 px Padding 10 px por lado