Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Edición de bolisillo: la web en dispositivos móviles
Search
Swwweet
January 25, 2012
Programming
3
190
Edición de bolisillo: la web en dispositivos móviles
Swwweet
January 25, 2012
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
240
How to be the best web designer in the world.
swwweet
5
1k
Design for loading
swwweet
4
420
Mobile First: as difficult as doing things right
swwweet
217
8.6k
One Size Fits None
swwweet
12
770
One Size Fits None - From the Front 2013
swwweet
2
620
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
1k
The future of code
swwweet
4
450
Other Decks in Programming
See All in Programming
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
戦略的DDDは重いのか? / Is strategic DDD heavy?
pictiny
3
2.1k
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
130
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
160
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
220
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
910
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
520
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
Timeline エディター拡張入門
yucchiy
0
450
勉強会4_アップデートされたAssistantsAPIを試す
milky04
0
110
Adding Security to Microcontroller Ruby
sylph01
1
160
Featured
See All Featured
Making Projects Easy
brettharned
109
5.5k
How to train your dragon (web standard)
notwaldorf
75
5.2k
What's in a price? How to price your products and services
michaelherold
238
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Happy Clients
brianwarren
92
6.4k
The Cult of Friendly URLs
andyhume
74
5.7k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Building Your Own Lightsaber
phodgson
100
5.7k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Typedesign – Prime Four
hannesfritz
36
2.1k
Optimizing for Happiness
mojombo
370
69k
Transcript
EDICIÓN DE BOLSILLO LA WEB EN DISPOSITIVOS MÓVILES CSS3 HTML5
JS JAVIER USOBIAGA SUBFLASH 2011
a Web Móvil no existe. Sólo existe La Web, y
la vemos de distintas formas. Tampoco existe la Web de Escritorio. Ni la Web de Tablet. Gracias. L Stephen Hay - There is no Movile Web
La web móvil no va de pantallas pequeñas.
La web móvil no va de pantallas táctiles.
La web móvil no va de conexiones lentas.
La web móvil no va de aplicaciones para SO.
La web móvil va del miedo a la pérdida de
control.
optimiza siempre
None
La era de detectar el navegador ha muerto. Llega la
era de detectar las capacidades.
ESTRATEGIAS 1 3 SOLUCIONES A UN MISMO RETO
No hacer nada.
No hacer nada. Hacer una plantilla diferente.
No hacer nada. Hacer una plantilla diferente. Adaptar la web.
No hacer nada. Hacer una plantilla diferente. Adaptar la web.
diseñar con fallback
detectar capacidades http://modernizr.com
rellenar huecos http://yepnopejs.com/ http://bit.ly/listofpolyfills
CSS3 2 OPTIMIZANDO RECURSOS
Menos imágenes.
Menos imágenes. Menos Javascript.
Menos imágenes. Menos Javascript. Menos peticiones.
gradients border-radius RGBa box-shadow @font-face
gradients border-radius RGBa box-shadow @font-face
http://leaverou.me/css3patterns/
http://www.colorzilla.com/gradient-editor/
CSS transforms: scale rotate skew translate
Transitions & Animations
http://mzl.la/ieGCct
3D transforms
http://css3.bradshawenterprises.com/
-webkit-transform: translateZ(0);
media queries @media screen and (max-width:320px){ #container{ width: 300px; }
header nav{ display: none; } }
http://mediaqueri.es
responsive web design #container .column{ width: 31.12164296%; margin-right: 3.3175355%; }
.img-container img{ max-width: 100%; } http://www.alistapart.com/articles/responsive-web-design
responsive web design http://www.abookapart.com/products/responsive-web-design
HTML5 3 EL NAVEGADOR RECUPERA EL CONTROL
viewport <meta name = "viewport" content = "width = device-width,
initial-scale = 1.0" >
video / audio <video controls> <source src="vid.mp4" > <source src="vid.ogv"
> <!-- Puedes añadir un reproductor Flash --> </video>
formularios <input type=”email” /> <input type=”url” /> <input type=”number” />
<input type=”search” /> <input type=”date” /> <input type=”color” />
formularios
HTML5 — JS 4 AMPLIANDO FUNCIONALIDADES
local storage offline (cache) web workers web sockets
canvas http://playbiolab.com/
geolocalización
TOUCH 5 DÍSELO CON GESTOS
touch events addEventListener('touchstart'...) addEventListener('touchmove'...) addEventListener('touchend'...)
touch = touch + click touchstart mouseover mousemove mousedown mouseup
click estilos de :hover
http://plugins.jquery.com/project/swipe swipe
http://jgestures.codeplex.com/ gestures
FRAMEWORKS JS 6 ¿SON NECESARIOS?
http://jqtouch.com http://jquerymobile.com http://www.sencha.com/products/touch http://zeptojs.com
pausa dramática
¡GRACIAS! ¿PREGUNTAS? :-) @HTMLBOY SWWWEET.COM
AGRADECIMIENTOS Y CRÉDITOS 1 BRUCE LAWSON . . . http://brucelawson.co.uk
2 PETER-PAUL KOCH . . . http://quirksmode.org 3 ETHAN MARCOTTE . . http://unstoppablerobotninja.com 4 JEREMY KEITH . . . http://adactio.com 5 LUKE WROBLEWSKY . . http://lukew.com 6 STEPHEN HAY . . . http://the-haystack.com