Taller diseño web responsivo
-
Upload
miguel-tuyare -
Category
Education
-
view
3.534 -
download
0
description
Transcript of Taller diseño web responsivo
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