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
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/