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
340
How to be the best web designer in the world.
swwweet
6
1.3k
Design for loading
swwweet
5
520
Mobile First: as difficult as doing things right
swwweet
225
10k
One Size Fits None
swwweet
12
870
One Size Fits None - From the Front 2013
swwweet
2
720
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
600
Other Decks in Programming
See All in Programming
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
品質ワークショップをやってみた
nealle
0
590
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
CSC305 Lecture 09
javiergs
PRO
0
300
CSC509 Lecture 05
javiergs
PRO
0
310
Leading Effective Engineering Teams in the AI Era
addyosmani
7
560
AkarengaLT vol.38
hashimoto_kei
1
110
Developer Joy - The New Paradigm
hollycummins
1
330
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
530
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
610
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Building an army of robots
kneath
306
46k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Navigating Team Friction
lara
190
15k
Visualization
eitanlees
149
16k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Git: the NoSQL Database
bkeepers
PRO
431
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
4 Signs Your Business is Dying
shpigford
185
22k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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