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ó...
Search
Swwweet
January 25, 2012
Programming
3
200
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
330
How to be the best web designer in the world.
swwweet
6
1.2k
Design for loading
swwweet
5
500
Mobile First: as difficult as doing things right
swwweet
223
9.7k
One Size Fits None
swwweet
12
860
One Size Fits None - From the Front 2013
swwweet
2
710
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
580
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
270
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
230
20250708_JAWS_opscdk
takuyay0ne
2
130
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
330
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
100
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
730
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
効率的な開発手段として VRTを活用する
ishkawa
0
160
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
ニーリーにおけるプロダクトエンジニア
nealle
0
930
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Producing Creativity
orderedlist
PRO
346
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building Applications with DynamoDB
mza
95
6.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
A designer walks into a library…
pauljervisheath
207
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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