IRI - Hipertexto Memex – Vannevar Bush – “As we may think”, 1947 Pensamiento asociativo Multiples descubrimientos independientes – Newton, Leibniz, Fermat,

Presentación del tema: "IRI - Hipertexto Memex – Vannevar Bush – “As we may think”, 1947 Pensamiento asociativo Multiples descubrimientos independientes – Newton, Leibniz, Fermat,"— Transcripción de la presentación:

1 IRI - Hipertexto Memex – Vannevar Bush – “As we may think”, 1947 Pensamiento asociativo Multiples descubrimientos independientes – Newton, Leibniz, Fermat, et al. – Henry & Faraday – Darwin & Wallace Proyecto Xanadú – Ted Nelson – “Literaly Machines”, 1957 Docuverso Transclusion

2 IRI – World Wide Web Tim Berner's Lee – CERN, 1989 Protocolo HTTP Direcciones URL Lenguaje HTML – Primer servidor Web, 1991 – W3C (World Wide Web Consortium), 1994 Estándares libres

3 IRI – HTTP HTTP (Hyper Text Transfer Protocol) – Envios GET POST HEAD Etc. – Respuestas 200 → OK 404 → “page not found” Etc.

4 IRI – URL URL (Uniform Resource Locator) Protocolo Usuario Password Maquina Puerto Ruta Archivo Query Parte protocolo://usuario:pass@maquina:puerto/ruta/archivo?query#parte

5 IRI - HTML Hyper Text Markup Language – Lenguaje predominante para la construcción de páginas web. – Describe la estructura y contenido de una página en formato de texto, y hasta cierto punto su apariencia. – Esta basado en el uso de etiquetas, o tags, rodeadas por corchetes angulares. Por ejemplo:.

6 IRI - Tags Formato de etiquetas – Las etiquetas expecifican la inserción de un elemento o un cambio sobre la estructura de la página, y pueden contener atributos. – Algunas etiquetas se utilizan puntualmente en el lugar donde introducen un cambio. En tal caso la forma es la siguiente: – Otras encierran el contenido que afectan. En tal caso la forma de utilizarlas es: contenido

7 IRI – Estructura mínima HTML  Marca el inicio y fin del documento. HEAD  Encierra datos que no hacen al documento en sí, sino a sus propiedades. TITLE  Contiene el título mostrado en el navegador. BODY  Encierra el contenido de la página que será visualizado mediante el navegador.

8 IRI – Ejemplo de estructura Ejemplo: Página de ejemplo Contenido del ejemplo.

9 IRI - Generalidades Los documentos deben tener la extensión.htm o.html Mayúsculas y minúsculas son en principio indistintas. Los saltos de línea y tabulaciones no tienen mayor efecto que clarificar el código. Los comentarios se encierran entre los símbolos Los caracteres especiales deben ser codificados de forma especial.

10 IRI – Caracteres especiales Obligatorios: – < → < – > → > – " → " – & → & – → espacio (cuando es más de uno) Tildes: – &aacute → á – &Eacute → É – &ntilde → ñ

11 IRI – Inserción de caracteres Ejemplo:... Oración de una sola línea;.

12 IRI – Etiquetas básicas - salto de línea y retorno de carro y - párrafos – align=“center”, “left”, “right” y “justify” - sección o división de un documento – align=“center”, “left”, “right” y “justify” y - párrafos encabezados – align=“center”, “left”, “right” y “justify”

13 IRI – Etiquetas básicas Ejemplo: Parrafo 1. Parrafo 2. Parrafo 2. Titulo importante Subtitulo Parrafo 3.

14 IRI - Etiquetas básicas y o y - texto en itálica y o y - texto en negrita y - texto subrayado y - supraíndice y - subíndice Las etiquetas de formato de texto pueden combinarse y anidarse

15 IRI - Etiquetas básicas Ejemplo: Texto en negrita, cursiva y ambas. Texto subrayado Texto en subindice y superindice

16 IRI - Etiquetas básicas y - define color, tamaño y tipo de letra - color= " nombre " o " #RGB " 16 códigos de color originales Más colores: http://www.brobstsystems.com/colors2.htmhttp://www.brobstsystems.com/colors2.htm "aqua" o "#00FFFF" "black" o "#000000" "blue" o "#0000FF" "fuchsia" o "#FF00FF" "gray" o "#808080" "green" o "#008000" "lime" o "#00FF00" "maroon" o "#800000" "navy" o "#000080" "olive" o "#808000" "purple" o "#800080" "red" o "FF0000" "silver" o "#C0C0C0" "teal" o "#008080" "white" o "#FFFFFF" "yellow" o "#FFFF00"

17 IRI - Etiquetas básicas y - define color, tamaño y tipo de letra – size= "1..7" (absoluto, de menor a mayor) "±valor" (relativo al tamaño anterior) – face= Familia: "times", "courier", "arial", "serif", "sans-serif", "cursive", "fantasy", "monospace", etc. Tipografía específica: "Times New Roman", "Verdana", "Comic Sans", "Lucida Sans", etc.

18 IRI - Etiquetas básicas Ejemplo: Texto 1 Texto 2

19 IRI - Etiquetas básicas Atributos de etiqueta : – bgcolor=“nombre” o “#RGB” – background=“nombreimagen.extension” – text=“nombre” o “#RGB” – link=“nombre” o“#RGB” – vlink=“nombre” o“#RGB” – alink=“nombre” o “#RGB” – marginwidth o leftmargin =“tamaño en pixeles” – marginheight o topmargin =“tamaño en pixeles”

20 IRI - Etiquetas básicas y - listas desornenadas – type=“circle”, “disc” y “square” y - listas ordenadas – type=“1”, “a”, “A”, “i” e “I” – start=“número” y - items de una lista – type=“circle”, “disc”, “square”, “1”, “a”, “i”, etc. debe siempre ir dentro de o y pueden anidarse.

21 IRI - Etiquetas básicas Ejemplo: Item 1 Item 2 Subitem 1 Subitem 2

22 IRI - Etiquetas básicas y - listas de definición y - término de una lista y - definición de una lista Ejemplo: un término una definición otro término otra definición

23 IRI - Etiquetas básicas y - anclas o vínculos – href=“url”, “archivo”, “#enlaceinterno” o la suma de los mismas y “mailto:usuario@servidor” – name=“enlaceinterno” puede encerrar tanto texto como imágenes.

24 IRI - Etiquetas básicas Ejemplo: Inicio de pagina Este es un vinculo externo Este es un vinculo interno

25 IRI - Etiquetas básicas - insertar imágen – src=“url”, “archivo” o la suma de ambas – lowsrc= “url”, “archivo” o la suma de ambas – alt=“texto alternativo” – align=“top”, “bottom”, “middle”, “left” y “right” – border=“pixeles” – height=“pixeles” – width=“pixeles”

26 IRI - Etiquetas básicas Ejemplo: Esta es una imagen Esta es otra <img src="http://www.w3schools.com/images/comp atible_firefox.gif" height="100px" width="100px">imagen

27 IRI - Etiquetas básicas - crear tabla – align=“left”, “center” y “right” – bgcolor=“nombre” o “#RGB” – background=“nombrearchivoimagen.extension” – border=“pixeles” – bordercolor=“nombre” o “#RGB” – width=“pixeles” o “porcentaje%” – cellpading=“pixeles” – cellspacing=“pixeles”

28 IRI - Etiquetas básicas y - crear fila – align=“right”, “left”, “center”, “justify” y “char” – valign=“top”, “middle”, “bottom” y “baseline” – bgcolor=“nombre” o “#RGB” y - crear cabecera de columna y - crear celda común

29 IRI - Etiquetas básicas Propiedades de y : – align=“right”, “left”, “center”, “justify” y “char” – valign=“top”, “middle”, “bottom” y “baseline” – bgcolor=“nombre” o “#RGB” – background=“nombrearchivoimagen.extensio n” – height=“pixeles” – width=“pixeles” o “porcentaje%” – colspan=“cantidad” – rowspan=“cantidad”

30 IRI - Etiquetas básicas Ejemplo: Mes Ahorre Enero us$ 1000 * Febrero ar$ 3500 (*) 1 us$ = 5 ar$

31 IRI - Etiquetas básicas y, y, y y - agrupar filas - agrupar columnas Agrupar permite definir estilos compartidos por un conjunto dado de celdas de la tabla

32 IRI - Etiquetas básicas – align=“left”, “center” o “right” – noshade=“noshade” – size=“pixeles” – width=“pixeles” o “porcentaje%” y - crea citas y - abreviaciones – title=“Este Es El Texto Completo” y - texto sin formato

33 IRI – Mapa de imágenes Ejemplo de mapa de imágen:

34 IRI – Conjunto de marcos - configura un conjunto de marcos – border=“pixeleslink” – frameborder=“1” o “0” – bordercolor=“color” o “#RGB” – framespacing=“pixeles” – cols=“columna1, …, columnaN” en pixeles, % o * – rows=“fila1, …, filaN” en pixeles, % o *

35 IRI - Marcos - configura un marco – src=“link” – name=“identificador” – frameborder=“1” o “0” – bordercolor=“color” o “#RGB” – marginwidth=“pixeles” – marginheight=“pixeles” – noresize=“noresize” – scrolling=“yes”, “no” o “auto” Incorporo el siguiente atributo a mis links: – target= “identificador”, “_blank”, “_self”, “_parent” o “_top” Solo cambia un frame en cada vínculo

36 IRI - Marcos Ejemplo de marcos: Título de la página

37 IRI – Marcos internos e – src=“pagina.html” – name=“identificador” – align=“left”, “center” y “right” – width=“pixeles” – height=“pixeles” – marginwidth=“pixeles” – marginheight=“pixeles” – frameborder=“1” o “0” – scrolling=“yes”, “no” o “auto”