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
Mobile Sites
Search
Victoria Ubaldo
July 21, 2017
Technology
1
52
Mobile Sites
Talk for Google I/O Extended Lima 17.
Victoria Ubaldo
July 21, 2017
Tweet
Share
More Decks by Victoria Ubaldo
See All by Victoria Ubaldo
Introduction to NLP : How to improve accessibility with Machine Learning
vickyale
1
180
Analizar Datos con Python y Google Colab
vickyale
1
96
¿Cómo estar al día en Tecnología, como profesional tech?
vickyale
1
370
Primeros pasos en AI/ML
vickyale
0
95
ML Zero to Hero in GCP
vickyale
0
63
Agile & Big Data
vickyale
1
31
Clean Data with Python
vickyale
0
210
AoG Workshop for IWD19
vickyale
0
120
Introducción a Actions for Google Assistant
vickyale
0
48
Other Decks in Technology
See All in Technology
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
110
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
1
110
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
270
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
490
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
190
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
220
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
2
230
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
120
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
GitHub's CSS Performance
jonrohan
1030
460k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
Automating Front-end Workflow
addyosmani
1366
200k
The Language of Interfaces
destraynor
154
24k
What's new in Ruby 2.0
geeforr
343
31k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Transcript
Sitios Web Móviles Victoria Ubaldo G. Software Engineer @VikyAle
¿Cómo es la web que conocemos?
None
2B dispositivos
5B dispositivos conectados a la web
` Visibilidad Formato ligero Presentación intuitiva
vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
13% 87% Mobile web Apps
80% de tiempo gasta un usuario en solo 3 aplicaciones
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
CERO Es el número promedio de aplicaciones instaladas por usuarios
al mes Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
Importancia de los sitios web móviles
` Visibilidad Formato ligero Presentación intuitiva
` Una sola compilación para todas las plataformas Adaptabilidad Costes
reducidos Abierto para todos Seguimiento sencillo
de usuarios abandonan un sitio que toma más de 3
segundos en cargar. 53%
Velocidad de los sitios web móviles
` Herramientas Básicas 1. Configurar DevTools demo
` Herramientas Básicas 2. Emular experiencia de un usuario de
dispositivo móvil Panel Network Capture Screenshots Disable Cache(Regular 3G)
` Herramientas Básicas 3. Analizar solicitudes DomContentLoaded
Tecnologías Web Avanzadas
AMP Accelerated Mobile Pages
AMP HTML = Normal HTML Source: comScore Mobile Metrix, U.S.,
Age 18+, June 2015
None
None
None
None
None
PWA Progressive Web Apps
es un nuevo nivel en mejorar la calidad de la
experiencia de uso Progressive Web Apps
None
None
Capacidad
Capacidad Alcance
Capacidad Alcance
Capacidad Alcance
Capacidad Alcance
Confiable Rápida Engaging (Involucrar al usuario) La experiencia de uso
necesita ser...
None
None
`
¿Cómo empiezo?
Tres enfoques para PWA-ifying desde el principio una sola característica
una versión simple
None
None
None
None
None
` 70% de bytes de tráfico en internet es video
` 70% de bytes de tráfico en internet es video
Media Sessions API Background Fetch Full-screen orientation
`
`
https://codelabs.developers.google.com/
None
Jake Archibald @jaffathecake Paul Lewis @aerotwist Addy Osmani @addyosmani Paul
Kinlan @Paul_Kinlan Googlers que trabajan a diario en herramientas y mejoras para PWA
Certificado Sitios Web para Móviles
None
None
None
None
Gracias! Twitter : @vikyale