Página Web: Color, Tipografía, Comportamiento, Elementos

La página web generalmente significa lo que es visible, pero el término también puede referirse a un archivo de computadora, usualmente escrito en HTML o en un lenguaje de marcado comparable. Los navegadores web coordinan varios elementos de recursos web para la página web escrita, como hojas de estilo, scripts e imágenes, para presentar la página web. Las páginas web típicas proporcionan hipertexto que incluye una barra de navegación o un menú en la barra lateral que enlaza con otras páginas web a través de hipervínculos, a menudo denominados enlaces.

página web

En una red, un navegador web puede recuperar una página web desde un servidor web remoto. El servidor web puede restringir el acceso a una red privada como una intranet corporativa. El navegador web utiliza el protocolo de transferencia de hipertexto (HTTP) para realizar dichas solicitudes.

Una página web estática se entrega exactamente como está almacenada, como contenido web en el sistema de archivos del servidor web. En contraste, una página web dinámica es generada por una aplicación web, usualmente conducida por software del lado del servidor. Las páginas web dinámicas ayudan al navegador (el cliente) a mejorar la página web a través de la entrada del usuario al servidor.

Color, tipografía, ilustración e interacción

Suelen incluir información como los colores del texto y los fondos y muy a menudo contienen enlaces a imágenes y, a veces, a otros tipos de medios que deben incluirse en la vista final. La información sobre el diseño, la tipografía y el esquema de colores se proporciona mediante instrucciones de hojas de estilo en cascada (CSS), que pueden incrustarse en el HTML o proporcionarse mediante un archivo separado, al que se hace referencia desde el HTML.

Este último caso es especialmente relevante cuando una hoja de estilo larga es relevante para todo un sitio web: debido a la forma en que funciona HTTP, el navegador sólo la descargará una vez desde el servidor web y utilizará la copia en caché para todo el sitio.

Las imágenes se almacenan en el servidor web como archivos separados, pero de nuevo HTTP permite el hecho de que una vez que una página web se descarga a un navegador, es muy probable que los archivos relacionados, tales como imágenes y hojas de estilo se solicitarán a medida que se procesa. Un servidor web HTTP 1.1 mantendrá una conexión con el navegador hasta que se hayan solicitado y proporcionado todos los recursos relacionados. Los navegadores web suelen renderizar imágenes junto con el texto y otro material en la página web mostrada.

Comportamiento dinámico

la página web

  • El código informático del lado del cliente, como Javascript o código que implementa técnicas Ajax, se puede proporcionar incrustado en el HTML de una página web o, al igual que las hojas de estilo CSS, como descargas independientes, enlazadas especificadas en el HTML. Estos scripts pueden ejecutarse en el ordenador cliente si el usuario lo permite.

Navegadores

  • Un navegador web puede tener una interfaz gráfica de usuario, como Internet Explorer / Microsoft Edge, Mozilla Firefox, Google Chrome, Safari y Opera, o puede estar basado en texto, como Lynx o Links.
  • Los usuarios de la Web con discapacidades a menudo utilizan tecnologías de asistencia y estrategias de adaptación para acceder a las páginas web.
  • Los usuarios pueden ser daltónicos, pueden o no querer utilizar un ratón, tal vez debido a lesiones por estrés repetitivo o problemas de neuronas motoras, pueden ser sordos y requieren que el audio sea subtitulado, pueden ser ciegos y utilizando un lector de pantalla o una pantalla braille, pueden necesitar magnificación de pantalla, etc.
  • Los usuarios discapacitados y sin discapacidades pueden inhabilitar la descarga y visualización de imágenes y otros medios, para ahorrar tiempo, ancho de banda de red o simplemente para simplificar su experiencia de navegación. Los usuarios de dispositivos móviles a menudo tienen pantallas y ancho de banda restringido.
  • Cualquiera puede preferir no usar las fuentes, tamaños de fuente, estilos y esquemas de color seleccionados por el diseñador de la página web y puede aplicar su propio estilo CSS a la página.
  • El World Wide Web Consortium (W3C) y la Web Accessibility Initiative (WAI) recomiendan que las páginas web se diseñen teniendo en cuenta todas estas opciones.

Elementos

Una página web, como conjunto de información, puede contener numerosos tipos de información, que puede ser vista, escuchada o interactuada por el usuario final:

  • Información percibida (prestada):
  • Información textual: con diversas variaciones de render.
  • Información no textual:
  • Las imágenes estáticas pueden ser gráficos raster, típicamente GIF, JPEG o PNG; o formatos vectoriales como SVG o Flash.
  • Imágenes animadas típicamente GIF animado y SVG, pero también Flash, Shockwave, o Java applet.
  • Audio, típicamente MP3, Ogg o varios formatos propietarios.
  • Vídeo, WMV (Windows), RM (RealMedia), FLV (Flash Video), MPG, MOV (QuickTime)

Información interactiva

  • Ver medios interactivos.

Para la interacción “en la página”

Texto interactivo: ver DHTML.

Ilustraciones interactivas: que van desde imágenes de “clic para jugar” hasta juegos, normalmente utilizando orquestación de guiones, Flash, Java applets, SVG u Shockwave.

Botones: formularios que proporcionan una interfaz alternativa, normalmente para su uso con orquestación de scripts y DHTML.

Para la interacción “entre páginas”

Hipervínculos: reactividad estándar “cambiar página”.

Formularios: proporcionan más interacción con el servidor y las bases de datos del lado del servidor.

Información interna (oculta)

  • Comentarios
  • Archivos vinculados a través de hipervínculos (como DOC, XLS, PDF, etc.)
  • Metadatos con meta-información semántica, información Charset, Definición de Tipo de Documento (DTD), etc.
  • Información esquemática y de estilo: información sobre los elementos renderizados (como los atributos de tamaño de imagen) y las especificaciones visuales, como las Hojas de Estilo en Cascada (CSS).
  • Los scripts, generalmente Java Script, complementan la interactividad y la funcionalidad.

Nota: en el lado del servidor la página web también puede tener “Tratamiento de posiciones de información de instrucción”.

  • La página web puede contener elementos de información adaptados dinámicamente, dependiendo del navegador de renderizado o de la ubicación del usuario final (mediante el uso de rastreo de dirección IP y/o información de “cookie”).
  • Desde un punto de vista más general/amplio, algunos elementos de información (agrupados), como una barra de navegación, son uniformes para todas las páginas del sitio web, como un estándar.
  • Este tipo de “información estándar del sitio web” es suministrada por tecnologías como los sistemas de plantillas web.

Renderización

página web

  • Las páginas web a menudo requieren más espacio de pantalla que el disponible para una resolución de pantalla en particular.
  • La mayoría de los navegadores modernos colocan una barra de desplazamiento (una herramienta deslizante al lado de la pantalla que permite al usuario mover la página hacia arriba o hacia abajo, o de lado a lado) en la ventana para permitir al usuario ver todo el contenido.
  • El desplazamiento horizontal es menos frecuente que el vertical, no sólo porque estas páginas a menudo no se imprimen correctamente, sino porque incomoda más al usuario que el vertical (debido a que las líneas son horizontales; el desplazamiento hacia adelante y hacia atrás para cada línea es más inconveniente que el desplazamiento después de leer una pantalla completa; la mayoría de los teclados de ordenador tienen teclas de página arriba y abajo, y casi todos los ratones de ordenador tienen ruedas de desplazamiento vertical, los equivalentes de desplazamiento horizontal son raros).
  • Cuando las páginas web se almacenan en un directorio común de un servidor web, se convierten en un sitio web.
  • Las páginas web no tienen una longitud fija como en una página de papel, y pueden variar en longitud.
  • El ancho de una página web varía en función del tamaño de la pantalla, por lo que conduce a páginas web de diferentes longitudes. Para páginas web largas, el flujo y presentación de la información es bastante crítico.
  • Si la página web es más larga y la información en la parte superior es indeseable para el usuario, la probabilidad de leer más abajo es baja. Sin embargo, tanto las páginas más largas como las más cortas tienen sus propias ventajas y desventajas.

El área de visualización inicial de una página web se conoce como “pliegue de página superior”.

  • El contenido sobre el pliegue de la página es importante ya que los usuarios lo utilizan para evaluar si han llegado a la página correcta.
  • Es importante tener contenido sobre el pliegue de la página que mantenga al usuario lo suficientemente interesado como para que se desplace hacia abajo.
  • La teoría de la búsqueda de información describe que una vez que un usuario ha considerado que la parte sobre el pliegue de una página es valiosa, es más probable que considere que el resto de la página es valiosa.
  • Al imprimir una página web, la facilidad de impresión depende de la longitud de la página, en comparación con las páginas web más cortas con paginación.
  • En páginas web más largas que tienen desplazamiento infinito (por ejemplo, Facebook, LinkedIn y Twitter), es más difícil imprimir todas las páginas ya que se desconoce el número total de páginas próximas.
  • Por lo tanto, los usuarios sólo pueden imprimir páginas cargadas en páginas web que utilizan el desplazamiento infinito.
  • Otro problema que ocurre con la impresión de páginas web largas es el uso de anuncios conocidos como “clickbait” en los sitios web.
  • Por lo tanto, la versión impresa de una página web con cebos de clic contendrá anuncios.
  • Sin embargo, algunos navegadores como Google Chrome utilizan una extensión donde los usuarios tienen la oportunidad de formatear páginas web e imprimir sin anuncios.

Un sitio web suele contener un grupo de páginas web que están vinculadas entre sí, o tienen algún otro método coherente de navegación. La página web más importante de un sitio web es la página índice. Dependiendo de la configuración del servidor web, la página índice puede tener cualquier nombre, pero los nombres más comunes son index.html e index.php.

Cuando un navegador visita la página principal de un sitio web o cualquier URL que apunta a un directorio en lugar de a un archivo específico, el servidor web sirve la página de índice. Si no se define ninguna página de índice en la configuración o no existe ningún archivo de este tipo en el servidor, se enviará al navegador un listado de errores o directorios. Una página web puede ser un único archivo HTML o estar compuesta de varios archivos HTML utilizando marcos o SSI (Server Side Includes).

Se sabe que los marcos causan problemas con la accesibilidad web, los derechos de autor, la navegación, la impresión y las clasificaciones en los motores de búsqueda, y ahora se utilizan con menos frecuencia que en la década de los 90. Tanto los marcos como los SSI permiten que se repita cierto contenido que aparece en muchas páginas, como la navegación o las cabeceras de página, sin duplicar el HTML en todos los archivos.

Frames y el W3C recomendaron una alternativa de 2000, la etiqueta <objeto>, que también permite que parte del contenido permanezca en un lugar mientras que el resto del contenido se puede desplazar utilizando barras de desplazamiento convencionales. Las técnicas modernas de CSS y Java Script del lado del cliente también pueden lograr todos estos objetivos.

Al crear una página web, es importante asegurarse de que cumple con los estándares del World Wide Web Consortium (W3C) para HTML, CSS, XML y otros estándares. Los estándares del W3C están establecidos para asegurar que todos los navegadores que cumplan con sus estándares puedan mostrar un contenido idéntico sin tener en cuenta especialmente las técnicas de renderizado patentadas.

Una página web correctamente codificada va a ser accesible a muchos navegadores diferentes, antiguos y nuevos por igual, resoluciones de pantalla, así como a aquellos usuarios con discapacidades auditivas o visuales.

Localizador uniforme de recursos

 

  • El Localizador Uniforme de Recursos también se llama URL.
  • Las páginas web son cada vez más dinámicas.
  • Una página web dinámica es aquella que se crea en el lado del servidor cuando se solicita y luego se sirve al usuario final.
  • Estos tipos de páginas web típicamente no tienen un permalink, o un URL estático, asociado con ellos.
  • Esta práctica tiene por objeto reducir la cantidad de páginas estáticas en lugar de almacenar la información relevante de la página web en una base de datos.
  • Esto se puede ver en foros, sitios web de compras en línea y en Wikipedia.
  • Algunos motores de búsqueda pueden tener dificultades para indexar una página web que es dinámica, por lo que las páginas web estáticas se pueden proporcionar en esos casos.

Creación y visualización

  • Para crear una página web, se necesita un editor de texto o un editor HTML especializado. Para subir la página web creada a un servidor web, tradicionalmente se necesita un cliente FTP.
  • El diseño de una página web es muy personal.
  • Un diseño se puede hacer de acuerdo a las preferencias de cada uno, o se puede utilizar una plantilla web prefabricada.
  • Las plantillas web permiten a los diseñadores de páginas web editar el contenido de una página web sin tener que preocuparse por la estética general.
  • Muchos utilizan servicios todo-en-uno para la compra de dominios web, servicio de alojamiento web y plantillas para construir sitios web personalizados.
  • Las herramientas de publicación web como Tripod y WordPress ofrecen la creación y el alojamiento gratuito de páginas hasta un cierto límite de tamaño.
  • Otras formas de hacer una página web son descargar software especializado, como un Wiki, CMS, o foro.
  • Estas opciones permiten la creación rápida y fácil de una página web que es típicamente dinámica.
  • Para poder visualizar gráficamente una página web, se necesita un navegador web.
  • Este es un tipo de software que puede recuperar páginas web de Internet.
  • La mayoría de los navegadores web actuales incluyen la posibilidad de ver el código fuente.
  • Ver una página web en un editor de texto también mostrará el código fuente.

Las páginas se encuentran normalmente con la ayuda de un motor de búsqueda, pero pueden recibir tráfico de fuentes sociales y de otro tipo.

Ahorro

la página web

  • Mientras se está visualizando una página web, una copia de la misma se guarda localmente; la copia se está visualizando.
  • Dependiendo de la configuración del navegador, la copia puede borrarse en cualquier momento, o almacenarse indefinidamente, a veces sin que el usuario se dé cuenta.
  • La mayoría de los navegadores GUI ofrecen opciones para guardar una página web de forma más permanente.
  • Estos pueden incluir guardar el texto renderizado sin formato ni imágenes, con hipervínculos reducidos a texto plano; guardar el HTML tal y como fue servido: la estructura general se mantiene, pero algunos enlaces pueden estar rotos; guardar el HTML con enlaces relativos cambiados a absolutos para que se conserven los hipervínculos; guardar toda la página web: todas las imágenes y otros recursos, incluyendo hojas de estilo y scripts, se descargan y guardan en una nueva carpeta junto con el HTML, con enlaces que hacen referencia a las copias locales: Otros vínculos relativos se cambian a absolutos; guardar el HTML así como todas las imágenes y otros recursos en un único archivo MHTML. Esto es soportado por Internet Explorer y Opera.
  • Otros navegadores pueden soportarlo si se instala un plugin adecuado.
  • Además de la opción de imprimir la página web actualmente vista en una impresora, la mayoría de los sistemas operativos permiten que aplicaciones como los navegadores web “impriman en un archivo” que se puede ver o imprimir más tarde.
  • Algunas páginas web están diseñadas, por ejemplo, mediante el uso de CSS, de forma que los hipervínculos, menús y otros elementos de navegación, que serían inútiles en papel, se impriman teniendo esto en cuenta.
  • En ocasiones, las direcciones de destino de los hiperenlaces pueden aparecer explícitamente, ya sea dentro del cuerpo de la página o al final de la versión impresa.
  • En el SOC se puede especificar que los menús no funcionales, los bloques de navegación y otros elementos simplemente deben estar ausentes de la versión impresa.

Referencias

 “How People with Disabilities Use the Web”. W3C. 5 de mayo de 2005. Recuperado el 2009-05-01.

 Honigman, Brian. “Página de aterrizaje larga vs. corta – ¿Cuál funciona mejor?”. Marketing Receptivo. Recuperado el 2016-11-14.

 Schade, Amy. “El Manifiesto del Doblez: Por qué el pliegue de la página sigue siendo importante”. Grupo Nielsen Norman. Recuperado el 2016-11-16.

 Lynch, Patrick. “Ancho de página y longitud de línea”. Yale University Press. Recuperado el 2016-11-14.

 Broider, Rick (2013). “Print Friendly for Chrome optimiza las páginas web para la impresión”. PCWorld. Recuperado el 2016-11-14.

 Tysver, Dan (1996-2008). “Vinculación y responsabilidad – Problemas con los marcos”. Minneapolis, EE.UU.: Beck & Tysver. Recuperado el 2009-05-01.

 “Técnicas HTML para Pautas de Accesibilidad al Contenido Web 1.0 – Frames”. W3C. 6 de noviembre de 2000. Recuperado el 2009-05-01. En las siguientes secciones, discutimos cómo hacer que los marcos sean más accesibles. También ofrecemos una alternativa a los marcos que utilizan HTML 4.01 y CSS y soluciona muchas de las limitaciones de las implementaciones de marcos actuales.

 Santambrogio, Claudio (10 de marzo de 2006). “…y una más a la semana!”. Software de Opera. Recuperado el 15/05/2009.

Compartir es sinónimo de bondad. Sé bondadoso

TAMBIEN PODRIA GUSTARTE

Licda. En Comunicación Social, mención Comunicación y Desarrollo con 16 años en el ejercicio del periodismo, ahora Redactora Web Maracay- Venezuela

Deja un comentario