Desarrollo Móvil

 

3. Desarrollo orientado al móvil

CopyLeft marzo 2012 - Hecho con por Jorge Epuñan

3.1. Detección

3.1. Detección

JavaScript

if (navigator.userAgent.match(/iPad/i)) {
	// haz algo, redirecciona, carga algo...	
}

MobileESP

PHP

require_once('mobile_device_detect.php');
$mobile = mobile_device_detect();

Detect Mobile User Agents & Browsers

Todo el resto

Detect Mobile Browsers | Open source mobile phone detection

3.1. Detección

Pero todo eso ha cambiado, la onda ahora es:



Modernizr

3.1. Detección

Was ist Modernizr?

Antes nos dedicábamos a codear para browser y arreglar sus defectos.

Luego se intentó normalizar y agregar funcionalidades a los browsers que no lo soportaban (polyfill).

Ahora detectamos las capacidades de cada browser y entregamos soporte según su desempeño.

3.1. Detección

Modernizr no habilita mágicamente propiedades para los navegadores que no las admiten. Simplemente le dice a la página si esta función es compatible con el navegador que el usuario está usando o no.

link

3.2. Sitio dedicado v/s Sitio responsivo

3.2. Sitio dedicado v/s Sitio responsivo

Sitio web dedicado

☞ redireccionar, resumir contenido y codear todo denuevo

Sitio web responsivo

☞ aprovechar el contenido y las funcionalidades y readecuarlas según la resolución.

Ejemplos:

3.3. media queries

3.3. media queries

Mediante media-queries detectamos los viewports que sean necesarios, en este caso uno con ancho de 640px:

#container {
	width: 960px;
}

@media screen and (max-width: 640px) {
	#container {
		width: 620px;
	}
}

Utilizando hojas de estilos externas:

<link rel="stylesheet" media="only screen and (max-device-width: 640px)" href="layout-640.css" />

3.3. media queries

Todos los navegadores de escritorio como Safari 3+, Chrome, Firefox 3.5+ y Opera 7+ parsean nativamente las media queries, como también lo hacen navegadores mobile más recientes como Opera Mobile y Safari Mobile.

3.3. media queries

¿IE?

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
<![endif]-->

3.4. HTML/CSS

3.4. HTML/CSS

<div id="container">
  <header id="header">
    <hgroup>
      <h1 id="site-logo">Nombre Sitio</h1>
      <h2 id="site-description">Descripción Sitio</h2>
    </hgroup>
    <nav>
      <ul id="main-nav">
        <li><a href="#">Inicio</a></li>
      </ul>
    </nav>
    <form id="searchform">
      <input type="search" id="s" placeholder="Search">
    </form>
  </header>
  <div id="content">
    <article class="post">
      <header>
        <h1 class="post-title"><a href="#">Título</a></h1>
      </header>
      <p>Nulla fringilla....</p>
    </article>
  </div>
  <aside id="sidebar">
    <section class="widget">
      <h4 class="widgettitle">Sidebar</h4>
    </section>
  </aside>
  <footer id="footer">
    <p>Fin, no hay nada más. No sigas.</p>
  </footer>
</div>

3.4. HTML/CSS

#container {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

3.4. HTML/CSS

mediaqueries

@media screen and (max-width: 320px) {
	#header,
	#sidebar,
	#footer {
		font-size: 80%;
	}
	#site-logo {
		margin: 15px 10px 5px 0;
		position: static;
	}
	#searchform {
		display: none;
	}
	#main-nav a {
		padding: 14px 10px;
		text-decoration: none;
		text-shadow: #333 1px 1px 2px;
	}
	#content {
		width: auto;
		float: none;
		margin: 20px 0;
		font-size: 80%;
	}
}

3.4. HTML/CSS

Ejemplo 1: sin media queries

Ejemplo 1

Ejemplo 2: con media queries

Ejemplo 2

3.5. JavaScript

3.5. JavaScript

jQuery Mobile

Jquerymobile

link

ZeptoJS

Zeptojs

link

Sencha Touch

Sencha

link

3.6. Herramientas

3.6. Herramientas

Fin
del curso

de

#