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
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
260
How to be the best web designer in the world.
swwweet
6
1.1k
Design for loading
swwweet
5
440
Mobile First: as difficult as doing things right
swwweet
221
8.8k
One Size Fits None
swwweet
12
790
One Size Fits None - From the Front 2013
swwweet
2
640
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
1k
The future of code
swwweet
4
500
Other Decks in Programming
See All in Programming
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
230
マルチモジュールにおけるテスト最適化
fxwx23
0
210
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
5
1.2k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
300
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
210
GoのIteratorに詳しくなってしまう
inatonix
1
210
Modernisation Progressive d’Applications PHP
hhamon
0
110
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
420
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Bash Introduction
62gerente
608
210k
Fireside Chat
paigeccino
31
2.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Being A Developer After 40
akosma
84
590k
Agile that works and the tools we love
rasmusluckow
327
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
The Mythical Team-Month
searls
218
43k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
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