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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

Transcripción

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

2 Clientes, servidores y la nube Internet Clientes: dan acceso a los usuarios a la información y los servicios Servidores: alojan la información y los servicios La nube: conjunto de terminales y servidores w interconectados con las aplicaciones y protocolos de Internet TCP/IP protocolos para crear aplicaciones sobre redes hetereogeneas TCP IP UDP w IP (Internet Protocol): protocolo de interconexión de redes hetereogeneeas Protocolo del cual hereda su nombre Internet Cada elemento de Internet tiene una dirección IP diferente: ,... w TCP y UDP: protocolos de transporte de información Las mayoría de las aplicaciones de Internet usan el servicio TCP Conectando clientes y servidores con circuitos virtuales Voz y video sobre IP usan el servicio UDP 2

3 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,...) Juan Quemada, DIT, UPM 3

4 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,... Juan Quemada, DIT, UPM 4

5 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, :8080 Juan Quemada, DIT, UPM 5

6 URIs y URLs URI - Uniform Resource Identifier identificador de un recurso (servicio) de Internet w RFC 3986 (2005): Existen 2 tipos de URI URL - Uniform Resource Locator w Dirección física del recurso en la red que identifica el servidor donde se almacena URN: Uniform Resource Name w Dirección lógica independiente de lugar físico (poco utilizado) Ejemplos de URL de , página Web, ftp,.. URL Web: URL URL ftp: Formato de un URL: <schema:><//><authority></path><?query><#anchor> <schema:> = protocolo o esquema de acceso al recurso <authority> = </path> = identificador del recurso en del servidor <?query> = parámetros enviados al recurso <#anchor> = fragmento o parte del recurso ftp://ftp.funet.fi/pub/standards/rfc/rfc959.txt 6

7 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 Juan Quemada, DIT, UPM 7

8 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 Juan Quemada, DIT, UPM 8

9 Aplicación Web: HTML, CSS y JavaScript HTML CSS Lenguaje de marcado Estilo la visualización JavaScript Lenguaje de programación Juan Quemada, DIT, UPM 9

10 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 Juan Quemada, DIT, UPM Servidor sirve fichero identificado por URL 10

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

12 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 12

13 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 13

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

15 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 Juan Quemada, DIT, UPM 15

16 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: Juan Quemada, DIT, UPM 16

17 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 17

18 UNICODE BMP: subconjunto ASCII (Basic Latin) 18

19 UNICODE BMP: extensión ISO Latin1 19

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

21 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 Juan Quemada, DIT, UPM 21

22 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 22 Juan Quemada, DIT, UPM

23 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 &.. Juan Quemada, DIT, UPM 23

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

25 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 25

26 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 26

27 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 27

28 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 28

29 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 29

30 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 30

31 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 31

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

33 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 Juan Quemada, DIT, UPM 33

34 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...> Juan Quemada, DIT, UPM 34

35 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 Juan Quemada, DIT, UPM 35

36 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 36

37 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 Juan Quemada, DIT, UPM 37

38 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 38

39 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=1527 Juan Quemada, DIT, UPM 39

40 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 40

41 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 41

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

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

44 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 44

45 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 45 (3) =>.. (mismas resp.).. Juan Quemada, DIT, UPM

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

47 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,... Juan Quemada, DIT, UPM 47

48 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 Juan Quemada, DIT, UPM 48

49 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 Juan Quemada, DIT, UPM 49

50 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) Juan Quemada, DIT, UPM 50

51 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 Juan Quemada, DIT, UPM 51

52 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 Ver: https://developer.mozilla.org/en-us/docs/security/mixedcontent Juan Quemada, DIT, UPM 52

53 Seguiendo los pasos 1, 2 y 3 accedemos a los detalles del directorio Encontrar URL de acceso público Tal y como se muestra aquí 1. seleccionar 2. desplegar funciones adicionales 3. clicar para ver mas detalles Juan Quemada, DIT, UPM 53

54 Los detalles (details) del recurso URL de acceso público muestran el URL público de acceso en modo lectura URL privado Información sobre: DETAILS URL público al clicar accedemos a carpeta pública Juan Quemada, DIT, UPM 54

55 Acceso autenticado: lectura, modificación, borrado,.. URL privado: https://drive.google.com/?tab=xo&authuser=0#folders/0b48kcwfvwcieceddcevsts1ms00 Acceso público: solo lectura URL público: https://googledrive.com/host/0b48kcwfvwcieceddcevsts1ms00/ Juan Quemada, DIT, UPM 55

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

57 Entrega de ejercicios en Google Drive Juan Quemada, DIT, UPM 57

58 Publicación de ejercicios El directorio público creado para esta asignatura será utilizado para publicar el ejercicio de la entrega semanal El ejercicio deberá subirse al directorio público Y el URL público deberá incluirse en la entrega en la platforma El URL público debe utlizarse también para Probar y ver las páginas y aplicaciones Web w En nuestro PC, teléfonos móviles y tabletas Se recomienda guardar el URL a la carpeta pública En los favoritos del navegador utilizado: PC, móvil, tableta,... w Para probar los ejercicos realizados en todos los dispositivos con facilidad Juan Quemada, DIT, UPM 58

59 Subir un ejercicio al directorio I Seleccionar Files... para subir fichero Con Paso 0. Modo línea se puede hacer lo mismo 1. Desplegar y clicar Files para subir fichero 0. En modo cuadricula Juan Quemada, DIT, UPM 59

60 Subir un ejercicio al directorio II Seguir pasos 1 y 2 para subir fichero 1. clicar para seleccionar fichero 2. clicar para subir fichero Juan Quemada, DIT, UPM 60

61 Subir un ejercicio al directorio III Confirmar que el fichero se sube a un directorio público El fichero también será público y será visible como pagina Web en Internet Clicar para confirmar que el fichero se sube y se comparte Juan Quemada, DIT, UPM 61

62 Encontrar el URL público I El fichero T2.2_lista.html ya esta en directorio público Pasos 1, 2 y 3 nos llevan a detalles del recurso (ver transp. siguiente) 1. seleccionar 2. desplegar funciones adicionales 3. clicar para ver mas detalles Juan Quemada, DIT, UPM 62

63 Encontrar el URL público II Haciendo clic en el URL público Vemos T2_3-2_lista.html como página Web URL público al clicar vemos fichero en navegador Fichero lista.html Juan Quemada, DIT, UPM 63

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

65 Diseño adaptativo para PC, Móvil y Tableta Juan Quemada, DIT, UPM 65

66 Diseño Web adaptable El diseño adaptable (responsive) busca uniformizar el acceso desde cualquier dispositivo, ya sea PC, móvil, tableta, smarttv,... w optimizando la experiencia de usuario en cada uno de ellos El diseño adaptable utiliza una única definición HTML de interfaz o página que se adapta al dispositivo con diferentes ficheros CSS Utilizamos el atributo media de <link.. media="screen" src="screen.css"> para seleccionar el fichero CSS específico de cada dispositivo Algunas referencias Tutorial: Ejemplos: Juan Quemada, DIT, UPM 66

67 El atributo media de <link..> El atributo media de la marca <link> de CSS3 detecta el dispositivo utilizado El atributo media condiciona la carga del fichero de estilos al dispositivo utilizado Smartphone con pantalla menor de 480 px w media="only screen and (max-device-width: 480)" Pantalla ancha con el navegador en una ventana de anchura mayor a 600 px w media= "only screen and (max-width: 600) and (min-device-width: 481)" Hay otras formas de adaptación Antes se consultaba con Javascript. screen.availheight, screen.availwidth CSS3 también permite incluir media-queries en los comandos CSS Juan Quemada, DIT, UPM 67

68 index.html Diseño Adaptativo Juan Quemada, DIT, UPM 68

69 Style.css Juan Quemada, DIT, UPM 69

70 style.css + wide.css Juan Quemada, DIT, UPM 70

71 Style.css + Smartphone.css Juan Quemada, DIT, UPM 71

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

73 Integración de objetos y de multimedia en páginas HTML5 Juan Quemada, DIT, UPM 73

74 Integrar objetos y recursos externos HTML permite insertar recursos externos en una página Web con <img.>: imágenes w Formato de puntos: JPEG, GIF, PNG,.. (resolución fija) w Formato vectorial: SVG, (escalables sin perdida de calidad) <video.>, <audio.>: video y audio w No existe acuerdo sobre los formatos a utilizar <iframe.>: páginas Web y otros objetos w Crea un nuevo marco de navegación Web anidado seguro <object.>: objetos. plugins, imágenes w Es el mas genérico. <embed.>: aplicación exterior, normalmente no-html w Marca heredada del pasado (Flash), se introdujo como un elemento no estándar Permiten integrar (hacer mash-ups) contenidos con gran facilidad https://groups.google.com/forum/#topic/epub-widgets-discuss/jwgv_rpe4h4 Juan Quemada, DIT, UPM 74

75 Audio y Video en HTML5 Las marcas audio y video de HTML5 Permiten incluir audio y video en páginas Web w Juan Quemada, DIT, UPM 75

76 Video: formatos Contenedor OGG Video: Theora (VP7), Audio: Vorbis w Calidad menor Contenedor MP4 Video: H264, Audio: ACC w Existen Patentes Contenedor WebM Video: VP8, Audio: Vorbis Juan Quemada, DIT, UPM 76

77 Que marca usar? <object>: 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 w Tipo mime identifica tipo de objeto: <object type="image/svg+xml".. > <iframe>: es la mas segura. Crea una caja de arena (sandbox) y restringe accesos al mismo origen. w Protege de acciones hostiles del objeto importado <embed>: marca no estándar heredada de tiempos del Flash. Aunque ha sido incluida en HTML5, su uso no es muy popular. <object>, <iframe> y <embed> pueden usarse con imágenes, video,.. El ejemplo siguiente muestra su equivalencia, incluyendo w 2 marcos de navegación anidados, uno con <object> y otro con <iframe> w 2 videos, uno con <video> y otro con <iframe> w 2 imagenes, un SVG animado con <object> y un PNG de baja resolución con <img> Juan Quemada, DIT, UPM 77

78 La Galería se adapta a la anchura del navegador e incluye: - 2 marcos de navegación (<object> y <iframe>) - 2 videos (<video> y <iframe>) - 2 imagenes -> un SVG vectorial con <object> que reescala -> un PNG con <img> que no reescala bién Galería Juan Quemada, DIT, UPM 78

79 Galería 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 (flex-grow:0, flex-shrink:1, flex-basis:auto). Cada bloque vertical puede contener a su vez dos bloques horizontales. Juan Quemada, DIT, UPM 79

80 Código Juan Quemada, DIT, UPM 80

81 HTML - HTML5 Quick Guide Page 1 of 4 Quick Reference Guide HTML 5 FREE Tag Info V Attributes* Tag Info V Attributes* Tag Info V Attributes* <-- --> comment 4 / 5 none <DOCTYPE> document type 4 / 5 none <embed> external interactive content or plugin 5 height src type width <ol> ordered list 4 / 5 start reversed <optgroup> option group 4 / 5 disabled label <a> hyperlink 4 / 5 href hreflang media ping rel target type <abbr> abbreviation 4 / 5 global attributes** <acronym> acronym 4 - <address> address element 4 / 5 global attributes** <applet> applet 4 - <area> area inside an image map 4 / 5 alt coords href hreflang media ping rel shape target type <article> article 5 global attributes** <aside> outside the main flow of the narrative 5 global attributes** <audio> sound content 5 autobuffer autoplay controls loop src <b> bold text 4 / 5 global attributes** <base> <basefont> <bb> <bdo> base URL for all the page links Base font for the document invoked user agent command direction of text display 4 / 5 href target 4-5 type 4 / 5 dir <big> big text 4 - <blockquote> long quotation 4 / 5 cite <body> body element 4 / 5 global attributes** <fieldset> fieldset 4 / 5 disabled form name <figure> <font> <footer> group of media content, and their caption text font, size, and color footer for a section or page 5 global attributes** 4-5 global attributes** <form> form 4 / 5 action data replace accept accept-charset enctype method target <frame> sub window 4 - <frameset> set of frames 4 - <h1> to <h6> <head> <header> header 1 to header 6 information about the document header for a section or page 4 / 5 global attributes** 4 / 5 none 5 global attributes** <hgroup> heading section 5 global attributes** <hr> horizontal rule 4 / 5 global attributes** <html> html document 4 / 5 manifest <i> italic text 4 / 5 global attributes** <iframe> inline sub window (frame) 4 / 5 src name sandbox seamless width height <img> image 4 / 5 alt src height ismap usemap width Juan Quemada, DIT, UPM <option> <output> option in a drop-down list some types of output 4 / 5 disabled label selected value 5 form <p> paragraph 4 / 5 global attributes** <param> <pre> <progress> parameter for an object preformatted text progress of a task of any kind 4 / 5 name value 4 / 5 global attributes** 5 max value <q> short quotation 4 / 5 cite <ruby> <rp> <rt> <s> <samp> ruby annotations provide parentheses around a ruby text ruby text component strikethrough text sample computer code 5 global attributes** 5 global attributes** 5 global attributes** 4-4 / 5 global attributes** <script> script 4 / 5 async type defer src charset <section> section 5 cite <select> selectable list 4 / 5 autofocus data disabled form multiple name 81 <small> small text 4 / 5 global attributes** <source> media re- 5 media src type

82 <blockquote> long quotation 4 / 5 cite <body> body element 4 / 5 global attributes** <br> inserts a single line break 4 / 5 global attributes** <button> push button 4 / 5 autofocus disabled form formaction formenctype formmethod formnovalidate formtarget name type value <canvas> Graphic area 5 height width <caption> table caption 4 / 5 global attributes** <center> centered text 4 - <cite> citation 4 / 5 global attributes** <code> <col> <colgroup> <command> <datagrid> computer code text attributes for table columns groups of table columns command button data in a tree, list or tabular 4 / 5 global attributes** 4 / 5 span 4 / 5 span 5 checked default disabled hidden icon label radiogroup type 5 disabled <datalist> dropdown list 5 global attributes** <dd> definition description 4 / 5 global attributes** <del> deleted text 4 / 5 cite datetime <details> <dialog> details of an element dialog (conversation) 5 open 5 global attributes** <dir> directory list 4 - <div> section in a document <dfn> definition term 4 / 5 title 4 / 5 global attributes** <dl> definition list 4 / 5 global attributes** <dt> definition term 4 / 5 global attributes** <em> emphasized text 4 / 5 global attributes** <img> image 4 / 5 alt src height ismap usemap width <input> input field 4 / 5 accept alt autocomplete autofocus checked disabled form formaction formenctype formmethod formnovalidate formtarget height list max maxlength min multiple name pattern placeholder readonly required size src step type value width <ins> inserted text 4 / 5 cite datetime <isindex> single-line input field 4 - <kbd> keyboard text 4 / 5 global attributes** <label> label for a form control 4 / 5 for <legend> fieldset title 4 / 5 global attributes** <li> list item 4 / 5 value <link> resource reference 4 / 5 href rel media hreflang type sizes <mark> marked text 5 global attributes** <map> image map 4 / 5 id <menu> menu list 4 / 5 label type <meta> <meter> meta information measurement within a predefined range 4 / 5 charset content httpequiv name 5 high low max min optimum value <nav> navigation links 5 global attributes** <noframes> noframe section 4 - <noscript> noscript section 4 / 5 none <object> embedded object 4 / 5 data height type usemap width object * Attributes: Lists attributes specific to that tag. Deprecated (html4 only) attributes are not listed ** Global Attributes: class contenteditable contextmenu dir draggable id irrelevant lang ref registrationmark tabindex template title <small> small text 4 / 5 global attributes** <source> media resources V = Which version of HTML is this tag valid for 5 media src type <span> inline section 4 / 5 global attributes** <strike> strikethrough text 4 - <strong> strong text 4 / 5 global attributes** <style> style definition 4 / 5 media type scoped <sub> subscripted text 4 / 5 global attributes** <sup> superscripted text 4 / 5 global attributes** <table> table 4 / 5 summary <tbody> table body 4 / 5 global attributes** <td> table cell 4 / 5 colspan rowspan headers <textarea> text area 4 / 5 autofocus cols disabled form name readonly required rows maxlength <tfoot> table footer 4 / 5 global attributes** <th> table header 4 / 5 colspan rowspan scope <thead> table header 4 / 5 global attributes** <time> date/time 5 datetime pubdate <title> document title 4 / 5 none <tr> table row 4 / 5 global attributes** <tt> teletype text 4 - <u> underlined text 4 - <ul> unordered list 4 / 5 global attributes** <var> variable 4 / 5 global attributes** <video> video 5 src poster autobuffer autoplay loop controls width height <xmp> preformatted text 4 - Part Number: QRG Veign, 82 All Rights Reserved Juan Quemada, DIT, UPM

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

84 Ejercicio Realizar una página personal propia que incluya al menos Nombre, foto del autor y un breve curriculum textual w acompañado de un video corto que resuma el curriculum Una galería de recursos favoritos del autor La galería puede incluir fotos, videos, audios, animaciones, páginas Web,. debe contener al menos 6 recursos diferentes w utilizará al menos 4 marcas diferentes de entre: <img>, <audio>, <video>, <object>, <iframe>, <embed> Recomendación: grabar el video utilizando un móvil o tableta w Convertir a WebM o MP4 con alguna de las múltiples herramientas de conversión existentes que se pueden encontrar con Google o en las tiendas de programas. Una vez convertido hay que subir el video a Google Drive. w El video se puede subir también a Youtube. Youtube lo convierte a un formato HTML5 al subirlo. Google proporciona el código de inserción, normalmente un <iframe> (o <embed>). Recomendación: buscar imágenes SVG (y PNG) en wikimedia commons w En wikimedia (http://commons.wikimedia.org/wiki/category:svg) hay muchas imágenes SVG, que también se pueden transformar a una resolución fija en PNG. Estas pueden descargarse y subirse a Google Drive o incluir directamente a través del URL que suministra wikimedia. Utilizar un estilo adaptado correctamente a distintos tamaños de pantalla Juan Quemada, DIT, UPM 84

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 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

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

Listado de elementos o etiquetas HTML5

Listado de elementos o etiquetas HTML5 Listado de elementos o etiquetas HTML5 Etiqueta Función Define un comentario Define el tipo de docuemento Define

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

NUEVAS ETIQUETAS HTML 5

NUEVAS ETIQUETAS HTML 5 NUEVAS S HTML 5 Se muestra a continuación el listado completo de las etiquetas indicando las nuevas HTML 5, las mismas se agrupan en base a su funcionalidad dentro del documento html. Establece

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

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 : 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

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

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

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

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

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

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

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

PRACTICA CAPITULO 2 MODULO 1 PROTOCOLOS Y LA FUNCIONALIDAD DE LA CAPA DE APLICACIÓN

PRACTICA CAPITULO 2 MODULO 1 PROTOCOLOS Y LA FUNCIONALIDAD DE LA CAPA DE APLICACIÓN PRACTICA CAPITULO 2 MODULO 1 PROTOCOLOS Y LA FUNCIONALIDAD DE LA CAPA DE APLICACIÓN Los protocolos de capa de aplicación de TCP/IP más conocidos son aquellos que proporcionan intercambio de la información

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

PRACTICA CAPITULO 2 MODULO 1 PROTOCOLOS Y LA FUNCIONALIDAD DE LA CAPA DE APLICACIÓN

PRACTICA CAPITULO 2 MODULO 1 PROTOCOLOS Y LA FUNCIONALIDAD DE LA CAPA DE APLICACIÓN PRACTICA CAPITULO 2 MODULO 1 PROTOCOLOS Y LA FUNCIONALIDAD DE LA CAPA DE APLICACIÓN Los protocolos de capa de aplicación de TCP/IP más conocidos son aquellos que proporcionan intercambio de la información

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

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

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

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

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

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

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

Lenguajes y estándares para la Web. Tema 3: XHTML. Elementos de marcado

Lenguajes y estándares para la Web. Tema 3: XHTML. Elementos de marcado Tema 3: XHTML. Elementos de marcado Esquema Tipo de documento, espacio de nombres y codificación Metadatos Módulos de XHTML Mecanismos de estructuración Esquema Tipo de documento, espacio de nombres y

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

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA. En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta

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

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

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUIA DISPONIBLE EN: http://preparadorivan.blogspot.com/ - http://preparadormssi.50webs.com/inicio.html La World Wide Web o la Web, es una de las múltiples

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

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

> 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

PREPARATORIA DIURNA DE CUAUTLA

PREPARATORIA DIURNA DE CUAUTLA PREPARATORIA DIURNA DE CUAUTLA Taller de computación II Profr. ING. AARON TABOADA LOMEZ Tecnologías de la Información y Comunicación (TIC) Son aquellas herramientas computacionales que procesan, almacenan,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Curso XHTML/HTML/HTML5

Curso XHTML/HTML/HTML5 Curso XHTML/HTML/HTML5 Curso XHTML/HTML/HTML5 Servidores Web y FTP Desde el inicio del curso hemos estado creando documentos HTML en las máquinas locales. Introduciremos ahora el concepto de los Servidores

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

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

INTRODUCCION. Tema: Protocolo de la Capa de aplicación. FTP HTTP. Autor: Julio Cesar Morejon Rios

INTRODUCCION. Tema: Protocolo de la Capa de aplicación. FTP HTTP. Autor: Julio Cesar Morejon Rios INTRODUCCION Tema: Protocolo de la Capa de aplicación. FTP HTTP Autor: Julio Cesar Morejon Rios Qué es FTP? FTP (File Transfer Protocol) es un protocolo de transferencia de archivos entre sistemas conectados

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

Plan de Trabajo en Verano de INFORMÁTICA CUARTO ESO. Departamento de Tecnología curso 2013-2014

Plan de Trabajo en Verano de INFORMÁTICA CUARTO ESO. Departamento de Tecnología curso 2013-2014 Plan de Trabajo en Verano de INFORMÁTICA CUARTO ESO Departamento de Tecnología curso 2013-2014 Este dossier contiene los siguientes documentos de tu interés: Batería de actividades por unidad didáctica

Más detalles

Tema 4. Contenido multimedia. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tema 4. Contenido multimedia. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Tema 4. Contenido multimedia ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Hipertexto! Permiten conectar entre sí entre diferentes documentos, elementos

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

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

Navegadores y páginas web

Navegadores y páginas web Navegadores y páginas web Comunicación en el siglo XXI El poder de la Web está en su universalidad. El acceso de todos es un aspecto esencial. Tim Berners-Lee Creador de la World Wide Web Índice de contenidos

Más detalles

Al igual que HTTP, FTP se basa en el envío de comandos codificados mediante ASCII, es decir, en texto plano.

Al igual que HTTP, FTP se basa en el envío de comandos codificados mediante ASCII, es decir, en texto plano. FTP (FILE TRANSFER PROTOCOL) FTP es un programa que se utiliza para transferir información, almacenada en ficheros, de una máquina remota a otra local, o viceversa (RFC 959). Para poder realizar esta operación

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

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

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

Laboratorio de Redes de Computadores

Laboratorio de Redes de Computadores 3. Análisis de tráfico en una LAN 3.1 Introducción En esta práctica se va a trabajar sobre la misma configuración de red utilizada en la práctica anterior (Figura 32) y se van a hacer ejercicios muy similares,

Más detalles

Ministerio de Educación,Cultura y Deporte. Aulas en Red. Windows. Módulo 2: Servicios Básicos. DNS

Ministerio de Educación,Cultura y Deporte. Aulas en Red. Windows. Módulo 2: Servicios Básicos. DNS Ministerio de Educación,Cultura y Deporte. Aulas en Red. Windows Módulo 2: Servicios Básicos. DNS Aulas en red. Aplicaciones y servicios. Windows DNS DNS (Domain Name System) es una abreviatura de Sistema

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

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

MATRIZ DE VALORACIÓN O RÚBRICA. Actividad de evaluación:

MATRIZ DE VALORACIÓN O RÚBRICA. Actividad de evaluación: MATRIZ DE VALORACIÓN O RÚBRICA Siglema: DEWE-02 Nombre del Módulo: Nombre del Alumno: Docente evaluador: Grupo: Fecha: Resultado de Aprendizaje: 1.2 Elabora páginas web estáticas haciendo uso del lenguaje

Más detalles

Indexhibit 2 Tareas comunes

Indexhibit 2 Tareas comunes Indexhibit 2 Tareas comunes Oscar Ciutat oscarciutat.com/code Cómo entrar en el área de administración de Indexhibit? 1. Ir a www.direccion.com/ndxzstudio/, sustituyendo www.direccion.com por la dirección

Más detalles

Manual de Administración de Correo Electrónico

Manual de Administración de Correo Electrónico La administración de sus cuentas de correo, puede usarse desde cualquier navegador que utilice los formatos (HTML) Para ingresar a la administración de las cuentas se tienen que acceder mediante protocolo

Más detalles

Diseño de páginas web 2011

Diseño de páginas web 2011 Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero

Más detalles

Códigos Binarios de Representación de Datos

Códigos Binarios de Representación de Datos Códigos Binarios de Representación de Datos M. en C. Erika Vilches Parte 1 Código Gray No tiene pesos asignados a las posiciones de los bits y no es un código aritmético. Principal característica: Muestra

Más detalles

Distribución de vídeo capturado con la cámara en las páginas Web

Distribución de vídeo capturado con la cámara en las páginas Web Distribución de vídeo capturado con la cámara en las páginas Web Este documento ofrece información de referencia relacionada con la distribución de vídeo capturado con la cámara en una página Web. Personalización

Más detalles

TEMA 8. Internet y la World Wide Web. Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca

TEMA 8. Internet y la World Wide Web. Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca TEMA 8 Internet y la World Wide Web Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca Qué es Internet? Algunos autores, Internet es un acrónimo de INTERconected

Más detalles

Instituto Tecnológico de Las América. Materia Sistemas operativos III. Temas. Facilitador José Doñe. Sustentante Robín Bienvenido Disla Ramirez

Instituto Tecnológico de Las América. Materia Sistemas operativos III. Temas. Facilitador José Doñe. Sustentante Robín Bienvenido Disla Ramirez Instituto Tecnológico de Las América Materia Sistemas operativos III Temas Servidor FTP Facilitador José Doñe Sustentante Robín Bienvenido Disla Ramirez Matricula 2011-2505 Grupo 1 Servidor FTP FTP (File

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

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

CuteFTP Manual de configuración

CuteFTP Manual de configuración CuteFTP Manual de configuración 28/03/2001 Manual de Cute-FTP 4.0 Configurar la conexión Conectando con el servidor Pantalla Principal Cambiar la presentación Elegir los directorios de origen y destino

Más detalles

EXTENSIÓN DE UML PARA APLICACIONES WEB

EXTENSIÓN DE UML PARA APLICACIONES WEB EXTENSIÓN DE UML PARA APLICACIONES WEB 1. Descripción Esta extensión de UML define un conjunto de estereotipos, valores etiquetados y restricciones que nos permiten modelar aplicaciones web. Los estereotipos

Más detalles

CÓMO CONFIGURAR APACHE PARA CREAR UN SITIO WEB

CÓMO CONFIGURAR APACHE PARA CREAR UN SITIO WEB CÓMO CONFIGURAR APACHE PARA CREAR UN SITIO WEB El servidor HTTP Apache es un servidor web HTTTP de código libre abierto para plataformas Unix (GNU/Linux, BSD, etc), Microsoft Windows, Macintosh y otras,

Más detalles

8 INTERNET. LIBRO DEL NAVEGANTE RA-MA

8 INTERNET. LIBRO DEL NAVEGANTE RA-MA ÍNDICE PRÓLOGO...15 CAPÍTULO 1. QUÉ ES INTERNET...17 QUÉ SIGNIFICA INTERNET...17 QUÉ ES LA RED INTERNET...21 PARA QUÉ VALE INTERNET...23 HISTORIA DE INTERNET...25 Nacimiento de TCP/IP...26 Nacimiento de

Más detalles

Unidad II: Lenguaje de marcado

Unidad II: Lenguaje de marcado Unidad II: Lenguaje de marcado 2.1 Introducción Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información

Más detalles

TEMA. Diseño orientado a la web. Internet y las páginas web. [9.1] Cómo estudiar este tema? [9.2] Internet y los navegadores

TEMA. Diseño orientado a la web. Internet y las páginas web. [9.1] Cómo estudiar este tema? [9.2] Internet y los navegadores Diseño orientado a la web. Internet y las páginas web [9.1] Cómo estudiar este tema? [9.2] Internet y los navegadores [9.3] Accesibilidad e interactividad [9.4] Resolución de pantalla [9.5] Optimización

Más detalles

Elastix : Servidor de Comunicaciones Unificadas

Elastix : Servidor de Comunicaciones Unificadas Elastix : Servidor de Comunicaciones Unificadas http://www.alreadyknew.com @mrjuhid Actualizado 05/07/2012-00:42 horas Elastix: Firewall Activar el firewall en Elastix proporciona el mínimo de seguridad

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

Instalación, creación y configuración del servicio FTP

Instalación, creación y configuración del servicio FTP Instalación, creación y configuración del servicio OBJETIVOS Instalar el servicio de en Windows. Configurar y administrar el Servicio de en Windows. Prueba de acceso desde la LAN al servidor. Apertura

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

Prácticas con Elastix Asterisk - Lab. 3

Prácticas con Elastix Asterisk - Lab. 3 1-1-2015 Prácticas telefonía IP Prácticas con Elastix Asterisk - Lab. 3 Jesse Padilla Agudelo Adaptado por Ing. Pedro Alberto Arias Quintero SENA - CIMI Red de telefonía para práctica inicial a trabajar

Más detalles

MANUAL DE USO FILEZILLA

MANUAL DE USO FILEZILLA Manual desarrollado por la Universidad de Jaén, España. http://www.ujaen.es/sci/redes/ftp/filezilla/ 1.- Introducción. MANUAL DE USO FILEZILLA FileZilla es un cliente de FTP desarrollado para la plataforma

Más detalles

Conceptronic CFULLHDMA Cómo usar Samba/CIFS y NFS

Conceptronic CFULLHDMA Cómo usar Samba/CIFS y NFS Conceptronic CFULLHDMA Cómo usar Samba/CIFS y NFS Para versión de firmware 01.09.10.06 o superior 1. Introducción El Conceptronic CFULLHDMA es un reproductor multimedia para realizar streaming de contenido

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

Internet y World Wide Web. Informática Aplicada Grado en GAP Fac. de Admón. y Dir. de Empresas Univ. Politécnica de Valencia

Internet y World Wide Web. Informática Aplicada Grado en GAP Fac. de Admón. y Dir. de Empresas Univ. Politécnica de Valencia Internet y World Wide Web Informática Aplicada Grado en GAP Fac. de Admón. y Dir. de Empresas Univ. Politécnica de Valencia Objetivos de este capítulo Conocer cuándo y cómo fue creada Internet Aprender

Más detalles

Manual de v2cms v2cms v1.01

Manual de v2cms v2cms v1.01 Manual de v2cms v2cms v1.01 Introducción v2cms es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creación de sitios web no importa el tamaño del mismo. El mismo permite una

Más detalles

Introducción al desarrollo web (idesweb)

Introducción al desarrollo web (idesweb) Introducción al desarrollo web (idesweb) Práctica 8: PHP 2 (cookies y sesiones) 1. Objetivos Conocer el concepto de cookie y sus posibles usos. Aprender a utilizar las cookies con PHP. Conocer el concepto

Más detalles

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose

Más detalles

Manual de Usuario FTP Manager

Manual de Usuario FTP Manager Manual de Usuario FTP Manager Presencia Web Triara.com SA de CV Todos los derechos reservados Esta guía no puede ser reproducido ni distribuida en su totalidad ni en parte, en cualquier forma o por cualquier

Más detalles

SISTEMAS INFORMÁTICOS EN TIEMPO REAL 2º Ingeniería Industrial MANUAL DE HERRAMIENTAS SOFTWARE PARA PROGRAMACIÓN EN UNIX

SISTEMAS INFORMÁTICOS EN TIEMPO REAL 2º Ingeniería Industrial MANUAL DE HERRAMIENTAS SOFTWARE PARA PROGRAMACIÓN EN UNIX 1 OBJETIVO Este manual describe las herramientas básicas necesarias para programar y gestionar una estación UNIX remota desde un PC con S.O Windows. El software utilizado es gratuito y está disponible

Más detalles

Clase 22 Nivel de Aplicación WWW Tema 6.- Nivel de aplicación en Internet

Clase 22 Nivel de Aplicación WWW Tema 6.- Nivel de aplicación en Internet Clase 22 Nivel de Aplicación WWW Tema 6.- Nivel de aplicación en Internet Dr. Daniel Morató Redes de Computadores Ingeniero Técnico de Telecomunicación Especialidad en Sonido e Imagen 3º curso Temario

Más detalles