Enviar búsqueda
Cargar
Mod00 transparencias
•
0 recomendaciones
•
460 vistas
Lorenzo Perez
Seguir
Programacion html5
Leer menos
Leer más
Internet
Denunciar
Compartir
Denunciar
Compartir
1 de 21
Descargar ahora
Descargar para leer sin conexión
Recomendados
Diapositivas herramientas de comunicación1
Diapositivas herramientas de comunicación1
herramientastelematicas
Charla sobre el uso de Chamilo
Charla sobre el uso de Chamilo
Universidad Autónoma de Zacatecas
Ddi Videoconferencias 2009
Ddi Videoconferencias 2009
Universidad Técnica Particular de Loja
Plataforma E-learning Chamilo como herramienta dinamizadora en procesos educ...
Plataforma E-learning Chamilo como herramienta dinamizadora en procesos educ...
Linda Martinez
Anlisis De Software Educativo4863
Anlisis De Software Educativo4863
Tais Ramos
Web20 Y CreacióN De Blogs Uah
Web20 Y CreacióN De Blogs Uah
Rosa Fernández
Propuesta trabajo8
Propuesta trabajo8
Graciela Velazco
31414453 diapositivas-herramientas-de-la-comunicacion-telematicas
31414453 diapositivas-herramientas-de-la-comunicacion-telematicas
MORALESEDNA
Recomendados
Diapositivas herramientas de comunicación1
Diapositivas herramientas de comunicación1
herramientastelematicas
Charla sobre el uso de Chamilo
Charla sobre el uso de Chamilo
Universidad Autónoma de Zacatecas
Ddi Videoconferencias 2009
Ddi Videoconferencias 2009
Universidad Técnica Particular de Loja
Plataforma E-learning Chamilo como herramienta dinamizadora en procesos educ...
Plataforma E-learning Chamilo como herramienta dinamizadora en procesos educ...
Linda Martinez
Anlisis De Software Educativo4863
Anlisis De Software Educativo4863
Tais Ramos
Web20 Y CreacióN De Blogs Uah
Web20 Y CreacióN De Blogs Uah
Rosa Fernández
Propuesta trabajo8
Propuesta trabajo8
Graciela Velazco
31414453 diapositivas-herramientas-de-la-comunicacion-telematicas
31414453 diapositivas-herramientas-de-la-comunicacion-telematicas
MORALESEDNA
Propuesta trabajo8
Propuesta trabajo8
Lucrecia Canabal
Herramienta de informatica i
Herramienta de informatica i
utmach
Manual de instalación y configuración de plataformas de e learning-tics para ...
Manual de instalación y configuración de plataformas de e learning-tics para ...
JAVIERVALVERDE89
Agrega "Plataforma de Contenidos Digitales Educativos"
Agrega "Plataforma de Contenidos Digitales Educativos"
red.es
Nuevas Tendencias e-learning Herramientas gratuitas
Nuevas Tendencias e-learning Herramientas gratuitas
gemagbanos
TICS _ GIN_ 2018
TICS _ GIN_ 2018
Gina Na
Introducción js
Introducción js
Tareas Db
Metodología de estudio
Metodología de estudio
Alexander Fernandez
Aplicaciones universales, Windows 8 y Windows Phone 8. @RiojaDotNet
Aplicaciones universales, Windows 8 y Windows Phone 8. @RiojaDotNet
Asier Tarancón
Actividad4 manual usuarrio _victor jaimes
Actividad4 manual usuarrio _victor jaimes
Victor Jaimes
Curso programacion php
Curso programacion php
Euroinnova Formación
Herramientas y Tecnologías para la Web
Herramientas y Tecnologías para la Web
Erick David Juarez
Firefox OS App Days USACH 2014
Firefox OS App Days USACH 2014
Lourdes Lorena Castillo Alvarez
Asdasdas
Asdasdas
jaiversanchez
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - Quobis
Quobis
Aplicaciones web
Aplicaciones web
RuthReyes71
Tarea multiplataforma santiago
Tarea multiplataforma santiago
SANTIAG0INDACOCHEA
introducción a flutter
introducción a flutter
Victor Alfonso Rodas Oña
Trabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicas
elvia123
Curso programación páginas web con ASP.NET
Curso programación páginas web con ASP.NET
Euroinnova Formación
Documento - Aplicaciones para internet
Documento - Aplicaciones para internet
IntComp-ULS
Estándares Web y Accesibilidad en Colombia
Estándares Web y Accesibilidad en Colombia
Gabriel Porras
Más contenido relacionado
La actualidad más candente
Propuesta trabajo8
Propuesta trabajo8
Lucrecia Canabal
Herramienta de informatica i
Herramienta de informatica i
utmach
Manual de instalación y configuración de plataformas de e learning-tics para ...
Manual de instalación y configuración de plataformas de e learning-tics para ...
JAVIERVALVERDE89
Agrega "Plataforma de Contenidos Digitales Educativos"
Agrega "Plataforma de Contenidos Digitales Educativos"
red.es
Nuevas Tendencias e-learning Herramientas gratuitas
Nuevas Tendencias e-learning Herramientas gratuitas
gemagbanos
TICS _ GIN_ 2018
TICS _ GIN_ 2018
Gina Na
La actualidad más candente
(6)
Propuesta trabajo8
Propuesta trabajo8
Herramienta de informatica i
Herramienta de informatica i
Manual de instalación y configuración de plataformas de e learning-tics para ...
Manual de instalación y configuración de plataformas de e learning-tics para ...
Agrega "Plataforma de Contenidos Digitales Educativos"
Agrega "Plataforma de Contenidos Digitales Educativos"
Nuevas Tendencias e-learning Herramientas gratuitas
Nuevas Tendencias e-learning Herramientas gratuitas
TICS _ GIN_ 2018
TICS _ GIN_ 2018
Similar a Mod00 transparencias
Introducción js
Introducción js
Tareas Db
Metodología de estudio
Metodología de estudio
Alexander Fernandez
Aplicaciones universales, Windows 8 y Windows Phone 8. @RiojaDotNet
Aplicaciones universales, Windows 8 y Windows Phone 8. @RiojaDotNet
Asier Tarancón
Actividad4 manual usuarrio _victor jaimes
Actividad4 manual usuarrio _victor jaimes
Victor Jaimes
Curso programacion php
Curso programacion php
Euroinnova Formación
Herramientas y Tecnologías para la Web
Herramientas y Tecnologías para la Web
Erick David Juarez
Firefox OS App Days USACH 2014
Firefox OS App Days USACH 2014
Lourdes Lorena Castillo Alvarez
Asdasdas
Asdasdas
jaiversanchez
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - Quobis
Quobis
Aplicaciones web
Aplicaciones web
RuthReyes71
Tarea multiplataforma santiago
Tarea multiplataforma santiago
SANTIAG0INDACOCHEA
introducción a flutter
introducción a flutter
Victor Alfonso Rodas Oña
Trabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicas
elvia123
Curso programación páginas web con ASP.NET
Curso programación páginas web con ASP.NET
Euroinnova Formación
Documento - Aplicaciones para internet
Documento - Aplicaciones para internet
IntComp-ULS
Estándares Web y Accesibilidad en Colombia
Estándares Web y Accesibilidad en Colombia
Gabriel Porras
Web2 y nube
Web2 y nube
Maria Alejandra Narvaez Narvaez
Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
elvia123
Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
elvia123
Examen Profesional 1
Examen Profesional 1
Salvador Torres Zequera
Similar a Mod00 transparencias
(20)
Introducción js
Introducción js
Metodología de estudio
Metodología de estudio
Aplicaciones universales, Windows 8 y Windows Phone 8. @RiojaDotNet
Aplicaciones universales, Windows 8 y Windows Phone 8. @RiojaDotNet
Actividad4 manual usuarrio _victor jaimes
Actividad4 manual usuarrio _victor jaimes
Curso programacion php
Curso programacion php
Herramientas y Tecnologías para la Web
Herramientas y Tecnologías para la Web
Firefox OS App Days USACH 2014
Firefox OS App Days USACH 2014
Asdasdas
Asdasdas
Webinar WebRTC y HTML5 (spanish) - Quobis
Webinar WebRTC y HTML5 (spanish) - Quobis
Aplicaciones web
Aplicaciones web
Tarea multiplataforma santiago
Tarea multiplataforma santiago
introducción a flutter
introducción a flutter
Trabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicas
Curso programación páginas web con ASP.NET
Curso programación páginas web con ASP.NET
Documento - Aplicaciones para internet
Documento - Aplicaciones para internet
Estándares Web y Accesibilidad en Colombia
Estándares Web y Accesibilidad en Colombia
Web2 y nube
Web2 y nube
Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
Examen Profesional 1
Examen Profesional 1
Último
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
kkte210207
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
danielaerazok
Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalena
danielaerazok
Las redes sociales en el mercado digital
Las redes sociales en el mercado digital
NayaniJulietaRamosRa
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la web
Decaunlz
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
edwinmelgarschlink2
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
lauradbernals
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
juniorcuellargomez
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
israel garcia
Último
(9)
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
02. Mr. Spencer (T.L. Sawn).pdf.libro de un señor
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalena
Las redes sociales en el mercado digital
Las redes sociales en el mercado digital
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la web
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
Mod00 transparencias
1.
Introducción al curso
y al programa © 1 Juan Quemada, DIT, UPM
2.
Curso: Diseño de
aplicaciones Web en HTML5 y para móviles FirefoxOS Curso de iniciación al diseño y a la programación en HTML5 (HTML, CSS y JavaScript) de aplicaciones Web multi-dispositivo (PC, tableta, telefóno, ...) y a su empaquetamiento para telefonos FirefoxOS o para publicarlas en Internet o en su AppStore © 2 Juan Quemada, DIT, UPM
3.
Diseño de servicios
en la nube, utilizando JavaScript, para acceso movil y multi-dispositivo con HTML5* Programa de especialización con 5 cursos MOOC ! n Desarrollo de Aplicaciones en HTML5, CSS y Javascript, incluyendo Dispositivos Móviles Firefox O.S. n Desarrollo avanzado de Aplicaciones HTML5 y Firefox O.S.*, incluyendo tecnicas de ingenería de software n Desarrollo de aplicaciones HTML5 multi-terminal (Android, iOS, ...)* n Desarrollo de servicios en la nube con HTML5, Javascript y node.js* n Desarrollo avanzado de servicios en la nube con Javascript y node.js* ! *Nota: Los otros 4 cursos empezarán en MiriadaX en 2014 y 2015. © 3 Juan Quemada, DIT, UPM
4.
Modulo 1: Introducción
a HTML, CSS, URLs y a las herramientas del curso. Modulo 2:Estructura de la navegación y el texto en páginas Web HTML5, prioridad en CSS3 y publicación en la nube de Google Drive de los ejercicios del curso. ! Modulo 3: Estructuración, visualización y depuración con Firefox de HTML5 y CSS3 adaptados a un entorno responsivo y multi-pantalla, para adaptación a móviles y tabletas. Modulo 4: Introducción a JavaScript, sus sentencias, variables, expresiones, scripts de cliente, así como a la utilización de la consola JavaScript del navegador Firefox. ! Modulo 5: Primeros programas Javascript con booleanos, igualdad y comparaciones, sentencia condicional, números, funciones, strings e internacionalización. Modulo 6: Objetos, propiedades, métodos, eventos, formularios, sentencia for/in y características avanzadas de objetos, incluyendo acceso a la página Web cargada en el navegador a través del árbol DOM (Document Object Model) ! Modulo 7: Interacción con el usuario, eventos y sus manejadores, formularios, jQuery, Zepto, Arrays y bucles. Modulo 8: Ejemplo de un cronómetro, eventos tactiles, localStorage y JSON, así como su utilización en aplicaciones Web. ! Modulo 9: Introducción a los gráficos y animaciones con SVG (Scalable Vector Graphics) y HTML5 CANVAS, así como al empaquetamiento de web apps para FirefoxOS. Modulo 10: API de geolocalización HTML5 y Mash-up con Google Maps, asi como realizaci´on del proyecto final del curso. Módulos © 4 Juan Quemada, DIT, UPM
5.
Desarrollo y evaluación
del curso El curso consta de 5 tramos de 2 modulos n Diseñado para realizarse en 5 semanas (1 semana por tramo) w Pero se deja una semana adicional por tramo (~10 semanas, ! 2 semanas por tramo) Ejercicios P2P de entrega obligatoria n Al final de cada módulo (2 ejercicios por tramo) n además! hay tests obligatorios y mas ejercicios P2P opcionales Plazos y limites n Tramo 1: comienzo lunes 01-10 (o antes), final 19-10 n Tramo 2: comienzo lunes 12-10 (o antes), final 02-11 n Tramo 3: comienzo lunes 19-10 (o antes), final 16-11 n Tramo 4: comienzo lunes 26-10 (o antes), final 30-11 n Tramo 5: comienzo lunes 02-11 (o antes), final 14-12 n Evaluaciones y curso cierran el 22-12 © 5 Juan Quemada, DIT, UPM
6.
Actividades de un
Módulo Tarea 0: Descargar transparencias y ejemplos del módulo n Fichero ZIP para descargar con w Transparencias en formato PDF w Directorio con ejemplos presentados en el módulo n para realizar ejercicios modificando los descargados n Directorio con ejemplos publicados en Internet (Google Drive) w ejecutables en Firefox ! Tareas de Aprendizaje (varias): n un video o screencast del tema (3 y 14 minutos) w evaluado (no siempre) con un test o un ejercicio P2P opcional ! Tarea final: Ejercicio P2P de entrega obligatoria n Cada modulo acaba con un ejercicio P2P obligatorio © 6 Juan Quemada, DIT, UPM
7.
Tarea 0: Transparencias
y Ejemplos de un Módulo © 7 Juan Quemada, DIT, UPM Descarga
8.
Equipos y servicios
a utilizar Un PC o portatil de trabajo (necesario) n con S.O. Windows de Microsoft n con S.O. UNIX (Ubuntu, ..) de software libre n Ordenador MAC con sistema operativo con OS X ! Móvil o tableta (conveniente para probar, pero no necesario) n Android, iPhone, iPad, FirefoxOS, .. pero no es necesario w Se puede utilizar un simulador de FirefoxOS para probar Apps ! Cuenta en Google para Google Drive o Google Docs n para publicar Apps y Páginas Web en la nube w Es la cuenta unificada de acceso a Gmail, Youtube, Google+, Docs, Drive, ... © 8 Juan Quemada, DIT, UPM
9.
Herramientas a utilizar
Simulador/Editor interactivo sencillo: http://vishub.org/categories/43 n Editor y visualizador de HTML5, CSS y JS con ejemplos cargados ! Sublime Text 2 n Editor de HTML, CCS y JavaScript con ayudas visuales w http://! www.sublimetext.com Creadores (wysiwyg) de páginas Web (opcional) n Dreamweaver: Creador de páginas Web muy potente e intuitivo. w http://www.adobe.com/es/products/dreamweaver.html n Bluegriffon: editor wysiwyg gratuito y de código abierto w! http://www.bluegriffon.org Navegador Firefox n con su entorno de desarrollo de aplicaciones Web y FirefoxOS © 9 Juan Quemada, DIT, UPM
10.
http://vishub.org/categories/43 © 10
Juan Quemada, DIT, UPM Hacer clic en el Modulo 1 Hacer clic para actualizar pag. Editor Interactivo Seleccionar ejemplo
11.
Herramientas de desarrollo
web de Firefox. n https://developer.mozilla.org/en-US/docs/Tools Inspector HTML de Firefox. n https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Editor de Estilos de Firefox. n https://developer.mozilla.org/en-US/docs/Tools/Style_Editor Herramientas autónomas de Firefox. n Visor de repintado: https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool n Visor 3D: https://developer.mozilla.org/en-US/docs/Tools/3D_View n Borrador Javascript: https://developer.mozilla.org/en-US/docs/Tools/Scratchpad n Visor de diseño adaptativo: https://developer.mozilla.org/en-US/docs/Tools/ Responsive_Design_View Consola Web de Firefox. n https://developer.mozilla.org/en-US/docs/Tools/Web_Console Depurador Javascript de Firefox. n https://developer.mozilla.org/en-US/docs/Tools/Debugger Perfilador de Firefox. n https://developer.mozilla.org/en-US/docs/Tools/Profiler Simulador de Firefox OS Documentación de Firefox y sus herramientas n Instalación: https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator n Documentación: https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator © 11 Juan Quemada, DIT, UPM
12.
Introducción a Internet
y a la Web © 12 Juan Quemada, DIT, UPM
13.
Clientes, servidores y
la nube Clientes: n Dan acceso a información y servicios en Internet ! Servidores: n Alojan la información y los servicios ! La nube: conjunto de terminales y servidores n interconectados con aplicaciones y protocolos de Internet ! TCP/IP: protocolos de interconexión de redes de fibra, cable, WIFI, ... n sobre los que se implementan las aplicaciones de Internet y sus protocolos © 13 Juan Quemada, DIT, UPM
14.
Clientes, navegadores y
tiendas Clientes de acceso a Internet más importantes n PCs, portátiles, tabletas, teléfonos inteligentes ! Navegador (browser) cliente Web de acceso a servidores n Utilizando: URL, HTTP, HTML, CSS y JS w p.e. Chrome, Firefox, Internet Explorer, Opera, Safari, ... ! Tiendas de aplicaciones n Instalan aplicaciones en móviles y tabletas w Las aplicaciones usan las normas de la Web (URL, HTTP, ....) © 14 Juan Quemada, DIT, UPM
15.
Máquina servidora (host)
Contiene información y servicios ! Una máquina servidora tiene una dirección “conocida” en Internet n Dirección simbólica (de dominio o DNS): upm.es, google.com, … w Cada dirección de dominio tiene una dirección IP (binaria) asociada ! Hay 2 tipos de direcciones IP: IPv4 e IPv6 n IPv4: versión 4 del protocolo IP con dirección de 32 bits o 4 octetos w ejemplo: 192.9.0.144, 127.0.0.1 (localhost - mi máquina), ... n IPv6: versión 6 del protocolo IP (última) con dirección de 128 bits w ejemplo: 2001:db8:85a3::8a2e:370:7334, .... © 15 Juan Quemada, DIT, UPM
16.
Servidores y puertos
Puerto n Dirección de 16 bits dentro de la máquina servidora w Es donde se instala el programa servidor Servidor (host) n El programa servidor es lo que normalmente denominamos servidor w Cliente y servidor se comunican a través de un protocolo: HTTP, SMTP, ..... n Utilizando el interfaz de sockets TCP/IP ! para comunicar entre ambos Los servicios tienen un protocolo y un puerto por defecto n Web: protocolo HTTP (puerto 80), HTTPS (443) n Email: protocolo SMTP (puerto 25), POP3 (110), IMAP143) n Shell segu!ra: protocolo SSH (puerto 22) Si un servidor no está en el puerto por defecto n Su dirección debe incluir el puerto, p.e. dit.upm.es:8080, 192.9.0.144:8080 16 email: dirección SMTP IP puerto 80 Web: HTTP puerto 25 © Juan Quemada, DIT, UPM
17.
URL google.com http://google.com/picture.png
URL (Uniform Resource Locator) n Dirección de un recurso en un servidor en Internet ! Internet soporta muchos tipos de servicios diferentes n Cada tipo de servicio utiliza un URL y protocolo diferentes ! Algunos ejemplos de tipos de URLs n URL Web: utiliza HTTP para acceder a recursos, incluye w Protocolo, servidor y recurso (camino): http://google.com/picture.png n URL de correo (email): identifica el buzon de usuario, incluye w protocolo, buzon de usuario y servidor: mailto:pepe_garcia@gmail.com © 17 Juan Quemada, DIT, UPM
18.
HTTP (HiperText Transfer
Protocol) Protocolo del Web n Procesa recursos identificados por un URL en un servidor remoto Métodos o comandos principales de HTTP n GET: trae al cliente (lee) un recurso identificado por un URL n POST: crea un recurso identificado por un URL n PUT: actualiza un recurso identificado por un URL n DELETE: borra un recurso identificado `pr un URL n ....... (hay mas comandos) upm.es Clientes 2, 3 y 4 solicitan recursos: http://upm.es/.../......html google.com HTTP GET © 18 Juan Quemada, DIT, UPM HTTP GET apple.es Cliente 1 solicita recurso: http://uah.es/dir/rec5.html
19.
Aplicación Web Aplicaciones
ejecutables en un navegador creadas con n HTML, CSS y JavaScript ! HTML n Lenguaje de marcado de páginas Web w define la estructura del contenido de una página Web n En WebApps define la interfaz de la aplicación con el usuario CSS n Define el estilo visual de un una página o aplicación Web (HTML) JavaScript n Lenguaje de programación de aplicaciones de cliente © 19 Juan Quemada, DIT, UPM
20.
Aplicación Web: HTML,
CSS y JavaScript HTML n Lenguaje de marcado CSS n Estilo la visualización JavaScript n Lenguaje de programación © 20 Juan Quemada, DIT, UPM
21.
WebApps o aplicaciones
de cliente Aplicaciones que residen en un servidor n pero se ejecutan en un cliente w Se identifican con un URL: http://upm.es/apps/webapp.html n El cliente trae la aplicación del servidor con el protocolo HTTP (GET) Las apps se construyen con las tecnologías de la Web n URLs, HTTP, HTML, CSS y JavaScript Servidor sirve fichero identificado por URL © 21 Juan Quemada, DIT, UPM 1) Cliente solicita WebApp identificada con URL ! 2) Script se ejecuta al cargar la página Web en el navegador: Solicitud HTTP GET asociada a un URL Respuesta HTTP: página Web con script
Descargar ahora