1- EL HIPERTEXTO Y LA WEB
El hipertexto es un texto con enlaces. Los documentos de hipertexto pueden con¬tener enlaces, que son referencias a otras partes del documento o a otros documentos. De esta forma, el documento no tiene porque ser leído secuencialmente, sino que en ciertos puntos se puede saltar a otra parte del documento y desde allí volver al punto original, o bien saltar a otro punto distinto.
El término hipertexto fue acuñado por Ted Nelson en 1965, aunque sus orígenes se remontan a 1945, año en el que Vannevar Bush propuso un sistema llamado Memex (de memoty extender). Este sistema se basaba en la idea de una biblioteca automatizada donde almacenar información variada, básicamente en microfilms, y con enlaces que permitieran «saltar» de una a otra automáticamente. El Memex nunca llegó a construirse. El hipertexto supone una ampliación del concepto habitual de texto al permitir que una serie de documentos enlazados unos con otros y posiblemente ubicados en lugares remotos aparezcan formando una unidad.
Las referencias entre las partes de un documento de hipertexto se establecen mediante anclas y enlaces: un anda es un fragmento de información dentro de un documento al que se asocia un enlace. Este fragmento puede ser una palabra, frase o párrafo completo. Un enlace es una referencia, o puntero, a otro fragmento de información. El enlace debe contener toda la información necesaria pan acceder al fragmento enlazado: su nombre, ubicación y mecanismo de acces (protocolo).
La idea de los enlaces está ya presente en la mayoría de los documentos que se utilizan a diario: índices, tablas de contenidos, pies de página, referencias bibliográficas. La diferencia con los documentos de hipertexto basados en computadora es que los saltos a estos enlaces se realizan automáticamente, y funcionan de la misma manera tanto si se refieren al propio documento como a documentos externos. De hecho, el lector no apreciará la diferencia.
El hipertexto da un gran salto con el desarrollo de internet, ya que un documento puede estar físicamente distribuido en distintas máquinas conectadas entre sí. Esta es la idea que da origen a la Web.
La Web fue creada en 1989 por Tim Berners-Lee en el CERN (Ginebra). Su objetivo inicial era compartir información entre grupos de investigadores de gran tamaño localizados en diversos lugares del mundo, utilizando para ello el concepto de hipertexto. Como resultado se crearon unos protocolos y especificaciones que han sido adoptados universalmente e incorporados en Internet, gracias a aportaciones posteriores como el desarrollo por la NCSA (National Center for Supercomputing Applications) de una popular interfaz, el MOSAIC. En la página web del World Wide Web Consortium o W3C (www.w3.org) puede conocerse la visión primitiva del creador sobre la Web y algunas charlas sobre la misma impartidas por directivos de la institución.
Por Web se pueden entender tres cosas distintas: el proyecto inicial del CERN, el conjunto de protocolos desarrollados en el proyecto o el espacio de información formado por todos los servidores interconectados (el denominado «hiperespacio»); cuando se habla de la Web habitualmente se hace referencia a esto último.
Las ideas básicas de la Web son tres:
• La desaparición de la idea de un servidor único de información mantenido por un equipo de profesionales dedicado. Cualquiera puede crear sus propios documentos y referenciar en ellos a otros documentos. Así pues, no existe una autoridad central en la Web.
• La especificación de un mecanismo para localizar de forma unívoca documentos distribuidos geográficamente. Cada documento tiene una dirección llamada Uniform Resource Locator, URL. Esta dirección indica no sólo la localización del documento, sino también el mecanismo para acceder a él (es decir, el protocolo, que en el caso de una página web es el HTTP).
• La existencia de una interfaz de usuario uniforme que esconde los detalles de los formatos y protocolos utilizados para la transferencia de la información, simplificando por tanto el acceso a la misma. Los programas que utilizan estas interfaces son denominados examinadores (browsers), visualízadores o, más comúnmente, navegadores.
El elemento básico de la Web es la página web, un documento que contiene enlaces de hipertexto a otros documentos relacionados que pueden estar localizados en la propia máquina o en máquinas remotas. De esta forma, siguiendo los enlaces se puede navegar por la red visitando páginas ubicadas en distintos lugares como si formaran una unidad.
El protocolo de la Web especifica un formato para escribir los documentos que forman parte de ella: es el Hypertext Markup Language (HTML). Sin embargo, también es posible acceder a documentos de otros formatos a través de la interfaz web sin necesidad de reescribirlos, gracias a las funcionalidades incorporadas por los navegadores.
La Web comenzó siendo un medio para el intercambio de información básicamente textual, pero debido a su popularización ha ido incrementando su contenido y actualmente puede utilizarse para transmitir cualquier tipo de medio, como gráficos, imágenes, audio, vídeo o animaciones.
Se habla entonces de hipermedia, que es la ampliación del concepto de hipertexto con la inclusión de cualquier tipo de medio (hipermedia = hípertexto + multimedia). En un documento hipermedia no sólo hay que indicar los enlaces entre las partes del documento, sino también las relaciones temporales entre ellas (sincronización).
Otro aspecto a tener en cuenta es el hecho de que los nuevos medios suelen dar lugar a ficheros de gran tamaño (sobre todo en el caso de los medios continuos como el audio o el vídeo), lo cual puede hacer muy costosa su transmisión a través de la red.
Pensar en una red clásica de pescadores es bastante gráfico para comprender la estructura de la Red. En ella, se pueden diferenciar a simple vista dos elementos que se repiten: los nudos y los segmentos de malla que unen los distintos nudos.
2.2-Transferencia de páginas
FTP (sigla en inglés de File Transfer Protocol - Protocolo de Transferencia de Archivos) en informática, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.
El Servicio FTP es ofrecido por la capa de Aplicación del modelo de capas de red TCP/IP al usuario, utilizando normalmente el puerto de red 20 y el 21. Un problema básico de FTP es que está pensado para ofrecer la máxima velocidad en la conexión, pero no la máxima seguridad, ya que todo el intercambio de información, desde el login y password del usuario en el servidor hasta la transferencia de cualquier archivo, se realiza en texto plano sin ningún tipo de cifrado, con lo que un posible atacante puede capturar este tráfico, acceder al servidor, o apropiarse de los archivos transferidos.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
3.2-Alternativas de creación
En el momento de modificar una plantilla prediseñada para un blog o sitio web, en el caso de quiénes no tienen un conocimiento profundo sobre CSS y HTML, resulta complejo y engorroso identificar qué modificar y cómo hacerlo. La situación se complica más aún cuando se intenta crear un diseño original, ya que generalmente si no se sabe cómo hacer algo, será difícil hacerlo de un modo «diferente».
Para quienes padecen de este problema, les resultará muy beneficioso poder crear un menú para los títulos de las diferentes secciones de su diseño web, sin más que seleccionando las opciones de forma visual. Es decir, sólo es necesario optar por los colores, variedades de fondo y títulos, entre otras alternativas; mientras el sistema genera automáticamente el código que deberá ingresarse en el diseño.
Debido a que actualmente existen diferentes sitios que prestan este servicio, y que cada uno de éstos se diferencia de los demás en variable grado, decidí crear una selección con sus correspondientes características a tener en cuenta.
1. CSS Menu Builder: con un estilo de orientación profesional, este sitio posee tres alternativas básicas: un menú horizontal, vertical o un Breadcrumb. A su vez, se puede optar por múltiples estilos, colores, alineación del texto y tamaño del menú. Por último, el sistema ofrece la posibilidad de elegir qué hipervínculos colocar y qué titulos otorgar a cada uno de éstos. Destacando finalmente, el hecho de que este servicio no sólo provee del código CSS, con las imágenes necesarias en formato .png, sino también del HTML.
2. MenuBuilder.me: de tendencia simple y minimalista, MenuBuilder.me ofrece una gama de colores prácticamente ilimitada para la visión por defecto del menú, y el color que se hará visible al pasar el cursor sobre los títulos. Además, existe la posibilidad de elegir entre cinco estilos diferentes, de orientación horizontal o vertical. Ofreciendo al igual que CSS Menu Builder, la descarga del archivo, dentro del cual se incluye tanto el código CSS (e imágenes) como HTML.
3. IzzyMenu: caracterizado su aspecto claramente comercial, esta página presta opciones tales como: una gran cantidad de estilos de menú, colores para las diferentes partes de éste, posibilidad de alterar sus proporciones, resaltanto el hecho de que es posible tanto modificar el tipo de letra de los títulos, como agregar bordes, efectos y hasta imágenes de fondo. Sumado a que entre los archivos que genera la descarga del menú, se encuentran algunos de extensión .js, diferenciandose en este aspecto del funcionamiento de las otros dos servicios.
Entre las tres alternativas descritas, la primera (CSS Menu Builder) parece alcanzar un equilibrio entre cantidad de opciones y simpleza de configuración y utilización. Pero como la elección de una pieza clave en un diseño web es algo subjetivo, puede que quienés esten interesados en utilizar este servicio se inclinen tanto por la simpleza, como así también por la variedad de configuraciones.
Windows Internet Explorer 8 presenta un conjunto nuevo de herramientas de desarrollo que pueden ayudar a identificar y a resolver problemas de HTML, hojas de estilo en cascada (CSS) y script de páginas web. Las herramientas de desarrollo ayudan al desarrollador web en diversas tareas, incluida la presentación de atributos individuales, la determinación de por qué se aplica una regla concreta de CSS a un elemento, la depuración del tiempo de ejecución del script y la vista previa de una página web que usa diferentes modos de compatibilidad de documentos .
Este documento describe el uso general de las herramientas de desarrollo así como las funciones y el uso de los cuatro modos principales de estas herramientas. Son los siguientes:
1. El modo HTML, que permite ver el código subyacente tras las páginas, resumir y seleccionar elementos individuales, obtener una vista previa del modo en que ciertos valores de atributo influirán en la representación de la página y ver cómo se han aplicado las reglas de CSS a elementos individuales.
2. El modo CSS, que permite comprender cómo afectan las hojas de estilo a la página web y es, por lo tanto, el más útil para los sitios que usan múltiples hojas de estilo.
3. El modo Script, que permite depurar los script usados en la página web. Le permitirá recorrer el código, insertar puntos de interrupción e inspecciones, e inspeccionar las variables.
4. El modo Generador de perfiles, que permite analizar el rendimiento del código subyacente de sus páginas y encontrar las funciones que no presentan un rendimiento óptimo.
Abrir y cerrar las herramientas de desarrollo
Puede abrir las herramientas de desarrollo con la tecla F12 o si hace clic en la opción Herramientas de desarrollo del menú Herramientas en la barra de herramientas de Windows Internet Explorer. La figura 1 muestra la opción de menú Herramientas de desarrollo resaltada en la esquina superior derecha de Windows Internet Explorer.
La ventana Herramientas de desarrollo aparece delante de la ventana de Windows Internet Explorer. También puede cerrar las herramientas de desarrollo con la tecla F12 o si hace clic en la opción Herramientas de desarrollo del menú Herramientas en la barra de herramientas de Windows Internet Explorer.
Importante: Los cambios realizados con las herramientas de desarrollo son temporales y no afectan al código fuente subyacente de su página web. Los cambios se revertirán al actualizar la página, al abrir una página nueva con el explorador o al cerrar la ventana. Los cambios de HTML y CSS pueden guardarse en un archivo de texto si se hace clic en el botón Disco (guardar) de la barra de herramientas de Herramientas de desarrollo.
Vista previa de diversos modos de compatibilidad
Windows Internet Explorer 8 presenta modos de compatibilidad de documentos que cambian la forma en que Windows Internet Explorer 8 representa la página web. Para obtener más información acerca de los diferentes modos de compatibilidad de documentos admitidos y el modo de implementarlos, consulte Etiquetas META y bloqueo en la compatibilidad con versiones futuras .
Las herramientas de desarrollo permiten ver la diferencia visual entre diferentes modos de compatibilidad. Para cambiar el modo de documento de una página web determinada, seleccione el modo deseado en el menú Modo de documento del menú Herramientas de desarrollo. Una marca de verificación indica el modo de compatibilidad seleccionado. Las opciones incluyen No estándar, Estándar de Internet Explorer 7 o Estándar de Internet Explorer 8. Para cambiar el modo de explorador, seleccione el modo deseado en el menú Modo de explorador del menú Herramientas de desarrollo. Una marca de verificación indica el modo seleccionado de compatibilidad. Las opciones incluyen Internet Explorer 7, Internet Explorer 8, o Vista de compatibilidad de Internet Explorer 8.
Destacar elementos
Para ayudarle a ver dónde aparecen ciertos elementos en una página web y los tipos de elementos que se utilizan para crear efectos concretos, puede decidir que aparezca un contorno alrededor de los elementos deseados. Si selecciona comandos del menú Esquema, Windows Internet Explorer marcará los elementos correspondientes en la página web. Por ejemplo, si selecciona el comando Elementos DIV del menú Esquema, aparecerán contornos alrededor de todos los elementos div de la página web actual.
Usar el modo HTML
El modo HTML permite ver las marcas subyacentes tras las páginas, seleccionar elementos individuales, mostrar sus atributos, obtener una vista previa del modo en que ciertos valores de atributo influirán en la representación de la página y ver cómo se han aplicado las reglas de CSS a elementos individuales. Para obtener acceso al modo HTML, haga clic en la ficha HTML de la ventana Herramientas de desarrollo. La figura 2 muestra la ficha HTML seleccionada en la esquina superior izquierda de la ventana Herramientas de desarrollo.
A la derecha del panel HTML aparecen herramientas diseñadas para ayudarlo a comprender la presentación de los elementos HTML de su página web.
• La herramienta Estilo muestra cómo se han aplicado las reglas CSS al elemento seleccionado. Muestra los atributos afectados y dónde se especificaron los valores. Las marcas de verificación a la izquierda de cada regla permiten habilitar o deshabilitar la regla; puede usar las marcas de verificación para experimentar con el aspecto de los elementos de su página web.
• La herramienta Rastrear estilos muestra los atributos CSS que se han aplicado a un elemento, el elemento donde se definió el atributo y (cuando corresponda) el nombre de la hoja de estilo que define el valor de atributo.
• La herramienta Distribución muestra los atributos del modelo de cuadro del elemento, que por su parte muestra cómo se ven afectados los elementos en el centro del área de contenido. Para obtener más información acerca del modelo de cuadro, consulte la descripción del modelo de cuadro de W3C .
• La herramienta Atributos muestra los atributos del elemento seleccionado en la ficha HTML. El nodo actual se muestra en la herramienta. Con esta herramienta pueden agregarse o suprimirse fácilmente atributos al nodo seleccionado y más tarde actualizarlos en la ventana de explorador.
Caracteres :
Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque preformateado.
• Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y después del signo igual.
• El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el símbolo de fin de marca ">" o un nombre como los definidos en el apartado anterior. Por ejemplo, en , img src es el nombre de la marca que se refiere a insertar una imagen en la página web; y "foto.gif" es el atributo que hace referencia al fichero específico de imagen que queremos incluir.
Los documentos o archivos HTML están compuestos por tres partes bien diferenciadas:
1. EL Comiezo del documento HTML lo indica la etiqueta
Además un documento HTML ha de estar delimitado por las etiquetas
....
2. La Cabecera del documento (Header, cabecera en inglés) esta delimitada por ......
Donde colocaremos etiquetas normalmente informativas como el título de la página. Además se usa para dar información sobre el documento, por ejemplo la versión de HTML (no visible)
3. El Cuerpo del documento (BODY, cuerpo en inglés) flanqueado por las etiquetas ...
Es probablemente el parte más importante de un documento HTML. es donde el usuario diseña o maqueta através de las etiquetas (tags) la página web.
Por último un pequeño detalle tendremos que salvar el documento con la extensión .htm o .html, entoces será un archivo html.
por ejemplo: mipagina.html
3.8-cuerpo
El cuerpo esta delimitado por las etiquetas ....siendo habitualmente lo más importante en un documento HTML. Entre las etiquetas que definen el cuerpo debemos de colocar los elementos que componen nuestra página como por ejemplo: el texto, imágenes, etc.
La etiqueta posee los siguientes atributos, (los cuales han sido declarados en desuso, recomendando el uso de las estilos en cascada CSS para realizar estas funciones):
Atributos de la etiqueta :
bgcolor="número hexadecimal / nombre del color". Asignamos un color de fondo a la página mediante un número hexadecimal, (#2233ff) o el nombre del color en inglés (red).
Veamos un ejemplo:
o
Una buena ayuda para la selección de colores el formato hexadecimal, #rrggbb, la puedes encontrar en: designación de colores
text="número hexadecimal / nombre del color". Atributo usado para definir el color del texto por defecto es negro mediante un número hexadecimal, (#2233ff) o el nombre del color en inglés (red).
link="número hexadecimal / nombre del color".Parámetro usado para especificar el color de los enlaces de texto. Color por defecto azul.
vlink="número hexadecimal / nombre del color". Parámetro usado para especificar el color de los enlaces de texto ya visitados. Color por defecto morado.
alink="número hexadecimal / nombre del color". Parámetro usado para especificar el color de los enlaces de texto activo. Color por defecto rojo.
Ejemplo:
background="ruta archivo / nombre_archivo.extension". Indicamos la ruta y el nombre del archivo que será usado como fondo del documento. Esta se visualizará en mosaico para cubrir toda la ventana si es pequeña.
Veamos su sintaxis:
Tener que tener muy presente que debemos especificar la ruta de modo relativo, esto nos aporta la siguiente ventaja si movemos el directorio completo (con todos sus archivos y manteniendo su estructura). La ruta especificada en nuestra página continua siendo válida mientras que si especificamos una ruta absoluta no nos valdría.
El cuerpo principal de un documento HTML, donde todo el contenido se coloca. Debe utilizar este elemento y que debe ser usado sólo una vez. Se debe comenzar inmediatamente después de la etiqueta principal de cierre y al final justo antes de la etiqueta de cierre html.
El caso deberá ser así en el ejemplo a continuación (con mayúsculas "DOCTYPE»). No se cierra como una excrecencia otros.
Ejemplo
En la actualidad los hiperenlaces afectan al Posicionamiento en buscadores de los sitios web desde que Google insertó ésta variable en su algoritmo años atrás.
align="left / right / top / middle / bottom". Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea.
alt="Texto explicativo". Mensaje que se mostrará al pasar el ratón sobre la imágen. Este texto se mostrará en caso de que la imágen no se cargara. Este atributo se implemento cuando los navegadores sólo podían desplegar sólo texto.
width="n" n en pixels. Atributo opcional siendo recomendable usarlo para ayudar al navegador a representar la imagen, define el ancho de la imagen que vamos a representar.
height="n" n en pixels. Atributo es opcional y recomendable ponerlo, define la altura de la imagen.
border= "n", n en pixels. Mediante este atributo designamos el ancho del borde que rodea la imagen.
Seguidamente mostramos un ejemplo de cómo incluir una imagen en nuestra página web:
Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.
Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:
Formato GIF:
Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación.
Formato JPG:
Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos.
Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.
Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato).
Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.
Uno de los errores más comunes en los principiantes al incluir imágenes es el tomarlas directamente del escaner y simplemente escalarlas al tamaño que desean en el programa de edición de páginas. La solución es muy sencilla; en el programa de tratamiento de imágenes, buscamos la opción que permita cambiar la densidad de la imagen (la resolución) o efectuar un nuevo muestreo (resample.) para ajustar el tamaño a la resolución de pantalla.
Después de preparar los ficheros para las páginas web, debe guardarse siempre una imagen original con el tamaño, resolución y número de colores necesarios para podrla manipular sin limitaciones. Si queremos recuperar toda esta informaciòn después de alterar la imagen para optimizarla en pantalla, pueden surgir todo tipo de imperfecciones. En pocas palabras, los "originales" deben guardarse en un formato que no pierda calidad, y que conserve íntegra la información de los colores. Para los ficheros de mapa de bits, sirven TIFF y BMP, y los formatos nativos de Photoshop, PaintShop Pro, Photopaint... para los ficheros vectoriales, no hay problema: basta con guardar en el formato original del programa (AI -EPS, FH-, CDR, XAR...)
Cómo optimizar el tamaño de las imágenes.
Puesto que el tamaño de un fichero gráfico depende del número de colores, tamaño y resolución, todo lo que permita recortar estos parámetros implicará reducción del tamaño del fichero y por tanto, del tiempo de descarga necesario. Por otro lado, debemos elegir el formato de fichero adecuado, con los sistemas de compresión GIF y JPG. Ambos admiten diferentes opciones, y según elijamos, podemos llegar a una solución satisfactoria: imagen de buena calidad con tamaño aceptable.
Sobre la resolución, está todo dicho: basta con 72 dpi.
El tamaño de la imagen dependerá, evidentmente, de su tamaño y del grado de detalle que queramos mostrar. Debemos tener en cuenta que para una imagen de gran tamaño (por ejemplo, toda la pantalla),el tamaño puede ser muy grande y se hace imprescindible adoptar estrategias de optimización. A veces puede ser conveniente dividir la imagen en partes, optimizarlas al máximo por separado y preparar una tabla que muestre, aparentemente, una imagen única intacta.
El número de colores para jpeg es casi irrelevante: como mínimo debe haber 256. Lo que permite ajustar mejor el tamaño de un jpeg es el grado de compresión, que se puede elegir en el programa de gráficos. Si vamos probando, podemos llegar al tamaño mínimo con el que la pérdida de calidad es insignificante. En cambio, para los gifs el número de colores sí que es importante; el máximo aquí es 256, pero si podemos mantener el número más bajo, el tamaño será menor. En el cuadro de diálogo para guardar como gif una imagen (ilustración adjunta) tenemos diversas opciones: elegir el número de colores, el tipo de paleta, qué hacer con los colores no presentes en ésta, transparencia...
La forma en que se simulan los colores no contenidos en la paleta que elijamos para el gif puede ser: a) convertirlos a los colores más próximos en la paleta disponible; b) simular una trama que se aproxime al color. Estos dos parámetros nos permiten hacer diferentes pruebas a la busca de la mejor solución en términos de calidad y tamaño.
Esta tarea de optimización, de todos modos, también se puede automatizar. Diferentes programas tienen la opción de procesar por lotes (conjuntos de imágenes) o pueden grabar macros o acciones del proceso de optimización, para después aplicarlos a un conjunto de gráficos simultáneamente.
Los usuarios culparon a las imágenes por muchos de los problemas de carga y de utilidad que pueblan la red.
Las imágenes atraen y distraen a usuarios por igual, es importante limitar los gráficos. La reducción de imágenes es también una herramienta para asegurarse de que sus Web están en un tamaño apropiado.
Reutilización de imágenes
Cuando utiliza una imagen, considere el reutilizarla en otras páginas. Los navegadores de hoy pueden guardar imágenes, lo que significa que no tiene que ser descargada otra vez la próxima vez que una página se cargue con esa imagen.
La reutilización también tiene la ventaja de dar al usuario un sentido de la familiaridad con su sitio. Dentro de un web, reutilice cualquier tipo de recurso flechas, botones, o iconos. También puede utilizar una foto distinta en cada página de su web, si así lo desea, pero intente que estas imágenes pesen lo menos posible, el usuario se lo agradecerá.
Animaciones en la web
Las animaciones son particularmente molestas y pueden conducir a los usuarios a alejarse de un web o de un sitio. No utilice la animación a menos que sea realmente necesaria para el contenido de su página.
La animación puede ser una herramienta valiosa. El movimiento gratuito en las páginas del web, molesta a usuarios y no tiene en cuenta el hecho de que muchos usuarios tienen viejas versiones de navegadores o no tienen los más nuevos sistemas de reproducción disponibles, (contrario a lo que creen algunos diseñadores, los usuarios no descargarán un plug-in nuevo, porque su página lo requiera).
El formato más eficiente para sus imágenes
Utilice siempre el formato más eficiente para sus imágenes. Para las fotografías, utilice el JPEG con tanta compresión como sea posible. Otros tipos de imágenes se deben almacenar usando formato del GIF. Usar un formato inadecuado puede doblar o triplicar el tamaño del archivo y del tiempo de la transferencia desde el servidor.
Reduzca la resolución de la imagen tanto como sea posible. La reducción en la resolución mejora la transferencia directa de la imagen.
Una imagen debe ser de alta de resolución únicamente si está destinada a ser impresa (puesto que las impresoras necesitan una resolución mucho más alta).
Reduzca el número de colores
En lo posible, reduzca el número de colores. Muchos programas gráficos le permiten "posterizar" las fotos, consiguiendo una reducción poco notable del color.
Si usted utiliza muchas imágenes, utilice una herramienta comercial de compresión de imagen para reducir el tamaño de los archivos.
Incluya en las imágenes los atributos HTML que mejorarán el funcionamiento. Los atributos explícitos del tamaño aceleran la exhibición del web, puesto que el navegador no tiene que cargar la imagen para determinar cuánto espacio debe dejar para esta imagen.
Utilice los atributos WIDTH y HEIGHT para todas las imágenes. También agregue el ALT (descripción del gráfico) a cada imagen.
Estructura de una tabla:
Las tablas están formadas por celdas agrupadas en filas ----> y columnas |
Una fila esta compuesta por uno o más espacios (celdas) alineados horizontalmente.
Una columna esta compuesta por uno o más espacios alineados verticalmente.
Una celda es el espacio formado por la intersección de una fila y una columna
El número de celdas esta componen la tabla esta definido por el diseñador de la página.
Columna 1 Columna 2 Columna 3
Fila 1 Celda (1,1) Celda (2,1) Celda (2,1)
Fila 2 Celda (2,1) Celda (2,2) Celda (2,1)
Fila 3 Celda (3,1) Celda (3,1) Celda (2,1)
Sin embargo no es todo tan fácil a la hora de trabajar con tablas, puesto que algunas veces parecen comportarse de una forma ilógica, por tanto debemos de conocer todo lo referente a ellas incluso algunos pequeños trucos que existen.
Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseñadas por científicos de las universidades para contener y organizar informacián, no como una ayuda para el diseño gráfico de la página, ya que en esa época el lenguaje y las páginas web se concebían como una forma de transmitir texto plano, en monitores monocromos y de poca resolucián, y no fué hasta el posterior desarrollo de Internet, de la WWW y de la tecnología de ordenadores personales avanzados cuando se empezó a tener en cuenta la importancia del diseño visual de una página web como un medio global para transmitir no solo texto plano, si no también contenidos gráficos y multimedia.
Para conseguir que las tablas funcionen perfectamente necesitamos conocer muy bien todos los atributos de las tablas. Además de algunos truquillos que se han echo famosos a lo largo del tiempo.
Veamos como se define una tabla:
1. Las tablas se crean con la etiqueta
El término hipertexto fue acuñado por Ted Nelson en 1965, aunque sus orígenes se remontan a 1945, año en el que Vannevar Bush propuso un sistema llamado Memex (de memoty extender). Este sistema se basaba en la idea de una biblioteca automatizada donde almacenar información variada, básicamente en microfilms, y con enlaces que permitieran «saltar» de una a otra automáticamente. El Memex nunca llegó a construirse. El hipertexto supone una ampliación del concepto habitual de texto al permitir que una serie de documentos enlazados unos con otros y posiblemente ubicados en lugares remotos aparezcan formando una unidad.
Las referencias entre las partes de un documento de hipertexto se establecen mediante anclas y enlaces: un anda es un fragmento de información dentro de un documento al que se asocia un enlace. Este fragmento puede ser una palabra, frase o párrafo completo. Un enlace es una referencia, o puntero, a otro fragmento de información. El enlace debe contener toda la información necesaria pan acceder al fragmento enlazado: su nombre, ubicación y mecanismo de acces (protocolo).
La idea de los enlaces está ya presente en la mayoría de los documentos que se utilizan a diario: índices, tablas de contenidos, pies de página, referencias bibliográficas. La diferencia con los documentos de hipertexto basados en computadora es que los saltos a estos enlaces se realizan automáticamente, y funcionan de la misma manera tanto si se refieren al propio documento como a documentos externos. De hecho, el lector no apreciará la diferencia.
El hipertexto da un gran salto con el desarrollo de internet, ya que un documento puede estar físicamente distribuido en distintas máquinas conectadas entre sí. Esta es la idea que da origen a la Web.
La Web fue creada en 1989 por Tim Berners-Lee en el CERN (Ginebra). Su objetivo inicial era compartir información entre grupos de investigadores de gran tamaño localizados en diversos lugares del mundo, utilizando para ello el concepto de hipertexto. Como resultado se crearon unos protocolos y especificaciones que han sido adoptados universalmente e incorporados en Internet, gracias a aportaciones posteriores como el desarrollo por la NCSA (National Center for Supercomputing Applications) de una popular interfaz, el MOSAIC. En la página web del World Wide Web Consortium o W3C (www.w3.org) puede conocerse la visión primitiva del creador sobre la Web y algunas charlas sobre la misma impartidas por directivos de la institución.
Por Web se pueden entender tres cosas distintas: el proyecto inicial del CERN, el conjunto de protocolos desarrollados en el proyecto o el espacio de información formado por todos los servidores interconectados (el denominado «hiperespacio»); cuando se habla de la Web habitualmente se hace referencia a esto último.
Las ideas básicas de la Web son tres:
• La desaparición de la idea de un servidor único de información mantenido por un equipo de profesionales dedicado. Cualquiera puede crear sus propios documentos y referenciar en ellos a otros documentos. Así pues, no existe una autoridad central en la Web.
• La especificación de un mecanismo para localizar de forma unívoca documentos distribuidos geográficamente. Cada documento tiene una dirección llamada Uniform Resource Locator, URL. Esta dirección indica no sólo la localización del documento, sino también el mecanismo para acceder a él (es decir, el protocolo, que en el caso de una página web es el HTTP).
• La existencia de una interfaz de usuario uniforme que esconde los detalles de los formatos y protocolos utilizados para la transferencia de la información, simplificando por tanto el acceso a la misma. Los programas que utilizan estas interfaces son denominados examinadores (browsers), visualízadores o, más comúnmente, navegadores.
El elemento básico de la Web es la página web, un documento que contiene enlaces de hipertexto a otros documentos relacionados que pueden estar localizados en la propia máquina o en máquinas remotas. De esta forma, siguiendo los enlaces se puede navegar por la red visitando páginas ubicadas en distintos lugares como si formaran una unidad.
El protocolo de la Web especifica un formato para escribir los documentos que forman parte de ella: es el Hypertext Markup Language (HTML). Sin embargo, también es posible acceder a documentos de otros formatos a través de la interfaz web sin necesidad de reescribirlos, gracias a las funcionalidades incorporadas por los navegadores.
La Web comenzó siendo un medio para el intercambio de información básicamente textual, pero debido a su popularización ha ido incrementando su contenido y actualmente puede utilizarse para transmitir cualquier tipo de medio, como gráficos, imágenes, audio, vídeo o animaciones.
Se habla entonces de hipermedia, que es la ampliación del concepto de hipertexto con la inclusión de cualquier tipo de medio (hipermedia = hípertexto + multimedia). En un documento hipermedia no sólo hay que indicar los enlaces entre las partes del documento, sino también las relaciones temporales entre ellas (sincronización).
Otro aspecto a tener en cuenta es el hecho de que los nuevos medios suelen dar lugar a ficheros de gran tamaño (sobre todo en el caso de los medios continuos como el audio o el vídeo), lo cual puede hacer muy costosa su transmisión a través de la red.
2-FUNCIONAMIENTO DE LA WEB
La Web funciona siguiendo el denominado modelo cliente-servidor, habitual en las aplicaciones que funcionan en una red. Existe un servidor, que es quien presta el servicio, y un cliente, que es quien lo recibe.
2.1-Arquitectura cliente/servidor
Antes de comenzar a explicar la estructura de las páginas web y el lenguaje html, es importante tener claro en que consiste la arquitectura cliente/servidor en la que se basan tanto las redes locales como la propia Internet
Pensar en una red clásica de pescadores es bastante gráfico para comprender la estructura de la Red. En ella, se pueden diferenciar a simple vista dos elementos que se repiten: los nudos y los segmentos de malla que unen los distintos nudos.
2.2-Transferencia de páginas
FTP (sigla en inglés de File Transfer Protocol - Protocolo de Transferencia de Archivos) en informática, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.
El Servicio FTP es ofrecido por la capa de Aplicación del modelo de capas de red TCP/IP al usuario, utilizando normalmente el puerto de red 20 y el 21. Un problema básico de FTP es que está pensado para ofrecer la máxima velocidad en la conexión, pero no la máxima seguridad, ya que todo el intercambio de información, desde el login y password del usuario en el servidor hasta la transferencia de cualquier archivo, se realiza en texto plano sin ningún tipo de cifrado, con lo que un posible atacante puede capturar este tráfico, acceder al servidor, o apropiarse de los archivos transferidos.
3-CREACION DE PAGINAS WEB
3.1-Lenguaje html
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
3.2-Alternativas de creación
En el momento de modificar una plantilla prediseñada para un blog o sitio web, en el caso de quiénes no tienen un conocimiento profundo sobre CSS y HTML, resulta complejo y engorroso identificar qué modificar y cómo hacerlo. La situación se complica más aún cuando se intenta crear un diseño original, ya que generalmente si no se sabe cómo hacer algo, será difícil hacerlo de un modo «diferente».
Para quienes padecen de este problema, les resultará muy beneficioso poder crear un menú para los títulos de las diferentes secciones de su diseño web, sin más que seleccionando las opciones de forma visual. Es decir, sólo es necesario optar por los colores, variedades de fondo y títulos, entre otras alternativas; mientras el sistema genera automáticamente el código que deberá ingresarse en el diseño.
Debido a que actualmente existen diferentes sitios que prestan este servicio, y que cada uno de éstos se diferencia de los demás en variable grado, decidí crear una selección con sus correspondientes características a tener en cuenta.
1. CSS Menu Builder: con un estilo de orientación profesional, este sitio posee tres alternativas básicas: un menú horizontal, vertical o un Breadcrumb. A su vez, se puede optar por múltiples estilos, colores, alineación del texto y tamaño del menú. Por último, el sistema ofrece la posibilidad de elegir qué hipervínculos colocar y qué titulos otorgar a cada uno de éstos. Destacando finalmente, el hecho de que este servicio no sólo provee del código CSS, con las imágenes necesarias en formato .png, sino también del HTML.
2. MenuBuilder.me: de tendencia simple y minimalista, MenuBuilder.me ofrece una gama de colores prácticamente ilimitada para la visión por defecto del menú, y el color que se hará visible al pasar el cursor sobre los títulos. Además, existe la posibilidad de elegir entre cinco estilos diferentes, de orientación horizontal o vertical. Ofreciendo al igual que CSS Menu Builder, la descarga del archivo, dentro del cual se incluye tanto el código CSS (e imágenes) como HTML.
3. IzzyMenu: caracterizado su aspecto claramente comercial, esta página presta opciones tales como: una gran cantidad de estilos de menú, colores para las diferentes partes de éste, posibilidad de alterar sus proporciones, resaltanto el hecho de que es posible tanto modificar el tipo de letra de los títulos, como agregar bordes, efectos y hasta imágenes de fondo. Sumado a que entre los archivos que genera la descarga del menú, se encuentran algunos de extensión .js, diferenciandose en este aspecto del funcionamiento de las otros dos servicios.
Entre las tres alternativas descritas, la primera (CSS Menu Builder) parece alcanzar un equilibrio entre cantidad de opciones y simpleza de configuración y utilización. Pero como la elección de una pieza clave en un diseño web es algo subjetivo, puede que quienés esten interesados en utilizar este servicio se inclinen tanto por la simpleza, como así también por la variedad de configuraciones.
3.3-Herramientas de desarrollo
Nota: Esta información es preliminar y está sujeta a cambios.
Windows Internet Explorer 8 presenta un conjunto nuevo de herramientas de desarrollo que pueden ayudar a identificar y a resolver problemas de HTML, hojas de estilo en cascada (CSS) y script de páginas web. Las herramientas de desarrollo ayudan al desarrollador web en diversas tareas, incluida la presentación de atributos individuales, la determinación de por qué se aplica una regla concreta de CSS a un elemento, la depuración del tiempo de ejecución del script y la vista previa de una página web que usa diferentes modos de compatibilidad de documentos .
Este documento describe el uso general de las herramientas de desarrollo así como las funciones y el uso de los cuatro modos principales de estas herramientas. Son los siguientes:
1. El modo HTML, que permite ver el código subyacente tras las páginas, resumir y seleccionar elementos individuales, obtener una vista previa del modo en que ciertos valores de atributo influirán en la representación de la página y ver cómo se han aplicado las reglas de CSS a elementos individuales.
2. El modo CSS, que permite comprender cómo afectan las hojas de estilo a la página web y es, por lo tanto, el más útil para los sitios que usan múltiples hojas de estilo.
3. El modo Script, que permite depurar los script usados en la página web. Le permitirá recorrer el código, insertar puntos de interrupción e inspecciones, e inspeccionar las variables.
4. El modo Generador de perfiles, que permite analizar el rendimiento del código subyacente de sus páginas y encontrar las funciones que no presentan un rendimiento óptimo.
Abrir y cerrar las herramientas de desarrollo
Puede abrir las herramientas de desarrollo con la tecla F12 o si hace clic en la opción Herramientas de desarrollo del menú Herramientas en la barra de herramientas de Windows Internet Explorer. La figura 1 muestra la opción de menú Herramientas de desarrollo resaltada en la esquina superior derecha de Windows Internet Explorer.
La ventana Herramientas de desarrollo aparece delante de la ventana de Windows Internet Explorer. También puede cerrar las herramientas de desarrollo con la tecla F12 o si hace clic en la opción Herramientas de desarrollo del menú Herramientas en la barra de herramientas de Windows Internet Explorer.
Importante: Los cambios realizados con las herramientas de desarrollo son temporales y no afectan al código fuente subyacente de su página web. Los cambios se revertirán al actualizar la página, al abrir una página nueva con el explorador o al cerrar la ventana. Los cambios de HTML y CSS pueden guardarse en un archivo de texto si se hace clic en el botón Disco (guardar) de la barra de herramientas de Herramientas de desarrollo.
Vista previa de diversos modos de compatibilidad
Windows Internet Explorer 8 presenta modos de compatibilidad de documentos que cambian la forma en que Windows Internet Explorer 8 representa la página web. Para obtener más información acerca de los diferentes modos de compatibilidad de documentos admitidos y el modo de implementarlos, consulte Etiquetas META y bloqueo en la compatibilidad con versiones futuras .
Las herramientas de desarrollo permiten ver la diferencia visual entre diferentes modos de compatibilidad. Para cambiar el modo de documento de una página web determinada, seleccione el modo deseado en el menú Modo de documento del menú Herramientas de desarrollo. Una marca de verificación indica el modo de compatibilidad seleccionado. Las opciones incluyen No estándar, Estándar de Internet Explorer 7 o Estándar de Internet Explorer 8. Para cambiar el modo de explorador, seleccione el modo deseado en el menú Modo de explorador del menú Herramientas de desarrollo. Una marca de verificación indica el modo seleccionado de compatibilidad. Las opciones incluyen Internet Explorer 7, Internet Explorer 8, o Vista de compatibilidad de Internet Explorer 8.
Destacar elementos
Para ayudarle a ver dónde aparecen ciertos elementos en una página web y los tipos de elementos que se utilizan para crear efectos concretos, puede decidir que aparezca un contorno alrededor de los elementos deseados. Si selecciona comandos del menú Esquema, Windows Internet Explorer marcará los elementos correspondientes en la página web. Por ejemplo, si selecciona el comando Elementos DIV del menú Esquema, aparecerán contornos alrededor de todos los elementos div de la página web actual.
Usar el modo HTML
El modo HTML permite ver las marcas subyacentes tras las páginas, seleccionar elementos individuales, mostrar sus atributos, obtener una vista previa del modo en que ciertos valores de atributo influirán en la representación de la página y ver cómo se han aplicado las reglas de CSS a elementos individuales. Para obtener acceso al modo HTML, haga clic en la ficha HTML de la ventana Herramientas de desarrollo. La figura 2 muestra la ficha HTML seleccionada en la esquina superior izquierda de la ventana Herramientas de desarrollo.
A la derecha del panel HTML aparecen herramientas diseñadas para ayudarlo a comprender la presentación de los elementos HTML de su página web.
• La herramienta Estilo muestra cómo se han aplicado las reglas CSS al elemento seleccionado. Muestra los atributos afectados y dónde se especificaron los valores. Las marcas de verificación a la izquierda de cada regla permiten habilitar o deshabilitar la regla; puede usar las marcas de verificación para experimentar con el aspecto de los elementos de su página web.
• La herramienta Rastrear estilos muestra los atributos CSS que se han aplicado a un elemento, el elemento donde se definió el atributo y (cuando corresponda) el nombre de la hoja de estilo que define el valor de atributo.
• La herramienta Distribución muestra los atributos del modelo de cuadro del elemento, que por su parte muestra cómo se ven afectados los elementos en el centro del área de contenido. Para obtener más información acerca del modelo de cuadro, consulte la descripción del modelo de cuadro de W3C .
• La herramienta Atributos muestra los atributos del elemento seleccionado en la ficha HTML. El nodo actual se muestra en la herramienta. Con esta herramienta pueden agregarse o suprimirse fácilmente atributos al nodo seleccionado y más tarde actualizarlos en la ventana de explorador.
3.4-Elementos del lenguaje HTML
Caracteres :
Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque preformateado.
3.5-Atributos :
• Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y después del signo igual.
• El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el símbolo de fin de marca ">" o un nombre como los definidos en el apartado anterior. Por ejemplo, en , img src es el nombre de la marca que se refiere a insertar una imagen en la página web; y "foto.gif" es el atributo que hace referencia al fichero específico de imagen que queremos incluir.
3.6-Lenguaje Estructurado
3.7-Estructura básica de una pagina
El elemento raíz que especifica que el contenido del documento es HTML. La etiqueta de apertura sigue inmediatamente a la declaración DOCTYPE y la etiqueta de cierre es la última cosa en el documento. El elemento html debe contener la cabeza y los elementos del cuerpo.
Los documentos o archivos HTML están compuestos por tres partes bien diferenciadas:
1. EL Comiezo del documento HTML lo indica la etiqueta
Además un documento HTML ha de estar delimitado por las etiquetas
....
2. La Cabecera del documento (Header, cabecera en inglés) esta delimitada por ......
Donde colocaremos etiquetas normalmente informativas como el título de la página. Además se usa para dar información sobre el documento, por ejemplo la versión de HTML (no visible)
3. El Cuerpo del documento (BODY, cuerpo en inglés) flanqueado por las etiquetas ...
Es probablemente el parte más importante de un documento HTML. es donde el usuario diseña o maqueta através de las etiquetas (tags) la página web.
Por último un pequeño detalle tendremos que salvar el documento con la extensión .htm o .html, entoces será un archivo html.
por ejemplo: mipagina.html
3.8-cuerpo
El cuerpo esta delimitado por las etiquetas ....siendo habitualmente lo más importante en un documento HTML. Entre las etiquetas que definen el cuerpo debemos de colocar los elementos que componen nuestra página como por ejemplo: el texto, imágenes, etc.
La etiqueta posee los siguientes atributos, (los cuales han sido declarados en desuso, recomendando el uso de las estilos en cascada CSS para realizar estas funciones):
Atributos de la etiqueta :
bgcolor="número hexadecimal / nombre del color". Asignamos un color de fondo a la página mediante un número hexadecimal, (#2233ff) o el nombre del color en inglés (red).
Veamos un ejemplo:
o
Una buena ayuda para la selección de colores el formato hexadecimal, #rrggbb, la puedes encontrar en: designación de colores
text="número hexadecimal / nombre del color". Atributo usado para definir el color del texto por defecto es negro mediante un número hexadecimal, (#2233ff) o el nombre del color en inglés (red).
link="número hexadecimal / nombre del color".Parámetro usado para especificar el color de los enlaces de texto. Color por defecto azul.
vlink="número hexadecimal / nombre del color". Parámetro usado para especificar el color de los enlaces de texto ya visitados. Color por defecto morado.
alink="número hexadecimal / nombre del color". Parámetro usado para especificar el color de los enlaces de texto activo. Color por defecto rojo.
Ejemplo:
background="ruta archivo / nombre_archivo.extension". Indicamos la ruta y el nombre del archivo que será usado como fondo del documento. Esta se visualizará en mosaico para cubrir toda la ventana si es pequeña.
Veamos su sintaxis:
Tener que tener muy presente que debemos especificar la ruta de modo relativo, esto nos aporta la siguiente ventaja si movemos el directorio completo (con todos sus archivos y manteniendo su estructura). La ruta especificada en nuestra página continua siendo válida mientras que si especificamos una ruta absoluta no nos valdría.
El cuerpo principal de un documento HTML, donde todo el contenido se coloca. Debe utilizar este elemento y que debe ser usado sólo una vez. Se debe comenzar inmediatamente después de la etiqueta principal de cierre y al final justo antes de la etiqueta de cierre html.
3.10-Formatos de documentos
Documento de declaración de tipo. Esto se utiliza para dejar que el navegador sabe qué versión de HTML que está utilizando. Si no lo utiliza, o si me equivoco, el navegador asumirá que no sabes lo que estás haciendo y cambiar al modo "caprichos", que no se hacen las cosas como debe ser. Al parecer es más "tolerantes" pero en realidad parece ser bastante aleatoria y confusa.
El caso deberá ser así en el ejemplo a continuación (con mayúsculas "DOCTYPE»). No se cierra como una excrecencia otros.
Ejemplo
3.11- Hiperenlaces
Un hiperenlace (también llamado enlace, vínculo, o hipervínculo) es un elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento. Combinado con una red de datos y un protocolo de acceso, un hiperenlace permite acceder al recurso referenciado en diferentes formas, como visitarlo con un agente de navegación, mostrarlo como parte del documento referenciador o guardarlo localmente.
En la actualidad los hiperenlaces afectan al Posicionamiento en buscadores de los sitios web desde que Google insertó ésta variable en su algoritmo años atrás.
4-mágenes
4.1-Atributos de las imágenes:
src="imagen.gif". Este atributo es obligatorio e indica el nombre del archivo imagen (entre comillas) o la URL (ruta o dirección en la que esta la imagen que se va incluir en el documento).
align="left / right / top / middle / bottom". Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea.
alt="Texto explicativo". Mensaje que se mostrará al pasar el ratón sobre la imágen. Este texto se mostrará en caso de que la imágen no se cargara. Este atributo se implemento cuando los navegadores sólo podían desplegar sólo texto.
width="n" n en pixels. Atributo opcional siendo recomendable usarlo para ayudar al navegador a representar la imagen, define el ancho de la imagen que vamos a representar.
height="n" n en pixels. Atributo es opcional y recomendable ponerlo, define la altura de la imagen.
border= "n", n en pixels. Mediante este atributo designamos el ancho del borde que rodea la imagen.
Seguidamente mostramos un ejemplo de cómo incluir una imagen en nuestra página web:
4.2-Formatos de imagen
Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.
Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:
Formato GIF:
Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación.
Formato JPG:
Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos.
Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.
Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato).
Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.
4.3-Optimizacion
La preparación de imágenes para la web exige algunas precauciones cuando se parte de una imagen escaneada o cualquier otro tipo de imagen con alta resolución. Debemos tener presente que la resolución del monitor es aproximadamente de sólo 72dpi (puntos por pulgada). Si escaneamos a 300 dpi, estamos obteniendo imágenes que serán innecesariamente grandes y que no se verán en absoluto mejor que la imagen adquirida al mínimo de resolución. Una imagen mastodóntica puede tardar una eternidad en descargarse, ocupará espacio innecesario en vuestro servidor y probablemente los visitantes no tengan paciencia para esperar.
Uno de los errores más comunes en los principiantes al incluir imágenes es el tomarlas directamente del escaner y simplemente escalarlas al tamaño que desean en el programa de edición de páginas. La solución es muy sencilla; en el programa de tratamiento de imágenes, buscamos la opción que permita cambiar la densidad de la imagen (la resolución) o efectuar un nuevo muestreo (resample.) para ajustar el tamaño a la resolución de pantalla.
Después de preparar los ficheros para las páginas web, debe guardarse siempre una imagen original con el tamaño, resolución y número de colores necesarios para podrla manipular sin limitaciones. Si queremos recuperar toda esta informaciòn después de alterar la imagen para optimizarla en pantalla, pueden surgir todo tipo de imperfecciones. En pocas palabras, los "originales" deben guardarse en un formato que no pierda calidad, y que conserve íntegra la información de los colores. Para los ficheros de mapa de bits, sirven TIFF y BMP, y los formatos nativos de Photoshop, PaintShop Pro, Photopaint... para los ficheros vectoriales, no hay problema: basta con guardar en el formato original del programa (AI -EPS, FH-, CDR, XAR...)
Cómo optimizar el tamaño de las imágenes.
Puesto que el tamaño de un fichero gráfico depende del número de colores, tamaño y resolución, todo lo que permita recortar estos parámetros implicará reducción del tamaño del fichero y por tanto, del tiempo de descarga necesario. Por otro lado, debemos elegir el formato de fichero adecuado, con los sistemas de compresión GIF y JPG. Ambos admiten diferentes opciones, y según elijamos, podemos llegar a una solución satisfactoria: imagen de buena calidad con tamaño aceptable.
Sobre la resolución, está todo dicho: basta con 72 dpi.
El tamaño de la imagen dependerá, evidentmente, de su tamaño y del grado de detalle que queramos mostrar. Debemos tener en cuenta que para una imagen de gran tamaño (por ejemplo, toda la pantalla),el tamaño puede ser muy grande y se hace imprescindible adoptar estrategias de optimización. A veces puede ser conveniente dividir la imagen en partes, optimizarlas al máximo por separado y preparar una tabla que muestre, aparentemente, una imagen única intacta.
El número de colores para jpeg es casi irrelevante: como mínimo debe haber 256. Lo que permite ajustar mejor el tamaño de un jpeg es el grado de compresión, que se puede elegir en el programa de gráficos. Si vamos probando, podemos llegar al tamaño mínimo con el que la pérdida de calidad es insignificante. En cambio, para los gifs el número de colores sí que es importante; el máximo aquí es 256, pero si podemos mantener el número más bajo, el tamaño será menor. En el cuadro de diálogo para guardar como gif una imagen (ilustración adjunta) tenemos diversas opciones: elegir el número de colores, el tipo de paleta, qué hacer con los colores no presentes en ésta, transparencia...
La forma en que se simulan los colores no contenidos en la paleta que elijamos para el gif puede ser: a) convertirlos a los colores más próximos en la paleta disponible; b) simular una trama que se aproxime al color. Estos dos parámetros nos permiten hacer diferentes pruebas a la busca de la mejor solución en términos de calidad y tamaño.
Esta tarea de optimización, de todos modos, también se puede automatizar. Diferentes programas tienen la opción de procesar por lotes (conjuntos de imágenes) o pueden grabar macros o acciones del proceso de optimización, para después aplicarlos a un conjunto de gráficos simultáneamente.
4.4-Uso de imágenes en la web
Uno de los factores que más dan que hablar es la inclusión de imágenes de todas las clases - las fotografías, diagramas, ilustraciones, multimedia etc.
Los usuarios culparon a las imágenes por muchos de los problemas de carga y de utilidad que pueblan la red.
Las imágenes atraen y distraen a usuarios por igual, es importante limitar los gráficos. La reducción de imágenes es también una herramienta para asegurarse de que sus Web están en un tamaño apropiado.
Reutilización de imágenes
Cuando utiliza una imagen, considere el reutilizarla en otras páginas. Los navegadores de hoy pueden guardar imágenes, lo que significa que no tiene que ser descargada otra vez la próxima vez que una página se cargue con esa imagen.
La reutilización también tiene la ventaja de dar al usuario un sentido de la familiaridad con su sitio. Dentro de un web, reutilice cualquier tipo de recurso flechas, botones, o iconos. También puede utilizar una foto distinta en cada página de su web, si así lo desea, pero intente que estas imágenes pesen lo menos posible, el usuario se lo agradecerá.
Animaciones en la web
Las animaciones son particularmente molestas y pueden conducir a los usuarios a alejarse de un web o de un sitio. No utilice la animación a menos que sea realmente necesaria para el contenido de su página.
La animación puede ser una herramienta valiosa. El movimiento gratuito en las páginas del web, molesta a usuarios y no tiene en cuenta el hecho de que muchos usuarios tienen viejas versiones de navegadores o no tienen los más nuevos sistemas de reproducción disponibles, (contrario a lo que creen algunos diseñadores, los usuarios no descargarán un plug-in nuevo, porque su página lo requiera).
El formato más eficiente para sus imágenes
Utilice siempre el formato más eficiente para sus imágenes. Para las fotografías, utilice el JPEG con tanta compresión como sea posible. Otros tipos de imágenes se deben almacenar usando formato del GIF. Usar un formato inadecuado puede doblar o triplicar el tamaño del archivo y del tiempo de la transferencia desde el servidor.
Reduzca la resolución de la imagen tanto como sea posible. La reducción en la resolución mejora la transferencia directa de la imagen.
Una imagen debe ser de alta de resolución únicamente si está destinada a ser impresa (puesto que las impresoras necesitan una resolución mucho más alta).
Reduzca el número de colores
En lo posible, reduzca el número de colores. Muchos programas gráficos le permiten "posterizar" las fotos, consiguiendo una reducción poco notable del color.
Si usted utiliza muchas imágenes, utilice una herramienta comercial de compresión de imagen para reducir el tamaño de los archivos.
Incluya en las imágenes los atributos HTML que mejorarán el funcionamiento. Los atributos explícitos del tamaño aceleran la exhibición del web, puesto que el navegador no tiene que cargar la imagen para determinar cuánto espacio debe dejar para esta imagen.
Utilice los atributos WIDTH y HEIGHT para todas las imágenes. También agregue el ALT (descripción del gráfico) a cada imagen.
5-Tablas
Las tablas son muy usadas en el diseño de las páginas Web, aparecieron en la versión HTML 3.0. Las tablas son una de las etiquetas más útiles que podemos encontrar en HTML, ya que nos van a permitir "maquetar", darle la aparencia externa a nuestra página, como lo verá el usuario. La técnica es dividiendo la página en pequeñas celdas e insertando en cada celda de la tabla, el elemento y/o los elementos que compondrán nuestra página web. Este método era el único lógico hasta la que se quedo desfasado por la aparición de las Hojas de Estilo, CSS.
Estructura de una tabla:
Las tablas están formadas por celdas agrupadas en filas ----> y columnas |
Una fila esta compuesta por uno o más espacios (celdas) alineados horizontalmente.
Una columna esta compuesta por uno o más espacios alineados verticalmente.
Una celda es el espacio formado por la intersección de una fila y una columna
El número de celdas esta componen la tabla esta definido por el diseñador de la página.
Columna 1 Columna 2 Columna 3
Fila 1 Celda (1,1) Celda (2,1) Celda (2,1)
Fila 2 Celda (2,1) Celda (2,2) Celda (2,1)
Fila 3 Celda (3,1) Celda (3,1) Celda (2,1)
Sin embargo no es todo tan fácil a la hora de trabajar con tablas, puesto que algunas veces parecen comportarse de una forma ilógica, por tanto debemos de conocer todo lo referente a ellas incluso algunos pequeños trucos que existen.
Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseñadas por científicos de las universidades para contener y organizar informacián, no como una ayuda para el diseño gráfico de la página, ya que en esa época el lenguaje y las páginas web se concebían como una forma de transmitir texto plano, en monitores monocromos y de poca resolucián, y no fué hasta el posterior desarrollo de Internet, de la WWW y de la tecnología de ordenadores personales avanzados cuando se empezó a tener en cuenta la importancia del diseño visual de una página web como un medio global para transmitir no solo texto plano, si no también contenidos gráficos y multimedia.
Para conseguir que las tablas funcionen perfectamente necesitamos conocer muy bien todos los atributos de las tablas. Además de algunos truquillos que se han echo famosos a lo largo del tiempo.
Veamos como se define una tabla:
1. Las tablas se crean con la etiqueta
la tabla está contenida entre esta etiqueta
2. Las filas se definen con la etiqueta ... table row, (row = fila en inglés)
3. Cada etiqueta contiene celdas que inicialmente coincidirán con el número de columnas, definidas por medio de la etiqueta ...
4. Cada celda de datos puede contener lo que quieras insertar : texto, Imágenes, listas, e incluso otras tablas.
La estructura de una tabla, se puede ver fácilmente en el siguiente esquema :
Que llevado al HTML es:
2. Las filas se definen con la etiqueta ... table row, (row = fila en inglés)
3. Cada etiqueta contiene celdas que inicialmente coincidirán con el número de columnas, definidas por medio de la etiqueta ...
4. Cada celda de datos puede contener lo que quieras insertar : texto, Imágenes, listas, e incluso otras tablas.
La estructura de una tabla, se puede ver fácilmente en el siguiente esquema :
Que llevado al HTML es:
| celda (1,1) | celda (1,2) | celda (1,3) |
| celda (2,1) | celda (2,2) | celda (2,3) |
| celda (3,1) | celda (3,2) | celda (3,3) |
Se verá como:
celda (1,1) celda (1,2) celda (1,3)
celda (2,1) celda (2,2) celda (2,3)
celda (3,1) celda (3,2) celda (3,3)
6-Marcos
7-Formularios
Hasta el momento, hemos visto características del HTML que permiten al usuario visualizar las diferentes páginas Web con su contenido es decir el usuario se limita simplemente ha recibir información no tiene la posibilidad de interactuar con el sitio o autor Web. Los Formularios nos dan la posibilidad comunicarnos con el sitio web. Estos formularios se componen de tantos campos como queramos obtener. Una vez que los datos han sido enviados a la URL estos serán procesados. Un ejemplo de esto son las encuestas online, formularios de proceso de pedido, etc..
Empleando HTML solamente podremos enviar el formulario. Para procesarlo tendremos que emplear un programas especiales llamados CGI (Common Gateway Interface), estos programas los podemos encontrar en bastantes servidores, si nuestra páginas están alojados en un servidor que no dispone de esta característica, podremos encontrar en otros servidores que nos ofrezcan este servicio. También es posible procesar los datos enviados por los formularios a través de lenguajes como PHP o ASP.
La etiqueta
Una vez dicho todo esto, no hay que olvidar que un formulario sigue siendo código HTML. Para iniciar un formulario utilizaremos la etiqueta , englobando esta etiqueta todos los campos que pertenecen al formulario.
La etiqueta
No hay comentarios:
Publicar un comentario