Web Móvil, Introducción

21
Curso de Desarrollo Web martes, 11 de diciembre de 12

description

 

Transcript of Web Móvil, Introducción

Page 1: Web Móvil, Introducción

Curso de Desarrollo Web

martes, 11 de diciembre de 12

Page 2: Web Móvil, Introducción

Curso de Desarrollo Web

martes, 11 de diciembre de 12

Page 3: Web Móvil, Introducción

<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

<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

<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

<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

<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

<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

<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

<h1>Nativo y Web</h1>

martes, 11 de diciembre de 12

Page 11: Web Móvil, Introducción

<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

<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

<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

<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

<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

<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

<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

<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

<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

<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

Let´s play a gamemartes, 11 de diciembre de 12