DISEÑO WEB RESPONSIVO

RWD

¡¡¡ BIENVENIDOS !!!

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

Diseño Web Responsivo

¿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

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.

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

No me jodas la J!

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”.

¿QUÉ ES EL DISEÑO WEB RESPONSIVO?

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

Piensa en… DISEÑAR PRIMERO PARA MÓVILES

¿CÓMO ENFOCARNOS?

No pierdas de vista tu destino, tu mercado, tus clientes, tus usuarios

Diseño Web Responsivo

LAS HERRAMIENTAS DE TRABAJO

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

LAMPP o similar Un CMS J! “limpio” Mozilla Firefox

o Plugin Firebug o Plugin Web Developer

Notepad ++

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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

EL PLAN MAESTRO

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

MOCK-UP (bosquejo – maqueta - prototipo)

Definición de espacios o sectores Tenemos un preview Ayuda para la construcción del XML Da idea de contenidos a mostrar

¿Para qué sirven?

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

Ventajas

Podes hacer arreglos y ajustes antes de trabajar, o corregir luego la obra a golpes de martillo.

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

HERRAMIENTAS PARA MOCK-UP

Pencil Project Plugin para Firefox

http://www.evolus.vn/Pencil/Downloads.html

Hot Gloo On line – Gratuito : http://www.hotgloo.com/lookup

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/

Iphone Mockup On line con dos modos – Gratuito : http://iphonemockup.lkmc.ch/

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

PENSAMIENTO SEMÁNTICO

CSS HTML

JAVASCRIPT

Adjetivos Adverbios Nombres

Sustantivos

Verbos

Página Web

<H1> <DIV> <SPAN> <P>

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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

Normalmente

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

MAQUETACIÓN CSS

Reset o Reinicio CSS Estilos CSS de la maqueta 1

2 Estilos de J!

Con Frameworks

Framework CSS Ajustes 1

2 Estilos de J!

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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>

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

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

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

INDEX.PHP CON HTML5

Etiquetas HTML5 Nuevas

nav, section, article, footer, header, mark, time, meter, progress, aside, figure, input type="date | time | email | url | tel | search | ...", required, input spinner, sliders, dataList, placeholder, audio, video, svg, etc…. (investigar)

En J! ver Beez5

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

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

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

CSS v3

Módulos

http://www.w3.org/TR/CSS/

Mantener CSS2

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.

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

GRIDS CSS RESPONSIVOS

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/

Preparan el skeleton para diferentes tamaños de pantalla dividiéndolo en sectores.

Estudiar su comportamiento, experimentar

Diseño Web Responsivo

Copyleft 2012 - Miguel Tuyaré – http://www.migueltuyare.com.ar

PRACTICANDO…

- Creación de una plantilla J! utilizando Simplegrid

Las caricaturas corresponden al personaje Mafalda de Quino http://www.quino.com.ar/

GRACIAS