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
230
How to be the best web designer in the world.
swwweet
5
980
Design for loading
swwweet
4
410
Mobile First: as difficult as doing things right
swwweet
215
8.5k
One Size Fits None
swwweet
12
750
One Size Fits None - From the Front 2013
swwweet
2
610
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
970
The future of code
swwweet
4
430
Other Decks in Programming
See All in Programming
Understanding Ast By Looking
inouehi
0
120
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
2.4k
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.2k
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
ONE WEDGE_Company_Information
1wedge
0
180
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
170
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Design by the Numbers
sachag
274
18k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Done Done
chrislema
178
15k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Building Adaptive Systems
keathley
29
1.8k
Unsuck your backbone
ammeep
661
56k
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