Diseño de páginas web y lenguajes de programación: HTML, XHTML, XML, CSS y JavaScript

Definición del diseño del sitio web

¿Cuántos sitios web visitas a diario? ¿Has pensado alguna vez en crear tu propio sitio web? Muchas personas y organizaciones crean sitios web para compartir información, educar y comprar y vender productos y servicios.

El diseño web es la creación y el diseño visual de documentos que se muestran en la World Wide Web. Las organizaciones confían en sitios web con contenido atractivo y visualmente estimulante para atraer y retener a los consumidores. La calidad del diseño web es un factor clave a la hora de crear o revisar un sitio web. Cualquiera que se esté preparando para desarrollar un sitio web debe considerar varios factores para planificar el éxito. ¿Qué factores crees que serían importantes? Considere algunos de los sitios web que ha visitado recientemente. ¿Hubo cosas que realmente le gustaron o no le gustaron de esos sitios web?

Planificación de su sitio web

Crear un sitio web es como construir una casa. El primer paso requiere una planificación adecuada. Con una casa, necesitará un arquitecto para diseñar la casa, un contratista para construir la casa y un diseñador de interiores para decorar la casa. Si bien puede crear un sitio web por su cuenta, muchas organizaciones contratan profesionales que tienen las habilidades y el talento para crear un sitio web atractivo y que funcione bien. Para construir un sitio web, necesitará un director creativo que actúe como arquitecto, un director web que actúe como contratista y un director de contenido que actúe como diseñador de interiores.

Al planificar un sitio web, debe conocer a su audiencia y diseñar un sitio web que se adapte a sus necesidades, intereses y preferencias de visualización. Al diseñar sitios web, es importante tener en cuenta que se verán en la pantalla de una computadora. Deben diseñarse apropiadamente para ese medio. El contenido debe estar organizado de tal manera que sea significativo y fácil de navegar. Es importante aprovechar el poder del hipertexto. Una forma de lograr esto es proporcionando enlaces dentro del contenido de las páginas web para que los usuarios creen sus propias rutas de acceso a la información.

Los diseñadores de sitios web deben considerar a los usuarios con diferentes navegadores web, sistemas operativos y plataformas informáticas para garantizar la accesibilidad. Las páginas también deben planificarse teniendo en cuenta las velocidades de conexión. Es beneficioso diseñar para un ancho de banda bajo. El ancho de banda es la cantidad de datos que se pueden transmitir en un período de tiempo determinado. Nadie quiere esperar a que una página se descargue lentamente debido a gráficos grandes o animaciones complicadas. De hecho, el usuario promedio solo esperará entre 10 y 20 segundos para que se cargue una página antes de salir. ¡Eso podría ser un cliente potencial perdido para un competidor!

Construyendo la base de su sitio web

Una vez que se completa la planificación y se finalizan los planos arquitectónicos, puede comenzar la construcción. Ya sea que trabaje en una nueva casa o en un nuevo sitio web, comenzamos con la base. Los lenguajes de programación web como HTML, XML y XHTML proporcionan las herramientas para construir la base, al igual que el encuadre proporciona la estructura básica pero esencial para construir y diseñar toda la casa.

Un ejemplo de código HTML para un sitio web.

El lenguaje de marcado de hipertexto (HTML) es una herramienta de programación que utiliza hipertexto para establecer vínculos dinámicos con otros documentos. Se conoce como el lenguaje de programación de la Web y proporciona una estructura general para crear páginas web. Todas las páginas web son en realidad archivos HTML. Los documentos HTML son simplemente documentos de texto que contienen el contenido de su página web, así como instrucciones especiales llamadas etiquetas. Etiquetasproporcionar instrucciones sobre cómo mostrar texto o gráficos y controlar las entradas del usuario. Las etiquetas se incluyen entre corchetes: <>. Normalmente, hay una etiqueta de inicio y finalización alrededor del texto. Por ejemplo, si quisiéramos poner en negrita un encabezado, nuestra etiqueta de inicio es una ‘b’ entre paréntesis seguida por el encabezado y termina con la etiqueta final ‘/ b’ entre paréntesis: <b> ‘Encabezado’ </b>. Todos los documentos HTML comienzan con HTML entre paréntesis y terminan con la barra diagonal y HTML entre paréntesis: <html> y </html>. Estas etiquetas le dicen al navegador web que el contenido entre las etiquetas debe ensamblarse en un documento HTML. Existen programas como Dreamweaver diseñados para ayudarlo a crear código HTML para una página web. La aplicación proporciona una interfaz gráfica de usuario que permite hacer clic, arrastrar y copiar partes de la página web. La aplicación genera el código HTML para el usuario. Pero si está interesado en aprender HTML, probablemente sea mejor abrir un programa editor de texto simple, como el Bloc de notas, y escribir el código HTML usted mismo.

El lenguaje de marcado extensible (XML) es un lenguaje de programación de marcado como HTML sin elementos predefinidos. No puede reemplazar HTML pero lo complementa. Mientras que HTML gobierna la apariencia de la información en un navegador web, XML complementa HTML agregando etiquetas para describir los datos. XML es lo que llamamos metalenguaje. Metalenguaje significa acerca de un lenguaje, o en otras palabras, XML permite al usuario describir un lenguaje de marcado para satisfacer necesidades específicas. XML le permite crear o inventar etiquetas y atributos personalizados que se adapten a sus necesidades para el tipo de documento que está escribiendo. XML proporciona una mayor flexibilidad para agregar nuevos elementos y atributos que ampliarán las capacidades de HTML. También brinda la posibilidad de diseñar nuevos navegadores o aplicaciones.

HTML se introdujo por primera vez en 1993 como estándar de Internet. A lo largo de los años, se han lanzado muchas versiones con funciones adicionales. Hoy en día, el Lenguaje de marcado de hipertexto extensible (XHTML) está reemplazando al HTML como estándar de Internet. XHTMLes un lenguaje de programación de marcado que es similar a HTML pero escrito usando XML. Básicamente, al usar XHTML, está escribiendo código XML con restricciones basadas en un conjunto de elementos predeterminados. Combina las mejores partes de HTML y XML para crear un lenguaje de programación potente y flexible. XHTML es básicamente una reformulación de HTML usando sintaxis XML. La principal diferencia entre estos lenguajes de programación es que los documentos XHTML deben estar bien formados o desarrollados de acuerdo con reglas específicas para que se consideren documentos XHTML. XHTML distingue entre mayúsculas y minúsculas, mientras que HTML no. XHTML funciona sin problemas con aplicaciones de flujo de trabajo y bases de datos. XHTML hace que sea más fácil para los diseñadores ser creativos y agregar nuevos elementos. Proporciona una forma más estructurada y conceptual de pensar sobre el contenido.

Decorando su sitio web

La presentación es importante ya que solo hay una oportunidad de causar una buena impresión y duradera. Los consumidores harán suposiciones sobre la empresa y sus productos o servicios basándose en el sitio web. Piense en comprar una casa. No solo es importante tener solidez estructural, sino que también le preocupa la apariencia exterior y el atractivo visual. La forma en que se distribuye la casa, el tipo de pisos, el color de las paredes e incluso los arbustos en el exterior pueden marcar la diferencia en cómo se siente acerca de la casa y su valor.

Dos herramientas utilizadas en el diseño de sitios web que pueden ayudar a decorar un sitio web son las hojas de estilo en cascada y JavaScript .

Las hojas de estilo en cascada (CSS) utilizan un lenguaje de estilo simple que proporciona a los usuarios terminología familiar de autoedición para modificar la apariencia de los sitios web. CSS describe cómo deberían verse las páginas web en un navegador. Puedes pensar en CSS como la decoración de tu casa. Sin decoraciones, es bastante soso y aburrido, pero cuando agregas decoración, realmente condimenta el ambiente y lo hace más atractivo. CSS fue desarrollado por el World Wide Web Consortium (W3C). Puede controlar la tipografía, los colores, los fondos y otras características del diseño.

Una hoja de estilo contiene todas las reglas de estilo de un sitio web.

CSS utiliza una sintaxis que es fácil de leer y escribir. Se compone de dos partes: un selector y una declaración. El selector decide el elemento al que se aplica una regla, mientras que la declaración especifica exactamente qué se debe hacer con ese elemento. Si quisiera establecer su título en morado, su regla de estilo se vería así: h1 {color: morado;}. ‘H1’ es el selector y ‘color: purple’ es la declaración. La declaración se puede dividir en dos secciones: la propiedad y el valor. La propiedad es la calidad o característica, como el color; el valores la especificación precisa de la propiedad, como violeta. Las reglas de estilo están alojadas en una hoja de estilo. La hoja de estilo es un documento externo e independiente, compartido por varias páginas web. Controla cómodamente los estilos en todo el sitio web. Una alternativa es contener una hoja de estilo en una sola página web para uso exclusivo de esa página. Las reglas CSS se pueden combinar con código HTML. Se debe utilizar CSS para representar la información de la presentación en XHTML.

JavaScript es un lenguaje de programación diseñado para proporcionar contenido web interactivo. Es un componente importante del diseño de una página web. JavaScript está integrado en el código HTML y hace que las páginas web sean dinámicas. El JavaScript contenido en el código HTML a menudo se denomina script. JavaScript puede tomar documentos HTML estáticos y hacerlos interactivos, mejorando así la experiencia del usuario. Permite cambiar el contenido web una vez que se carga una página en un navegador. Esto hace posible que la página web interactúe con un usuario a través de formularios y controles. JavaScript también proporciona animación y efectos visuales. JavaScript hace que sucedan cosas en su página web. JavaScript es para una página web lo que son las bisagras que permiten que las puertas se abran y se cierren o los interruptores de luz que permiten encender y apagar las luces de una casa.

Para crear un sitio web visualmente atractivo, uno debe considerar los diseños, fuentes y colores que aparecerán en la pantalla. Al diseñar su sitio web, utilice temas y estructuras unificadores que mantengan unidas las páginas. A los visitantes les gustará la coherencia y la familiaridad que proporciona el tema unificado. Considere usar una cuadrícula o un dispositivo de diseño conceptual para organizar la página web en columnas y filas para una apariencia pulida. La forma en que se presenta el texto es otro componente importante del diseño de sitios web. Deberá limitar el número de fuentes utilizadas, dimensionar adecuadamente su fuente, dejar suficiente espacio en blanco y utilizar colores contrastantes, como un fondo claro con texto oscuro. Espacio en blancocompone las áreas en blanco de su página. El espacio en blanco se puede utilizar deliberadamente para guiar a los lectores y definir áreas de la página.

Finalización de su sitio web

JavaScript puede dar vida a un sitio web con animaciones y formas interactivas.

Después de planificar, construir y decorar, se requiere una inspección final. Así como se inspecciona una casa para asegurarse de que cumple con el código y se completa de acuerdo con las especificaciones, se debe inspeccionar y revisar un sitio web. Debe cumplir con las especificaciones creadas durante la fase de planificación. Debe ser preciso en términos de contenido. Debe ser visualmente atractivo, atractivo y fácil de navegar. El sitio web debe probarse en varios navegadores web, como Internet Explorer, Mozilla Firefox, Google Chrome o Safari, para asegurarse de que se vea y funcione según lo previsto. Se debe verificar la funcionalidad del sitio web en múltiples plataformas, como Windows y Mac. El cliente revisará el sitio web y se asegurará de que cumpla con su satisfacción. En este punto, se realizarán los cambios o correcciones que deban realizarse. Una vez que se aprueba el sitio web,

Resumen de la lección

En resumen, el diseño web es la creación y el diseño visual de documentos que se muestran en la World Wide Web. El primer paso requiere una planificación adecuada. Esto incluye el diseño, el medio de visualización, la facilidad de navegación, el uso de hipertexto y las consideraciones de ancho de banda.

La siguiente es la fase de construcción. Los sitios web se construyen con HTML, XML y XHTML. El lenguaje de marcado de hipertexto (HTML) es una herramienta de programación que utiliza hipertexto para establecer vínculos dinámicos con otros documentos. El lenguaje de marcado extensible (XML) es un lenguaje de programación de marcado como HTML sin elementos predefinidos. XHTML es un lenguaje de programación de marcado que es similar a HTML pero escrito usando XML.

Una vez que la estructura del sitio web está completa, es el momento de la parte de diseño y decoración. Esto incluye el diseño de información, temas unificadores, uso de espacios en blanco y apariencia y atractivo general. Dependemos de CSS y JavaScript para decorar páginas web. Las hojas de estilo en cascada (CSS) utilizan un lenguaje de estilo simple que proporciona a los usuarios terminología familiar de autoedición para alterar la apariencia de una página web. JavaScript es un lenguaje de programación diseñado para proporcionar contenido web interactivo. Por último, se realizan pruebas y revisiones para garantizar la precisión. Luego, se lanza el sitio web.

Objetivos de la lección

Después de ver esta lección, debería poder:

• Definir diseño web
• Identificar los pasos necesarios para diseñar un sitio web.
• Distinguir entre los diferentes lenguajes de programación utilizados para crear un sitio web.