por Rodrigo Galindez

Un paseo por el futuro:
CSS3 y HTML5
por Rodrigo Galindez
Rodrigo Galindez
Diez años de experiencia en
diseño web. Experiencia trabajando en
startups en New York,
Londres y Ginebra. Clientes
incluyen Avaya Inc., Clarín,
Zendesk, Olapic.
Módulos
Text.
Color.
Media Queries.
Grid Positioning.
Transitions.
Transformations.
Nuevas Propiedades
border-radius
text-shadow
box-shadow
gradients
opacity
RGBa, HSL, HSLa
@font-face
media queries
multi-colum layouts
transitions
transform
Módulo
Módulo
border-radius
div {
border-radius: 15px;
}
“Rectangles with
rounded corners are
everywhere! Just look
around this room!”
–STEVE JOBS, Apple
–STEVE JOBS, Apple
interuserface.net/2011/06/own-a-shape/
barlab.mgh.harvard.edu/papers/Curved2006.pdf
Módulo
text-shadow
div h1 {
text-shadow: 3px 3px #333;
}
Módulo
box-shadow
div {
box-shadow: 5px 5px 5px #333;
}
Módulo
gradients
div {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1)
0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, left
bottom, color-stop(0%,rgba(255,255,255,1)), color-stop
(47%,rgba(246,246,246,1)), color-stop(100%,rgba
(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba
(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba
(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1)
0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /*
Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1)
0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /*
background: -o-linear-gradient(top, rgba(255,255,255,1)
0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /*
Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1)
0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /*
IE10+ */
background: linear-gradient(top, rgba(255,255,255,1)
0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); /*
W3C */
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#ffffff',
endColorstr='#ededed',GradientType=0 ); /* IE6}
www.colorzilla.com/gradient-editor/
Módulo
RGBa, opacity
div {
background-color: rgba(255, 255, 255, 0.5);
}
div {
background-color: #ffffff;
opacity: 0.5;
}
“Browser vendors pushed the spec
along.”
–DAN CEDERHOLM, Simplebits
Vendor prefixes
WEBKIT
MOZILLA
OPERA
MICROSOFT
-webkit-
-moz-
-o-
-ms-
div {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
“Grids add order, continuity and
harmony to the presentation of
information.”
–KHOI VINH, ex Design Director, New York Times
www.rodrigogalindez.com
www.stopdesign.com
Columnas
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse vel leo nunc,
bibendum sagittis libero.
Pellentesque posuere nibh vitae
lacus adipiscing consequat.
Donec sit amet sodales arcu.
Proin in odio ligula. Aenean
pharetra aliquam erat vel
porttitor.
Aenean rutrum felis ut orci
tempor a adipiscing tortor
ullamcorper. Etiam vestibulum
venenatis velit, eget egestas
lacus adipiscing ac.
Pellentesque odio nisl, rhoncus
molestie euismod eget, pulvinar
sit amet diam. Ut pretium
blandit pulvinar. In euismod
ante sed ipsum luctus viverra.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas a tellus a lorem
vulputate varius sollicitudin at
sapien. Nunc arcu tortor,
tempus in aliquam vitae,
placerat vel tellus. Morbi
vestibulum, felis viverra
ultricies pellentesque, velit nibh
consequat massa, eget
sollicitudin urna justo in nunc.
Sed vitae varius orci. Praesent
ultrices gravida nisi ac
posuere.Etiam fringilla, ipsum
ut gravida placerat, augue dui
vehicula massa, laoreet luctus
sem nulla eu mauris. Etiam velit
enim, rhoncus accumsan
sodales ac, accumsan sodales
ipsum. Aliquam ut molestie elit.
Nunc aliquet, nisi nec lobortis
condimentum, purus purus
lobortis urna, vel lacinia quam
ligula vel erat.
multi-column layouts
div p {
column-count: 3;
}
Grillas
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.
Suspendisse vel leo nunc,
bibendum sagittis libero.
Pellentesque posuere nibh
vitae lacus adipiscing
consequat. Donec sit
amet sodales arcu. Proin
in odio ligula. Aenean
pharetra aliquam erat vel
porttitor.
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.
Suspendisse vel leo nunc,
bibendum sagittis libero.
Pellentesque posuere nibh
vitae lacus adipiscing
consequat. Donec sit
amet sodales arcu. Proin
in odio ligula. Aenean
pharetra aliquam erat vel
porttitor.
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.
Suspendisse vel leo nunc,
bibendum sagittis libero.
Pellentesque posuere nibh
vitae lacus adipiscing
consequat. Donec sit
amet sodales arcu. Proin
in odio ligula. Aenean
pharetra aliquam erat vel
porttitor.
grids
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit.
Suspendisse vel leo nunc,
bibendum sagittis libero.
Pellentesque posuere nibh
vitae lacus adipiscing
consequat. Donec sit
amet sodales arcu. Proin
in odio ligula. Aenean
pharetra aliquam erat vel
porttitor.
Responsive Web Design
“Facetas” de la
experiencia.
Receptivo al medio:
mobile, tablet,
desktop.
“The control which designers know in
the print medium, and often desire in the
web medium, is simply a function of
the limitation of the printed
page. We should embrace the fact
that the web doesn’t have the same
constraints, and design for this
flexibility.”
–JOHN ALLSOPP, “a Dao of Web Design”
bostonglobe.com
modulariz
ótnsaitipo
grafíaestru
coritmolin
Tipografía en CSS3
Incluír tipografías sin
necesidad de Flash u
otras técnicas.
Progressive Enhancement
“Premiar” a usuarios
con navegadores
modernos.
El contenido será
igual de accesible en
navegadores
antiguos.
“Tiny visual enhancements that do not
affect layout. Techniques that make
our lives easier.”
–DAN CEDERHOLM, Simplebits
Do websites need to look
exactly the same in every
browser?
Tipos de UI
ELEMENTOS CRÍTICOS
ELEMENTOS NO CRÍTICOS
Definen la
aplicación.
Decorativos,
prescindibles para el
funcionamiento.
Usando CSS3 hoy
USABLE AHORA
CON PRECAUCIÓN
border-radius
text-shadow
box-shadow
opacity
@font-face
transitions
RGBa
media queries
multi-column layouts
twitter.com
apple.com/iphone
caniuse.com
modernizr.com
Ejemplo
HTML5
“Escuchar” a los
desarrolladores.
Web applications.
Web forms.
Alternativas nativas
a plugins.
Mejor semántica.
“Solve real problems”
–HTML5 principle.
<a href=””>
<dl>
<dt>Aviación<dt>
<dd>Diseño y utilización de aeronaves.<dd>
</dl>
</a>
Semántica mejorada
header
nav
section
article
aside
footer
<header>
<section>
<footer>
<aside>
Semántica mejorada
<div id=”nav”>
<nav>
…
…
</div>
</nav>
<div class=”section”>
<div class=”section-header”>
<h1>Título de sección</h1>
</div>
…
</div>
<section>
<header>
<h1>Título de sección</h1>
</header>
…
</section>
HTML5 Audio
<audio controls>
<source src="musica.mp3" type="audio/ogg" />
Sin soporte para HTML5 Audio
</audio>
HTML5 Video
<video controls>
<source src="movie.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.webm" type='video/webm;
codecs="vp8, vorbis"' />
</video>
Diseño de formularios
NUEVOS ATRIBUTOS
NUEVOS TIPOS
placeholder
autofocus
required
search
range
date
Diseño de formularios
type=”email”
type=”tel”
type=”url”
Recursos
caniuse.com
modernizr.com
selectivizr.com
css3generator.com
fontsquirrel.com
colorzilla.com/
gradient-editor
Recursos
jsfiddle.net
diveintohtml5.org
960.gs
html5doctor.com
html5boilerplate.com
css3.info
Libros
Gracias!
@rodrigogalindez
www.rodrigogalindez.com