Conferencia dictada en UVM, UACM, y el Tecnológico de Milpa Alta

1. Cocinando Ricas Apps
con Javascript
Alberto Luebbert M.
@almsx
albertoluebbert@ideashappy.com
www.ideashappy.com

2. Menú del Día
●
●
●
●
1.- ¿De qué va esto?
2.- Javascript
3.- Características
4.- Demos

3. ¿De qué va esto?
●
●
●
●
●
¿Para que aprender Javascript?
Móvil
Web
Servidor
Lenguaje SCRIPT.

4. ¿Quién soy yo?
●
Alberto Luebbert M.
CEO en ideas Happy
www.ideashappy.com
Usuario GNU Linux desde el 2002
Usuario Debian desde el 2003
Entusiasta promotor desde el 2004
openSUSE Ambassador desde el 2010
Atlantista de toda la vida ñ_ñ
Ing. En Sistemas Computacionales TESOEM
Miembro fundador de Comunidades:
Generando Maldad, SUSEMX
Coordinador FLISOL EDOMEX 2006-2010
Project Leader Hildebrando

5. En el principio...
var form = document.forms[0];
if(form.txtNombre.length == 0){
alert(“Falta el nombre”);
return false;
}
}

6. Hoy en dia...

7. Hoy en dia...

8. ¿Donde empleare Javascript?
Móvil - Titanium Appcelerator
Web – (jQuery)
Servidor - NodeJS

9. Móviles
var win = Titanium.UI.createWindow({
backgroundColor: '#003366',
title: 'Hola mundo en javascript'
});
var btn = Titanium.UI.createButton({
Title: 'Presioname',
Width: 200,
Height: 50,
});
win.add(btn)
win.open();

10. Móviles
var win = Titanium.UI.createWindow({
backgroundColor: '#003366',
title: 'Hola mundo en javascript'
});
var btn = Titanium.UI.createButton({
Title: 'Presioname',
Width: 200,
Height: 50,
});
win.add(btn)
win.open();

11. Móviles - CommonJS
●
Hoja.js
●
Win.js
exports.ventana = {
function home(){
self: {
var est = require('ui/handheld/Hoja');
BackgroundColor: '#003366',
var self = Ti.UI.createWindow(
Title: 'Hola Mundo'
est.ventana.self);
}}
var btn = Ti.UI.createButton(
exports.boton = {
est.boton.self);
self: {
return self;
width: 200,
}
height: 50,
module.exports = Home;
title: 'presioname'
}}

12. Conexión a BD con Javascript
var DB_NAME = '4dm.db';
var db = require('/ui/BD');
exports.createBase = function() {
var db = Ti.Database.open(DB_NAME);
var err;
try{
db.execute('CREATE TABLE IF NOT
EXISTS noticias(id INTEGER PRIMARY
KEY, titulonoticia TEXT, fechanoticia
TEXT, noticiacompleta TEXT, url TEXT)');
}
catch(err){
alert(“Algun error”);
}
db.close();
};
db.crearBase();

13. Conexión a BD con Javascript
var DB_NAME = '4dm.db';
var db = require('/ui/BD');
exports.createBase = function() {
var db = Ti.Database.open(DB_NAME);
var err;
try{
db.execute('CREATE TABLE IF NOT
EXISTS noticias(id INTEGER PRIMARY
KEY, titulonoticia TEXT, fechanoticia
TEXT, noticiacompleta TEXT, url TEXT)');
}
catch(err){
alert(“Algun error”);
}
db.close();
};
db.crearBase();

14. Algunas apps hechas con Appcelerator

15. Geolocalización con jQuery

16. Geolocalización con jQuery
function obtenerPosicion(location){
var
posicion
=
new
google.maps.LatLng(location.coords
.latitude, location.coords.longitude)
var
mapa
=
google.maps.Map(mapDiv, {
new
zoom: 16,
center: position,
mapTypeId:
google.maps.MapTypeId.HYBRID
});
var
marka
google.maps.Marker({
=
new
position: position,
map: map
});
new
google.maps.Geocoder().geocode({
location: posicion},
obtenerPosicion);

17. Hola mundo en Node.js
var http = require('http');
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type':
'text/plain'});
response.end('¡Hola Mundo!n');
}).listen(8081);
console.log('Servidor
http://127.0.0.1:8081/');
ejecutándose
en

18. Generar JSON en Node.JS
var contacto = {
id: 1,
lastName: "Pérez",
firstName: "Martin"
};
var texto =
JSON.stringify(contacto);
Contacto{
"id":1,
"lastName":"P%eu%rez",
"firstName":"Martin"
}

19. Mucha más información
●
●
Generando Maldad
www.generandomaldad.com
www.facebook.com/generandomaldad
twitter: @generandomaldad
Ejemplo de jQuery
https://github.com/hdragomir/Odeon-Labs-Geolocation-with-Google-Maps

20. Cocinando Ricas Apps
con Javascript
Alberto Luebbert M.
@almsx
albertoluebbert@ideashappy.com
www.ideashappy.com