Laboratorio Estructuras de datos

Slides:



Advertisements
Presentaciones similares
“Hipereducación: el camino para lograr una hipervida”
Advertisements

Ricardo Ferrís Castell
Internet y tecnologías web
Laboratorio Estructuras de datos. HTML. IntroducciónMartha Reyes Villa Práctica no. 1 Introducción a HTML Familiarizarse con los estándares de Internet.
LICENCIATURA EN SISTEMAS COMPUTACIONALES EN ADMINISTRACION
DISEÑO DE SITIOS WEB CON DREAMWEAVER 8.
I CURSO DE INTERNET BÁSICO
ELEMENTOS DEFINICIÓN HIPERTEXTO DIMENSIONES ESTRUCTURA.
Servicios de Internet.
Lenguaje de definición
Unidad Didáctica I Clase II
EXe Learning.
Comunicación Digital TIPOS DE ARCHIVOS¡ ING. JINETH HURTADO.
Johanna Lizeth Rodríguez Lorena Fda. Chávarro Ramos
Gestor de contenidos de la web ENEDI
BIENVENIDOS TECNOLOGIA DE LA INFORMACIÓN III. PRACTICA Para crear un nuevo sitio haga clic en el enlace Administrar sitios del panel Archivos, Haga.
HTML – Principales Etiquetas
Diseño de páginas Web Elaboración de Unidades Didácticas en Web.
Laboratorio 1 Paginas Web y HTML Justiniano Junco B Curso: Computación Justiniano Junco Fecha: 23 de Mayo del 2012 Profesor:

Clasificación de los TDA
PAGINAS WEB EQUIPO RAM.
Tema 4 Helena Sandra Jessica. El procesador de textos  -aplicación informatica que tiene como objetivo la creacion y edicion de documentos de textos.
MI PAGINA WEB Por: Ana Sofía Restrepo Agudelo Y Diana cristina otalvaro toro Grado: 6-2.
1. ¿Qué es una página Web?  Una página web es un documento electrónico diseñado para el World Wide Web (Internet) que contiene algún tipo de información.
Introducción al Lenguaje. ¿Qué es PHP? O Es un lenguaje de programación que es interpretado por un servidor web. O El lenguaje es genérico. PHP está orientado.
Internet y Navegadores Unidad 5. Fecha: 1 de agosto de 2011 Periodo# : 2 Objetivo: identificar el contenido de una dirección web Tema: Elementos de una.
Internet y Navegadores
PAGINAS WEB.
Teoría de Sistemas Operativos Administración de Archivos.
EDWIN ACOSTA PINILLA DIEGO FERNANDO CASTRO JHON SEBASTIAN CASTRO.
En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean visualizados en el navegador, pero sí a la hora de.
Introducción a las Tecnologías Informáticas Oscar Bedoya
 Este protocolo opera a través de solicitudes y respuestas, entre un "cliente" y un "servidor". El cliente para los usuarios es el navegador web, usado.
Internet y Navegadores Unidad 5.  WWW World wide web Literalmente "tela de araña mundial", más conocida como web.  HTML Lenguaje de Marcado de HyperTexto.
Introducción a los Sistemas de Computo
Sistemas de Archivos Sistemas Operativos.  Se debe proporcionar un almacenamiento secundario que respalda a la memoria principal  El Sistema de archivos.
Almacenamiento de la información IES Virgen del Espino.
NOMBRES: Daniel Andrés Martínez Pérez Jhon Alejandro Carrizosa Ovalle Jaiver Giovanny Sánchez García CURSO: JORNADA: Tarde.
- Parámetros de apariencia y uso Luis Villalta Márquez.
HTML.
Tema 4 Ofimática avanzada.
Internet y sus servicios
MOTORES DE BUSQUEDA.
 El término WikiWiki es de origen hawaiano que significa: rápido.  Es un sitio web cuyas páginas pueden ser editadas por múltiples voluntarios a través.
Modos de direccionamiento
Arreglos unidimensionales
Diseño Web y Multimedia 1 Clase 4 Docente: Josué Fortis.
1- Una imagen se mide por la cantidad de píxeles en ancho y largo.
CARACTERISTICAS Y FUNCIONES
MULTIMEDIA Colección de tecnologías centradas en el computador, que brindan al usuario la capacidad de acceder y manipular SONIDO, TEXTO, IMÁGENES Y VIDEO.
Elementos básicos para sistemas WEB. Que es la WEB Web es una tecnología que opera sobre internet que lleva propuesta desde El sistema de documentos.
Nombre de la Institución evaluada:Contraloría y Ciudadano URL de su sitio web: owProperty/BEA%20Repository/Sitios/Ciudadano.
EDICIÓN. Edición_ EDITOR DE TEXTO HTML Seleccionamos si queremos usar el editor HTML de Moodle o solo utilizamos texto plano donde haya posibilidades.
Laboratorio de programación Luisa Fernanda Rincón Pérez
UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Taller 3 Gestión de Información Web Integrantes Andrés Concha Bucaram Marcelo Ochoa Prieto ECOTEC.
PATRICIA ELENA PÈREZ GALEANO MAESTROS 2.0.  Podemos definir a Internet como una "red de redes", es decir, una red que no sólo interconecta computadoras,
Nº PO TITULO POSTER: Fuente tamaño 20 Autores: Fuente tamaño 16 Afiliación: Fuente tamaño 14 Introducción: fuente tamaño16 Agregar texto: Materiales y.
Creación de páginas Web (II) Recordatorio Pau Barceló Forteza
HIPERTEXTO + MULTIMEDIA = HIPERMEDIA
USOS BÁSICOS DE SOFTWARE Y HERRAMIENTAS DE COMPUTACIÓN E INTERNET Educación Tecnológica Prof. Ingrid Machuca Araya.
¿Internet? Es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes.
Iván camilo González Luis David cano
3.1.3 RECURSOS QUE SE COMPARTEN (UNIDADES LECTORES,DISCOS DUROS, IMPRESORAS MODEMS, ESCANERS, ARCHIVOS, ETCETERA)
Ciclo de charlas, conferencias y e-coloquios Congreso Virtual Mundial de e-Learning Mejorando la productividad con Evernote Carlos Bravo Reyes
TIPOS DE HIPERVINCULO Hipervínculo de texto: Un hipervínculo de texto es un enlace que se encuentra asociado a un texto, de forma que si hacemos clic.
IMPORTANCIA DE LA IMAGEN EN LOS TEXTOS.
Esxcvzxcvzxvczxcvpacio para el texto.
FUNCIÓN CUADRÁTICA—FUNCIÓN LINEAL.
Pilas.
Transcripción de la presentación:

Laboratorio Estructuras de datos

Práctica no. 2 Introducción a HTML Enlaces Imágenes

Enlaces Se pueden hacer a una parte del documento (referencia local) Se pueden hacer a otro documento Pueden ser desde un texto Pueden ser desde una imagen

Enlace. Referencia Local Índice Introducción Estructuras de datos lineales Pilas o Stacks Las estructuras de datos se refieren a la forma en que se almacenan los datos en la memoria. Dependiendo del tipo de estructura es la posibilidad de acceder a la información y de grabarla. SE clasifican de acuerdo a: Su composición Su forma de acceso En cuanto a su composición pueden ser Secuenciales Indexadas . Es una estructura de datos lineal de composición secuencial, abierta A cada uno de estos elementos habrá que establecerles un enlace a una referencia local. Referencias locales

Enlace. Referencia local Para especificar una referencia local se usa la directiva <A con el atributo NAME <A NAME=“Introduccion”>Introducción</A> <A NAME=“Pilas”>Pilas o Stacks</A> Para establecer una liga a una referencia local se usa el atributo # <A HREF=“#Introduccion”>Introducción</A> <A HREF="#Pilas">Pilas o Stacks</A>

Imágenes Imágenes inline Algunos formatos gráficos tienen soporte en modo nativo, mientras que otros requieren de programas externos. Existen varios formatos que permiten, entre otras cosas, comprimir en distinto grado la información.

Imágenes. Formatos GIF (Graphics Interchange Format) JPEG (Joint Photographic Experts Group bitmap) y sus variantes (JPG,BMP,XMP,XBM) TIFF (Tagged Image File Format) EPS ( Encapsulated PostScript) PCX (de Paintbrush). Solo el formato GIF es soportado directamente por todos los visualizadores, mientras que el JPEG lo es por bastantes.

Imágenes. Formatos El formato GIF se basa en el sistema de compresión LZW, un algoritmo muy simple y que, por ello, no alcanza unas altas cotas de reducción. Este trabaja con un máximo de 256 colores (8 bits); para simular colores fuera de la paleta utiliza la técnica de dithering (aproximación del color por los vecinos más próximos). JPEG utiliza un algoritmo de compresión más complicado que el GIF: los archivos resultantes son más pequeños, pero necesitan más tiempo para su descompresión. A diferencia del anterior formato, JPEG trabaja con 16.7 millones de colores (24 bits). Como norma general, diremos que se utilizará el formato GIF para iconos e imágenes pequeñas y JPEG para imágenes grandes o de calidad.

Imágenes. Para insertar una imagen en un documento HTML se utiliza la directiva simple <IMG>: <IMG src="/icons/isla.jpg"> Alineado de la imagen: <IMG src="/icons/isla.jpg" align=TOP> <IMG src="/icons/isla.jpg" align=MIDDLE> <IMG src="/icons/isla.jpg" align=BOTTOM> <IMG src="/icons/isla.jpg" align=RIGHT> <IMG src="/icons/isla.jpg" align=LEFT>

Tablas <TABLE> <TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR> <TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR> <TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR> <TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD> </TABLE> 100,3 1,8 313,1 22,7 200,8 23,1 8100,3 1300,5 4100,1 2,6 81,8 8,1

Tablas. Bordes y títulos La presencia de bordes en la tabla se especifica con el atributo border en la directiva <TABLE>. Con ello, se logrará un borde de dimensión de la unidad; si desea hacer el borde más espeso debe dar un valor numérico al atributo: border=espesor El título de la tabla es un literal delimitado por la directiva <CAPTION>...</CAPTION>. Por último, cada cabecera de columna se especifica con la directiva <TH>...</TH>

Tablas. Bordes y títulos <TABLE border> <CAPTION> Ejemplo de tabla</CAPTION> <TR><TH>Primera columna</TH><TH>Segunda columna</TH><TH>Tercera columna</TH></TR> <TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR> <TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR> <TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR> <TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD> </TABLE>

Tablas. Multicolumnas. Colspan <TABLE border> <CAPTION> Ejemplo de tabla con celdas multicolumna</CAPTION> <TR><TH colspan=2>Dos columnas</TH></TR> <TR><TH>Primera columna</TH><TH>Segunda columna</TH><TH>Tercera columna</TH></TR> <TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR> <TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR> <TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR> <TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD> </TABLE>

Tablas. Multicolumnas. Rowspan <TABLE border> <CAPTION> Ejemplo de tabla con celdas multifila</CAPTION> <TR><TH colspan=2>Dos columnas</TH> <TH rowspan=2>Tercera columna</TH></TR> <TR><TH>Primera columna</TH><TH>Segunda columna</TH></TR> <TR><TD>100,3</TD><TD>1,8</TD><TD>313,1</TD></TR> <TR><TD>22,7</TD><TD>200,8</TD><TD>23,1</TD></TR> <TR><TD>8100,3</TD><TD>1300,5</TD><TD>4100,1</TD></TR> <TR><TD>2,6</TD><TD>81,8</TD><TD>8,1</TD> </TABLE>

Colores de la página Colores de fondo Texto de un documento: Se especifica con el atributo BGCOLOR de la directiva BODY. Ej. <BODY BGCOLOR=#9933CC> Fondo de color morado Texto de un documento: Se especifica con el atributo TEXT de la directiva BODY. Ej. <BODY TEXT=#00FF00> Texto de color verde, por defecto Texto específico: Se especifica con el atributo COLOR de la directiva FONT. Es una extensión propuesta por Netscape a HTML 2.0. Ej. Con <FONT COLOR=#FF0000>Este texto se verá rojo</FONT> el usuario verá: Este texto se verá rojo. Imagen como fondo (marca de agua) Para esto, se utiliza el atributo BACKGROUND de la directiva BODY. Ejemplo: Si en esta misma página sustituye <BODY> por <BODY BACKGROUND=/imagen/planeta.gif>

Colores La manera de especificar el color es común a todas las etiquetas HTML: o bien indicando el nombre, si es un color normal, o bien especificando el porcentaje de rojo, verde y azul (código RGB) del mismo. Los colores reconocidos son los siguientes: Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, NavyBlue, Teal, Aqua <FONT color="red">Estoy en rojo</FONT> El modo de indicar el color RGB es el siguiente: <FONT COLOR="#FF0000">D</FONT> <FONT COLOR="#EF0000">E</FONT> <FONT COLOR="#DF0000">G</FONT> <FONT COLOR="#CF0000">R</FONT> <FONT COLOR="#BF0000">A</FONT> <FONT COLOR="#AF0000">D</FONT> <FONT COLOR="#9F0000">A</FONT> <FONT COLOR="#8F0000">D</FONT> <FONT COLOR="#7F0000">O</FONT> La primera componente en hexadecimal es el rojo, la segunda el verde y la tercera el azul (Red Green Blue, RGB).

Frames o paneles Para poder visualizar varios documentos en el mismo browser y que un documento posterior pueda actualizar una de las zonas, se definen los paneles(frames). Con los paneles podemos dividir la pantalla en varias zonas donde cada una puede visualizar un documento diferente. Para ello, la estructura del documento HTML se verá afectada en la siguiente medida: <HTML> <HEAD> ... </HEAD> <FRAMESET> ... <FRAMESET> ... <FRAME> </FRAMESET> ... <FRAME> </FRAMESET> <NOFRAME> ... </NOFRAME> </HTML>

Frames o paneles Se especifican tres nuevas directivas, FRAMESET, FRAME y NOFRAME, y un atributo en la directiva A llamado TARGET. En un panel HTML se define el aspecto de las zonas de visualización y los documentos que se mostrarán en cada una de ellas.

Frames o paneles Cada frame tendrá sus bordes y sus propias barras de desplazamiento (opcional). Así cada página se dividirá en la práctica en varias páginas independientes. Para crearlos necesita un documento HTML específico, que se llama documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá.

Frames o paneles. Documento de definición de marcos (html) Titulo.html Html variable Menu.html Introducción Listas Arboles Sorts

Frames o paneles Ejemplo. <HEAD> <TITLE>Introducción a HTML: Frames</TITLE> </HEAD> <FRAMESET ROWS="10%,90%"> <FRAME SRC="panel_titulo.html" SCROLLING="no"> <FRAMESET COLS="*,3*"> <FRAME SRC="panel_menu.html" MARGINHEIGHT=50> <FRAME SRC="panel_intro.html" NAME="texto"> </FRAMESET> </FRAMESET> <NOFRAME> ... </NOFRAME>

Frames o paneles. BODY es sustituido por un FRAMESET. En cada FRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno. Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniéndoles un nombre y especificando qué archivo HTML le corresponde mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el supuesto (cada vez más raro) de que su navegador no soporte frames dentro de la etiqueta <NOFRAMES>.

Frames. Directiva Frameset Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más. En general, los navegadores dibujan un borde de separación entre los marcos. Si desea eliminarlo puede hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>. Cuando elimina ese borde, podrá ver cómo el navegador deja aún un hueco entre marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0. Los parámetros COLS y ROWS. Debe asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño: Con porcentajes: Al igual que con las tablas, podrá definir el tamaño de un marco como un porcentaje del espacio total disponible. Absolutos: Si pone un número, el marco correspondiente tendrá el tamaño especificado en pixels. Sobre el espacio sobrante: Si coloca un asterisco (*) estará indicando que desea todo el espacio sobrante para ese marco. Puede poner este símbolo en varios marcos, que se repartirán el espacio equitativamente. Si desea que uno tenga más, debe ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero, que tiene un asterisco sólo.

Frame. Directiva Frameset Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos: <FRAMESET COLS="10%,*,200,2*"> Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupará el 10%, es decir, 64 pixels. El tercero necesita 200, luego quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el cuarto marco. Hay que tener cuidado cuando usa valores absolutos en la definición de marcos; debe asegurarse de tener al menos un marco con un tamaño relativo si quiere estar seguro del aspecto final de la página. Las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente se colocan las etiquetas <FRAME> tal que así: <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal“ SRC="introduccion.html"> <FRAME NAME="ejemplos" SRC="ejemplo.html"> </FRAMESET> </FRAMESET>

Paneles. Directiva Frame Define las características de un marco determinado, no de un conjunto de ellos. Estos son los parámetros que admite: NAME. Asigna un nombre a un marco para que después se pueda referir a él. SRC. Indica la dirección del documento HTML que ocupará el marco. SCROLLING. Decide si se colocan o no barras de desplazamiento al marco para desplazarse por su contenido. Su valor es por omisión AUTO, que deja al navegador la decisión. Las otras opciones que se tienen son SCROLLING=YES y SCROLLING=NO. NORESIZE. Si lo especificamos el usuario no podrá cambiar de tamaño el marco. FRAMEBORDER. Al igual que su homónimo en la etiqueta <FRAMESET>, si se iguala a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. MARGINWIDTH. Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels. MARGINHEIGHT. Igual al anterior pero con márgenes verticales.

Paneles. Acceso a otros marcos Cuando da click sobre un enlace situado dentro de un marco, la nueva página a la que desea acceder, la verá encerrada en ese mismo marco. Pero si por ejemplo, tiene un marco que sirve de índice y otro donde se muestran los contenidos, sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible con el parámetro TARGET. Este se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. Las dos primeras sirven para indicar el marco en el que abrirá ese enlace en particular y el último modifica el marco en el que por omisión se muestran todos los enlaces. En los ejemplos anteriores, si en el marco llamado indice tiene un enlace: <A HREF="pagina.html" TARGET="principal"> También existen cuatro nombres reservados que se podrán utilizar en el parámetro TARGET: _top Elimina todos los marcos existentes y muestra la nueva página en la ventana original sin marcos. _blank Muestra la nueva página en una ventana nueva y sin nombre del navegador. _self Muestra la nueva página en el marco donde está declarado el enlace. _parent Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace.