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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Victoria Ubaldo
July 21, 2017
Technology
68
1
Share
Mobile Sites
Talk for Google I/O Extended Lima 17.
Victoria Ubaldo
July 21, 2017
More Decks by Victoria Ubaldo
See All by Victoria Ubaldo
Introduction to NLP : How to improve accessibility with Machine Learning
vickyale
1
220
Analizar Datos con Python y Google Colab
vickyale
1
160
¿Cómo estar al día en Tecnología, como profesional tech?
vickyale
1
480
Primeros pasos en AI/ML
vickyale
0
120
ML Zero to Hero in GCP
vickyale
0
90
Agile & Big Data
vickyale
1
57
Clean Data with Python
vickyale
0
260
AoG Workshop for IWD19
vickyale
0
170
Introducción a Actions for Google Assistant
vickyale
0
83
Other Decks in Technology
See All in Technology
AI フレンドリーなエラー監視を TypeScript で実現する
shinyaigeek
2
200
Kiro CLI v2.0.0がやってきた!
kentapapa
0
250
サプライチェーンセキュリティの空白地帯 - 信頼できる”依存性”の未来を考える
rung
PRO
2
590
探して_入れて_作って_使う_Agent_Skills___LT.pdf
peintangos
2
130
チームで実践する AI-DLC 思考の軌跡を残すチェックポイント設計
belongadmin
0
380
Cloud Run のアップデート 触ってみる&紹介
gre212
0
280
自称宇宙最速で不合格となったAIP-C01にリベンジを果たすべくAIで問題集アプリを作ってみた。
yama3133
0
260
コードレビューを制するチームがソフトウェアデリバリーのフローを制す / Beyond Code Review: Distributing Its Responsibilities Across the SDLC
mtx2s
3
560
AI Adaptable なテストを整える工夫 / Ways to Make Your Tests AI-Adaptable
bitkey
PRO
2
190
組織の中で自分を経営する技術
shoota
0
230
Dynamic Workersについて
yusukebe
2
550
個人の発見を、組織の知恵に 〜生成AI活用を"探索"から"組織の仕組み"へ〜
kintotechdev
2
400
Featured
See All Featured
Optimizing for Happiness
mojombo
378
71k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
130
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
570
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
300
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
540
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
300
Marketing to machines
jonoalderson
1
5.3k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
350
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
370
Skip the Path - Find Your Career Trail
mkilby
1
130
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.3k
Chasing Engaging Ingredients in Design
codingconduct
0
200
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