I.S.P.P. “Fray Florencio Pascual Alegre González” Autorización de Funcionamiento D.S. 045-84-ED, 24-10-84 Calle San José – Barrio Tarapacá s/n – Requena – Loreto. Telefax.: (065) 412322, e-mail:
[email protected]
MODULO DE APRENDIZAJE LENGUAJE DE PROGRAMACION IV
Desarrollo en HTML, CSS y Javascript REQUENA – 2016
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
PRESENTACION Un módulo de enseñanza aprendizaje, es una propuesta metodológica bien organizada que establece la ruta que tiene que seguir el estudiante para lograr las competencias del curso. Este módulo de aprendizaje está diseñado para los alumnos del VIII ciclo de la Carrera de Computación e Informática del I.S.P.P. “Fray Florencio Pascual Alegre González, que describe con rigor y profundidad los elementos necesarios, ilustrándolos con ejemplos sencillos, pero realistas. Todo ello con un enfoque multi-disciplinar que cubre la programación en JavaScript y el diseño de gráfico. Se ilustra también el uso de librerías tales como jQuery o jQuery UI, Bootstrap (diseños adaptable), gmaps (integración de GoogleMaps) o phonegap (creación de apps ).
2
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
COMPETENCIAS DEL CURSO Permitir a los estudiantes realizar mantenimientos de Aplicativos Web, elaborar, proyectos educativos usando técnicas de programación orientada a objetos, propiciando la observación y la creatividad en la elaboración en forma individual y grupal. Capicitar para un primer nivel de desarrollo de aplicaciones para terminales fijos y móviles (PC, teléfono móvil, tableta, etc) en HTML5, CSS3 y JavaScript5, con las que se diseñan la mayoría de las aplicaciones de cliente en Internet.
PRODUCTO DEL CURSO Los alumnos serán capaces de diseñar Páginas Web y apps adaptadas a PC, teléfono móvil o tableta, a programar nuevas aplicaciones en JavaScript, a ejecutarlas y depurarlas en el navegador Web o a empaquetarlas para las tiendas de aplicaciones de Android, iOS (Apple) o FirefoxOS.
3
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
PRIMERA UNIDAD INTRODUCCIÓN AL DESARROLLO EN HTML5, CSS3 LECCIÓN N° 1 INTRODUCCIÓN A INTERNET Y A LA WEB 1.1. CLIENTES, SERVIDORES Y LA NUBE
Clientes: Dan acceso a información y servicios en Internet Servidores: Alojan la información y los servicios La nube: conjunto de terminales y servidores interconectados con aplicaciones y protocolos de Internet TCP/IP: protocolos de interconexión de redes de fibra, cable, WIFI, etc, sobre los que se implementan las aplicaciones de Internet y sus protocolos 1.2. CLIENTES, NAVEGADORES Y TIENDAS
Clientes de acceso a Internet más importantes son : PCs, portátiles, tabletas, teléfonos inteligentes Navegador (browser) cliente Web de acceso a servidores. Utilizando: URL, HTTP, HTML, CSS y JS Ejemplo: Chrome, Firefox, Internet Explorer, Opera, Safari, ... Tiendas de aplicaciones Instalan aplicaciones en móviles y tabletas. Las aplicaciones usan las normas de la Web (URL, HTTP, ....) 1.3. MÁQUINA SERVIDORA (HOST)
Contiene información y servicios Una máquina servidora tiene una dirección “conocida” en Internet Dirección simbólica (de dominio o DNS): upm.es, google.com, … Cada dirección de dominio tiene una dirección IP (binaria) asociada Hay 2 tipos de direcciones IP: IPv4 e IPv6 IPv4: versión 4 del protocolo IP con dirección de 32 bits o 4 octetos ejemplo: 192.9.0.144, 127.0.0.1 (localhost - mi máquina), ... IPv6: versión 6 del protocolo IP (última) con dirección de 128 bits ejemplo: 2001:db8:85a3::8a2e:370:7334, .... 1.4. SERVIDORES Y PUERTOS
Puerto Dirección de 16 bits dentro de la máquina servidora o Es donde se instala el programa servidor El programa servidor es lo que normalmente denominamos servidor o Cliente y servidor se comunican a través de un protocolo: HTTP, SMTP, o Utilizando el interfaz de sockets TCP/IP para comunicar entre ambos Los servicios tienen un protocolo y un puerto por defecto Web: Protocolo HTTP (puerto 80), HTTPS (443) Email: Protocolo SMTP (puerto 25), POP3 (110), IMAP143) Shell segura: protocolo SSH (puerto 22) 4
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 1.5. URL (UNIFORM RESOURCE LOCATOR)
Dirección de un recurso en un servidor en Internet Internet soporta muchos tipos de servicios diferentes Cada tipo de servicio utiliza un URL y protocolo diferentes Algunos ejemplos de tipos de URLs URL Web: utiliza HTTP para acceder a recursos, incluye o Protocolo, servidor y recurso (camino): http://google.com/picture.png URL de correo (email): identifica el buzon de usuario, incluye o Protocolo, buzon de usuario y servidor: mailto:
[email protected] 1.6. HTTP (HIPERTEXT TRANSFER PROTOCOL)
Protocolo del Web Procesa recursos identificados por un URL en un servidor remoto Métodos o comandos principales de HTTP GET: trae al cliente (lee) un recurso identificado por un URL POST: crea un recurso identificado por un URL PUT: actualiza un recurso identificado por un URL DELETE: borra un recurso identificado `pr un URL ....... (hay mas comandos) 1.7. APLICACIÓN WEB
Aplicaciones ejecutables en un navegador creadas con HTML, CSS y JavaScript HTML :Lenguaje de marcado de páginas Web, define la estructura del contenido de una página Web . En WebApps define la interfaz de la aplicación con el usuario. CSS :Define el estilo visual de un una página o aplicación Web (HTML) JavaScript :Lenguaje de programación de aplicaciones de cliente Ejemplo: Aplicación Web: HTML, CSS y JavaScript
HTML
Lenguaje de marcado CSS
Estilo la visualización JavaScript
Lenguaje de programación
5
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 1.8. ACTIVIDAD CUESTIONARIO
A. Indicar qué respuesta define correctamente al siguiente término: DELETE
Protocolo que permite procesar remotamente recursos en un servidor. Comando de HTTP para traer páginas Web al cliente para su visualización. Lenguaje que define la estructura de la información de una página Web. Comando de HTTP para crear recursos en un servidor. Lenguaje que define el estilo de visualización de la página Web en el navegador. Comando de HTTP para borrar recursos en un servidor. Comando de HTTP para editar recursos en un servidor.
B. Indicar qué respuesta define correctamente al siguiente término: JavaScript
Dirección que identifica sin ambigüedad un recurso en Internet Unidad de información digital de interés para un usuario. Comando de HTTP para traer páginas Web al cliente para su visualización. Lenguaje que define la estructura de la información de una página Web. Comando de HTTP para crear recursos en un servidor. Lenguaje que define el estilo de visualización de la página Web en el navegador. Lenguaje de programación de aplicaciones de cliente. Dirección interna de la máquina servidora donde se instala un servidor.
C. Indicar que respuesta define correctamente al siguiente término: PUERTO
Protocolo que permite procesar remotamente recursos en un servidor. Dirección que identifica sin ambigüedad un recurso en Internet Unidad de información digital de interés para un usuario. Comando de HTTP para traer páginas Web al cliente para su visualización. Lenguaje que define la estructura de la información de una página Web. Comando de HTTP para crear recursos en un servidor. Lenguaje que define el estilo de visualización de la página Web en el navegador.
D. Indicar qué respuesta define correctamente al siguiente término: GET
Comando de HTTP para traer páginas Web al cliente para su visualización. Lenguaje que define la estructura de la información de una página Web. Comando de HTTP para crear recursos en un servidor. Comando de HTTP para borrar recursos en un servidor. Comando de HTTP para editar recursos en un servidor. Lenguaje de programación de aplicaciones de cliente.
6
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT LECCION N° 2 INTRODUCCIÓN A LOS ELEMENTOS BÁSICOS DE HTML, CSS 2.1. HTML/CSS: Mi Primera Pagina Web 2.1.1.
QUE ES HTML Es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse en cualquier navegador. … … Estandarizado en la norma ISO de SGML (Standard Generalized Markup Lenguage). El W3C desarrolla especificaciones técnicas y directrices, de forma que se pueda asegurar una alta calidad técnica y editorial.
2.1.2.
ESTRUCTURA HTML Un documento HTML tiene tres etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él. , y Las etiquetas pueden escribirse tanto en mayúsculas como en minúsculas, pero se recomienda el uso de minúsculas: o, o
Editor
2.1.3.
Visualización en el navegador
LENGUAJE HTML Las marcas de texto en html, se emplean para el estructurado semántico del contenido . Los textos habitualmente están formados básicamente por titulares párrafos , resaltando en ellos agunas palabras en negrita o en cursiva . Las imágenes se vinculan en una página HTML con la etiqueta img con los atributos: src = URL, width = ancho, height = alto, alt = texto alternativo de la imagen. 7
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Las imágenes que se usan en la web son: GIF, JPG, PNG y las imágenes vectoriales en SVG Ejemplo:
2.1.4.
URL URL (Uniform Resource Locator) es el localizador de un archivo en internet. Una dirección absoluta en internet, que combina el nombre del servidor que proporciona la información, el directorio donde se encuentra, el nombre del fichero: esquema://www.miDominio.com/ruta/miArchivo.html Un esquema define el tipo de servicio de internet: http, es el protocolo usado para la transación en la Web The New York Times https es la versión segura de http Google España mailto, es el esquema que se emplea para enlazar a una dirección de correo. Contacto ftp, es el esquema para la transferencia archivos. Descarga por FTP Una URL local nos lleva a otra página o archivo del mismo sitio de Internet. Ejemplo de un sitio web, de la raíz parten todas las subcarpetas. css, img, pag Cuando el archivos a enlazar está en la misma carpeta: la ruta es directamente el nombre del archivo de destino. Ver siguiente El archivo de destino está en una carpeta de nivel inferior a su origen, en este caso deberemos escribir la ruta a partir de la carpeta donde está el archivo de origen: CSS3 permite añadir bordes y bordes redondeados CSS3 permite añadir sombras box-shadow: none|offset-x offset-y blur-radius spread-radius color inset|initial|inherit; o box-shadow: -5px -5px #888; box-shadow: -5px -5px 5px #888; o box-shadow: -5px -5px 0 5px #888; box-shadow: -5px -5px 5px 5px #888; o box-shadow: 0 0 5px #888; box-shadow: 0 0 5px 5px #888; o box-shadow: inset -5px -5px #888; box-shadow: inset -5px -5px 5px #888; Border-radius:24px Border-radius:24px Border-radius:36px 12 px; o box-shadow:insetBorder-top-left-raduis:24px -5px -5px 0 5px #888;box-shadow: inset -5px -5px 5px 5px 0; #888;box-shadow: inner 0 0 5px #888;box-shadow: inset 0 0 5px 5px #888;
Border-top-right-raduis:50px 30 px
Border-radius: 0 20px 20 px 0
Border-bottom-right-raduis:50px 30px
Border-radius:2px 0 0 20px
box-shadow: -5px -5px #888;
box-shadow: -5px -5px 5px #888;
box-shadow: 0 0 5px #888
box-shadow: 0 0 5px 5px #888;
box-shadow: inset -5px -5px 5px #888
box-shadow: inset -5px -5px 5px #888
Border-radius:50% ;
Border-radius:0 50% 0 50%
box-shadow: -5px -5px 0 5px #888;
box-shadow: inset -5px -5px #888;
box-shadow: inner 0 0 5px #888;
Border-radius:50% 50% 0 0
Border-top-right-raduis:50% 20%
box-shadow: -5px -5px 5px 5px #888;
box-shadow: inset -5px -5px 5px #888
box-shadow: inset 0 0 5px 5px #888;
15
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 2.2.3.1. DIV El elemento es un elemento de bloque que se emplea contener en su interior otros elementos HTML. No tiene ningún significado, es semánticamente neutro. …………….
Atributo ID: identifica unívocamente un elemento HTML en una página. Un elemento HTML solo debe tener un atributo ID y este debe ser único en la página. El selector CSS #caja se refiere al elemento con atributo id="caja”, como en #caja {color:blue} Atributo CLASS: define una clase de elementos HTML. Un elemento puede tener varios atributos CLASS. El selector CSS .card se refiere a todos los elemento de la clase card (que llevan el atributo class="card"), como en .card {color:red}
div
Padding, Margin y border
2.2.4.
RECURSO HTML y CSS MDN: Lista de Elementos HTML5 https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements https://developer.mozilla.org/en-US/docs/HTML/Inline_elements W3C: HTML5 elements http://dev.w3.org/html5/markup/elements.html HTML5-Visual Cheat Sheet https://docs.google.com/viewer?a=v&pid=sites&srcid=bGFuZG1hcmtzY2hvb2wub3Jnf G1zLWNpcmFzLWNsYXNzLXdlYnNpdGV8Z3g6M2I3ZjY1NzJlMjlmNDA3Ng CSS3 Generator http://css3generator.com / CSS3 Gradient Generator http://gradients.glrzad.com/ {CSS} Portal - on line generator 16
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 2.2.5.
Actividad: Cuestionario A. Cuál de las siguientes etiquetas de estructura no es semántica HTML5: B. Cuál de las siguientes etiquetas NO es de bloque block: C. Hay caracteres que deben aparecer en los contenidos como escapes, de manera que no interactúen con la sintaxis del etiquetado. El carácter ">" en el HTML se escribe: < > & D. Dados los valores de sombra para una caja: box-shadow: inset 5px 5px 20px 5px #CCCCCC; La sombra es: De color rojo Interior De 30px de desplazamiento horizontal Exterior
2.3. HERENCIA CSS Para entender como funcionan los selectores y la herencia CSS es necesario entender qué es el árbol del documento
El árbol del documento del ejemplo anterior:
17
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Ancestor es un elemento conectado pero m ás arriba en la estructura del documento
Descendientes son los elementos conectados pero más abajo en la estructura del documento.
Parent es el elemento conectado y directamente sobre un elemento en la estructura del documento.
Child es el elemento conectado y directamente debajo de un elemento en la estructura del documento.
18
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
2.3.1.
Siblings son los elementos que comparten un mismo padre en la estructura del documento
SELECTORES CSS
El selector aplica a todos los elementos HTML de la página con esa etiqueta (p).
El selector múltiple de CSS, incluye varios selectores separados por coma (,), para aplicar propiedades comunes: h1, h2, h3.
El selector descendente puede incluir etiquetas separadas solo por espacios. Se aplicará solo a elementos que estén dentro de otros anteriores, ancestros, en el ejemplo, .caja deberá ser ancestro de nav y nav deberá ser ancestro de ul.
Selector universal * afecta a todos los elementos. * { margin: 0; padding: 0; }
Las clases se usan para aplicar estilos a un elemento determinado. Párrafo rojo .rojo { color: red; }
También se pueden aplicar estilos a un id.
3.2.2. VIDEO. HTML5 permite insertar contenido multimedia, audio y vídeo. Tu navegador no soporta el elemento vídeo Atributos poster: permite insertar una imagen de sustitución cuando el vídeo no está disponible. controls: se incluyen controles de play, pause… width y height: ancho y alto, se ajusta al valor y el otro se calcula automáticamente manteniendo la proporción. loop: reproduce el vídeo continuamente . autoplay: reproduce el vídeo automáticamente. preload: carga el vídeo 27
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Es posible incluir diferentes formatos de un archivo para que el vídeo pueda ser soportado en distintos navegadores, se emplea la etiqueta Formatos y compatibilidad de los navegadores: https://developer.mozilla.org/es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5
Cada navegador, cada dispositivo, soporta diferentes formatos de vídeo. La solución es convertir el vídeo a los diferentes formatos de vídeo, que puede ser un proceso complejo y que requiere tiempo. Una solución puede ser emplear YouTube para reproducir vídeo. Sube el vídeo a YouTube, toma nota de su identificador o copia el código de inserción que facilita YouTube. Los parámetros de YouTube: Autohide , valor 0 para tener los controles visibles y 1 si prefieres que se oculten cuando el video se está reproduciendo. Autoplay, 0 si quieres que el vídeo se reproduzca automáticamente, 1 si espera al play. Controls, con 0 los controles no se muestran con 1 si y en ambos el vídeo se descarga el vídeo, con 2 los controles se muestran pero el video no se descarga hasta hacer play. Loop, 0 sólo una vez y 1 para reproducción infinita. Está en desuso emplear o para insertar vídeo. 3.2.3. AUDIO El audio EN html5 se inserta de manera similar: El formato mp3, no es un formato abierto, para maximizar la compatibilidad usaremos varios formatos con
28
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 3.2.4. ACTIVIDAD Realiza una página que utilice imágenes responsive con la etiqueta picture, que contenga un vídeo de YouTube y archivos de imagen vectorial SVG.
3.3. INTEGRACIÓN DE OBJETOS Y DE MULTIMEDIA EN PÁGINAS HTML5 3.3.1. Integrar objetos y recursos externos HTML permite insertar recursos externos en una página Web con: A.: imágenes Formato de puntos: JPEG, GIF, PNG, .. (resolución fija) Formato vectorial: SVG, … (escalables sin perdida de calidad) B. , : video y audio No existe acuerdo sobre los formatos a utilizar!!! C. : páginas Web y otros objetos Crea un nuevo marco de navegación Web anidado seguro D. : objetos. plugins, imágenes Es el mas genérico. E. : aplicación exterior, normalmente no-HTML Marca heredada del pasado (Flash), se introdujo como un elemento no estándar Permiten integrar (hacer mash-ups) contenidos con gran facilidad http://www.sitepoint.com/add-svg-to-web-page/ https://groups.google.com/forum/#!topic/epub-widgets-discuss/JWGV_RPe4H4 http://www.w3.org/TR/html5/embedded-content-0.html 3.3.2. Audio y Video en HTML5 Las marcas audio y video de HTML5: Permiten incluir audio y video en páginas Web http://www.w3schools.com/html/html5_video.asp
29
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Video: formatos Contenedor OGG Video: Theora (VP7), Audio: Vorbis o Calidad menor Contenedor MP4 Video: H264, Audio: ACC Existen Patentes Contenedor WebM Video: VP8, Audio: Vorbis
¿Qué marca usar? : Es la mas general de todas. Puede integrar una imagen, un marco de navegación anidado o un recurso procesado por un plugin. Permite paso de parámetros e interacción con el objeto integrado. Tipo mime identifica tipo de objeto: : Es la mas segura. Crea una caja de arena (sandbox) y restringe accesos al mismo origen. Protege de acciones hostiles del objeto importado : Marca no estándar heredada de tiempos del Flash. Aunque ha sido incluida en HTML5, su uso no es muy popular. , y pueden usarse con imágenes, video,.. El ejemplo siguiente muestra su equivalencia, incluyendo 2 marcos de navegación anidados, uno con y otro con , 2 videos, uno con y otro con , 2 imagenes, un SVG animado con y un PNG de baja resolución con .
30
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
GALERIA CON FLEXBOX Flexbox adapta los bloques a la caja con display: flex; // Crece horizontalmente (flex-direction:row) flex-wrap: wrap; // Inserta hasta final y pasa a línea siguiente. Coloca cada bloque vertical a la derecha del anterior si cabe y al llegar al final pasa a la línea siguiente. Utilizan valores por defecto (flexgrow:0, flex-shrink:1, flex-basis:auto). Cada bloque vertical puede contener a su vez dos bloques horizontales.
31
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
3.4. ACTIVIDAD LABORATORIO Se entregara una carpeta de nombre Practica_Imagenes que contendrá un archivo Html con imágenes las cuales están desordenadas y sin una estructura. El objetivo del laboratorio será ordenar las imágenes y darle estructura; así como practicar lecciones aprendidas. 3.5. TRABAJO GENERAL DE UNIDAD Crear una página web grupal, que incluya al menos: 1. Uso de colores para texto y fondo, incluyendo al menos colores degradados y sombras en alguna de sus cajas. 2. Distintos encabezados. 3. Uso de caracteres especiales 4. Incluir, imágenes de la ciudad de requena de tipo bitmap y jpg. 5. Dar algún tipo de efecto a las imágenes con CSS3. 6. Incluir algún vídeo cultural de requena. 7. Incluir bordes redondeados en alguna de sus cajas. 8. La página debe comenzar con el siguiente encabezamiento: “Página Grupal de ” 9. Subir dicha aplicación a la cuenta de Neocities.org o de su elección.
32
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
FICHA DE AUTOEVALUACIÓN I.
DATOS INFORMÁTICOS: Área ______________________________________________________________________ Forma dora ______________________________________________________________________ Grupo ______________________________________________________________________ Tema ______________________________________________________________________ Semestre _____________________ Secci ón _____________ Fecha ______/______/ 2016
II.
ALUMNO(A)
III.
CRITERIO DE DESEMPEÑO 1.1.3. T oma decisiones y resuelve problemas con autonomía, asertividad, empatía y responsabilidad. 1.1.4. Demuestra ética, compromiso y autodisciplina en las tareas que asume. 2.3.4. Utiliza las TIC existentes en su medio, en sus procesos pedagógicos asumiendo respeto por las ideas vertidas en las T IC. 3.1.4. Actúa bajo principios de convivencia democrática, buscando el bienestar colectivo.
3.
CRITERIOS DE EVALUACIÓN INDICADORES
1
2
ESCALA 3 4
5
Total
Demuestra compromiso y autodisciplina en la elaboración y seguimiento de las prácticas de laboratorio Busco información adicional y participó activamente en clase Me expreso con claridad, coherencia y fluidez, demostrando preparación y dominio del tema Asume con responsabilidad las tareas y prácticas asignadas para la elaboración de las páginas y aplicativos web. Demuestra una actitud crítica y un manejo adecuado de los temas en el proceso de su aprendizaje. Intervengo en clase con mis interrogantes, ideas u opiniones con claridad y coherencia Actuó con respeto y responsabilidad durante el horario de clases Establece un clima de respeto, cooperación y tolerancia al planificar y ejecutar los trabajos en grupos. T OT AL
LEYENDA: INSUFICIENTE (1)
SUFICIENTE (2)
REGULAR (3)
BUENO (4)
MUY BUENO (5)
PROMEDIO TOTAL: PUNTAJE OBTENIDO X 20 = PUNTAJE TOTAL 6.
OBSERVACIONES __________________________________________________________________________________________ __________________________________________________________________________________________ __________________________________________________________________________________________
________________ Alumno(a)
33
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
SEGUNDA UNIDAD “JAVASCRIPT” LECCION 04 INTRODUCCIÓN A JAVASCRIPT: EXPRESIONES, VARIABLE, FUNCION, OBJETO Y DOM. 4.1. JAVASCRIPT: EXPRESIONES. Lenguaje de programación diseñado en 1995 por Brendan Eich. Para animar páginas Web en el Navegador Netscape. Hoy se ha convertido en el lenguaje del Web y de Internet. Guía: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide . JavaScript: sigue la norma ECMA-262 (European Computer Manufacturers Assoc.). La que es “Seguida” por todos los navegadores: Chrome, Explorer, Firefox, Safari, .. Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript.
ECMA-262 ha evolucionado mucho, siempre con "compatibilidad hacia atrás” ES3 - ECMAScript 3 (Dec. 1999): navegadores antiguos Primera versión ampliamente aceptada, compromiso entre Netscape y Microsoft ES5 - ECMAScript 5.1 (Jun. 2011): navegadores actuales Desarrollado junto con plataforma HTML5 (HTML, CSS y JavaScript) de WHATWG (https://whatwg.org) ES6 - ECMAScript 6 (Jun. 2015): en vías de introducción en navegadores Introduce muchas mejoras, ver http://es6-features.org/ 4.1.1.
EXPRESIONES NUMERICAS Y OPERADORES JavaScript incluye operadores Los operadores permiten formar expresiones, componiendo valores con dichos operadores Una expresión representa un valor, que es el resultado de evaluarla Ejemplo: operadores aritméticos +, -, *, / formando expresiones numéricas Las expresiones se evalúan (=>) a los valores resultantes Expresiones mal construidas dan error o llevan el intérprete a un estado inconsistente 13 + 7 => 20 // Suma de números 13 - 1.5 => 11.5 // Resta de números // OJO! la coma española es un punto en la sintaxis inglesa (8*2 - 4)/3 => 4 // Expresión con paréntesis 8 /*3 => ?? // Expresión incorrecta 8 3 => ?? // Expresión incorrecta 34
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 1. Abrir consola JavaScript de Chrome.
La consola de un navegador (Chrome) puede ejecutar sentencias o expresiones JavaScript en modo interactivo. El interprete analiza y ejecuta el texto introducido al teclear nueva línea (Enter). Si tecleamos una expresión la evalúa y calcula el resultado
2. Ejecutar sentencias en consola de chrome.
Expresión sintácticamente
incorrecta da ERROR
4.1.2.
TEXTO: STRINGS. El texto escrito se representa en JavaScript con strings. Un string delimita el texto con comillas o apóstrofes, por ej. Frases: "hola, que tal" o 'hola, que tal' String vacío: "" o '' Ejemplo de "texto 'entrecomillado' ", comillas y apóstrofes se pueden anidar, 'entrecomillado' forma parte del texto. Operador + concatena strings, por ejemplo "Hola" + " " + "Pepe" => "Hola Pepe” 35
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
4.1.3.
La propiedad length de un string indica su longitud (Número de caracteres) "Pepe".length => 4 “Hola Pepe".length => 9
SOBRECARGA DE OPERADORES Los operadores sobrecargados tienen varias semánticas, dependiendo del contexto en que se usan en una expresión Por ejemplo, el operador + tiene 3 semánticas diferentes Suma de enteros (operador binario) Signo de un número (operador unitario) Concatenación de strings (operador binario) 13 + 7 => 20 // Suma de números +13 => 13 // Signo de un número "Hola " + "Pepe" => "Hola Pepe" // Concatenación de strings
4.1.4.
CONVERSION DE TIPOS DE EXPRESIONES. JavaScript realiza conversión automática de tipos cuando hay ambigüedad en una expresión, utiliza las reglas de prioridad para resolverla. La expresión "13" + 7 es ambigua, porque combina un string con un number. Con ambigüedad JavaScript da prioridad al operador + de strings, convirtiendo 7 a string. La expresión +"13" también necesita conversión automática de tipos. El operador + solo esta definido para number (no hay ambigüedad). JavaScript debe convertir el string "13" a number antes de aplicar operador +. 36
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT La prioridad de los operadores es descendente y de izquierda a derecha. (Mayor si más arriba o más a izq.) GUIAS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
. [] Acceso a propiedad o invocar método; índice a array new Crear objeto con constructor de clase () Invocación de función/método o evaluar expresión ++ -Pre o post auto-incremento; pre o post auto-decremento ! ~ Negación lógica (NOT); complemento de bits + Operador unitario, números. signo positivo; signo negativo delete Borrar propiedad de un objeto typeof void Devolver tipo; valor indefinido * / % Números. Multiplicación; división; modulo (o resto) ++ Concatenación de strings; Números. Suma; resta > >>> Desplazamientos de bit < >= Menor; menor o igual; mayor; mayor o igual instanceof in ¿objeto pertenece a clase?; ¿propiedad pertenece a objeto? == != === !== Igualdad; desigualdad; identidad; no identidad & Operación y (AND) de bits ^ Operación ó exclusivo (XOR) de bits | Operación ó (OR) de bits && Operación lógica y (AND) 8*2 - 4 => 12 || Operación lógica o (OR) * tiene más prioridad que -, pero (..) obliga a evaluar ?: = OP= , 4.1.5.
antes - en: Asignación condicional 8*(2 - 4) => -16 Asignación de valor Asig. con operación: += -= *= /= %= = >>>= &= ^= |= Evaluación múltiple
CUESTIONARIO OBLIGATORIO. A. Indicar el resultado de evaluar la siguientes expresión JavaScript: "2"+"3" B.
2 4 5 23 "23" ErrorDeEjecución
Indicar el resultado de evaluar la siguientes expresión JavaScript: +2+"3"
5 23 "23" ErrorDeEjecución
37
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
C.
Indicar el resultado de evaluar la siguientes expresión JavaScript: 2+(+"3")
2 5 23 33 "23" ErrorDeEjecución
D. Indicar el resultado de evaluar la siguientes expresión JavaScript: ("10"+"23").length
5 23 33 "23" "1023" ErrorDeEjecución
4.2. JAVASRCRIP: PROGRAMAS, SENTENCIAS Y VARIABLES.
Un programa es una secuencia de sentencias, que se ejecutan en el orden en que han sido definidas (con excepciones) Las sentencias realizan tareas al ejecutarse en un ordenador. Cada sentencia debe acabarse con punto y coma: ";”. Los comentarios solo tienen valor informativo, para ayudar a entender cómo funciona el programa. Comentario multilínea: delimitado con /* …. */ /* Ejemplo de programa JavaScript */ Comentario de una Sentencia 1: define la línea: empieza con variable x con valor 7. var x = 7; // Definición de variable // y acaba al final de la // visualizar x en el navegador línea Sentencia 2: visualiza document.write(x); x en el navegador 4.2.1.
SCRIPT JAVASCRIPT CON VARIABLES. Script: programa JavaScript encapsulado entre marcas . Se ejecuta al cargar en el navegador la página Web que lo contiene. JavaScript es un lenguaje interpretado que ejecuta las instrucciones a medida que las va leyendo document.write() convierte a string y lo visualiza en el navegador. El string se interpreta como HTML y se visualiza en el lugar de la página donde está el script JavaScript 38
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Una variable guarda valores para uso posterior. Una variable representa el valor que contiene. Puede utilizarse en expresiones como cualquier otro valor.
Define la variable euro con valor 10
Visualizan en el navegador el resultado de evaluar las expresiones
Separación de línea HTML
4.2.2.
DEFINICIÓN DE VARIABLES Y ESTADO DEL PROGRAMA Las variables se crean con la sentencia de definición de vari ables La sentencia comienza con la palabra reservada var. A continuación vienen una o más definiciones de variables separadas por comas Cada definición de variable comienza con el nombre de la variable . A la variable se le puede asignar un valor usando el operador de asignación: = Undefined: valor (y tipo) especial de JavaScript que significa indefinido. Las variables sin ningún valor asignado contienen el valor undefined Estado de un programa: Conjunto de todas las variables creadas por el programa junto con sus correspondientes valores
4.2.3.
SINTAXIS DE LOS NOMBRES DE VARIABLES
El nombre (o identificador) de una variable debe comenzar por: letra, _ o $, El nombre pueden contener además números Nombres bien construidos: x, ya_vás, $A1, $, _43dias Nombres mal construidos: 1A, 123, %3, v=7, a?b, .. Nombre incorrecto: da error_de_sintaxis e interrumpe el programa
Un nombre de variable no debe ser una palabra reservada de JavaScript. Por ejemplo: var, function, return, if, else, while, for, in, new, typeof, …. 39
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
4.2.4.
Las variables son sensibles a mayúsculas mi_var y Mi_var son variables distintas
ASIGNACIÓN DE VARIABLES Y ESTADO DEL PROGRAMA
4.2.5.
Una variable es un contenedor de valores, cuyo contenido puede variar. La sentencia de asignación de variables asigna un nuevo valor con el operador: = Las variables de JavaScript son no tipadas. Esto significa que se puede asignar cualquier tipo de valor. Una variable puede contener un número, un string, undefined, .. Se denomina punto de ejecución del programa: Al estado en que queda el programa después de ejecutar una instrucción El estado de un programa varia en función del punto de ejecución
RECOMENDACIONES SOBRE SINTAXIS
Se recomienda delimitar las sentencias siempre con: ; La sintaxis de JS permite introducir caracteres adicionales (blanco, nueva linea, ..) para facilitar la legibilidad del programa
JavaScript permite omitir ; si la sentencia acaba con nueva línea. Esto puede dar problemas y no debe hacerse nunca.
Cada sentencia debe ocupar una línea por legibilidad, salvo algunas excepciones Las sentencias con bloques de código: if/else, while, for, definición de funciones, sentencias que contienen expresiones muy largas
40
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 4.3. JAVASCRIPT: EXPRESIONES CON VARIABLES Una variable representa el valor que contiene. Puede ser usada en expresiones como cualquier otro valor Una variable puede utilizarse en la expresión que se asigna a ella misma La parte derecha usa el valor anterior a la ejecución de la sentencia y = y - 2 asigna a y el valor 6 (8-2), porque y tiene el valor 8 antes de ejecutarse Usar una variable no definida en una expresión provoca un error y la ejecución del programa se interrumpe
4.3.1.
PRE Y POST AUTO INCREMENTO O DECREMENTO JavaScript posee los operadores ++ y -- de auto-incremento o decremento ++ suma 1 y -- resta 1 a la variable a la que se aplica ++ y -- se pueden aplicar por la derecha o por la izquierda a las variables de una expresión Si ++/-- se aplica por la izquierda a la variable (pre), el incremento/decremento se realiza antes de evaluar la expresión Si ++/-- se aplica por la derecha (post) se incrementa/decrementa después de evaluarla Ojo! Usar con cuidado porque tiene efectos laterales y lleva a programas crípticos.
4.3.2.
OPERADORES DE ASIGNACIÓN Es muy común modificar el valor de una variable, sumando, restando, .... algún valor Por ejemplo, x = x +7; y = y - 3; z = z * 8; ……. JavaScript tiene operadores de asignación especiales para estos casos n +=, -=, *=, /=, %=, ……(y para otros operadores del lenguaje) x += 7; será lo mismo que x = x + 7; 41
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
4.4. JAVASCRIPT: FUNCIONES Función: bloque de código (con parámetros) asociado a un nombre . La función se invoca (o ejecuta) por el nombre y devuelve un valor como resultado. En la invocación se deben asignar valores concretos a los parámetros Las funciones permiten crear operaciones de alto nivel . Se denominan también abstracciones o encapsulaciones de código. La función representa el valor resultante de su ejecución (evaluación). El resultado de evaluar una función depende del valor de los parámetros. Puede utilizarse en expresiones como cualquier otro valor
4.4.1.
FUNCIÓN: DEFINICIÓN E INVOCACIÓN
Una función se define con la palabra reservada function seguida del nombre . A continuación se definen los parámetros entre paréntesis. Los parámetros son variables que se asignan en la invocación. Puede asignarse nuevos valores en el bloque igual que a las variables A continuación se define el bloque de código delimitado entre llaves {} . El bloque contiene instrucciones La sentencia return finaliza la ejecución. Devolviendo el resultado de evaluar como valor de retorno. Si la función llega a final del bloque sin haber ejecutado un return, acaba y devuelve undefined
42
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
4.4.2.
PARÁMETROS DE UNA FUNCIÓN La función se puede invocar con un número variable de parámetros. Un parámetro definido, pero no pasado en la invocación, toma el valor undefined Un parámetro pasado en la invocación, pero no utilizado, no tiene utilidad
4.4.3.
4.4.4.
EL ARRAY DE ARGUMENTOS DE FUNCIONES.
Los parámetros de la función están accesibles también a través del array de argumentos: arguments[....]. Cada parámetro es un elemento del array.
En: comer('José', 'paella') arguments[0] => 'José' arguments[1] => 'paella'
FUNCIONES COMO OBJETOS Las funciones son objetos de pleno derecho, pueden asignarse a variables, a propiedades, pasarse como parámetros, …. Literal de función: function (..){..} Función sin nombre, que suele asignarse a una variable, que es la que le da nombr. Se puede invocar a través del nombre de la variable. El operador (...) invoca una función ejecutando su código. Este operador solo es aplicable a funciones (objetos de la clase Function), sino da error. El operador puede incluir parámetros separados por coma, accesibles en el código de la función 43
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
4.5. JAVASCRIPT: OBJETOS, PROPIEDADES, MÉTODOS Y DOM 4.5.1.
ELEMENTOS HTML Y OBJETOS DOM
Los elementos HTML se visualizan en el navegador en cajas asociadas Los objetos DOM de JavaScript permiten inspeccionar y modificar los elementos HTML El atributo id=“…” es distinto en cada elemento y puede utilizarse para identificar los elementos HTML desde JavaScript document.getElementById("fecha"), devuelve el objeto DOM del elemento HTML con atributo id="fecha" El objeto DOM obtenido así permite modificar el elemento HTML visualizado e interaccionar con el usuario
4.5.2.
OBJETOS JAVASCRIPT: MÉTODOS Y PROPIEDADES
Los objetos son colecciones de variables (propiedades) y funciones (métodos), agrupadas en un elemento estructurado que llamamos objecto
Nombres de propiedades y métodos, tienen la misma sintaxis que las variables: a, _method, $1, …
Propiedad: variable de un objeto Se acceden con el operador ".": objeto.propiedad
Método: función "especial" asociada a un objeto, invocada con el operador ".": objeto.metodo(parametros). Un método devuelve un valor de retorno igual que una función El método tiene acceso al objeto y puede inspeccionar o modificar sus componentes 44
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 4.5.3.
EJEMPLOS DE OBJETOS DOM Objetos DOM: dan acceso a los elementos HTML de una página Web, por ejemplo Document: Objeto DOM que da acceso a la página Web cargada en el navegador. Es un objeto visible en todo programa JavaScript cuando este se ejecuta en el navegador getElementById(…….). Es un método que se puede invocar sobre document (pertenece a document) document.getElementById("fecha") getElementById("fecha") devuelve el objeto DOM del elemento HTML con id="fecha", cuando se invoca sobre el objeto document document.getElementById("fecha").innerHTML Es la propiedad innerHTML del objeto DOM asociado al elemento HTML con id="fecha" var cl = document.getElementById("fecha"). Asigna a la variable cl un objeto DOM. cl.innerHTML es la propiedad innerHTML del objeto contenido en cl
4.5.3.1. EJEMPLO FECHA Y HORA: INNERHTML La propiedad innerHTML de un objeto DOM contiene el HTML interno (delimitado entre marcas) La propiedad outerHTML contiene todo el HTML del elemento incluyendo las marcas Modificando el contenido de innerHTML o outerHTML modificamos desde javaScript la página visualizada en el navegador.
La sentencia de asignación document.getElementById("fecha").innerHTML = new Date(); muestra en el navegador la fecha y la hora en la caja del bloque genérico identificado por "fecha".
define un bloque HTML sin contenido la propiedad innerHTML de su objeto DOM contiene inicialmente: "" la propiedad outerHTML de su objeto DOM contiene inicialmente: "" El navegador no muestra nada al visualizar la página, pero el script inserta la hora y la fecha
45
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 4.5.3.2. FECHA Y HORA EQUIVALENTE
El script JavaScript mostrado aquí es totalmente equivalente al anterior, pero es la forma habitual de hacerlo, porque es más conciso, más legible e incluso más eficiente La sentencia de asignación document.getElementById("fecha").innerHTML = new Date(); Se descompone aquí en dos sentencias (equivalentes a lo anterior) La primera carga el objeto DOM en una variable y la segunda modifica su propiedad innerHTML
4.5.3.3. VARIOS SCRIPTS Varios scripts en una página forman un único programa JavaScript. o Las definiciones (variables, funciones, …) son visibles entre scripts Los scripts se ejecutan siguiendo el orden de definición en la página o Instrucciones adicionales ejecutadas en la consola del navegador, se ejecutan después del último script Este ejemplo también es equivalente a los anteriores o Define la función que inserta fecha y hora en un script en la cabecera y la invoca en el script del final o La invocación debe realizarse al final, para que el árbol DOM esté ya construido y el elemento DOM se haya construido ya
4.5.4.
FUNCIONES DE SELECCIÓN DE ELEMENTOS DOM getElementById("my_id"): Es el mas sencillo de utilizar porque devuelve. El objeto DOM con el identificador buscado o null si no lo encuentra ¡Un identificador solo puede estar en un objeto de una página HTML! 46
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT getElementsByName("my_name"), getElementsByTagName("my_tag"), getElementsByClassName("my_class"), querySelectorAll("CSS selector"),...
Devuelven una matriz de objetos Por ejemplo: getElementsByName(“my_name”)[0] referencia el primer elemento con atributo name=”my_name”
4.6. ACTIVIDAD
A. Ampliar la siguiente aplicación Web (muestra la fecha y la hora): Date La fecha y la hora son: var fecha = new Date(); var msj; if (fecha.getHours() < 7) { msj = "Buenas noches";} else if (fecha.getHours() < 12) { msj = "Buenos días";} else if (fecha.getHours() < 21) { msj = "Buenas tardes";} else { msj = "Buenas noches";} document.getElementById("h1").innerHTML = msj; document.getElementById("fecha").innerHTML = fecha; B. Incluyendo los siguientes elementos: 1) El nombre de la persona que hace la entrega debajo del titulo 2) Un bloque debajo de la fecha y la hora y las instrucciones JavaScript necesarias para que muestre en dicho bloque el contenido de las siguientes propiedades DOM en líneas separadas, que comiencen por el nombre de la propiedad(es) mostrada(s): a) Contenido de innerHTML de elemento identificado por id="h2" b) Contenido de outerHTML de elemento identificado por id="h1" c) Contenido de la propiedad global: location.href d) Contenido de la propiedad global: location e) Contenido de las propiedades globales: screen.width y screen.heigth
47
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
LECCIÓN 5 JAVASCRIPT: BOOLEANO, IF/ELSE, STRING, NÚMERO, DOM, EVENTOS E INTERACION 5.1. BOOLEANOS Y SENTENCIA IF/ELSE. A. BOOLEANOS: TRUE Y FALSE: El tipo booleano solo posee los valores: true y false.
B. SENTENCIA IF/ELSE
C. LA CLASE DATE: FECHAS Y HORAS Clase Date new Date() crea objetos pertenecientes a esta clase new Date() devuelve un objeto con fecha y hora del reloj en el momento de crear el objeto Sobre los objetos de esta clase se pueden invocar los métodos definidos para ella getDay(), getHours(), getMinutes(), getFullYear(), ….. Invocar un método que no está definido en un objeto da un error_de_ejecución
48
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
D. IF/ELSE-IF ENCADENADO
E. FUNCIONES ALERT(), CONFIRM() Y PROMPT()
49
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT F. EJERCICIOS
G. CUESTIONARIO OBLIGATORIO Para superar este test, has de responder correctamente al menos el 75% de las preguntas. Principio del formulario 1. Dadas las siguientes definiciones de funciones: function f_1 (x) { if (x) { return 8; } else { return "7"; } } function f_2 (x) { return ((4 antena WIFI -> antena GSM o 3G -> IP fija -> .Se devuelve la respuesta más precisa La geolocalización está accesible en del objeto navigator.geolocation, con método getCurrentPosition(successFunction, errorFunction) o Permite conocer o Latitud y longitud en formato decimal o Altitud y precisión de la altitud o Dirección y velocidad Norma y tutoriales http://dev.w3.org/geo/api/spec-source.html http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/ http://code.google.com/apis/maps/index.html OJO! Geolocalización puede no funcionar por restricciones de seguridad Usar el navegador Firefox para probar los ejemplos geolocalizados en local
83
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 10.2. APLICACIÓN HTML5 GEOLOCALIZADA EN GOOGLE MAPS A. Geolocalización con gmaps.js Aplicacion de geolocalización. Carga un mapa centrado en nuestra posición que se indica con un marcador Usamos librería gmaps.js para acceso a Google Maps, librería muy potente y sencilla de utilizar http://hpneo.github.io/gmaps/. La librería de Google es bastante mas compleja Se añade al mapa un manejador de eventos click/tap, que calcula la ruta hasta el punto indicado.
84
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
10.3. HTML5 SVG: SCALABLE VECTOR A. GRAPHICS SVG: Scalable Vector Graphics. Formato de representación de gráficos vectoriales. Pueden cambiar de tamaño sin perdida de calidad B. EJEMPLO “AJUSTE SVG” “Ajuste SVG” ilustra como reescalar una imagen SVG. Las imagenes en SVG reescalan sin perder calidad, porque son gráficos vectoriales Las imágenes GIT, JPEG o PNG no reescalan bien porque tienen una resolución determinada Esta WebApp tiene 2 botones: “+” y “-” Cada vez que pulsamos uno de estos botones el tamaño de la imagen debe aumentar o disminuir un 10% según pulsemos “+” y “-”
C. EJEMPO “RELOJ SVG” “Reloj SVG” genera un reloj sencillo con SVG El reloj se compone de Un círculo negro, Tres lineas para las manecillas del reloj 85
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT SVG puede animarse con JavaScript, modificando la representación DOM del reloj. Versión 1: las manecillas se mueven con transform https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform Version 2: Calcula las coordenadas de las manecillas Se añade estilo CSS. Mejora el aspecto y adapta al tamaño de la pantalla
D. ANIMAR MANECILLAS CON COORDENADAS Para animar las manecillas del reloj, se incluye un script que cada segundo recalcula las coordenadas exteriores de las manecillas del reloj o El secundero tiene una longitud de 50 pixels o El minutero tiene una longitud de 40 pixels o La manecilla horaria de 30 pixels Las coordenadas x2, y2 de las manecillas de horas, minutos y segundos se calculan con las funciones: o x2(tiempo, unidades_por_vuelta, x1, radio) o y2(tiempo, unidades_por_vuelta, y1, radio)
86
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
E. RELOJES CON “ESTILO” Usando CSS e imágenes se pueden diseñar. Las capturas muestran pequeños cambios de diseño que cambian muy significativamente la apariencia del reloj
87
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
LECCION N° 11 EMPAQUETAR APLICACIONES WEB PARA ANDROID, IOS O FIREFOXOS. 11.1. EJECUCIÓN DE APLICACIONES WEB (HTML/JS/CSS) EN DISPOSICVOS MÓVILES A. OBJETIVO Visualizar nuestras aplicaciones Web desarrolladas con HTML5/JS/CSS3 en disposiCvos móviles. – Android, iOS, Windows Phone, … – smartphones, tablets, … Usaremos las herramientas PhoneGap Desktop y PhoneGap Developer App B. FLUJO DE TRABAJO 1. Desarrollamos una app web 2. Servimos con PhoneGap Desktop 3. Accedemos desde el disposiCvo móvil mediante PhoneGap Developer App
C. PROGRAMAS A INSTALAR PhoneGap Desktop en el ordenador en que desarrollamos la app HTML5/JS/CSS3 PhoneGap Developer App en el dispositivo móvil, que permite visualizar y probar la aplicación anterior D. INSTALACIÓN PHONEGAP DESKTOP
http://docs.phonegap.com/ge`ng-started/1-install-phonegap/desktop/ Descargar el instalador para Mac OS X o Windows – Puede que haya que dar permisos de ejecución Con PhoneGap Desktop haremos “visible” la aplicación web, de forma que el cliente móvil pueda ejecutarla en el disposiCvo deseado
E. INSTALACIÓN PHONEGAP DEVEL. APP http://docs.phonegap.com/ge`ng-started/2-install-mobile-app/ Se ejecuta en el disposiCvo móvil – permite visualizar y probar la aplicación Desarrollada sin necesidad de instalar entornos de compilación/desarrollo naCvos de Android, iOS, etc. – Localizar en iTunes, Google Play o Windows Phone Store
88
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT F. PRIMER PROYECTO (I)
G. PRIMER PROYECTO (II)
H. PRIMER PROYECTO (III)
I.
PRIMER PROYECTO (IV)
89
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT J.
PRIMER PROYECTO (V)
K. PRIMER PROYECTO VI
90
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT L. ESTRUCTURA DEL PRIMER PROYECTO
M. CRONÓMETRO SEGUNDERO
91
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
92
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT N. Proyecto PhoneGap • Vamos a realizar un proyecto PhoneGap con el ejemplo visto • Creamos un nuevo proyecto, de nombre Cronometro – opcionalmente, añadimos el ID “org.mooc.crono”
• Tenemos un nuevo proyecto añadido – hay que modificar el código • Pinchamos en “Local path” para obtener el folder que contiene el proyecto – y luego nos situamos en el directorio “www”
Ficheros Cronómetro Segundero 93
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT • Copiamos el código del Cronómetro
Apariencia Cronómetro Segundero
11.2. ACTIVIDAD GENERAL DE UNIDAD Crear una página web con temática educativa, que incluya al menos: 1. Uso de colores para texto y fondo, incluyendo al menos colores degradados y sombras en alguna de sus cajas. 2. Incluir imágenes de la ciudad de requena (para el fondo, para el puzle en JavaScript, etc.) 3. Dar algún tipo de efecto a la CCS3 la cabecera Principal. 4. Incluir bordes redondeados en alguna de sus cajas. 5. Mostrar una ventana emergente de Bienvenida al cargar la página. 6. Utilizar código JavaScript para la fecha y hora de la página. 7. Su página debe contener al menos dos de los siguientes actividades: (Calculadora, ecuaciones matemática, cronometro, puzzle, carrusel) 8. Subir dicha aplicación a la cuenta de Neocities.org o de su elección. 94
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
FICHA DE AUTOEVALUACIÓN IV.
DATOS INFORMÁTICOS: Área ______________________________________________________________________ Forma dora ______________________________________________________________________ Grupo ______________________________________________________________________ Tema ______________________________________________________________________ Semestre _____________________ Secci ón _____________ Fecha ______/______/ 2016
V.
ALUMNO(A)
VI.
CRITERIO DE DESEMPEÑO 1.1.3. T oma decisiones y resuelve problemas con autonomía, asertividad, empatía y responsabilidad. 1.1.4. Demuestra ética, compromiso y autodisciplina en las tareas que asume. 2.3.4. Utiliza las TIC existentes en su medio, en sus procesos pedagógicos asumiendo respeto por las ideas vertidas en las T IC. 3.1.4. Actúa bajo principios de convivencia democrática, buscando el bienestar colectivo.
IV.
CRITERIOS DE EVALUACIÓN INDICADORES
1
2
ESCALA 3 4
5
Total
Demuestra compromiso y autodisciplina en la elaboración de su producto final Busco información adicional y participó activamente en la elaboración de su trabajo Me expreso con claridad, coherencia y fluidez, demostrando preparación y dominio del tema Asume con responsabilidad las tareas y prácticas asignadas para las pract icas con JavaScript Demuestra una actitud crítica y un manejo adecuado de los temas en el proceso de su aprendizaje. Intervengo en clase con mis interrogantes, ideas u opiniones con claridad y coherencia Actuó con respeto y responsabilidad durante el horario de clases Establece un clima de respeto, cooperación y tolerancia al planificar y ejecutar los trabajos en grupos. T OT AL
LEYENDA: INSUFICIENTE (1)
SUFICIENTE (2)
REGULAR (3)
BUENO (4)
MUY BUENO (5)
PROMEDIO TOTAL: PUNTAJE OBTENIDO X 20 = PUNTAJE TOTAL V.
OBSERVACIONES
__________________________________________________________________________________________ __________________________________________________________________________________________
________________ Alumno(a)
95
