Web Móvil, Introducción
-
Upload
manuel-padilla -
Category
Documents
-
view
452 -
download
1
description
Transcript of Web Móvil, Introducción
![Page 1: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/1.jpg)
Curso de Desarrollo Web
martes, 11 de diciembre de 12
![Page 2: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/2.jpg)
Curso de Desarrollo Web
martes, 11 de diciembre de 12
![Page 3: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/3.jpg)
<h1>Agenda</h1>
<ol class=”agendaCSS”><li>Introducción</li>
<li>Nativo y Web</li>
<li>Ventajas y Desventajas</li>
<li>Frameworks</li>
<li>Etiquetas</li>
<li>Optimización iOS</li>
<li>jQuery Mobile</li></ol>
martes, 11 de diciembre de 12
![Page 4: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/4.jpg)
<h1>Introducción</h1>
<h2>La Web Móvil</h2>
<h3>¿En verdad existe?</h3>
<p>La web y su contenido esta presente en cualquier dispositivo con acceso a internet y un navegador de buen nivel. No existe una web especifica para tablets o para móviles, el usuario solo quiere acceder al contenido de la web.</p>
martes, 11 de diciembre de 12
![Page 5: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/5.jpg)
<h1>Introducción</h1>
<h2>Entonces, ¿Qué es la Web Móvil</h2>
<p>Es un conjunto de prácticas, librerías para desarrollo, cosas que hay que hacer para generar un recurso de valor para los usuarios más activos.</p>
martes, 11 de diciembre de 12
![Page 6: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/6.jpg)
<h1>Introducción</h1>
<h2>¿Por qué desarrollar para Móvil?</h2>
<ul><li>El móvil ahora representa un dispositivo de primordial importancia para los usuarios.</li><li>Se puede tener un mejor enfoque del usuario.</li><li>Cada día los usuarios utilizan con mayor frecuencia los teléfonos móviles para consumir contenido, obtener servicios.</li><li>Los usuarios prefieren la comodidad de un móvil ante el uso de un equipo de escritorio o portátil.</li>
</ul>
martes, 11 de diciembre de 12
![Page 7: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/7.jpg)
<h1>Nativo y Web</h1>
<h2>¿Que es una aplicación Nativa?</h2>
<p>Una aplicación nativa es aquella que puede ser instalada en el dispositivo y es desarrollada utilizando un lenguaje de programación compatible o establecido por la plataforma en la que se desea instalar.</p>
martes, 11 de diciembre de 12
![Page 8: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/8.jpg)
<h1>Nativo y Web</h1>
<h2>¿Que es una aplicación Web?</h2>
<p>Las aplicaciones web son sencillas de programar, se desarrollan bajo HTML, CSS y JavaScript principalmente. Pueden ser ejecutadas desde cualquier dispositivo que cuente con conexión a internet y un navegador web de buen nivel.</p>
martes, 11 de diciembre de 12
![Page 9: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/9.jpg)
<h1>Nativo y Web</h1>
<h2>¿Nativo o Web?</h2>
<p>Un gran dilema que no tiene una respuesta acertada, cada una tiene sus ventajas y desventajas, lo importante es tener claro para que será utilizada la aplicación y cuales son los objetivos que deberá cumplir.</p>
martes, 11 de diciembre de 12
![Page 10: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/10.jpg)
<h1>Nativo y Web</h1>
martes, 11 de diciembre de 12
![Page 11: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/11.jpg)
<h1>Nativo y Web</h1>
<h2>Aplicaciones Híbridas</h2>
<p>Son aquellas aplicaciones que son desarrolladas como web app´s y posteriormente empaquetadas o compiladas para poder convertirse en aplicaciones nativas que el usuario podrá instalar en sus dispositivos.</p>
martes, 11 de diciembre de 12
![Page 12: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/12.jpg)
<h1>Ventajas y Desventajas</h1>
<h2>Ventajas de las Web App´s</h2>
<ul><li>Pueden ser multiplataforma.</li><li>Desarrollo menos costoso.</li><li>Curva de aprendizaje menor.</li><li>Fácil de desarrollar y sin limitantes.</li><li>Mucha información y ayuda disponible.</li><li>Variadas API´s.</li><li>y muchas más.</li>
</ul>
martes, 11 de diciembre de 12
![Page 13: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/13.jpg)
<h1>Ventajas y Desventajas</h1>
<h2>Desventajas de las Web App´s</h2>
<ul><li>Pueden ser multiplataforma.</li><li>Curva de aprendizaje menor.</li><li>Rendimiento.</li><li>Fiabilidad.</li><li>Accesibilidad.</li><li>y muchas más.</li>
</ul>
martes, 11 de diciembre de 12
![Page 14: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/14.jpg)
<h1>Frameworks</h1>
<h2>Frameworks</h2>
<p>Existen diversos y variados frameworks que nos facilitan el desarrollo de aplicaciones web, entre ellos podemos encontrar.</p>
martes, 11 de diciembre de 12
![Page 15: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/15.jpg)
<h1>Etiquetas</h1>
<h2>Schemas</h2>
<h3>Mail Links</h3><a href="mailto:[email protected]">John Frank</a>
<h3>Phone Links</h3><a href="tel:1-408-555-5555">1-408-555-5555</a>
<h3>Text Links</h3><a href="sms:1-408-555-1212">New SMS Message</a>
martes, 11 de diciembre de 12
![Page 16: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/16.jpg)
<h1>Etiquetas</h1>
<h2>Home Screen Icon</h2>
<link rel="apple-touch-icon"href="icon.png" />
martes, 11 de diciembre de 12
![Page 17: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/17.jpg)
<h1>Etiquetas</h1>
<h2>Full Screen</h2>
<meta name="apple-mobile-web-app-capable" content="yes"/>
martes, 11 de diciembre de 12
![Page 18: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/18.jpg)
<h1>Etiquetas</h1>
<h2>Splash Screen (iOS)</h2>
<link rel="apple-touch- startup-image" href="startup.png" />
martes, 11 de diciembre de 12
![Page 19: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/19.jpg)
<h1>Etiquetas</h1>
<h2>Status Bar (iOS)</h2>
<meta name="apple-mobile-web-app-status-bar-style"content="black" />
martes, 11 de diciembre de 12
![Page 20: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/20.jpg)
<h1>Etiquetas</h1>
<h2>Inputs</h2>
<h3>Búsquedas</h3><input type=”search” />
<h3>Teléfonos</h3><input type=”tel” />
<h3>Correo Electrónico</h3><input type=”email” />
martes, 11 de diciembre de 12
![Page 21: Web Móvil, Introducción](https://reader030.fdocuments.es/reader030/viewer/2022020115/54812c49b4795941578b482a/html5/thumbnails/21.jpg)
Let´s play a gamemartes, 11 de diciembre de 12