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
100
¿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
65
Agile & Big Data
vickyale
1
33
Clean Data with Python
vickyale
0
210
AoG Workshop for IWD19
vickyale
0
120
Introducción a Actions for Google Assistant
vickyale
0
51
Other Decks in Technology
See All in Technology
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
170
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
180
Google Cloud で始める Cloud Run 〜AWSとの比較と実例デモで解説〜
risatube
PRO
0
110
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
37
15k
事業貢献を考えるための技術改善の目標設計と改善実績 / Targeted design of technical improvements to consider business contribution and improvement performance
oomatomo
0
100
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
320
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
170
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
0
210
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
850
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
32k
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
270
.NET 9 のパフォーマンス改善
nenonaninu
0
1k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
How to Ace a Technical Interview
jacobian
276
23k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Gamification - CAS2011
davidbonilla
80
5.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Visualization
eitanlees
146
15k
Code Review Best Practice
trishagee
65
17k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
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