Taller diseño web responsivo

3,963 views
3,824 views

Published on

Presentación dada en el Taller de Diseño Responsivo - Universidad ARCIS - Santiago de Chile - Chile - 24/07/2012

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

No Downloads
Views
Total views
3,963
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
67
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Taller diseño web responsivo

  1. 1. ¡¡¡ BIENVENIDOS !!! DISEÑO WEB RESPONSIVO RWDCopyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  2. 2. Diseño Web Responsivo 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!Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  3. 3. Diseño Web Responsivo ¿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”.Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  4. 4. Diseño Web Responsivo ¿CÓMO ENFOCARNOS? Piensa en… DISEÑAR PRIMERO PARA MÓVILES No pierdas de vista tu destino, tu mercado, tus clientes, tus usuariosCopyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  5. 5. Diseño Web Responsivo LAS HERRAMIENTAS DE TRABAJO LAMPP o similar Un CMS J! “limpio” Mozilla Firefox o Plugin Firebug o Plugin Web Developer Notepad ++Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  6. 6. Diseño Web Responsivo 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 alternativasCopyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  7. 7. Diseño Web Responsivo 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.Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  8. 8. Diseño Web Responsivo HERRAMIENTAS PARA MOCK-UP  Hot Gloo On line – Gratuito : http://www.hotgloo.com/lookup Pencil Project Plugin para Firefox  Dub – Denim Software Descargable Basado en Java – Todos los OS http://dub.washington.edu:2007/projects/denim/download/  Wireframe Tools On line – Gratuito previo registro : http://wireframe.talltree.us/default.asp  MockingBird On line - Gratuito : https://gomockingbird.com/mockingbird/#  Mockflow On line – Gratuito y de pago : http://www.mockflow.com/signup/  Serena Prototype Composer Software para Windows – Community Edition Gratuita con limitaciones http://www.serena.com/products/prototype-composer/index.html  FluidIA On line – Gratuito : http://stage.fluidia.org/  Cacoo On line – Gratuito y de pago : https://cacoo.com/pricing  Lumzy On line – Gratuito : http://lumzy.com/app/ http://www.evolus.vn/Pencil/Downloads.html  Iphone Mockup On line con dos modos – Gratuito : http://iphonemockup.lkmc.ch/Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  9. 9. Diseño Web Responsivo PENSAMIENTO SEMÁNTICO CSS Adjetivos HTML Adverbios Nombres <H1> <DIV> Sustantivos <SPAN> <P> JAVASCRIPT Verbos Página WebCopyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  10. 10. Diseño Web Responsivo 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 layoutsCopyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  11. 11. Diseño Web Responsivo MAQUETACIÓN CSS Normalmente  Reset o Reinicio CSS 1  Estilos CSS de la maqueta 2  Estilos de J! Con Frameworks  Framework CSS 1  Ajustes 2  Estilos de J!Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  12. 12. Diseño Web Responsivo INDEX.PHP - SKELETON 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- >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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></ script </head> <body> <div class="wrap"> - Logo - Menú - Buscar - Ruta - Users X - Izquierda / Left - Contenidos / Content - Derecha / Right - Users X - Footer </div> </body> </html>Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  13. 13. Diseño Web Responsivo 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->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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <header> - Logo Etiquetas HTML5 Nuevas <nav> - Menú LI </nav> nav, section, article, footer, - Buscar header, mark, time, meter, </header> <div class=“wrap”> progress, aside, figure, input - Ruta - Users X type="date | time | email | url | - Izquierda / Left tel | search | ...", required, - Contenidos / Content - Derecha / Right input spinner, sliders, dataList, - Users X placeholder, audio, video, svg, etc…. </div> <footer> investigar ( ) - Footer </footer> </body> </html> En J! ver Beez5Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  14. 14. Diseño Web Responsivo :: HTML v5 :: Wireframe típico de HTML5 Código típico de HTML5 http://www.w3.org/TR/html5/ Imperdible!!!! http://joshduck.com/periodic+table.htmlCopyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  15. 15. Diseño Web Responsivo 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. http://www.w3.org/TR/CSS/  Selectores: attribute selectors.  Formatos: media queries, multiple column layout, speech.Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  16. 16. Diseño Web Responsivo GRIDS CSS RESPONSIVOS Preparan el skeleton para diferentes tamaños de pantalla dividiéndolo en sectores.  Simplegrid: http://simplegrid.info/  Less Framework 4: http://lessframework.com/  Bootstrap: http://twitter.github.com/bootstrap/  Foundation 3: http://foundation.zurb.com/  Skeleton: http://www.getskeleton.com/  InuitCSS: http://csswizardry.com/inuitcss/  YUI Grids: http://developer.yahoo.com/yui/grids/  960gs: http://960.gs/  Gumby Framework: http://www.gumbyframework.com/ Estudiar su comportamiento, experimentarCopyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
  17. 17. Diseño Web Responsivo PRACTICANDO… - Creación de una plantilla J! utilizando Simplegrid GRACIAS Las caricaturas corresponden al personaje Mafalda de QuinoCopyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar http://www.quino.com.ar/

×