DISEÑO WEB RESPONSIVO RWD

Tamaño: px

Comenzar la demostración a partir de la página:

Download "DISEÑO WEB RESPONSIVO RWD"

Raúl Márquez Arroyo
hace 6 años
Vistas:

1 BIENVENIDOS!!! DISEÑO WEB RESPONSIVO RWD

Objetivos Entender el diseño web responsivo.

desarrollar una plantilla J! de tipo responsiva.

desde cero. Cómo lo haremos y qué compartiremos?

Grillas CSS responsivas Tratamiento de imágenes

2 Objetivos Entender el diseño web responsivo. Conocer las herramientas disponibles para desarrollar una plantilla J! de tipo responsiva. Desarrollar una plantilla responsiva para J! desde cero. Cómo lo haremos y qué compartiremos? Estructura de una plantilla para J! Grillas CSS responsivas Tratamiento de imágenes y medios HTML5 CSS3 Funcionamiento de J! - APIs No me jodas la J!

3 QUÉ ES EL DISEÑO WEB RESPONSIVO? Conjunto de técnicas de diseño y programación que facilitan a una interfaz adaptarse a diversas resoluciones de pantalla según sea el dispositivo que la contenga.

4 CÓMO ENFOCARNOS? Piensa en DISEÑAR PRIMERO PARA MÓVILES No pierdas de vista tu destino, tu mercado, tus clientes, tus usuarios

5 LAS HERRAMIENTAS DE TRABAJO LAMPP o similar Un CMS J! limpio Mozilla Firefox o Plugin Firebug o Plugin Web Developer Notepad ++

6 EL PLAN MAESTRO PRIMEROS PASOS Mock-up Skeletons Maquetación CSS SEGUNDOS PASOS APIS J! -> JDOC y otras Estilos CSS de J! Menús -> Diversidad Override y Presentaciones alternativas

Ventajas Incitan a la crítica, discusión y evaluación Son de bajo costo Se pueden modificar fácil y rápidamente Incitan

7 MOCK-UP (bosquejo maqueta - prototipo) Para qué sirven? Definición de espacios o sectores Tenemos un preview Ayuda para la construcción del XML Da idea de contenidos a mostrar Ventajas Incitan a la crítica, discusión y evaluación Son de bajo costo Se pueden modificar fácil y rápidamente Incitan a la invención o experimentación Permite centrarse en la funcionalidad y en el contenido Podes hacer arreglos y ajustes antes de trabajar, o corregir luego la obra a golpes de martillo.

HERRAMIENTAS PARA MOCK-UP Pencil Project Plugin para Firefox Hot Gloo On line Gratuito : http://www.hotgloo.com/lookup Dub Denim Software Descargable Basado en Java Todos los OS http://dub.washington.

8 HERRAMIENTAS PARA MOCK-UP Pencil Project Plugin para Firefox Hot Gloo On line Gratuito : Dub Denim Software Descargable Basado en Java Todos los OS Wireframe Tools On line Gratuito previo registro : MockingBird On line - Gratuito : Mockflow On line Gratuito y de pago : Serena Prototype Composer Software para Windows Community Edition Gratuita con limitaciones FluidIA On line Gratuito : Cacoo On line Gratuito y de pago : Lumzy On line Gratuito : Iphone Mockup On line con dos modos Gratuito :

9 PENSAMIENTO SEMÁNTICO CSS Adjetivos Adverbios HTML Nombres Sustantivos <H1> <DIV> <SPAN> <P> JAVASCRIPT Verbos Página Web

10 SKELETON component.php: presentación amigable de contenidos error.php: Presentación de errores favicon.ico: Icono para el navegador index.html: seguridad index.php: archivo inicial de renderizado template_preview.ext: vista previa de la plantilla template_thumbnail.ext: miniatura de la plantilla (206x150px) template.css print.css template_rtl.css *.css templates overrides alternative layouts

11 MAQUETACIÓN CSS Normalmente 1 Reset o Reinicio CSS Estilos CSS de la maqueta 2 Estilos de J! Con Frameworks 1 Framework CSS Ajustes 2 Estilos de J!

12 INDEX.PHP - SKELETON defined('_jexec') or die; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="<?php echo $this- >language;?>" lang="<?php echo $this->language;?>" dir="<?php echo $this- >direction;?>" > <head> <jdoc:include type="head" /> <link type="text/css" rel="stylesheet" href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/template.css" media="all"/> <script type="text/javascript" src=" script </head> <body> <div class="wrap"> - Logo - Menú - Buscar - Ruta - Users X - Izquierda / Left - Contenidos / Content - Derecha / Right - Users X - Footer </div> </body> </html>

INDEX.PHP CON HTML5 defined('_jexec') or die; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?

php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/template.css" media="all"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.

13 INDEX.PHP CON HTML5 defined('_jexec') or die; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="<?php echo $this->language;?>" lang="<?php echo $this->language;?>" dir="<?php echo $this->direction;?>" > <head> <jdoc:include type="head" /> <link type="text/css" rel="stylesheet" href="<?php echo $this->baseurl;?>/templates/<?php echo $this->template;?>/css/template.css" media="all"/> <script type="text/javascript" src=" </head> <body> <header> - Logo <nav> - Menú LI </nav> - Buscar </header> <div class= wrap > - Ruta - Users X - Izquierda / Left - Contenidos / Content - Derecha / Right - Users X </div> <footer> - Footer </footer> </body> </html> Etiquetas HTML5 Nuevas nav, section, article, footer, header, mark, time, meter, progress, aside, figure, input type="date time url tel search...", required, input spinner, sliders, datalist, placeholder, audio, video, svg, etc. (investigar) En J! ver Beez5

14 :: HTML v5 :: Wireframe típico de HTML5 Código típico de HTML5 Imperdible!!!!

CSS v3 Mantener CSS2 Módulos Nuevas funcionalidades http://www.w3.

Backgrounds: background-origin, background-clip, background-size, layering multiple background images.

15 CSS v3 Mantener CSS2 Módulos Nuevas funcionalidades Bordes: border-color, border-image, border-radius, box-shadow. Backgrounds: background-origin, background-clip, background-size, layering multiple background images. Color: HSL colors, HSLA colors, RGBA colors opacity. Texto: text-shadow, text-overflow. Interface: box-sizing, resize. Selectores: attribute selectors. Formatos: media queries, multiple column layout, speech.

16 GRIDS CSS RESPONSIVOS Preparan el skeleton para diferentes tamaños de pantalla dividiéndolo en sectores. Simplegrid: Less Framework 4: Bootstrap: Foundation 3: Skeleton: InuitCSS: YUI Grids: 960gs: Gumby Framework: Estudiar su comportamiento, experimentar

17 PRACTICANDO - Creación de una plantilla J! utilizando Simplegrid GRACIAS Las caricaturas corresponden al personaje Mafalda de Quino

Documentos relacionados

DESCRIPCIÓN ESPECÍFICA NÚCLEO: Núcleo Sector Comercio y Servicios.

DESCRIPCIÓN ESPECÍFICA NÚCLEO: Núcleo Sector Comercio y Servicios. SUBSECTOR: Informática y Comunicación. Nombre del Módulo: Creación de páginas Webs Código: CSTI0168 total: 60 horas Objetivo General: