Este documento presenta un curso de desarrollo web que enseña sobre tecnologías modernas como HTML5, CSS3, JavaScript, APIs REST, DOM, BOM, jQuery y AJAX. Explica conceptos como el modelo de objetos del documento y navegador, peticiones asincrónicas, almacenamiento local y geolocalización.
AngularJS es uno de los frameworks para construir aplicaciones web más populares de hoy en día. Fue creado y es mantenido por Google, es Open Source y tiene una enorme comunidad de desarrolladores.
Estas son las slides que sirven como introducción al curso de AngularJS que se dictará durante el mes de julio de 2015 en laofi.co (Ramos Mejía, Buenos Aires).
Evento del curso: https://www.facebook.com/events/1406733769656432/
Agenda:
* Historia de las Apps Webs
* ¿Por qué AngularJS?
* Building Blocks
* Herramientas
¿De qué trata el Curso?
=========================
En este curso vas a aprender a programar el Front-End de una aplicación web completa con AngularJS. Analizaremos ejemplos y programaremos juntos. Además, veremos herramientas que facilitarán el desarrollo, como npm, NodeJS, Bower, Grunt, Yeoman y Gulp, y un vistazo a lo que se viene en este fascinante mundo en constante evolución.
Recursos:
* Mi estante AngularJS en VolKno: http://www.volkno.com.ar/u/elfrasco/angularjs
* El código fuente que veremos en el curso (en progreso): https://github.com/elfrasco/angular-course
* ng-newsletter (super recomendado): http://www.ng-newsletter.com/
AngularJS es uno de los frameworks para construir aplicaciones web más populares de hoy en día. Fue creado y es mantenido por Google, es Open Source y tiene una enorme comunidad de desarrolladores.
Estas son las slides que sirven como introducción al curso de AngularJS que se dictará durante el mes de julio de 2015 en laofi.co (Ramos Mejía, Buenos Aires).
Evento del curso: https://www.facebook.com/events/1406733769656432/
Agenda:
* Historia de las Apps Webs
* ¿Por qué AngularJS?
* Building Blocks
* Herramientas
¿De qué trata el Curso?
=========================
En este curso vas a aprender a programar el Front-End de una aplicación web completa con AngularJS. Analizaremos ejemplos y programaremos juntos. Además, veremos herramientas que facilitarán el desarrollo, como npm, NodeJS, Bower, Grunt, Yeoman y Gulp, y un vistazo a lo que se viene en este fascinante mundo en constante evolución.
Recursos:
* Mi estante AngularJS en VolKno: http://www.volkno.com.ar/u/elfrasco/angularjs
* El código fuente que veremos en el curso (en progreso): https://github.com/elfrasco/angular-course
* ng-newsletter (super recomendado): http://www.ng-newsletter.com/
Angular 2 is Coming - GDG DevFest Cordoba 2015Carlos Azaustre
Charla y pequeño taller sobre Angular 2 para ver las principales novedades que trae la nueva versión del framework y como utilizarlo empleando tecnologías como ES6, ES7 Decorators, Babel y Browserify
Presentación realizada en algunas empresas de desarrollo software de Alicante para exponer lo conveniente que es aplicar la arquitectura a tres capas con AngularJS y el resto del fullStack Javascript.
Curso de Responsive Design impartido en Platzi, plataforma de educación online efectiva:
Suscríbete en https://platzi.com/cursos/responsive-design/
Entiende los patrones de diseño adaptativo
Utiliza Media Queries para hacer sitios responsivos
Aprende la diferencia y cómo usar los estándares Graceful Degradation y Progressive Enhacement
Maqueta pensando en Mobile First
Introducción al Framework de Google AngularJS que permite crear aplicaciones de rápida respuesta, del lado cliente, sobretodo del tipo SPA (Single Page Application).
Conferencia sobre los conceptos básicos de Angular.js dictada por Jeison Castañeda miembro del GDG Cali. El código fuente se encuentra en https://github.com/gdgcali/IntegrantesGDG
Overview sobre AngularJS, componentes, comparación con otros frameworks y su variante a móviles.
AngularJS es un framework completo para el lado del frontend, y difícil de poder explicarlo en un solo slide, esta es una breve introducción a este maravilloso framework javascript que permite hacer cosas geniales.
Cualquier consulta estoy en twitter @feluis23
#PlatziConf - El camino para ser un Pro en JavaScriptCarlos Azaustre
Charla en la #PlatziConf sobre Desarrollo Web actual por Platzi, (antes conocida como Mejorando.la).
Por qué elegí aprender JavaScript y que pasos seguí y sigo para hacerlo.
Un vistazo al ecosistema JavaScript, sus frameworks, librerías, herramientas, etc...
Presentación utilizada en la charla "Game of Framework" dentro de la CodeWeek organizada por GDG Cáceres (España)
Angular 2 is Coming - GDG DevFest Cordoba 2015Carlos Azaustre
Charla y pequeño taller sobre Angular 2 para ver las principales novedades que trae la nueva versión del framework y como utilizarlo empleando tecnologías como ES6, ES7 Decorators, Babel y Browserify
Presentación realizada en algunas empresas de desarrollo software de Alicante para exponer lo conveniente que es aplicar la arquitectura a tres capas con AngularJS y el resto del fullStack Javascript.
Curso de Responsive Design impartido en Platzi, plataforma de educación online efectiva:
Suscríbete en https://platzi.com/cursos/responsive-design/
Entiende los patrones de diseño adaptativo
Utiliza Media Queries para hacer sitios responsivos
Aprende la diferencia y cómo usar los estándares Graceful Degradation y Progressive Enhacement
Maqueta pensando en Mobile First
Introducción al Framework de Google AngularJS que permite crear aplicaciones de rápida respuesta, del lado cliente, sobretodo del tipo SPA (Single Page Application).
Conferencia sobre los conceptos básicos de Angular.js dictada por Jeison Castañeda miembro del GDG Cali. El código fuente se encuentra en https://github.com/gdgcali/IntegrantesGDG
Overview sobre AngularJS, componentes, comparación con otros frameworks y su variante a móviles.
AngularJS es un framework completo para el lado del frontend, y difícil de poder explicarlo en un solo slide, esta es una breve introducción a este maravilloso framework javascript que permite hacer cosas geniales.
Cualquier consulta estoy en twitter @feluis23
#PlatziConf - El camino para ser un Pro en JavaScriptCarlos Azaustre
Charla en la #PlatziConf sobre Desarrollo Web actual por Platzi, (antes conocida como Mejorando.la).
Por qué elegí aprender JavaScript y que pasos seguí y sigo para hacerlo.
Un vistazo al ecosistema JavaScript, sus frameworks, librerías, herramientas, etc...
Presentación utilizada en la charla "Game of Framework" dentro de la CodeWeek organizada por GDG Cáceres (España)
Taller práctico en el que vimos como crear desde cero una aplicación web utilizando varias funcionalidades de Firebase (Storage, Auth y Database) e integrándolas con React.js como librería del Frontend
Generadores Web en Salto - Claudia MurialdoGeneXus
Conozca qué tendrá la versión Salto de GeneXus y qué esperar de las siguientes versiones en relación con las tendencias del desarrollo de aplicaciones Web.
El desarrollo web continúa siendo un área dinámica y de amplio alcance. La creciente adopción de aplicaciones móviles afecta cómo los desarrolladores web definen su trabajo y conduce a que una aplicación web se acerque cada vez más a una móvil desde el modelado hasta la experiencia de usuario. Con especial atención en ese aspecto, en la accesibilidad y nuevos estándares es que se está trabajando en los generadores web en la versión Salto y es lo que veremos en esta charla.
Neurociencia aplicada al desarrollo con GeneXus - Gustavo TejeraGeneXus
El crecimiento de la Sociedad Digital obliga a que gerentes y desarrolladores conozcan algunas ventajas competitivas que aporta la neurociencia. Hoy en día el usuario mide su experiencia a nivel de dispositivo y éste, a su vez, define su perímetro de identidad en la internet de las cosas. ¿Cómo mejorar la empatía de sistemas y dispositivos? En el sistema nervioso están todas las respuestas. Cada componente de la Sociedad Digital tiene un símil en la naturaleza, pero con millones de años en producción. Inspirarse en la bioinformática es un valor agregado que aumenta la longevidad de las aplicaciones GeneXus.
Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y SaltoGeneXus
Desarrollaremos en este “hands on lab” una aplicación Web de ejemplo que muestra algunas de las más importante funcionalidades para esta plataforma incluídas en las versiones Salto y Evolution 3. Está diseñado tanto para quiénes tienen experiencia en el desarrollo de aplicaciones web con GeneXus y desean ver las mejoras que tiene la versión Evolution 3 y Salto, como para quiénes no han desarrollado aplicaciones web con GeneXus.
Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto (...GeneXus
Desarrollaremos en este “hands on lab” una aplicación Web de ejemplo que muestra algunas de las más importante funcionalidades para esta plataforma incluídas en las versiones Salto y Evolution 3. Está diseñado tanto para quiénes tienen experiencia en el desarrollo de aplicaciones web con GeneXus y desean ver las mejoras que tiene la versión Evolution 3 y Salto, como para quiénes no han desarrollado aplicaciones web con GeneXus.
En los últimos años, en GeneXus, hemos cambiado nuestra forma de trabajo con respecto a la creación de aplicaciones, en particular a lo relacionado con el proceso que va del diseño a la implementación del diseño de las apps. En esta charla estaremos presentando qué hemos aprendido durante la creación del futuro Tema Default de GeneXus y las herramientas que estamos utilizando para hacer aplicaciones, con mejores resultados que nunca.
Workshop sobre APIs realizado el 27 de abril en el Centro de Innovación de BBVA. En este evento hemos visto los detalles del funcionamiento, gestión de errores y conceptos de seguridad aplicados a APIs.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Prototipado de Aplicaciones web con Firebase #CampusGiversCarlos Azaustre
Charla en Campus Madrid, dentro del programa Campus Givers donde explico las principales alternativas y herramientas disponibles para desarrollar aplicaciones web con Firebase, Polymer y React y lanzar cuanto antes tu proyecto al mercado.
Taller práctico sobre SEO y creación de anuncios en Facebook Ads para #CampusForMoms en Google Campus Madrid.
Qué le gusta a Google,
Cómo conseguir posicionarse
Cómo elegir palabras claves adecuadas
Optimizar tu página para SEO OnPage y OffPage
Creación de audiencias en Facebook Ads y ReMarketing
Keynote utilizada en la presentación de Chefly como invitados en la asignatura de Administración de Empresas para la Escuela Técnica Superior de Ingenieros Industriales de la Universidad Politécnica de Madrid
Presentación utilizada en las Jornadas de sensibilicización con el emprendimiento organizadas por la Fundación de Antiguos Alumnos de la Universidad Carlos III de Madrid y el Vivero de Empresas de Leganés Tecnológico.
Hablamos de nuestra experiencia emprendedora como autoeditores de un cómic, publicado gratis en internet y posteriormente en formato papel consiguiendo 30.000 ejemplares vendidos en España
Escaneo y eliminación de malware en el equiponicromante2000
El malware tiene muchas caras, y es que los programas maliciosos se reproducen en los ordenadores de diferentes formas. Ya se trate de virus, de programas espía o de troyanos, la presencia de software malicioso en los sistemas informáticos siempre debería evitarse. Aquí te muestro como trabaja un anti malware a la hora de analizar tu equipo
Si bien los hospitales conjuntan a profesionales de salud que atienden a la población, existe un equipo de organización, coordinación y administración que permite que los cuidados clínicos se otorguen de manera constante y sin obstáculos.
Mario García Baltazar, director del área de Tecnología (TI) del Hospital Victoria La Salle, relató la manera en la que el departamento que él lidera, apoyado en Cirrus y Estela, brinda servicio a los clientes internos de la institución e impulsa una experiencia positiva en el paciente.
Conoce el Hospital Victoria La Salle
Ubicado en Ciudad Victoria, Tamaulipas, México
Inició operaciones en el 2016
Forma parte del Consorcio Mexicanos de Hospitales
Hospital de segundo nivel
21 habitaciones para estancia
31 camas censables
13 camillas
2 quirófanos
+174 integrantes en su plantilla
+120 equipos médicos de alta tecnología
+900 pacientes atendidos
Servicios de +20 especialidades
Módulos utilizados de Cirrus
HIS
EHR
ERP
Estela - Business Intelligence
1. Curso de Desarrollo Web
Curso de Desarrollo Web
Aprende Online a crear tu propia web
Febrero 2015
@carlosazaustre
+CarlosAzaustre
2. Curso de Desarrollo Web
Carlos Azaustre
Web Developer, JavaScript Lover
Ingeniero en Telemática.
Estudiante de Platzi.
CTO & CoFounder en Chefly.
Co-Organizador en Hackathon Lovers.
Co-Organizador en Nodeschool Madrid.
9. Curso de Desarrollo Web
API REST
[{
“nombre”: “Desarrollo Web”,
“nivel”: “basico”,
“url”: “platzi.com/online”
},
{
“nombre”: “Frontend Profesional”,
“nivel”: “intermedio”,
“url”: “platzi.com/frontend”
},
{
“nombre”: “JavaScript y Node.js”,
“nivel”: “avanzado”,
“url”: “platzi.com/js”
},
...]
GET /cursos
JSON
JavaScript
Object
Notation
10. Curso de Desarrollo Web
API REST
Método ¿Qué hace?
GET Devuelve un recurso o una lista de recursos
POST Registra un nuevo recurso
PUT Actualiza un recurso existente
DELETE Elimina un recurso existente
11. Curso de Desarrollo Web
API REST
Código Significado
200 Todo fue OK
300 El contenido está en otro sitio y será redirigido
400 Acceso prohibido o el recurso no existe
403 Acceso prohibido o restringido
404 El recurso no existe
500 Error interno del servidor
12. Curso de Desarrollo Web
JSONP vs CORS
Same-Origin Policy
Solo se puede acceder al DOM si el script está en el mismo origen (esquema,
hostname, puerto)
Refused to connect to ‘http://api.com/recurso’
because it violates the following Content
Security Policy directive
13. Curso de Desarrollo Web
JSONP vs CORS
Same-Origin Policy
Solo se puede acceder al DOM si el script está en el mismo origen (esquema,
hostname, puerto)
JSONP
JSON con Padding.
● Muchas APIs públicas funcionan
con JSONP, necesita una función
de callback en la llamada al API
● ej: http://api.com/recursos/?
callback=miFuncionDeCallback
● Solo permite el método GET de
HTTP
CORS
Cross-Origin Resource Sharing
● Permite más metodos de HTTP
(GET, POST, PUT, DELETE)
● Ha de configurarse en el servidor.
Podemos elegir a quién dar
acceso
20. Curso de Desarrollo Web
Comparación JS <-> jQuery
document.getElementById(“myDiv”); $(“#myDiv”);
function clickHandler() { … }
var anchor = document.getElementById
(“anchorID”);
if(anchor.addEventListener) {
anchor.addEventListener(“click”,
clickHandler, true);
}
else if(anchor.attachEvent) {
anchor.attachEvent(“onclick”,
function() {
return clickHandler.apply(
anchor,
[window.event]
);
});
}
function clickHandler() { … }
$(“#anchorID”).on(“click”, clickHandler);
21. Curso de Desarrollo Web
Petición AJAX en JS
var xhr;
// IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
// IE6, IE5
else {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
document.getElementById(“myDiv”).innerHTML = xhr.responseText;
}
xhr.open(“GET”, “http://example.com/recurso”, true);
xhr.send();
}
22. Curso de Desarrollo Web
Petición AJAX en JS
var xhr;
// IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
// IE6, IE5
else {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
document.getElementById(“myDiv”).innerHTML = xhr.responseText;
}
xhr.open(“GET”, “http://example.com/recurso”, true);
xhr.send();
}
23. Curso de Desarrollo Web
Petición AJAX con jQuery
$.ajax({
type: “GET”,
url: “http://example.com/recurso”,
context: document.body
}).done(function(data) {
$(“#myDiv”).html(data);
});
$.getJSON({“http://example.com/recurso”,
function(data) {
$(“#myDiv”).html(data);
});
o también
24. Curso de Desarrollo Web
Petición AJAX con jQuery
$.ajax({
type: “GET”,
url: “http://example.com/recurso”,
context: document.body
}).done(function(data) {
$(“#myDiv”).html(data);
});
$.getJSON({“http://example.com/recurso”,
function(data) {
$(“#myDiv”).html(data);
});
o también
25. Curso de Desarrollo Web
HTML5
Elementos Cool
● LocalStorage
● GeoLocation
● Template
● ...
26. Curso de Desarrollo Web
Uso de geoLocation
navigator
.geolocation
.getCurrentPosition(getCoords, errorFound);
function errorFound(err) {
alert(“Ocurrió un error: “ +err);
}
function getCoords(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
alert(“Tu posición es: “ + lat + “;” + lon);
}
27. Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”>
<h1></h1>
<p></p>
</template>
HTML
28. Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”>
<h1></h1>
<p></p>
</template>
HTML
var t = document.querySelector(“myTemplate”);
var clone = document.importNode(t.content, true);
clone.querySelector(“h1”).innerHTML = “Platzi”
clone.querySelector(“p”).innerHTML = “Aprende a crear
el futuro de internet”;
document.body.appendChild(clone);
JS
29. Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”>
<h1></h1>
<p></p>
</template>
HTML
var t = document.querySelector(“myTemplate”);
var clone = document.importNode(t.content, true);
clone.querySelector(“h1”).innerHTML = “Platzi”
clone.querySelector(“p”).innerHTML = “Aprende a crear
el futuro de internet”;
document.body.appendChild(clone);
JS
Resultado HTML
<h1>Platzi</h1>
<p>Aprende a crear el
futuro de internet</p>
30. Curso de Desarrollo Web
Uso de LocalStorage
var elemento = “hola mundo”;
localStorage.setItem(“clave”, elemento);
console.log(localStorage.getItem(“clave”));
// hola mundo
31. Curso de Desarrollo Web
Uso de LocalStorage
var obj = {
“titulo”: “desarrollo web”,
“nivel”: “básico”,
“plataforma”: “Platzi”
};
var objString = JSON.stringify(obj);
localStorage[‘curso’] = objString;
var elem = localStorage.curso;
var elemParsed = JSON.parse(elem);
console.log(elemParsed);
//
{“titulo”: “desarrollo web”,
“nivel”: “básico”,
“plataforma”: “Platzi”}