1
Full-stack JavaScript: Desarrollo integral de
aplicaciones Web con JavaScript
19 Diciembre de 2012, 9:00-14:30
Dr. Diego López-de-Ipiña González-de-Araza
http://paginaspersonales.deusto.es/dipina
http://www.slideshare.net/dipina
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Orientación Universidad
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Busca documentos
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Busca tu universidad
Encuentra los documentos específicos para los exámenes de tu universidad
Video Cursos
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Quiz
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pregúntale a la comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
¡Nuestros e-books salva-estudiantes!
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
Conceptos básicos de programación con JavaScript - Prof. Eli Perdumo, Guías, Proyectos, Investigaciones de Informática
Los conceptos básicos de programación en JavaScript, incluyendo estructuras de control, funciones y manipulación de elementos HTML/CSS. También se menciona la biblioteca jQuery y su uso para manipular y seleccionar elementos HTML. Además, se introduce el concepto de Node.js y su uso en el lado servidor.
Tipo: Guías, Proyectos, Investigaciones
2020/2021
1 / 235
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
Documentos relacionados
Vista previa parcial del texto
¡Descarga Conceptos básicos de programación con JavaScript - Prof. Eli Perdumo y más Guías, Proyectos, Investigaciones en PDF de Informática solo en Docsity!
Full-stack JavaScript: Desarrollo integral de
aplicaciones Web con JavaScript
19 Diciembre de 2012, 9:00-14:
Dr. Diego López-de-Ipiña González-de-Araza
[email protected]
http://paginaspersonales.deusto.es/dipina
http://www.slideshare.net/dipina
Agenda
1. Introducción (30’)
- RIA, Mobile y Web Apps
- Tecnologías clave
- HTML
- CSS
- JavaScript
2. JavaScript avanzado (70’)
- Repaso de características generales de JavaScript
- jQuery
- JQuery UI y jQuery Mobile
RIA: Rich Internet Applications
- RIAs son aplicaciones web que tienen características de funcionalidad
similar al de las aplicaciones de sobremesa tradicionales.
- Las aplicaciones RIA constituyen una aplicación cliente que mantiene
estado y que está desacoplada de la capa de servicios en el back-end
- Las aplicaciones RIA requieren el siguiente entorno de ejecución:
- Se ejecutan en un navegador web, o no requiere instalación software
- Se ejecutan en un entorno seguro denominado sandbox
- Beneficios:
- Las aplicaciones RIA incrementan el retorno en la inversión (ROI) simplificando
y mejorando la interacción del usuario
- Permiten a los usuarios encontrar información más fácilmente
- Completar tareas rápidamente y de forma precisa
- Generan ricas visualizaciones de datos para ayudar en la mejora de la toma de
decisiones
Taxonomía de aplicaciones RIA
• 3 tipos:
- Client-based – Aplicaciones basadas en un cliente de sobremesa
- Player-based – Aplicaciones que se ejecutan sobre una extensión del
navegador
- Browser-based – Aplicaciones web que usan frameworks JavaScript
- HTML5 es el nuevo estándar HTML
- Es el resultado de la cooperación entre World Wide Web Consortium (W3C) y
el Grupo de Trabajo en Tecnologías de Aplicaciones Web (WHATWG).
- HTML5 es todavía un trabajo en curso, aunque, la mayoría de los
navegadores ya soportan muchos de los elementos y APIs de HTML5.
- Los principios fundacionales de HTML5 son:
- New features should be based on HTML, CSS, DOM, and JavaScript
- Reduce the need for external plugins (like Flash)
- Better error handling
- More markup to replace scripting
- HTML5 should be device independent
- The development process should be visible to the public
- Ningún navegador ofrece un soporte completo
- Pero todos los navegadores (Safari, Chrome, Firefox, Opera, Internet Explorer)
añaden nuevas características HTML5 a sus últimas versiones
HTML5: The Web as a Platform
Contribuciones de HTML
- Nuevos elementos y atributos
Nuevos elementos para cabeceras, pies, secciones y artículos: , , , ,
Nuevos elementos de formularios (calendario, fecha, hora, email, URL, búsqueda), atributos, tipos de entradas, validación automática
- Soporte CSS3 completo
- Nuevos selectores y propiedades
- Animaciones y transformaciones 2D/3D
- Esquinas redondeadas y efectos de sombra
- Fuentes descargables
- Video y Audio, reproducir video y audio es más fácil que nunca
- HTML5 y HTML5
- 2D/3D Graphics, dibujar gráficos es más fácil que nunca:
- Uso del elemento
- Uso de SVG inline
- Uso de CSS3 2D/3D
- Soporte para el desarrollo de aplicaciones Web
- Almacenamiento local y acceso local a ficheros
- Bases de datos SQL locales
- Caché de aplicaciones
- Hilos JavaScript
- XHTMLHttpRequest 2
Nuevos elementos en HTML
- HTML5 incluye nuevos elementos para mejorar la estructura, gestión de
formularios, dibujado y contenidos multimedia
- Elementos obsoletos en HTML 4.01 han sido eliminados
- Los siguientes elementos han sido creados para mejorar la estructura:
Tag Description (^) Defines an article (^) Defines content aside from the page content (^) Isolates a part of text that might be formatted in a different direction from other text outside it (^) Defines a command button that a user can invoke (^) Defines additional details that the user can view or hide (^) Defines a visible heading for a element (^) Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. (^) Defines a caption for a element (^) Defines a footer for a document or section (^) Defines a header for a document or section (^) Groups a set of to elements when a heading has multiple levels (^) Defines marked/highlighted text (^) Defines a scalar measurement within a known range (a gauge) (^) Defines navigation links (^) Represents the progress of a task (^) Defines a ruby annotation (for East Asian typography) (^) Defines an explanation/pronunciation of characters (for East Asian typography) (^) Defines what to show in browsers that do not support ruby annotations (^) Defines a section in a document (^) Defines a date/time (^) Defines a possible line-break
- Nuevos elementos de multimedia:
- El nuevo elemento para dibujado canvas:
- Nuevos elementos para form:
- Elementos eliminados:
- , , , , , , , , , , ,
Tag Description
(^) Defines sound content
(^) Defines a video or movie
(^) Defines multiple media resources for and
(^) Defines a container for an external application or interactive content (a plug-in)
(^) Defines text tracks for and
Tag Description (^) Used to draw graphics, on the fly, via scripting (usually JavaScript)
Tag Description (^) Specifies a list of pre-defined options for input controls
(^) Defines a key-pair generator field (for forms)
(^) Defines the result of a calculation
Nuevos elementos en HTML
HTML5 Input types HTML
Points:
Select your favorite color:
Birthday:
E-mail:
HMTL5 Form elements
• HTML5 tiene los siguientes elementos nuevos de formulario:
- , especifica una lista de opciones para un elemento
. Usado para proveer un "autocomplete" a elementos
- , proporciona una manera segura de autenticar usuarios
- , representa el resultado de un cálculo
• Ejemplo:
HTML5 Canvas
- El elemento se usa para pintar gráficos sobre la marcha.
- El elemento es un contenedor rectangular de gráficos, donde la parte superior izquierda tiene la coordenada (0, 0)
- Debemos utilizar código JavaScript para dibujar los gráficos.
- Necesarios los atributo id (referido en el script), width y height para definir el tamaño.
- Ejemplo:
Define el canvas: < canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Dibuja sobre el mismo con JavaScript:
- Para dibujar líneas usamos los siguientes métodos:
- moveTo(x,y) define el punto de comienzo de la línea
- lineTo(x,y) define el punto de fin de la línea
- Para dibujar un círculo en un canvas, usaremos el siguiente método:
- arc(x,y,r,start,stop)
- Para dibujar texto en un canvas, las propiedades y métodos más importantes son:
- font - define las propiedades de fuentes de texto
- fillText(text,x,y) – rellana el texto en el canvas
- strokeText(text,x,y) – dibuja texto en el canvas (sin relleno)
- Se pueden usar gradientes para rellenar rectángulos, círculos, líneas, texto.
- createLinearGradient(x,y,x1,y1) – crea un gradiente linear
- createRadialGradient(x,y,r,x1,y1,r1) – crea un radiente radial/circular
- Para digujar una imagen en un canvas, usaremos el siguiente método: drawImage(image,x,y)
- Ejemplo:
var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);
HTML5 Canvas: Primitivas de
dibujo
HTML5 Drag and Drop
• Drag and drop permite “agarrar” un objeto y “dejarlo” en una
localización diferente.
- En HTML5 es parte del estándar, todo elemento es arrastrable
• Pasos:
1. Para hacer un elemento arrastrable, pon su atributo draggable a
true
2. Especifica qué debería ocurrir cuando el elemento es arrastrado a
través de la función de callabak ondragstart:
ev.dataTransfer.setData("Text",ev.target.id);
3. Haz el “drop”, gestionando el evento drop
Drag the W3Schools image into the rectangle: