Introducción al curso y al programa. Juan Quemada, DIT, UPM

Tamaño: px
Comenzar la demostración a partir de la página:

Download "Introducción al curso y al programa. Juan Quemada, DIT, UPM"

Transcripción

1 Introducción al curso y al programa Juan Quemada, DIT, UPM 1

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

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 Desarrollo de Aplicaciones en HTML5, CSS y Javascript, incluyendo Dispositivos Móviles Firefox O.S. Desarrollo avanzado de Aplicaciones HTML5 y Firefox O.S.*, incluyendo tecnicas de ingenería de software Desarrollo de aplicaciones HTML5 multi-terminal (Android, ios,...)* Desarrollo de servicios en la nube con HTML5, Javascript y node.js* Desarrollo avanzado de servicios en la nube con Javascript y node.js* *Nota: Los otros 4 cursos empezarán en MiriadaX en 2014 y

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

5 Desarrollo y evaluación del curso El curso consta de 5 tramos de 2 modulos 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 Al final de cada módulo (2 ejercicios por tramo) además hay tests obligatorios y mas ejercicios P2P opcionales Plazos y limites Tramo 1: comienzo lunes (o antes), final Tramo 2: comienzo lunes (o antes), final Tramo 3: comienzo lunes (o antes), final Tramo 4: comienzo lunes (o antes), final Tramo 5: comienzo lunes (o antes), final Evaluaciones y curso cierran el

6 Actividades de un Módulo Tarea 0: Descargar transparencias y ejemplos del módulo Fichero ZIP para descargar con w Transparencias en formato PDF w Directorio con ejemplos presentados en el módulo para realizar ejercicios modificando los descargados Directorio con ejemplos publicados en Internet (Google Drive) w ejecutables en Firefox Tareas de Aprendizaje (varias): 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 Cada modulo acaba con un ejercicio P2P obligatorio 6

7 Tarea 0: Transparencias y Ejemplos de un Módulo Descarga 7

8 Equipos y servicios a utilizar Un PC o portatil de trabajo (necesario) con S.O. Windows de Microsoft con S.O. UNIX (Ubuntu,..) de software libre Ordenador MAC con sistema operativo con OS X Móvil o tableta (conveniente para probar, pero no necesario) 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 para publicar Apps y Páginas Web en la nube w Es la cuenta unificada de acceso a Gmail, Youtube, Google+, Docs, Drive,... 8

9 Herramientas a utilizar Simulador/Editor interactivo sencillo: Editor y visualizador de HTML5, CSS y JS con ejemplos cargados Sublime Text 2 Editor de HTML, CCS y JavaScript con ayudas visuales w Creadores (wysiwyg) de páginas Web (opcional) Dreamweaver: Creador de páginas Web muy potente e intuitivo. w Bluegriffon: editor wysiwyg gratuito y de código abierto w Navegador Firefox con su entorno de desarrollo de aplicaciones Web y FirefoxOS 9

10 Seleccionar ejemplo Hacer clic para actualizar pag. Hacer clic en el Modulo 1 Editor Interactivo Juan Quemada, DIT, UPM 10

11 Herramientas de desarrollo web de Firefox. https://developer.mozilla.org/en-us/docs/tools Inspector HTML de Firefox. https://developer.mozilla.org/en-us/docs/tools/page_inspector Editor de Estilos de Firefox. https://developer.mozilla.org/en-us/docs/tools/style_editor Herramientas autónomas de Firefox. Visor de repintado: https://developer.mozilla.org/en-us/docs/tools/paint_flashing_tool Visor 3D: https://developer.mozilla.org/en-us/docs/tools/3d_view Borrador Javascript: https://developer.mozilla.org/en-us/docs/tools/scratchpad Visor de diseño adaptativo: https://developer.mozilla.org/en-us/docs/tools/ Responsive_Design_View Consola Web de Firefox. https://developer.mozilla.org/en-us/docs/tools/web_console Depurador Javascript de Firefox. https://developer.mozilla.org/en-us/docs/tools/debugger Perfilador de Firefox. https://developer.mozilla.org/en-us/docs/tools/profiler Simulador de Firefox OS Documentación de Firefox y sus herramientas Instalación: https://addons.mozilla.org/en-us/firefox/addon/firefox-os-simulator Documentación: https://developer.mozilla.org/en-us/docs/tools/firefox_os_simulator 11

12 Final del tema Muchas gracias Juan Quemada, DIT, UPM 12

13 Introducción a Internet y a la Web Juan Quemada, DIT, UPM 13

14 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,... sobre los que se implementan las aplicaciones de Internet y sus protocolos 14

15 Clientes, navegadores y tiendas Clientes de acceso a Internet más importantes PCs, portátiles, tabletas, teléfonos inteligentes Navegador (browser) cliente Web de acceso a servidores Utilizando: URL, HTTP, HTML, CSS y JS w p.e. Chrome, Firefox, Internet Explorer, Opera, Safari,... Tiendas de aplicaciones Instalan aplicaciones en móviles y tabletas w Las aplicaciones usan las normas de la Web (URL, HTTP,...) 15

16 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, w 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 w ejemplo: , (localhost - mi máquina),... IPv6: versión 6 del protocolo IP (última) con dirección de 128 bits w ejemplo: 2001:db8:85a3::8a2e:370:7334,... 16

17 Servidores y puertos Puerto Dirección de 16 bits dentro de la máquina servidora w Es donde se instala el programa servidor El programa servidor es lo que normalmente denominamos servidor w Cliente y servidor se comunican a través de un protocolo: HTTP, SMTP,... 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) protocolo SMTP (puerto 25), POP3 (110), IMAP143) Shell segura: protocolo SSH (puerto 22) Si un servidor no está en el puerto por defecto Servidor (host) puerto 25 dirección IP puerto 80 SMTP Web: HTTP Su dirección debe incluir el puerto, p.e. dit.upm.es:8080, :

18 google.com URL 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 w Protocolo, servidor y recurso (camino): URL de correo ( ): identifica el buzon de usuario, incluye w protocolo, buzon de usuario y servidor: 18

19 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) Cliente 1 solicita recurso: google.com HTTP GET upm.es apple.es Clientes 2, 3 y 4 solicitan recursos: HTTP GET 19

20 Aplicación Web Aplicaciones ejecutables en un navegador creadas con HTML, CSS y JavaScript HTML CSS Lenguaje de marcado de páginas Web w define la estructura del contenido de una página Web En WebApps define la interfaz de la aplicación con el usuario Define el estilo visual de un una página o aplicación Web (HTML) JavaScript Lenguaje de programación de aplicaciones de cliente 20

21 Aplicación Web: HTML, CSS y JavaScript HTML CSS Lenguaje de marcado Estilo la visualización JavaScript Lenguaje de programación 21

22 WebApps o aplicaciones de cliente Aplicaciones que residen en un servidor pero se ejecutan en un cliente w Se identifican con un URL: El cliente trae la aplicación del servidor con el protocolo HTTP (GET) Las apps se construyen con las tecnologías de la Web URLs, HTTP, HTML, CSS y JavaScript 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 Servidor sirve fichero identificado por URL 22

23 Final del tema Muchas gracias Juan Quemada, DIT, UPM 23

24 Ejercicio Indicar que respuesta define correctamente la función del primer término URL => 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 ara 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, Lenguaje de programación de aplicaciones de cliente Dirección interna de la máquina servidora donde se instala un servidor Recurso =>... (las mismas respuestas)... HTTP =>... (las mismas respuestas)... HTML =>... (las mismas respuestas)... CSS =>... (las mismas respuestas)... JavaScript =>... (las mismas respuestas)... GET =>... (las mismas respuestas)... POST =>... (las mismas respuestas)... PUT =>... (las mismas respuestas)... DELETE =>... (las mismas respuestas)... Puerto =>... (las mismas respuestas)... Juan Quemada, DIT, UPM 24

25 Ejercicio Indicar que respuesta define correctamente la función del primer término URL (2) => 1.Protocolo que permite procesar remotamente recursos en un servidor, 2.Dirección que identifica sin ambigüedad un recurso en Internet, 3.Unidad de información digital de interés para un usuario, 4.Comando de HTTP para traer páginas Web al cliente para su visualización, 5.Lenguaje que define la estructura de la información de una página Web, 6.Comando de HTTP ara crear recursos en un servidor, 7.Lenguaje que define el estilo de visualización de la página Web en el navegador 8.Comando de HTTP para borrar recursos en un servidor, 9.Comando de HTTP para editar recursos en un servidor, 10.Lenguaje de programación de aplicaciones de cliente 11.Dirección interna de la máquina servidora donde se instala un servidor Recurso (3) =>... (las mismas respuestas)... HTTP (1) =>... (las mismas respuestas)... HTML (5) =>... (las mismas respuestas)... CSS (7) =>... (las mismas respuestas)... JavaScript (10) =>... (las mismas respuestas)... GET (4) =>... (las mismas respuestas)... POST (6) =>... (las mismas respuestas)... PUT (9) =>... (las mismas respuestas)... DELETE (8) =>... (las mismas respuestas). Puerto (11) =>... (las mismas respuestas)... Juan Quemada, DIT, UPM 25

26 Codificación de caracteres, UNICODE y character entity 26

27 Alfabeto, código y codificación Juego de caracteres o alfabeto Conjunto de caracteres normalizados para representar una lengua Código de caracteres (ver Código numérico asignado a cada carácter de un alfabeto, p.e. w ASCII: Alfabeto inglés (EEUU) codificado en 7 bits por carácter w ISO Latin-1 (ISO 8859, ISO Latin-15): Alfabetos de Europa occidental, 8 bits w UNICODE: código internacionalizado que soporta muchas lenguas Codificación representación binaria de un código de caracteres, p.e. UNICODE tiene w UTF-8: Código de longitud variable de 1, 2, 3 o 4 bytes, eficiente para lenguas latinas w UTF-16: Codifica plano BMP en 2 bytes, otros planos en 4 bytes w UTF-32: Código de longitud fija: 4 bytes eficiente con planos que no son BMP 27

28 Unicode Consortium UNICODE es un consorcio internacional Define normas de internacionalización (I18N) w códigos de caracteres (UNICODE), símbolos, librerías software, formatos,. Código UNICODE Código de caracteres internacionalizado, w es el resultado mas conocido del consorcio puede representar muchas lenguas w ver: 28

29 Código Unicode Unicode asigna un código numérico a cada carácter Los caracteres se agrupan en planos 4Cada plano se codifica en 2 bytes 2 bytes (octetos): 65,536 caracteres Planos más importantes 4BMP (Basic Multilingual Plane) Agrupa los símbolos más habituales de la mayoría de lenguas actuales 4SMP (Suplementary Multilingual Plane): Lenguas antiguas y mas 4SIP (Supl. Ideographic Plane): Ext. CJK (China, Japan, Korea) 4TIP (Tiertary Ideographic Plane): Lenguas antiguas asiáticas 4SSP (Suplementary Special-purpose Plane): usos especiales 29

30 UNICODE BMP: subconjunto ASCII (Basic Latin) 30

31 UNICODE BMP: extensión ISO Latin1 31

32 Ejemplo Unicode Códigos Unicode BMP: algunos ideogramas chinos Kangxi 32

33 Cuantos códigos de caracteres manejamos? El diseño de una página Web Se pueden utilizar códigos diferentes w El editor utilizará el código seleccionado w El fichero se podrá guardar con otro código w El SO (Windows, Linux,..) utiliza otro código La navegación por Internet puede utilizar códigos diferentes w El navegador tiene un código configurado w por el usuario que lo utiliza w El servidor suele estar internacionalizado w HTML indica el código de la página w OJO: debe coincidir con el del fichero en disco 33

34 Teclado chino Introducción de textos La información textual se introduce a través de un teclado Cada tecla envía un carácter w Los teclados solo solo suelen letras de un área geográfica determinada El teclado incluye un conjunto limitado de teclas Los caracteres no incluidos necesitan un código especial w HTML utiliza caracteres escapados lo caracteres no incluidos w por ejemplo se utiliza para el símbolo de copyright La pantalla es gráfica Teclado arabe puede representar cualquier carácter 34

35 Entidad de carácter HTML La sintáxis de HTML obliga a no utilizar algunos caracteres < es comienzo de marca y no se puede incluir dentro de un texto w Dentro de un texto < debe representarse con character entities Problemas similares ocurren con otros caracteres: >, &,.. Caracteres especiales HTML o sin tecla serán character entities Por ejemplo, un bloque <div> con: Si x < y, e y < z, entonces x < z, w Será en HTML: <div> Si x > y, e y > z, entonces x > z, </div> La tabla superior incluye algunos entidades, tablas completas están en w w w ENTIDADES DE CARÁCTER > < < => significa menor que < > > => significa mayor que " &#22; => ampersand o símbolo & & & & => ampersand o símbolo &.. 35

36 Final del tema Muchas gracias Juan Quemada, DIT, UPM 36

37 Códificación de Unicode Unicode se codifica con múltiples formatos binarios 4Cada uno es adecuado para un uso determinado UTF-8: 4Código de longitud variable: 1, 2, 3 o 4 bytes Representacion eficiente para textos ingleses y en lenguas latinas UTF-16: 4Codifica BMP en 2 bytes, otros planos en 4 bytes UTF-32: Computacionalmente eficiente para lenguas incluídas en BMP 4Código de longitud fija: 4 bytes Computacionalmente eficiente para lenguas ideográficas 37

38 Codificación UTF-8 UTF8: Universal Char. Set Transf. Format 8-bit form 4Es compatible con ASCII Óptimo almacenando textos de lenguas latinas (inglés) Computación costosa 4Auto-sicronizable: Cualquier trozo de texto es recuperable Formato de longitud variable (1 a 4 bytes) 41 byte: incluye ASCII en últimos 7 bits formato: 0xxxxxxx 42 bytes: códigos 127 a 2048 de Unicode (11 bits) formato: 110xxxxx10xxxxxx 43 bytes: resto de UNICODE BMP y otros formato: 1110xxxx10xxxxxx10xxxxxx 44 bytes: japonés, chino y coreano completo y separados formato: 11110xxx10xxxxxx10xxxxxx10xxxxxx 38

39 UTF-16 Codificación UTF-16 4Compromiso entre Eficiencia computacional: Consumo de memoria: Internacionalización: Variantes de UTF-16 4UTF-16BE (Big Endian) byte de más peso en dirección menor 4UTF-16LE (Little Endian) Longitud (casi) fija byte de menos peso en dirección menor 4UTF-16 (Big or Little Endian) 16 bits por carácter para BMP soporta lenguas y culturas actuales Carácter BOM se coloca al principio indicando si es BE o LE 39

40 BOM - Byte Order Mark BOM - Byte Order Mark de Unicode BMP 4 Código 0xFEFF Diseñado para poder detectar el orden de bytes en UTF-16 BOM en UTF-16 4BOM se codifica en UTF-16 como 0xFE,0xFF 0xFE, 0xFF al principio de fichero indica UTF-16 BE (big-endian) en orden inverso (0xFF, 0xFE) indica UTF-16 LE (little-endian) BOM en UTF-8 4 BOM se codifica en UTF-8 como 0xEF, 0xBB, 0xBF Si está al principio de un fichero, puede detectar si es UTF-8 también BOM no se usa en UTF-32 4 UTF-32 ineficiente para transferir o almacenar bytes 40

41 Ejemplos de codificación Codificación Texto Codificación hexadecimal ASCII hola 68 6f 6c a cañón xx xx 6e ISO Latin1 UTF-8 UTF-8-BOM UTF-16BE UTF-16BE-BOM UTF-16LE UTF-16LE-BOM hola cañón hola cañón hola cañón hola cañón hola cañón hola cañón hola cañón 68 6f 6c a f1 f3 6e 68 6f 6c a c3 b1 c3 b3 6e ef bb bf 68 6f 6c a c3 b1 c3 b3 6e f 00 6c a f1 00 f3 00 6e fe ff f 00 6c a f1 00 f3 00 6e f 00 6c a f1 00 f3 00 6e 00 ff fe f 00 6c a f1 00 f3 00 6e 00 41

42 Ejercicios Es posible codificar todo el código UNICODE en UTF-8? (si o no) Está incluido todo el código ASCII en UTF-8? (si o no) Está incluido todo el código ISO-Latin-1 en UTF-16? (si o no) Es posible codificar todo el código UNICODE en UTF-8? (si o no) Es posible codificar todo el código UNICODE en UTF-32? (si o no) El plano BMP de UNICODE incluye todos los ideogramas chinos? (si o no) El plano BMP de UNICODE incluye el alfabeto cirílico griego? (si o no) El plano BMP de UNICODE incluye el alfabeto castellano? (si o no) El plano BMP de UNICODE incluye todos los caracteres del código ASCII? (si o no) El código ASCII incluye todos los caracteres del castellano? (si o no) El plano BMP de UNICODE incluye todos los caracteres del código ISO-Latin-1? (si o no) Juan Quemada, DIT, UPM 42

43 Ejercicios Es posible codificar todo el código UNICODE en UTF-8? (si o no) Está incluido todo el código ASCII en UTF-8? (si o no) Está incluido todo el código ISO-Latin-1 en UTF-16? (si o no) Es posible codificar todo el código UNICODE en UTF-8? (si o no) Es posible codificar todo el código UNICODE en UTF-32? (si o no) El plano BMP de UNICODE incluye todos los ideogramas chinos? (si o no) El plano BMP de UNICODE incluye el alfabeto cirílico griego? (si o no) El plano BMP de UNICODE incluye el alfabeto castellano? (si o no) El plano BMP de UNICODE incluye todos los caracteres del código ASCII? (si o no) El código ASCII incluye todos los caracteres del castellano? (si o no) El plano BMP de UNICODE incluye todos los caracteres del código ISO-Latin-1? (si o no) Juan Quemada, DIT, UPM 43

44 URLs, recursos y enlaces Juan Quemada, DIT, UPM 44

45 google.com Recurso Web, URL y HTTP Recurso Web Contenido digital procesable con HTTP w Normalmente se almacena en un fichero en un servidor URL Web p.e., página Web, foto, pelicula, fichero o parte de el, registro de una BD,... Dirección unívoca de un recurso Web en Internet w HTTP permite procesar el recurso Web identificados por el URL Web Un URL Web tiene 3 componentes básicos Por ejemplo, en w http es el protocolo o método de acceso al recurso w google.com es la dirección del servidor en Internet donde reside el recurso w /picture.com es el camino (path) dentro del servidor que identifica el fichero 45

46 google.com URLs en HTML URL (Uniform Resource Locator) Dirección de recursos en Internet, definidos en normas de IETF w RFC 2396 (98), RFC 2732 (99), RFC 3986 (05),... (http://tools.ietf.org/html/) Caso particular de URI (Uniform Resource Identifier) Los URLs asociados a marcas HTML identifican Recursos externos asociados al elemento definido por la marca Por ejemplo: <a href= > w identifica la página Web a la que se navegará al hacer click en el hiperenlace <img src= > w Identifica el recurso con la imagen asociada a la marca <img...> 46

47 Path o camino de un URL El path es la ruta desde el directorio raíz a través de los directorios del servidor w que lleva al recurso Los servidores Web suelen estar configurados para que el fichero index.html o index.htm se pueda omitir w /lib/coches/index.htm será equivalente a /lib/coches/ El camino (path) es el camino de directorio UNIX (path).. se refiere al directorio anterior w /lib/casas/../coches/vw.htm es equivalente a /lib/coches/vw.htm 47

48 Hiperenlace El hiperenlace permite navegar por Internet Define una relación entre documentos w <a href="http://upm.es">upm</a> Atributos de <a...> href: hiperenlace asociado alternate: página alternativa rel: relación con la página enlazada w alternate, author, license, tag,... type: mime-type de página enlazada... Ejemplos <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/">license</a> Juan Quemada, DIT, UPM 48

49 Ancla (Anchor o Fragment) El ancla (anchor) se añade al final del URL identifica un elemento dentro una página Web w El identificador debe ser único en la página Web Formato: <protocol://><host><path><anchor> Por ejemplo: w #seccion2: identifica la seccion 3 de la página HTML 49

50 URLs relativos relativos al recurso anterior Solo llevan path, el navegador añade w host, protocol y port del acceso anterior Ejemplos Path absoluto: /lib/coches/vw.html w camino absoluto desde el directorio raíz del servidor Path relativo: coches/vw.html, vw.html w Camino relativo desde el directorio del recurso actual Path relativo con..:../casas/chalet.html w Camino relativo con vuelta a directorio padre Anchor solo: #seccion3 w Elemento con id=seccion3 en el mismo recurso Ojo El navegador no accede al servidor, el recurso ya esta cargado Juan Quemada, DIT, UPM 50

51 URL con pregunta o query Se puede añadir una pregunta o query con parámetros <protocol://><host><path><query> w pregunta o query: parámetros con la siguiente sintáxis?param1=valor1&param2=valor2&... Se utilizan en interfaces REST de acceso a servicios w Identifican información en una base de datos Ejemplo w?usuario=1527: envía el parámetro usuario=

52 Otros URLs El URL soporta otros servicios accesibles con otros protocolos, tales como telnet, mailto, file, ftp,... URL de identificación de ficheros locales (con un path): file:///dir1/dir2/fichero.html Solo tiene protocolo y path absoluto. Juan Quemada, DIT, UPM 52

53 URL de Permite crear correos electrónicos en documentos Web. Al hacer clic en ellos se despliega el correo especificado. Mas información en: Juan Quemada, DIT, UPM 53

54 Seleccionar ejemplo Hacer clic para actualizar pag. Hacer clic en el Modulo 1 Editor Interactivo Juan Quemada, DIT, UPM 54

55 Final del tema Muchas gracias Juan Quemada, DIT, UPM 55

56 Ejercicio Si el servidor upm.es contiene solo el recurso /lib/upm.html <DOCTYPE html> <html>... <body> <h1 id="id1" >Servidor UPM</h1> </body> </html> y el servidor aaa.com contiene solo el recurso /lib/aaa.html <DOCTYPE html> <html>... <body> <h1 id="id2" >Servidor AAA</h1> </body> </html> qué recurso identificarán los siguientes URLs upm.es aaa.com => el fichero completo upm.html, el fichero completo aaa.html, el elemento <h1 id="id1" >Servidor UPM</h1> de upm.html, el elemento <h1 id="id2" >Servidor AAA</h1> de aaa.html elemento o recurso inexistente =>... (las mismas respuestas)... =>... (las mismas respuestas)... =>... (las mismas respuestas)... =>... (las mismas respuestas)... #id2 despues de acceder al URL =>... (mismas respuestas)... #id2 despues de acceder al URL =>... (mismas respuestas)... aaa.html#id1 despues de acceder al URL =>... (mismas resp.).. upm.html#id1 despues de acceder al URL =>.. (mismas resp.).. Juan Quemada, DIT, UPM 56

57 Ejercicio Si el servidor upm.es contiene solo el recurso /lib/upm.html <DOCTYPE html> <html>... <body> <h1 id="id1" >Servidor UPM</h1> </body> </html> y el servidor aaa.com contiene solo el recurso /lib/aaa.html <DOCTYPE html> <html>... <body> <h1 id="id2" >Servidor AAA</h1> </body> </html> qué recurso identificarán los siguientes URLs upm.es aaa.com (3) => (1) el fichero completo upm.html, (2) el fichero completo aaa.html, (3) el elemento <h1 id="id1" >Servidor UPM</h1> de upm.html, (4) el elemento <h1 id="id2" >Servidor AAA</h1> de aaa.html (5) elemento o recurso inexistente (5) =>... (las mismas respuestas)... (4) =>... (las mismas respuestas)... (1) =>... (las mismas respuestas)... (2) =>... (las mismas respuestas)... #id2 despues de acceso a URL (4) =>.. (mismas respuestas).. #id2 despues de acceso a URL (5) =>.. (mismas respuestas).. aaa.html#id1 despues de acceso a URL (5) =>.. (mismas resp.).. upm.html#id1 despues de acceso a URL 57 (3) =>.. (mismas resp.).. Juan Quemada, DIT, UPM

58 Publicar en la nube (Google Drive) Juan Quemada, DIT, UPM 58

59 Recursos públicos y de acceso restringido Una página Web o un recurso en Internet puede ser público o de acceso restringido Recurso público Para ser accedido en modo lectura por cualquiera en Internet w Una página Web, una foto, una pelicula, etc. Recurso de acceso restringido Utilizado en aplicaciones Web, como Google Drive w Puede ser creado, editado o borrado, pero solo por usuarios autorizados Autorización: se concede si el usuario se autentica y tiene derecho w Autenticación: por usuario y contraseña, edni, huella dactilar,... 59

60 Publicación en la nube: Google Drive Se debe utilizar una cuenta de Google Para publicar páginas Web y Apps en Google Drive w Google Drive permite crear directorios con acceso público El directorio se crea y edita con acceso restringido w Pero el directorio y sus recursos tienen además acceso público Con otro URL que da acceso en modo solo lectura Este segundo URL público permite Probar que los ejercicios funcionan en Internet w accediendo a ellos desde el PC, móviles y otros terminales Entregar los ejercicios funcionando, para que otros los correjan 60

61 Crear un directorio público I Seguir pasos 1 y 2 para crear un directorio en Google Drive Con Paso 0. Modo línea se puede hacer lo mismo 1. clicar para crear nueva carpeta 2. Escribir nombre y clicar para crear la carpeta 0. Modo cuadricula 61

62 Crear un directorio público II Seguir pasos 1, 2 y 3 para acceder al cambio de permisos 2. clicar para compartir (share) 1. clicar para seleccionar 3. clicar para cambiar Change) 62

63 Crear un directorio público III Seguir pasos 1 y 2 para finalizar el cambio de permisos La carpeta Ejercicios ya es pública en Internet 1. clicar para seleccionar (Public on the Web) 2. clicar para guardar selección 63

64 Acceso público con nuevo URL Todos los accesos anteriores están restringidos al usuario que es dueño del disco (cuenta) de Google Drive w Que solo puede acceder si está autenticado Estos accesos utilizan URLs de acceso restringido, como https://drive.google.com/?tab=xo&authuser=0#/0b48kcwfvwcieceddcevsts1ms00 Carpetas y ficheros públicos poseen además un URL público que permite acceder a terceros, pero solo en modo solo lectura w https://googledrive.com/host/0b48kcwfvwcieceddcevsts1ms00/ El URL público utiliza el protocolo seguro HTTPS w Firefox bloqueará los accesos a recursos por HTTP de algunos ejemplos publicados w Mixed content: https://developer.mozilla.org/en-us/docs/security/mixedcontent 64

Imágenes#HTML# Las#imágenes#se#vinculan#en#una#página#HTML#con#la#e8queta##con#los# atributos# ### src#=#url###

Imágenes#HTML# Las#imágenes#se#vinculan#en#una#página#HTML#con#la#e8queta#<img>#con#los# atributos# ### src#=#url### CSS div ImágenesHTML LasimágenessevinculanenunapáginaHTMLconlae8quetaconlos atributos src=url alt=textoalterna8vodelaimagen width=ancho height-=alto EstructuraCSS lae8quetaofrecealosdiseñadoreslaflexibilidadyelcontrol

Más detalles

Introducción a Internet y a la Web. Juan Quemada, DIT, UPM

Introducción a Internet y a la Web. Juan Quemada, DIT, UPM Introducción a Internet y a la Web Juan Quemada, DIT, UPM 1 Clientes, servidores y la nube Internet Clientes: dan acceso a los usuarios a la información y los servicios Servidores: alojan la información

Más detalles

ETIQUETAS HTML 5 Diseño de Sitios Web TUW

ETIQUETAS HTML 5 Diseño de Sitios Web TUW Etiqueta Descripción Define un comentario nueva nueva nueva nueva

Más detalles

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html. Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje

Más detalles

HTML 5 : Formularios

HTML 5 : Formularios HTML 5 : Formularios El formulario es una interfaz fundamental en las páginas web para interactuar con el usuario. Esta interacción se genera a través de variados elementos, como cajas para introducir

Más detalles

Introducción al curso y al programa. Juan Quemada, DIT, UPM

Introducción al curso y al programa. Juan Quemada, DIT, UPM Introducción al curso y al programa Juan Quemada, DIT, UPM 1 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)

Más detalles

La guía de la programación HTML5, CSS y JavaScript con Visual Studio

La guía de la programación HTML5, CSS y JavaScript con Visual Studio Tabla de contenidos INTRODUCCIÓN... 5 AGRADECIMIENTOS...6 TABLA DE CONTENIDOS... 7 CAPÍTULO 01 HTML 5: LAS TECNOLOGÍAS Y SU IMPLICACIÓN EN EL DESARROLLO...17 EL ESTADO ACTUAL DEL ESTÁNDAR... 18 ESPECIFICACIONES

Más detalles

HTML 5. Que es HTML5 07/04/2011

HTML 5. Que es HTML5 07/04/2011 HTML 5 M.I María Luisa González Ramírez Que es HTML5 Es una agrupación de diversas especificaciones concernientes al desarrollo web HTML 5 no se limita solamente a crear nuevas etiquetas, atributos. Es

Más detalles

Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:

Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 3 Horas Objetivo General: Construir páginas Web en base

Más detalles

HTML HyperText Markup Language. Fernando Pérez Costoya fperez@fi.upm.es

HTML HyperText Markup Language. Fernando Pérez Costoya fperez@fi.upm.es HTML HyperText Markup Language Fernando Pérez Costoya fperez@fi.upm.es Índice Definición Historia y evolución de HTML El fiasco de XHTML HTML 5: la resurrección Un tour por HTML Diseño de aplicaciones

Más detalles

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes 10/09/14 CÓMO SE HACE LA WEB LO QUE VES Bases del HTML CÓMO ES CREADA Sitios pequeños utilizan solamente HTML y CSS. Sesión 3 Sitios más grandes usan CMS, herramientas de blog o comercio de e-commerce.

Más detalles

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB PRESENTA: CREACION DE PÁGINAS WEB OBJETIVO Conocer la aplicación de los paquetes mas utilizados para la implementación t diseño de una pagina Web. DIRIGIDO A: Estudiantes de informática, Ofimática y Personas

Más detalles

HTML5: Nuevas etiquetas semánticas. Juan Eladio Sánchez Rosas

HTML5: Nuevas etiquetas semánticas. Juan Eladio Sánchez Rosas HTML5: Nuevas etiquetas semánticas Juan Eladio Sánchez Rosas Objetivo Semantics Objetivo de la sesión Presentar y describir las nuevas etiquetas del estándar HTML5 Citar los antecedentes que derivaron

Más detalles

Desarrollo y servicios web

Desarrollo y servicios web Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2015-1 Qué vimos la clase pasada? 1.Presentación general 2. Presentación del curso 3. Conceptos introductorios e ingeniería web 4. Arquitectura web

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 63 Horas Objetivo General: Construir páginas Web a partir

Más detalles

DISEÑO WEB (I y II) CONTENIDO TEMÁTICO

DISEÑO WEB (I y II) CONTENIDO TEMÁTICO DISEÑO WEB (I y II) CONTENIDO TEMÁTICO 1. Historia de internet 2. Introducción a las aplicaciones web 3. Estructura de un sitio web 4. Accesibilidad web a. Normas de accesibilidad del World Wide Web Consortium

Más detalles

METODOLOGÍA DE DESARROLLO DE CONTENIDOS WEB ACCESIBLES ÍNDICE DE CONTENIDO

METODOLOGÍA DE DESARROLLO DE CONTENIDOS WEB ACCESIBLES ÍNDICE DE CONTENIDO ÍNDICE DE CONTENIDO Metodología de desarrollo de contenidos web accesibles...1 Estándares de accesibilidad de la UE...2 Desglose por roles...2 Creación de contenidos...2 Diseño...3 Programación...4 Anexo

Más detalles

PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario

PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario DATOS GENERALES: Nombre del Módulo: Diseño y elaboración de páginas web Sesión No. 1 Duración 2 horas 1.1 Determina la estructura del sitio web con base en las necesidades del usuario Estructura y compara

Más detalles

HTML5 es el nuevo estándar de HTML. La versión anterior HTML 4.01 apareció en. entonces.

HTML5 es el nuevo estándar de HTML. La versión anterior HTML 4.01 apareció en. entonces. HTML5 Que es HTML5? HTML5 es el nuevo estándar de HTML La versión anterior HTML 4.01 apareció en 1999. El web ha cambiado mucho desde entonces. HTML5 todavía esta en desarrollo, pero muchos browsers ya

Más detalles

Curso: DISEÑO WEB PARA DISPOSITIVOS MOVILES CON HTML5 + CSS3 + JAVASCRIPT

Curso: DISEÑO WEB PARA DISPOSITIVOS MOVILES CON HTML5 + CSS3 + JAVASCRIPT Curso: DISEÑO WEB PARA DISPOSITIVOS MOVILES CON HTML5 + CSS3 + JAVASCRIPT Código: 1095 Familia Profesional: Desarrollo y diseño web Acreditación: Formación reconocida a través de vías no formales Modalidad:

Más detalles

Experto en Diseño Web Para Dispositivos Móviles con HTML5 + CSS3 + JavaScript

Experto en Diseño Web Para Dispositivos Móviles con HTML5 + CSS3 + JavaScript Modalidad: Distancia Duración: 80 h Experto en Diseño Web Para Dispositivos Móviles con HTML5 + CSS3 + JavaScript Objetivo: El término HTML hace referencia al lenguaje de marcado predominante para la elaboración

Más detalles

Curso básico de creación de páginas web

Curso básico de creación de páginas web Curso básico de creación de páginas web Programa de formación docente UAM 2005-2006 Miguel Sevilla Callejo Abril 2006 Departamento de Geografía Universidad Autónoma de Madrid Objetivos Desarrollar las

Más detalles

Información general. Últimas noticias

Información general. Últimas noticias Información general Últimas noticias 1 Registro de miembros Texto informativo { Registro nuevo usuario { 2 Registro de miembros 1) Acceder a secciones privadas de la página. 2) Acceso a contenido descargable

Más detalles

Introducción HTML y CSS. Clientes, servidores, nube

Introducción HTML y CSS. Clientes, servidores, nube Clientes, servidores, nube a. Los clientes dan acceso a los servicios en Internet. b. Los servidores alojan la información y los servicios. c. La nube es el conjunto de terminales y servidores. TCP/IP

Más detalles

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1 Índice HTML HyperText Markup Language Conceptos básicos Historia y evolución de HTML XHTML vs. HTML HTML dinámico Hojas de estilo (CSS) DOM Diseño de servicios Web 2 DATSI Qué es HTML? Lenguaje de publicación

Más detalles

Tema: Estructura de HTML5 y optimización de imágenes.

Tema: Estructura de HTML5 y optimización de imágenes. Diseño Digital V. Guía 3 1 Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V Tema: Estructura de HTML5 y optimización de imágenes. Objetivos Contenidos Introducir al

Más detalles

2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen

2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen CURSO DE HTML5 1. Historia de HTML Potencial de HTML5 Principales novedades de HTML5 Elementos necesarios para trabajar con HTML5 Editor Navegador 2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen

Más detalles

Antes de comenzar un sitio. Empezar un sitio web

Antes de comenzar un sitio. Empezar un sitio web Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar

Más detalles

Curso HTML5. Juan Quemada! Aula Permanente de Nuevos estándares de videoconferencia Madrid, 13 de Junio 2011

Curso HTML5. Juan Quemada! Aula Permanente de Nuevos estándares de videoconferencia Madrid, 13 de Junio 2011 Curso HTML5 Juan Quemada Aula Permanente de Nuevos estándares de videoconferencia Madrid, 13 de Junio 2011 Los componentes del primer Web URI (URL) n Dirección en la red de un documento o recurso w Ejemplo:

Más detalles

Edición. Cursos Prácticos HTML5 INICIACIÓN AL DISEÑO WEB. Dinámica. www.aprendoencasa.com

Edición. Cursos Prácticos HTML5 INICIACIÓN AL DISEÑO WEB. Dinámica. www.aprendoencasa.com Edición. Cursos Prácticos HTML5 INICIACIÓN AL DISEÑO WEB www.aprendoencasa.com Dinámica Lucía Castillo 2013 HTML5 Curso de introducción al diseño Web www.aprendoencasa.com 1 Contenido Introducción al lenguaje

Más detalles

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto) HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional

Más detalles

Librerías JavaScript jquery y Zepto. Juan Quemada, DIT, UPM

Librerías JavaScript jquery y Zepto. Juan Quemada, DIT, UPM Librerías JavaScript jquery y Zepto 1 Librerias Javascript Las librerias JavaScript actuales son multi-navegador Funcionan en IE, Firefox, Safari, Chrome, Opera,... w Ahorran mucho tiempo -> utilizarlas

Más detalles

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML?

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML? Diseño de Sitios Web 5 (I) Qué es? Es un lenguaje descriptivo con el cual se describe la estructura del texto y todos los elementos que se muestran en la página. Es el método más usado para publicar documentos

Más detalles

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR SERVICE DEFINITION MANUAL DEL ADMINISTRADOR Versión de producto: 1.5 Última revisión: 11-11-2008 2008 Carabela Consulting, S.L. Este documento contiene información confidencial. Página 1 de 18 ÍNDICE 1.

Más detalles

> Temario Curso de Diseño Web <

> Temario Curso de Diseño Web < le ayuda a crear hermosos diseños para sitios web y aplicaciones móviles en un instante, sin necesidad de programación. Brinda imágenes vectoriales y de mapa de bits, maquetas, gráficos 3D, y contenido

Más detalles

Diplomado de Diseño Web

Diplomado de Diseño Web Fireworks es una aplicación que nos permite crear de una forma relativamente sencilla interfaces para web, es un editor de gráficos tanto vectoriales como de pixeles, en él se desarrollan elementos de

Más detalles

Introducción al desarrollo WEB. Tecnologías Web

Introducción al desarrollo WEB. Tecnologías Web Introducción al desarrollo WEB Tecnologías Web Un poco de Historia World Wide Web (WWW) Inventada por Tim Berners Lee en 1989!!! Mientras trabajaba European Organization for Nuclear Research (CERN) http://www.w3.org/consortium/history.html

Más detalles

Taller de Paginas Web

Taller de Paginas Web Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion

Más detalles

HTML Guía de trabajo para 3º ESO

HTML Guía de trabajo para 3º ESO HTML Guía de trabajo para 3º ESO Página 2 Índice 1. Qué es HTML?... 3 2. Cómo son las páginas Web?... 3 3. Qué es un sitio Web?... 3 4. Práctica 1. Crear un sitio web local... 4 5. Primera página HTML...

Más detalles

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6 Modalidad: Distancia Duración: 77 Horas Objetivos: En la actualidad Dreamweaver es uno de los principales programas utilizados por los profesionales para el diseño y maquetación de páginas web. Estos materiales

Más detalles

La Capa de Aplicación Protocolos de Aplicación Básicos

La Capa de Aplicación Protocolos de Aplicación Básicos La Capa de Aplicación Protocolos de Aplicación Básicos mayo de 2008 DNS DNS (RFC 1034 y 1035) Idea básica: Cada nodo tiene un nombre único asignado a una dirección IP. El Sistema de Nombres de Dominio

Más detalles

Técnico en Dreamweaver CC, HTML5, CSS3, PHP y JavaScript. Informática y Programación

Técnico en Dreamweaver CC, HTML5, CSS3, PHP y JavaScript. Informática y Programación Técnico en Dreamweaver CC, HTML5, CSS3, PHP y JavaScript Informática y Programación Ficha Técnica Categoría Informática y Programación Referencia 30382-1601 Precio 62.00 Euros Sinopsis Este curso de Técnico

Más detalles

Ficha Técnica. Categoría. Contenido del Pack. Sinopsis. Programación. - 2 CDROM - 3 Manual Teórico - 1 Cuaderno de Ejercicios

Ficha Técnica. Categoría. Contenido del Pack. Sinopsis. Programación. - 2 CDROM - 3 Manual Teórico - 1 Cuaderno de Ejercicios Ficha Técnica Categoría Programación Contenido del Pack - 2 CDROM - 3 Manual Teórico - 1 Cuaderno de Ejercicios Sinopsis Javascript es un lenguaje de programación que se utiliza para realizar acciones

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 1 Nombre de la practica: Introducción y conceptos básicos de HTML Lugar de ejecución:

Más detalles

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani 1 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas

Más detalles

ACCIÓN FORMATIVA FINANCIADA POR EL SERVICIO PÚBLICO DE EMPLEO ESTATAL

ACCIÓN FORMATIVA FINANCIADA POR EL SERVICIO PÚBLICO DE EMPLEO ESTATAL MF0491_3: PROGRAMACIÓN WEB EN EL ENTORNO CLIENTE. (IFCD0210: DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB) 180 HORAS PRESENCIALES Nº DE EXPEDIENTE: FC/2013/0064 ACCION 141 GRUPO 1 ACCIÓN FORMATIVA FINANCIADA

Más detalles

CURSO DE DREAMWEAVER CS3

CURSO DE DREAMWEAVER CS3 CURSO DE DREAMWEAVER CS3 Aprender a manejar el programa Dreamweaver para diseñar páginas Web. A la finalización del curso, el alumno será capaz de crear sitios Web con páginas que incorporen imágenes,

Más detalles

Desarrollo y servicios web

Desarrollo y servicios web Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2014-2 2 Sesión 3. Arquitectura web básica parte 2 Qué haremos hoy? 3 1. La era post pc 2. Nombres de dominio 3. URL 4.HTTP( GET / POST) La era post-pc

Más detalles

Cursito 27: Curso de HTML Parte 3

Cursito 27: Curso de HTML Parte 3 Por Roxana Bassi rox@roxanabassi.com.ar / http://www.roxanabassi.com.ar Publicado en la sección los cuadernos de Internet World en la revista Internet World Latinoamérica en el período 1995-1999 Cursito

Más detalles

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 Modalidad Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 cod / EU 0518 A Distancia Duración 300 Horas Objetivos Aportar al alumno todas las competencias y conocimientos necesarios

Más detalles

Tutorial de Drupal para Editores de Sitios

Tutorial de Drupal para Editores de Sitios Tutorial de Drupal para Editores de Sitios Autora: Aylín Alvarez Martínez Dpto. de Desarrollo de Infomed Noviembre 2010 1 Índice Qué es un CMS?... 3 Qué es Drupal?... 3 Registro e Ingreso... 3 Mi cuenta...

Más detalles

UF1304 Elaboración de plantillas y formularios

UF1304 Elaboración de plantillas y formularios UF1304 Elaboración de plantillas y formularios Tema 1. Formularios en la construcción de páginas web Tema 2. Plantillas en la construcción de páginas web OBJETIVOS: - Confeccionar plantillas para las páginas

Más detalles

Páginas Web Barcelona

Páginas Web Barcelona Páginas Web Barcelona Requisito previo: Todos los asistentes deben de tener previo conocimiento de las plataformas Macintosh o Windows. Se prefiere que los delegados tengan una experiencia básica en HTML

Más detalles

Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO

Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO CONTENIDO TEMATICO: HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO Presentación de la formación y del formador INSTALACIÓN DE NAVEGADORES Y HERRAMIENTAS Descarga e instalación de Mozilla Firefox Descarga e instalación

Más detalles

1.264 Tema 12. HTML Introducción a FrontPage

1.264 Tema 12. HTML Introducción a FrontPage 1.264 Tema 12 HTML Introducción a FrontPage HTML Subconjunto de lenguaje de marcado generalizado estándar (SGML), lenguaje descri ptivo de documentos. SGML está certificado con la norma ISO. La versión

Más detalles

www.librosweb.es Introducción a XHTML Javier Eguíluz Pérez

www.librosweb.es Introducción a XHTML Javier Eguíluz Pérez Introducción a XHTML Javier Eguíluz Pérez Sobre este libro... Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento - No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/3.0/deed.es)

Más detalles

Material Actividad de aprendizaje 1. Primeros Pasos con App Inventor

Material Actividad de aprendizaje 1. Primeros Pasos con App Inventor Análisis Desarrollo de para aplicaciones el desarrollo móviles móvil con APP con INVENTOR.. Indice Introducción 1. Android. 2. Introducción. 3. Requisitos para la Configuración. 4. Configuración de 2.

Más detalles

Creación de páginas Web

Creación de páginas Web Seminario Creación de páginas Web Santander, mayo 2006 Michael González Harbour (mgh@unican.es) GRUPO DE COMPUTADORES Y TIEMPO REAL Michael González Harbour 1 Creación de páginas Web 1. Introducción 2.

Más detalles

INTRODUCCIÓN A XHTML JAVIER EGUILUZ LIBROSWEB

INTRODUCCIÓN A XHTML JAVIER EGUILUZ LIBROSWEB INTRODUCCIÓN A XHTML JAVIER EGUILUZ LIBROSWEB Introducción a XHTML Javier Eguiluz Fecha publicación: 14/03/2013 Este libro fue publicado con la aplicación easybook (http://easybook-project.org), una herramienta

Más detalles

1. Tutorial Página Personal... 2

1. Tutorial Página Personal... 2 Índice 1. Tutorial Página Personal... 2 1.1. Introducción... 2 1.2. Tutorial de edición de páginas web con Kompozer... 2 1.2.1. Descarga del programa... 2 1.2.2. Edición de la página web... 4 1.3. Como

Más detalles

DIPLOMADO EN SEGURIDAD INFORMATICA

DIPLOMADO EN SEGURIDAD INFORMATICA DIPLOMADO EN SEGURIDAD INFORMATICA Modulo 9: Soporte Computacional Clase 9_3:Protocolos de comunicación y conectividad de arquitecturas multiplataforma. Director Programa: César Torres A Profesor : Claudio

Más detalles

INDICE Capitulo 1. Internet y la Web Capitulo 2. Páginas Web Capitulo 3. Introducción al Lenguaje HTML Capitulo 4. Imágenes

INDICE Capitulo 1. Internet y la Web Capitulo 2. Páginas Web Capitulo 3. Introducción al Lenguaje HTML Capitulo 4. Imágenes INDICE Antes de comenzar XIII Capitulo 1. Internet y la Web 1 Internet 3 Protocolos de Internet 4 El hipertexto y la Web 4 Funcionamiento de la Web 8 Cliente Web 8 Servidor Web 8 Transferencia de la pagina

Más detalles

Aspectos prácticos de Internet

Aspectos prácticos de Internet Aspectos prácticos de Internet Tema 6 Web y buscadores Introducción Conceptos Básicos HTML HTTP URL DNS Servidores web Caches y proxies Web 2.0 Buscadores Introducción Nació en 1990- Tim Berners-Lee Documentos

Más detalles

TEMA 9 CREACIÓN DE PÁGINAS WEB

TEMA 9 CREACIÓN DE PÁGINAS WEB TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio

Más detalles

Introducción a RIA. Andrés Pastorini. TRIA Tecnólogo Informático

Introducción a RIA. Andrés Pastorini. TRIA Tecnólogo Informático a RIA Andrés Pastorini TRIA Tecnólogo Informático El objetivo principal de la asignatura es forma al estudiante en el diseño y desarrollo de aplicaciones web ricas. Los objetivos de la asignatura son:

Más detalles

Desarrollo y servicios web

Desarrollo y servicios web Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2015-1 Qué vimos la clase pasada? 1. Fin tutorial HTML 2. Nombres de dominio 3. URLs 3 Sesión 4. Método GET - POST Qué haremos hoy? 1. Tipos de solicitudes

Más detalles

Preparando las imágenes para la maquetación con GIMP

Preparando las imágenes para la maquetación con GIMP Preparando las imágenes para la maquetación con GIMP Cuando maquetamos una página web la idea principal es hacerla lo más parecida al diseño original, y que además todas las imágenes y demás archivos utilizados

Más detalles

Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB

Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB OBJETIVOS El máster está compuesto por los módulos de Diseño de páginas Web profesionales y Desarrollo de sitios Web con PHP y Javascript. Al finalizar el

Más detalles

MÓDULO: SERVICIOS E RED. Nombre: Curso: 2º SMR (9-6-2011) [Examen Final Junio]

MÓDULO: SERVICIOS E RED. Nombre: Curso: 2º SMR (9-6-2011) [Examen Final Junio] MÓDULO: SERVICIOS E RED Nombre: Curso: 2º SMR (9-6-2011) [Examen Final Junio] PARTE 1: Responde las siguientes preguntas tipo TEST. Solo hay una respuesta correcta. Dos respuestas incorrectas anulan una

Más detalles

Desarrollo en HTML, CSS y Javascript de Apps Web, Android, IOS, FirefoxOS, Juan Quemada, DIT, UPM

Desarrollo en HTML, CSS y Javascript de Apps Web, Android, IOS, FirefoxOS, Juan Quemada, DIT, UPM Desarrollo e HTML, CSS y Javascript de Apps Web, Adroid, IOS, FirefoxOS, Jua Quemada, DIT, UPM 1 Objetivo del curso Curso de diseño y programació de aplicacioes Web multi-dispositivo (PC, tableta, telefóo,...)

Más detalles

1. NIVEL BÁSICO-CURSO NVU

1. NIVEL BÁSICO-CURSO NVU CURSO MULTIMEDIA DE CREACIÓN DE PÁGINAS WEB - Este curso esta desarrollado de forma que a Vd. le sea sencillo, rápido y cómodo su aprendizaje. El curso está dividido en dos niveles: Básico e Intermedio.

Más detalles

MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML

MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con

Más detalles

www.librosweb.es Introducción a XHTML Javier Eguíluz Pérez

www.librosweb.es Introducción a XHTML Javier Eguíluz Pérez Introducción a XHTML Javier Eguíluz Pérez Sobre este libro... Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/

Más detalles

Tabletas en el aula. Diseño de apps con MIT App Inventor 2. Edición 2015. Autor: Fernando Posada Prieto canaltic.com

Tabletas en el aula. Diseño de apps con MIT App Inventor 2. Edición 2015. Autor: Fernando Posada Prieto canaltic.com Tabletas en el aula Diseño de apps con MIT App Inventor 2 Edición 2015 Autor: Fernando Posada Prieto canaltic.com Diseño de apps con MIT App Inventor 2 Índice 1. Qué es App Inventor 2?... 2 2. Requisitos

Más detalles

Clase. geniería de la Computación. Departamento de Ciencias e Ing. Diego C. Martínez - DCIC-UNS

Clase. geniería de la Computación. Departamento de Ciencias e Ing. Diego C. Martínez - DCIC-UNS Ingeniería de Ap plicaciones Web Clase 2 Diego C. Martínez Departamento de Ciencias e Ing geniería de la Computación Universidad Nacional del Sur Internet y sus servicios Internet define una forma de conexión

Más detalles

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0. 5.10 JotForm: formularios en línea

JotForm: formularios en línea Diseño de materiales multimedia. Web 2.0. 5.10 JotForm: formularios en línea 475 5.10 JotForm: formularios en línea 476 5.10 JotForm: formularios en línea JotForm (http://jotform.com) es un sitio que permite crear formularios web susceptibles de integrar en una página HTML. El

Más detalles

CREIX AMB INTERNET. Crear Widgets para la web 2.0

CREIX AMB INTERNET. Crear Widgets para la web 2.0 CREIX AMB INTERNET Crear Widgets para la web 2.0 2 1. Widgets. 1.1. Qué son los Widgets. Esencialmente un widget es un conjunto de documentos HTML/CSS/JavaScript locales. Decimos locales, por que una vez

Más detalles

Darío Roig Servicio de Informática. Extensión Universitaria

Darío Roig Servicio de Informática. Extensión Universitaria Darío Roig Servicio de Informática Extensión Universitaria Calendario 8, 9, 10 de febrero de 2011 2 Sesiones de 16:00 19:30 (martes y miércoles) 1 Sesión de 16:00 19:00 (jueves) 10 horas 1 crédito de libre

Más detalles

INTRODUCCIÓN AL WEB. Pag. 1 de 10

INTRODUCCIÓN AL WEB. Pag. 1 de 10 INTRODUCCIÓN AL WEB La World Wide Web o simplemente WWW o Web es uno de los métodos más importantes de comunicación que existe en Internet. Consiste en un sistema de información basado en Hipertexto (texto

Más detalles

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 2: Aspectos básicos.

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 2: Aspectos básicos. Ministerio de Educación, Cultura y Deporte. HTML5 en la educación Módulo 2: Aspectos básicos. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Aspectos básicos del lenguaje

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2014 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Fundamentos del Lenguaje HTML Lugar de ejecución: Laboratorio

Más detalles

Curso XHTML/HTML/HTML5. Curso XHTML/HTML/HTML5

Curso XHTML/HTML/HTML5. Curso XHTML/HTML/HTML5 Curso XHTML/HTML/HTML5 Curso XHTML/HTML/HTML5 Página Web del curso Pagina del curso www.bbsoftpy.net/cursohtml2013 Repaso Clase Anterior Curso XHTML/HTML/HTML5-2013 Listas Curso XHTML/HTML/HTML5-2013 Listas

Más detalles

Algunos de los botones ofrecen las funcionalidades básicas para el trabajo con ficheros propias de cualquier programa editor.

Algunos de los botones ofrecen las funcionalidades básicas para el trabajo con ficheros propias de cualquier programa editor. Curso de creación de documentos Web Servicio de Comunicaciones Uso del Netscape Composer para la creación de documentos HTML 1.- Creación de un documento. El Netscape Communicator incluye un programa,

Más detalles

Índice. Capítulo 1. Documentos HTML5... 1

Índice. Capítulo 1. Documentos HTML5... 1 Índice Capítulo 1. Documentos HTML5... 1 1.1 Componentes básicos... 1 1.2 Estructura global... 2 ... 2 ... 2 ... 3 ... 4 ... 5 ... 6 ... 7 1.3 Estructura

Más detalles

1.- REDES E INTERNET TIPOS DE REDES COMUNICACIÓN POR INTERNET PROTOCOLO IP PROTOCOLO TCP

1.- REDES E INTERNET TIPOS DE REDES COMUNICACIÓN POR INTERNET PROTOCOLO IP PROTOCOLO TCP 1.- REDES E INTERNET TIPOS DE REDES LAN (Local Area Network). Enlazan ordenadores dentro de un área limitada: un departamento, una oficina, un edificio, etc La forma más sencilla para crear una LAN es

Más detalles

HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014

HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 HTML y XHTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Etiquetas Contenido de una página web: Contenido (información). Instrucciones de estructura

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2014 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción a las hojas de estilo Lugar de ejecución: Laboratorio

Más detalles

Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web

Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web La Web 1. Qué es la Web? 7 1.1 Lado servidor: HTTP, FTP, lenguajes, SQL 7 1.2 Lado cliente: HTML, CSS, JavaScript 10 2. Los lenguajes y su utilidad 10 2.1 HTML 10 2.2 CSS 14 2.3 JavaScript 17 2.4 Ejemplo

Más detalles

UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL

UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL UNIDAD 2 CONFIGURACIÓN DE UN SITIO LOCAL OBJETIVO El alumno aprenderá a configurar un servidor local para realizar diferentes pruebas de la página hasta publicar el sitio web en Internet. TEMARIO 2.1 INTRODUCCIÓN

Más detalles

GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL

GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL Maneja herramientas informáticas vigentes que le permiten administrar y difundir información diversa en un contexto social, académico y laboral

Más detalles

DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB

DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB DENOMINACIÓN: CON TECNOLOGÍAS WEB Código: IFCD0210 Familia profesional: Informática y Comunicaciones Área profesional: Desarrollo Nivel de cualificación profesional: 3 Cualificación profesional de referencia:

Más detalles

Wenceslao Zavala. www.producciondigitalup.com.ar

Wenceslao Zavala. www.producciondigitalup.com.ar Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:

Más detalles

Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en

Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en Dominio y Hosting Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en el internet... 5 http: hyper text

Más detalles

Guía para proveedores de contenido. LiLa Portal Guía para proveedores de contenido. Crear Experimentos

Guía para proveedores de contenido. LiLa Portal Guía para proveedores de contenido. Crear Experimentos Library of Labs Content Provider s Guide Guía para proveedores de contenido LiLa Portal Guía para proveedores de contenido En el entorno de LiLa, los proveedores de contenido son los responsables de crear

Más detalles

UNIDAD 4 HIPERENLACES

UNIDAD 4 HIPERENLACES UNIDAD 4 HIPERENLACES OBJETIVO El alumno será capaz de crear, modificar y probar hipervínculos personalizados en un documento de Dreamweaver. TEMARIO 4.1 CONCEPTO Y TIPOS DE ENLACES 4.2 PERSONALIZAR NUEVOS

Más detalles

TFM Comunicación, Redes y Gestión de Contenidos

TFM Comunicación, Redes y Gestión de Contenidos TFM Comunicación, Redes y Gestión de Contenidos Aplicación móvil hibrida para control de asistencia y servicio técnico a domicilio y gestión de partes de trabajo Autor: Patricia Paguay Lara Tutorizado

Más detalles

Diplomado en diseño y desarrollo web con aplicaciones Adobe

Diplomado en diseño y desarrollo web con aplicaciones Adobe Diplomado en diseño y desarrollo web con aplicaciones Adobe Conoce las nuevas herramientas y tecnologías disponibles para planificar, diseñar y desarrollar sitios web compatibles con los diferentes dispositivos

Más detalles

DESARROLLO WEB EN ENTORNO CLIENTE

DESARROLLO WEB EN ENTORNO CLIENTE DESARROLLO WEB EN ENTORNO CLIENTE CAPÍTULO 1: Selección de arquitecturas y herramientas de programación Juan Manuel Vara Mesa Marcos López Sanz David Granada Emanuel Irrazábal Jesús Javier Jiménez Hernández

Más detalles