Download Descargar presentación

WEBAPPS
WEBAPPS
APPS NATIVAS
•
Los Smartphones son como una Navaja Suiza
•
Apps de terceros vs. Viejas aplicaciones preinstaladas
•
Las apps requieren de un lenguaje específico (ObjectiveC, Java)
WEBAPPS
¿QUÉ ES UNA WEBAPP?
•
GUI + Servicios Web
•
Mobile webapp: HTML5 CSS3 JScript
•
Responsive Design
WEBAPPS
VENTAJAS
•
Control directo sobre la aplicación.
•
Son más económicas y rápidas de construir.
•
HTML5 + CSS3 + JS vs. Objective-C o Java.
•
Portabilidad.
•
Acceso a características de los teléfonos (GPS,
acelerómetro, giroscopio, gesturas, etc.).
WEBAPPS
EJEMPLO: ORIENTACIÓN
var posAnterior = 0;
var eventoOrientacion = function()
{
if(window.orientation !== posAnterior)
{
posAnterior = window.orientation;
alert(window.orientation);
}
};
window.addEventListener("resize", eventoOrientacion, false);
window.addEventListener("orientationchange", eventoOrientacion, false);
// por las dudas.... (solo para Android)
setInterval(eventoOrientacion, 2000);
WEBAPPS
EJEMPLO: TRANSFORMACIONES
HTML:
<ul>
<li class="inicio">este es un mensaje</li>
<li class="inicio">este es otro mensaje</li>
</ul>
CSS:
.inicio{
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
}
.fin{
-moz-transform: rotate(15deg) scale(1.3);
-webkit-transform: rotate(15deg) scale(1.3);
}
JSCRIPT:
$('li').click(function(){
if($(this).hasClass('fin'));
$(this).removeClass('fin');
else
$(this).addClass('fin');
});
WEBAPPS
EJEMPLO: MEDIA QUERIES
/* iPads */
@media only screen and (min-device-width : 768px) and (max-device-width :
1024px),screen and (max-width:1024) {
body{
background-color:red;
}
}
/* Desktops / laptops ----------- */
@media only screen and (min-width : 1024px) {
body{
background-color:black;
}
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) and
(orientation : portrait),only screen and (min-device-pixel-ratio : 1.5) and
(orientation : portrait),screen and (max-width: 600px) {
body{
background-color:green;
}
}
WEBAPPS
EJEMPLO: GPS
http://code.google.com/p/geo-location-javascript/
function traercoordenada(){
if(geo_position_js.init()){
geo_position_js.getCurrentPosition(
success_callback
,error_callback
,{enableHighAccuracy:true}
);
}
else{
alert(“Geolocalización no soportada!!!");
}
};
function success_callback(p)
{
//Hacer algo con las coordenadas:
//
(p.coords.latitude, pcoords.longitude)
//
};
WEBAPPS
ALGUNAS APPS FAMOSAS
GMail
transformaciones
WEBAPPS
ALGUNAS APPS FAMOSAS
Kindle Cloud Read
storage
WEBAPPS
ALGUNAS APPS FAMOSAS
Bing/Google maps
GPS
WEBAPPS
sliderocket.com
Youtube
Facebook
Twitter
Tiendasimple
...