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

1. ¡¡¡ BIENVENIDOS !!!
DISEÑO WEB
RESPONSIVO
RWD
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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. 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. 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 usuarios
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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. 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 alternativas
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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. 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. Diseño Web Responsivo
PENSAMIENTO SEMÁNTICO
CSS
Adjetivos
HTML
Adverbios Nombres <H1>
<DIV>
Sustantivos <SPAN>
<P>
JAVASCRIPT
Verbos
Página Web
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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 layouts
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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. 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. 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 Beez5
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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.html
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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. 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, experimentar
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

17. Diseño Web Responsivo
PRACTICANDO…
- Creación de una plantilla J! utilizando Simplegrid
GRACIAS
Las caricaturas corresponden al personaje Mafalda de Quino
Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar
http://www.quino.com.ar/