Conceptos de pag. web

TTeeccssuupp VViirrttuu@@ll

CCCooonnnccceeeppptttooosss dddeee PPPgggiiinnnaaasss WWWeeebbb

Conceptos de Pginas Web Tecsup Julio 2006

Pgina 2

INDICE

1. Introduccin ................................................................................ 3 2. Objetivos ..................................................................................... 3 3. Definiciones Iniciales.................................................................. 3 3. Tipos de pginas Web ................................................................. 4

3.1. Pginas Estticas ............................................................. 4 3.2. Pginas Dinmicas .......................................................... 4

4. Componentes de una pgina Web ............................................... 4 4.1. Banners............................................................................ 4 4.2. Formularios ..................................................................... 5 4.3. Frames ............................................................................. 6 4.4. Hiperenlaces o Enlaces ................................................... 6 4.5. Tablas .............................................................................. 7

5. Tipos de archivos utilizados en un Sito Web .............................. 7 6. Servicios de un Portal Web ......................................................... 8 7. Tecnologas en Pginas Web ...................................................... 8 8. La estructura de un Site............................................................... 9

8.1. Tipos de estructuras......................................................... 9 9. Recomendaciones para disear una pgina Web ...................... 11

9.1. Navegacin.................................................................... 12 9.2. Tamao de las pginas .................................................. 13 9.3. Independencia del navegador ........................................ 15 9.4. Calidad de las pginas ................................................... 15 9.5. Tipografa ...................................................................... 15 9.6. Responda a la gente....................................................... 18 9.7. Simplicidad ................................................................... 18 9.8. Consistencia .................................................................. 18 9.9. Identidad........................................................................ 18 9.10. Contenido ...................................................................... 19 9.11. Compatibilidad.............................................................. 19 9.12. Interaccin..................................................................... 20 9.13. Feedback ....................................................................... 20 9.14. Marketing de valor aadido .......................................... 20

10. Consideraciones en el diseo de una pgina Web..................... 21 10.1. Tipo de letra y tamao................................................... 21 10.2. Colores .......................................................................... 21 10.3. Distribucin de contenido ............................................. 21 10.4. Tablas ............................................................................ 21 10.5. Imgenes ....................................................................... 21

11. Glosario ..................................................................................... 22 12. Referencias Bibliogrficas ........................................................ 26

Tecsup Conceptos de Pginas Web Julio 2006

Pgina 3

1. Introduccin Antes de disear un sitio Web es importante esclarecer los conceptos bsicos relacionados a las pginas Web, conocer que tipos de pginas existen, que estructuras se utilizan, que parmetros debemos tener en cuenta antes de crear la pgina. Por ello en esta unidad definiremos los conceptos bsicos de un sitio Web y conoceremos algunas recomendaciones para la creacin de estos. La unidad permitir que el alumno tenga las pautas bsicas para la construccin, diseo, edicin y optimizacin de Pginas Web.

2. Objetivos

Diferenciar los conceptos bsicos de un sitio Web. Definir, estructurar y planear la creacin de un sitio Web.

3. Definiciones Iniciales

Pgina Web Una pgina WEB no es ms que un conjunto de texto, imgenes dispuestos de tal manera que permita su lectura de una manera fcil y agradable, independiente de la plataforma (Computadora o Sistema Operativo) que se este usando. Son usadas para brindar informacin referente a una empresa, organizacin, colegio, universidad, etc. Home Page El Home Page es la pgina inicial (entrada principal) de un Site. Site Un site no es ms que una coleccin de pginas Web. Portales Los portales son bsicamente sites que brindan adicionalmente una serie de servicios como: correo electrnico, chat, transferencia de archivos, noticias, suscripciones, comercio electrnico, etc. Existen bsicamente dos tipos de portales: portales verticales y portales horizontales. Plug-ins Programas que deben instalarse en las PCs clientes para que sus navegadores puedan reconocer y procesar determinados tipos de archivo (Flash, Director, Real Audio y otros).

Una pgina Web incluye texto, imgenes y enlaces; pudiendo adems contener animaciones, sonidos, y cualquier otro tipo de archivo utilizando plugins y otras tecnologas.


Pgina 4

1. Tipos de pginas Web Existen bsicamente dos tipos de pginas Web: Las Pginas Estticas y las Dinmicas. 3.1. Pginas Estticas

Son aquellas pginas en donde la informacin es esttica (texto) o repetitiva (figuras en movimiento). Este tipo de pginas son las mas fciles de implementar.

3.2. Pginas Dinmicas

Estas pginas permiten visualizar informacin que puede variar, ejemplo: Las notas y asistencia de un curso virtual. La temperatura en los diversos departamentos del Per. Los ttulos de libros en venta con su respectivo precio, de una determinada librera. Tambin pueden permitir hacer consultas como:

Cul es la nota ms alta del curso virtual? Cules son los departamentos del Per que estn

sobre los 22 grados centgrados de temperatura? Qu libros estn a menos de $ 20 dlares? Normalmente estas pginas dinmicas trabajan con un elemento fundamental llamado Base de Datos, lo cual hace que su implementacin sea mucho ms complicada. Para desarrollar pginas de este tipo se requieren de: Diseadores Grficos y Programadores.

Actividad: Cul es la diferencia entre una pgina Web o un portal? El Campus Virtual utiliza pginas dinmicas o estticas? 4. Componentes de una pgina Web

Toda pgina Web tiene los siguientes componentes: 4.1. Banners

Es una imagen usada en Internet para hacer publicidad sobre algn producto o pgina en Internet.

Las pginas Web dinmicas interactan con el visitante y le ofrecen la posibilidad de realizar consultas en bases de datos, utilizar carritos de compra, participar en foros entre otras cosas.


Pgina 5

Es un anuncio o spot publicitario basado en una imagen grfica que se muestra al cargar una pgina Web.

4.2. Formularios

Los formularios son pginas que contienen elementos necesarios tal como botones de radio, listas de seleccin, cajetines de introduccin de texto y de control. La manera general para que los lectores de nuestra pgina se puedan comunicar con nosotros es por medio de un enlace a nuestra direccin de email, con lo que recibiramos un email convencional. Los formularios permiten que los dems nos enven la informacin directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procesa esta informacin. Ejemplo de Formulario:

Banner


Pgina 6

4.3. Frames Frames (en ingls, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de pginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras de desplazamiento.

Ejemplo

4.4. Hiperenlaces o Enlaces

Un hiperenlace o simplemente enlace, tambin llamado vnculo, hipervnculo o liga, es una referencia en un documento de hipertexto a otro documento o recurso, el cual se puede guardar, ver, o mostrar como parte de la pgina que hace la referencia. Muchas veces se muestra subrayado y al posicionar el Mouse sobre l, este obtiene la forma de una mano.

Frame 1

Frame 3Frame 2

Enlace o Vnculo


Pgina 7

4.5. Tablas Las tablas nos permiten distribuir la informacin dentro de una pgina Web. Estas nos permiten no solo mostrar texto dentro de ellas, sino tambin imgenes, banners, formularios y animaciones.

5. Tipos de archivos utilizados en un Sito Web

Los Sitios Web pueden contener distintos tipos de archivos para brindar informacin a sus visitantes entre ellos los textos, audio y video Dentro de los textos se utilizan: PDF (Portable Document Format) o formato de documento

porttil. PS (PostScript) lo cual significa que es un archivo formateado

en lenguaje de impresora. Las pginas Web tambin pueden contener audio y videos, los formatos ms utilizados de audio son: MIDI (Musical Instrument Digital Interface), Real Audio Wave (apcope de WAVEform audio format) Dentro de los formatos de videos tenemos: AVI (Audio Video Interleave) MOV MPEG (Moving Picture Experts Group)

En la actualidad se esta usando bastante el formato SWF que permite tener audio, video, texto en un solo formato.

Para mayor informacin consulte el glosario


Pgina 8

6. Servicios de un Portal Web Los portales Web clsicamente brindaban un servicio de visualizacin de documentos tipo texto. Hoy en da esto ha evolucionado y nos permiten brindar adems una serie de servicios, los cuales normalmente son implementados en otros servidores. Entre los servicios ms comunes que podemos encontrar hoy en da en una pgina Web podemos mencionar: Correo Electrnico. Transferencia de Archivos (FTP). Comunicacin en tiempo real (Chat). Grupo de Noticias. Comercio Electrnico. Telefona por Internet. Videoconferencia. Televisin por Internet.

7. Tecnologas en Pginas Web

En el desarrollo de una pgina Web podemos usar diversas tecnologas como son: HTML (Hypertext Markup Language) DHTML (Dynamic Hypertext Markup Language) Javascript Java Java applets Controles activex WML (Wireless Markup Lenguaje) XML (Extensible Markup Language) Vrml (Virtual Reality Modeling Language) Cgi (Common Gateway Interdice) ASP (Active Server Pages) PHP (Personal Home Page o PHP Hypertext Preprocessor) JSP (Java Server Pages) Flash

Cabe indicar, que estos servicios no estn necesariamente implementados en el mismo servidor, sino que estn ubicados en otros servidores debido a su complejidad.

Para mayor informacin consulte el glosario


Pgina 9

8. La estructura de un Site La estructura de un conjunto de pginas Web es muy importante, ya que una buena estructura permitir al visitante de la pgina visualizar todos los contenidos de una manera fcil y clara, mientras que un conjunto de pginas Web con una mala estructura producir en el visitante una sensacin de estar perdido. No encontrar rpidamente lo que busca y terminar por abandonar la pgina. Antes de crear un conjunto de pginas Web debemos tener una idea clara de cmo va a ser la estructura de las pginas. Es conveniente hacer algn esquema sencillo antes de empezar a desarrollarla. 8.1. Tipos de estructuras

Jerrquica La estructura jerrquica es la tpica estructura de rbol, en el que la raz es la hoja de bienvenida. Esta hoja se puede tambin sustituir por la hoja de contenido en la que se exponen las diferentes secciones que contendr nuestro sitio. La seleccin de una seccin nos conduce asimismo a una lista de subtemas que pueden o no dividirse. Este tipo de organizacin permite al lector conocer en qu lugar de la estructura se encuentra, adems de saber que conforme se adentra en la estructura, obtiene informacin ms especfica y que la informacin ms general se encuentra en los niveles superiores.

Lineal La estructura lineal es la ms simple de todas, la manera de recorrerla es la misma que si estuvisemos leyendo un libro, de manera que estando en una pgina, podemos ir a la siguiente pgina o a la anterior.


Pgina 10

Esta estructura es muy til cuando queremos que el lector siga un camino fijo y guiado, adems impedimos que se distraiga con enlaces a otras pginas. Por otra parte podemos causar al lector la sensacin de estar encerrado si el camino es muy largo o poco interesante.

Lineal con jerarqua Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas estn organizados de una forma jerrquica, pero uno puede leer todo el contenido de una forma lineal si se desea.

Esto permite tener el contenido organizado jerrquicamente y simultneamente poder acceder a toda la informacin de una manera lineal como si estuvisemos leyendo un libro. Red La estructura de red es una organizacin en la que aparentemente no hay ningn orden establecido, las pginas pueden apuntarse unas a otras sin ningn orden aparente.


Pgina 11

Este tipo de organizacin es la ms libre, pero tambin es la ms peligrosa ya que si no se informa al lector de en dnde se encuentra, puede perderse, puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructura de las pginas con algunos smbolos. Por ejemplo figuras, letreros, etc. Mapa del Sitio El Mapa del Sitio es una herramienta que permite orientarse rpidamente en la estructura de archivos, se utiliza para orientar a los usuarios que visitan nuestra pgina Web. Los mapas de Sitio muestran los enlaces ms importantes de nuestra pgina Web en forma ordenada. Por ejemplo:

En el ejemplo anterior podemos observar una estructura jerrquica.

Actividad: Qu pginas que usted conoce utiliza un esquema jerrquico? Cul de los esquemas le parece a usted ms conveniente para su empresa o centro de estudios?

9. Recomendaciones para disear una pgina Web

Para crear una pgina Web se requiere de ciertos criterios para hacer una pgina interesante y que invite a su navegacin. Para ello le indicamos algunas recomendaciones:

Que criterios debemos de tener en cuenta al crear una pgina Web?


Pgina 12

9.1. Navegacin

Unos de los elementos ms importantes en el diseo de pginas Web son los elementos de navegacin, ya que son los que nos permiten movernos a travs de las diferentes pginas que hemos construido. Duplique los elementos de navegacin si es

necesario Si sus pginas tienen normalmente un tamao superior al de una pantalla y media, considere la opcin de duplicar los elementos de navegacin al principio y al final de las pginas.

Aada un enlace al principio de la pgina

Si la pgina es suficientemente larga proporcione al final de esta un enlace el principio de la misma. En el caso de la pgina anterior, el logo nos lleva a su pgina inicial.

Cada pgina Web ha de tener un enlace por el cual se pueda continuar la navegacin.

Proporcione ndices Si le es posible facilite un ndice con el contenido del sitio. Procure que el ndice sea fcilmente accesible, puede hacer un "frame" o puede ponerlo al principio o al final de la pgina.

Asegrese de que proporciona un camino cmodo para visitar todas las pginas Web de su sitio. Si no tiene en cuenta esto perder la mayora de los visitantes tras las primeras pginas.

El uso de texto pequeo en los botones de la pgina es un buen consejo. Igualmente ponga en los enlaces superiores los enlaces a otras partes de su pgina de acuerdo a su orden de importancia, as como su enlace a su correo electrnico.


Pgina 13

9.2. Tamao de las pginas

Evitar el scroll Si quiere captar la atencin del navegante, no haga la pgina ms grande de una pantalla. Muchas de las personas que navegan por Internet no consultan la parte inferior de las pginas porque no saben que hay ms informacin en la parte de abajo.

Haga las pginas de una pantalla y media En general es una buena costumbre no hacer pginas de tamao mayor a una pantalla y media. De esta manera evitar muchos problemas y facilitar la lectura de las pginas. Las pginas del tamao de una pantalla y media son cmodas de leer y no saturan al lector con demasiada informacin. Ejemplo: http://www.tecsup.edu.pe/ http://www.microsoft.com/

La navegacin es uno de los elementos ms importantes de su diseo, tmese su tiempo al aplicar el formato y la estructura lgica para elaborar su mtodo de navegacin. Tanto para los botones como para el contenido, la consistencia es importante.


Pgina 14

Si necesita poner gran cantidad de texto escrito que ha de leerse completo, es recomendable hacer una nica pgina larga. Es menos molesto hacer scroll a lo largo de una ventana que seguir un enlace a la siguiente parte del documento.

Enlaces Los enlaces permiten enriquecer el contenido de la informacin con datos suplementarios, pero se ha de tener precaucin ya que pueden hacer confusa la lectura de una pgina. Se recomienda de que el texto enlazado debe definir el contenido de la informacin a la que refiere, de manera que no sea necesario leer, de ser posible, todo el prrafo para comprender el significado del enlace. Debemos de asegurarnos, adems, que el visitante de nuestra pgina encontrar lo que necesita, si no encuentra lo que espera puede abandonarla. El enlace ha de ser suficientemente significativo, un enlace demasiado largo tambin es perjudicial ya que dificulta la lectura del texto. Cuando realice enlaces consecutivos similares, resalte la informacin que diferencie unos enlaces de otros. No cambie el color de los enlaces, esto suele confundir a los visitantes, puesto que pueden pensar de que ya visitaron algn enlace.

Antes de publicar sus pginas asegrese del buen funcionamiento de los enlaces. Comprobar tanto los enlaces internos, cada vez que modifiquemos nuestras pginas, y los enlaces externos de una forma peridica.


Pgina 15

9.3. Independencia del navegador

Visualice las pginas en diferentes navegadores Aunque sus pginas cumplan el estndar es recomendable que compruebe que sus pginas se visualizan correctamente en los navegadores ms usados. Java o javascript Asegrese de que no sea necesario el uso de Java o JavaScript para visualizar el contenido de sus pginas, puede ser que el navegador no soporte estos lenguajes o que an soportndolos no estn activados. Escriba pginas para cualquier navegador No realice pginas que slo se vean bien en un navegador o en una resolucin concreta, incluyendo etiquetas exclusivas de algn navegador. Si usa las recomendaciones propuestas por el W3C http://www.w3.org/TR/#Recommendations sus pginas se visualizarn correctamente en todos los navegadores.

9.4. Calidad de las pginas

No cometa faltas ortogrficas

Use un procesador de textos con correccin ortogrfica para escribir el texto que va a publicar, adems con el uso de un procesador de textos le resultar ms cmoda la escritura.

Ponga sus pginas en contexto

Recuerde que el lector puede llegar a su pgina desde cualquier sitio, por lo tanto es muy recomendable que se le d un contexto definido. Recuerde las preguntas bsicas: qu?, quin?, cmo?, cundo?

9.5. Tipografa

Una buena tipografa es tan importante en una pgina Web como en cualquier otro medio escrito. El problema que se presenta en las pginas Web es que se ha de visualizar correctamente en diferentes sistemas y multitud de ordenadores.


Pgina 16

Use los estilos con moderacin Si quiere resaltar algo use las negritas o el tipo cursiva, pero no abuse de ellos porque si todo est resaltado, el cerebro se acostumbra y deja de parecerle destacado. nfasis en los textos (capitalizacin) Cuando leemos lo primero que observamos es la forma general de las palabras. De manera que un titular con la primera letra de cada palabra en mayscula es ms atractivo visualmente que todo el titular en maysculas.

La mayor cantidad de la informacin reside en la parte superior de las letras, la vista est acostumbrada a fijarse en la parte superior de las letras por lo que si capitalizamos todas las palabras estaremos obligando a realizar un esfuerzo superior que puede resultar molesto.

No todos poseen las mismas fuentes Cuando especifica el tipo de fuente con una etiqueta FONT FACE="" ha de saber que puede haber personas que no dispongan de ese tipo de letra, debido a que no todos los sistemas operativos (apple, windows, unix, linux) tienen instalados los mismos tipos de fuente. Afortunadamente, usted puede especificar varios tipos de letra alternativos. Por ejemplo: .... De todas las maneras, no viene nada mal saber cules son los tipos de letra por defecto en los sistemas ms usados.

El texto pierde fuerza si todas las palabras estn resaltadas. El texto pierde fuerza si todas las palabras estn resaltadas.


Pgina 17

Plataformas Microsoft | Plataformas Macintosh y Unix

Serif o sans serif Las tipografas de tipo "serif" son aquellas tipografas cuyas letras se apoyan como con una especie de pie, las tipografa de tipo "sans serif" carecen de este detalle. Ejemplo:

Serif San Serif

En la pantalla, por efectos de resolucin, se recomienda utilizar tipografa de tipo San Serif, por ejemplo Arial, verdana, tahoma, etc.

Como puede comprobar, la frase con tipografa "sans serif" es ms clara, por eso no recomendamos usar tipografas de tipo "serif" si la fuente es menor a 12 pixels.

Serif

Prueba de tipografa

Sans Serif

Prueba de tipografa

Qu tipografa ser la ms adecuada para el diseo de pginas Web?


Pgina 18

Distintas tipografas

Una vez que ha seleccionado la tipografa para el cuerpo del texto, considere la opcin de usar alguna otra fuente diferente. Fjese en los peridicos, usan una tipografa para el contenido del artculo pero usan otra distinta para los titulares. Adems usan la misma para todos los titulares. Pero tenga en cuenta que muchas tipografas diferentes podra causar confusin en los lectores.

9.6. Responda a la gente

Aunque slo sea por cortesa responda a la gente que le hace comentarios sobre sus pginas, aunque no est de acuerdo con sus opiniones.

9.7. Simplicidad

El uso del texto con scroll y gif animados son usados cuidadosamente en zonas estratgicas de la pgina, pero no en toda la pgina. Demasiado movimiento puede distraer la idea principal de la pgina e incluso hasta aburrir al visitante. Intente mantener el texto y los gif animados al mnimo. Inclusive es recomendable limitar el nmero de veces que un gif animado se repetir. La simplicidad del diseo debe de verse reflejada tambin al escoger el fondo de la pgina. Fondos saturados distraen el contenido de la pgina y hacen que el texto se torne ilegible.

9.8. Consistencia

Use un diseo para toda la pgina, recuerde que para un visitante, una pgina Web es un lugar fsico. Esto se confunde con las pginas que no son consistentes en diseo. El color, algunas veces, es usado para identificar diferentes secciones de una pgina Web, pero el diseo y la navegacin deben hacer referencia a todo la pgina. Escoger el tipo de letra tambin es una parte del diseo, sea consistente en el uso de las letras y mantenga el mismo formato de la pgina en todos sus enlaces.

9.9. Identidad

Mantngase con el concepto de que la pgina Web es un lugar fsico, considere el propsito de una pgina y refljelo en su diseo. Una pgina Web debe de reflejar filosofa e identidad del negocio para el cual se va a disear, por ello escoja los elementos con cuidado.

Es importante mantener la coherencia de tipografa en todo el sitio Web.

Demasiados colores o fondos pueden tambin distraer y dar a la pgina un enfoque negativo.


Pgina 19

9.10. Contenido

Alguna vez se ha cansado de esperar hasta que la pgina Web se cargue? O an ha esperado hasta que la pgina se cargue y no ha encontrado la informacin que busca? Estas dos deficiencias hacen al visitante irritarse pero, tambin lo propicia a no regresar jams.

9.11. Compatibilidad

Haga a su Web una pgina universal, la resolucin y la compatibilidad de navegadores es esencial. Si la pgina no es compatible para todos los navegadores tenga por seguro que perder a una gran cantidad de visitantes. Pgina a Resolucin 800x600

Pgina a Resolucin 1024x768

Est seguro de poner la informacin vital de la pgina, pero sin exagerar en la cantidad de informacin, sino en la calidad.


Pgina 20

9.12. Interaccin

Interaccin supone convencer a los usuarios de que estn ellos consiguiendo la informacin en vez de que usted se la est dando, tiene que tener el sentido de que ellos estn encontrando por ellos mismos los contenidos. Hay un interesante balance entre el esfuerzo y recompensa de encontrar informacin y de que se perciba valor. El flujo de interaccin hace que se incremente la experiencia del aprendizaje, los usuarios de Internet son listos, inteligentes y con una educacin superior a la media. Demasiadas opciones crean confusin, queremos tener el control de la situacin. Hay que trasladar al visitante el ritmo de la relacin, es una relacin de pull, no de push.

9.13. Feedback

Parece obvio y cuesta entenderlo, debemos saber lo que nuestros clientes quieren, preguntrselo y trabajar para ofrecrselo. Una Web nos da la posibilidad de preguntar a cada cliente, uno por uno en tiempo real. Piensa bien sobre esta facilidad, nunca antes tenamos esta habilidad de conseguir feedback. Puede parecer sacrificado y muy trabajoso el de or al cliente, escucharle, reconstruir constantemente la oferta de tus servicios segn sus necesidades y deseos, y en definitiva convertir a tus clientes en miembros activos, semi-empleados o socios que cooperan estrechamente contigo en el desarrollo de tu negocio.

9.14. Marketing de valor aadido

Lo ms preciado hoy en da es el tiempo, no tenemos tiempo, si pretende que la gente dedique su tiempo a entender su Web y a aprender sus servicios, a cambio de esto debe ofrecerle algo.

Actividad: Si a usted le encargasen disear la pgina Web de un colegio, Qu opciones de navegabilidad utilizara? En que basara la eleccin de colores y el lenguaje a utilizar?


Pgina 21

10. Consideraciones en el diseo de una pgina Web 10.1. Tipo de letra y tamao

En entornos Microsoft Windows la letra Arial es comn y se lee bastante bien, incluso en tamaos pequeos. En entornos Linux su homloga es la Helvtica. Por eso el tipo de letra que ms utilizamos es "Arial, Helvetica", pero tambin es coherente usar distintos tipos de letra (distintas fuentes) por Ejemplo: fuentes de ancho fijo como "Courier", distintos tamaos para resaltar lo ms importante como los ttulos, estilos distintos: negrita, cursiva...

10.2. Colores Para seguir los convenios universalmente aceptados, como por ejemplo los enlaces en azul y subrayados, usamos colores suaves de fondo tanto en tablas como en pginas, para que el texto resulte cmodo para la vista.

10.3. Distribucin de contenido Para la distribucin del contenido son fundamentales las tablas. stas pueden tener varias filas y/o columnas. Dependiendo del resultado que busquemos, tendremos que usar la distribucin ms apropiada, agrupando tablas si es necesario.

10.4. Tablas

Las tablas deben formar la mayor parte del cuerpo de una pgina Web, aunque no siempre debe ser evidente que estn presentes, no tenemos por que pintar los bordes, o usar fondos para cada celda. Las tablas distribuyen bien el contenido, tanto texto como imgenes y se pueden anidar unas tablas dentro de otras.

El nico peligro con las tablas al editarlas, es que cada programa las interpreta de una forma, pero en general, hay que separarlas con una lnea de texto en blanco (o escrita) antes y despus de la tabla.

10.5. Imgenes

No sobrecargar las pginas con imgenes. Las imgenes que se utilicen no deben ser muy grandes, ni deben abarcar muchos colores.

Observacin: No es recomendable usar el subrayado para resaltar texto porque se confunde con los enlaces o vnculos.


Pgina 22

Las imgenes son mucho ms impactantes y pueden transmitir un mejor mensaje y de una forma ms clara y rpida que el texto. Introducir grficos en las pginas incrementa de una manera notable la presentacin de las mismas, pero hay que tener en cuenta que mientras 1K de texto puede llenar toda la pantalla, este pequeo grfico ocupa 12KBytes.

11. Glosario

ASP

Las Active Server Pages son un ambiente de aplicacin abierto y gratuito en el que se puede combinar cdigo HTML, scripts y componentes ActiveX del servidor para crear soluciones dinmicas y poderosas para el web. ASP una tecnologa de Microsoft para pginas Web generadas dinmicamente. ASP ha pasado por cuatro iteraciones mayores, ASP 1.0, ASP 2.0, ASP 3.0 y ASP.NET. Las versiones pre-.NET se denominan como ASP clsico. Funcionamiento del ASP:

Avi

Son los archivos de video habituales de Microsoft para Windows.

Cgi

Common Gateway Interface: Programas (escritos en lenguajes como C o Perl) que se ejecutan en los ordenadores servidores de Internet (estn en el directorio cgi-bin) y procesan la informacin que

12

3


Pgina 23

reciben de los clientes (por ejemplo a travs de formularios, buscadores, etc.).

Controles activex

ActiveX es un conjunto de tecnologas de Microsoft que permiten incluir contenido interactivo en la World Wide Web. Tiempo atrs, el contenido de la Web era esttico, es decir texto e imgenes en 2 dimensiones. Con ActiveX, los sitios cobran vida utilizando efectos multimedia, objetos interactivos y aplicaciones sofisticadas que crean un entorno similar al de un CD-ROM de buena calidad. ActiveX provee el nexo que une una variedad de tecnologas que logran darle movimiento a los sitios Web.

DHTML

Dynamic Hypertext Markup Language, proporciona ms potencia en la parte de programacin, permitiendo incluir pequeos programas que se ejecutan al descargar la pgina.

Flash

Macromedia Flash o Flash se refiere tanto al programa de edicin multimedia como a Macromedia Flash Player, escrito y distribuido por Macromedia, que utiliza grficos vectoriales e imgenes de mapa de bits, sonido, cdigo de programa, flujo de vdeo y audio bidireccional. En sentido estricto, Macromedia Flash es el entorno y Flash Player es el programa de mquina virtual utilizado para ejecutar los archivos Flash. Los archivos de Flash, que tienen generalmente la extensin de archivo SWF, pueden aparecer en una pgina Web para ser vista en un navegador, o pueden ser reproducidos independientemente por un reproductor Flash. Los archivos de Flash aparecen muy a menudo como animaciones en pginas Web y sitios Web multimedia, y ms recientemente Aplicaciones de Internet Ricas. Son tambin ampliamente utilizados en anuncios de la web.

HTML

Hypertext Markup Language es un lenguaje que nos permite formatear texto e imgenes para su visualizacin a travs de un programa especial llamado Navegador o Browser.

Java

Es un lenguaje de programacin bastante completo, independiente de la plataforma usada y orientada a objetos.


Pgina 24

Java applets

Son pequeos programas desarrollados en Java (rutinas o subprogramas) que realizan una determinada accin. Ejemplo: Texto en movimiento, mens desplegables, etc. Programas (generalmente formato CLASS) que se ejecutan en los ordenadores clientes. En las pginas Web se insertan unas instrucciones que invocan el applet. Para que todo funcione es necesario adems que el navegador cliente tenga habilitada la opcin JAVA.

Javascript

Es una de las mltiples maneras que nos permiten extender las capacidades del lenguaje HTML. JavaScript no es un lenguaje de programacin propiamente dicho. Es un lenguaje script u orientado a documento. No se podr elaborar un programa con JavaScript, tan slo podrs mejorar tu pgina Web con algunas cosas sencillas (revisin de formularios, efectos en la barra de estado, etc.) y, ahora, no tan sencillas (animaciones usando HTML dinmico, por ejemplo).

JSP

La tecnologa JSP, o de Java Server Pages, es una tecnologa Java que permite a los programadores generar dinmicamente HTML, XML o algn otro tipo de pgina Web, desarrollado por Sun Microsystems, basado en scripts que utilizan una variante del lenguaje java.. Esta tecnologa permite al cdigo Java y a algunas acciones predefinidas ser embebidas en el contenido esttico. En las JSP, se escribe el texto que va a ser devuelto en la salida (normalmente cdigo HTML) incluyendo cdigo java dentro de l para poder modificar o generar contenido dinmicamente. El cdigo java se incluye dentro de las marcas de etiqueta .

MIDI

Sus archivos ocupan poco tamao, pero la calidad del sonido es baja.

Mov Son archivos de video de Quick Time.

Mpg

Archivos de video con una alta compresin MPEG. Es necesario disponer de determinado software y/o hardware para que los navegadores puedan interpretarlos


Pgina 25

PDF

El formato de documento portable de Adobe (Portable Document Format, PDF) es el formato estndar utilizado mundialmente en la distribucin de documentos electrnicos. PDF de Adobe es un formato de archivo universal que conserva todas las fuentes, formatos, colores y grficos de cualquier documento de origen creado en cualquier aplicacin y plataforma.

PHP

Es un lenguaje de programacin usado generalmente para la creacin de contenido para sitios Web. El nombre es el acrnimo recursivo de "PHP: Hypertext Preprocessor" (inicialmente PHP Tools, o, Personal Home Page Tools), y se trata de un lenguaje interpretado usado para la creacin de aplicaciones para servidores, o creacin de contenido dinmico para sitios Web.

PS

Un archivo PS es un archivo PostScript lo cual significa que es un archivo formateado en lenguaje de impresora. Esto quiere decir, si tienes un archivo en autocad y lo grabas en formato PS, puedes llevarlo a cualquier PC e imprimir directamente en la impresora sin tener instalado el autocad. Existen varios programas que permiten visualizar estos tipos de archivo, uno de ellos es el GHOST. Otro es el Acrobat, por ejemplo.

Real audio

Los archivos de sonido Real Audio (RA) estn muy comprimidos, pero es necesario instalar plug-ins para que los navegadores puedan interpretarlos.

VRML

Virtual Reality Modeling Language. Permite crear entornos tridimensionales (3-D) para ser mostrados en Web.

Wave

WAV o WAVE, apcope de WAVEform audio format, es un formato de audio digital normalmente sin compresin de datos desarrollado y propiedad de Microsoft y de IBM que se utiliza para almacenar sonidos en el PC. Es una variante del formato RIFF, mtodo para almacenado en "paquetes", y relativamente parecido al IFF y al formato AIFF usado por Macintosh. El formato toma en cuenta algunas peculiaridades de la CPU Intel, y es el formato principal usado por Windows. Los archivos de sonido WAVE nos brindan una calidad aceptable, pero abarcan gran tamao.


Pgina 26

WML

WML son las siglas de Wireless Markup Lenguaje. Es el lenguaje empleado para escribir pginas para cualquier aparato que utilice tecnologa WAP (Wireless Application Protocol), como algunos PDAs (Personal Digital Assitant) y algunos telfonos mviles. WML es un lenguaje basado en XML (extended Markup Lenguaje) y por tanto hereda su sintaxis y su conjunto de caracteres.

XML

XML es el estndar de Extensible Markup Language. XML no es ms que un conjunto de reglas para definir etiquetas semnticas que nos organizan un documento en diferentes partes. XML es un metalenguaje que define la sintaxis utilizada para definir otros lenguajes de etiquetas estructurados.

12. Referencias Bibliogrficas

Definiciones de tecnologas en pginas Web http://es.wikipedia.org/wiki/Sitio_web Esquema ASP http://www.maestrosdelweb.com/editorial/aspintro/

FIN DE LA UNIDAD

Conceptos de pag. web

Documents

Transcript of Conceptos de pag. web