stringtranslate.com

diseño web

El diseño web abarca muchas habilidades y disciplinas diferentes en la producción y mantenimiento de sitios web . Las diferentes áreas del diseño web incluyen diseño gráfico web; diseño de interfaz de usuario (diseño de interfaz de usuario); creación, incluido código estandarizado y software propietario ; diseño de experiencia de usuario (diseño UX); y optimización de motores de búsqueda . A menudo, muchas personas trabajarán en equipos y cubrirán diferentes aspectos del proceso de diseño, aunque algunos diseñadores los cubrirán todos. [1] El término "diseño web" se utiliza normalmente para describir el proceso de diseño relacionado con el diseño frontal (lado del cliente) de un sitio web, incluido el marcado de escritura . El diseño web se superpone parcialmente a la ingeniería web en el ámbito más amplio del desarrollo web . Se espera que los diseñadores web tengan conocimientos de usabilidad y estén actualizados con las pautas de accesibilidad web .

Historia

Libros de diseño web en una tienda.

1988-2001

Aunque el diseño web tiene una historia bastante reciente, se puede vincular a otras áreas como el diseño gráfico, la experiencia del usuario y las artes multimedia, pero se ve más acertadamente desde un punto de vista tecnológico. Se ha convertido en una gran parte de la vida cotidiana de las personas. Es difícil imaginar Internet sin gráficos animados, diferentes estilos de tipografía, fondos, vídeos y música. La web fue anunciada el 6 de agosto de 1991; En noviembre de 1992, el CERN fue el primer sitio web que apareció en la World Wide Web. Durante este período, los sitios web se estructuraron utilizando la etiqueta <table> que creaba números en el sitio web. Con el tiempo, los diseñadores web pudieron encontrar su camino para crear más estructuras y formatos. Al principio de la historia, la estructura de los sitios web era frágil y difícil de contener, por lo que resultaba muy difícil utilizarlos. En noviembre de 1993, ALIWEB fue el primer motor de búsqueda creado (Archie Like Indexing para WEB). [2]

El inicio de la web y el diseño web

En 1989, mientras trabajaba en el CERN , Tim Berners-Lee propuso crear un proyecto global de hipertexto , que más tarde se conoció como la World Wide Web . De 1991 a 1993 nació la World Wide Web. Las páginas HTML de sólo texto se pueden ver utilizando un navegador web simple en modo de línea . [3] En 1993 Marc Andreessen y Eric Bina , crearon el navegador Mosaic . En ese momento había varios navegadores, sin embargo, la mayoría de ellos estaban basados ​​en Unix y, naturalmente, tenían mucho texto. No había habido ningún enfoque integrado para los elementos de diseño gráfico como imágenes o sonidos . El navegador Mosaic rompió este molde. [4] El W3C fue creado en octubre de 1994 para "llevar la World Wide Web a su máximo potencial mediante el desarrollo de protocolos comunes que promuevan su evolución y garanticen su interoperabilidad ". [5] Esto disuadió a cualquier empresa de monopolizar un navegador y un lenguaje de programación propietarios , lo que podría haber alterado el efecto de la World Wide Web en su conjunto. El W3C continúa estableciendo estándares, que hoy se pueden ver con JavaScript y otros lenguajes. En 1994, Andreessen formó Mosaic Communications Corp., que más tarde se conoció como Netscape Communications , el navegador Netscape 0.9 . Netscape creó sus propias etiquetas HTML sin tener en cuenta el proceso de estándares tradicionales. Por ejemplo, Netscape 1.1 incluía etiquetas para cambiar los colores de fondo y formatear el texto con tablas en las páginas web. De 1996 a 1999 comenzó la guerra de los navegadores , cuando Microsoft y Netscape lucharon por el dominio definitivo de los navegadores. Durante este tiempo hubo muchas tecnologías nuevas en el campo, en particular Hojas de estilo en cascada , JavaScript y HTML dinámico . En general, la competencia de navegadores dio lugar a muchas creaciones positivas y ayudó a que el diseño web evolucionara a un ritmo rápido. [6]

Evolución del diseño web

En 1996, Microsoft lanzó su primer navegador competitivo, que incluía sus propias funciones y etiquetas HTML. También fue el primer navegador que admitía hojas de estilo, que en ese momento se consideraba una técnica de creación oscura y que hoy es un aspecto importante del diseño web. [6] El formato HTML para tablas fue pensado originalmente para mostrar datos tabulares. Sin embargo, los diseñadores rápidamente se dieron cuenta del potencial del uso de tablas HTML para crear diseños complejos de varias columnas que de otro modo no serían posibles. En ese momento, como el diseño y la buena estética parecían tener prioridad sobre una buena estructura de marcado, se prestaba poca atención a la semántica y la accesibilidad web . Los sitios HTML tenían opciones de diseño limitadas, más aún con las versiones anteriores de HTML. Para crear diseños complejos, muchos diseñadores web tuvieron que usar estructuras de tablas complicadas o incluso usar imágenes .GIF con espaciador en blanco para evitar que las celdas vacías de la tabla colapsaran. [7] CSS fue introducido en diciembre de 1996 por el W3C para soportar la presentación y el diseño. Esto permitió que el código HTML fuera semántico en lugar de semántico y de presentación y mejoró la accesibilidad web (consulte el diseño web sin tablas ).

En 1996, se desarrolló Flash (originalmente conocido como FutureSplash). En ese momento, la herramienta de desarrollo de contenido Flash era relativamente simple en comparación con la actualidad, usaba herramientas básicas de diseño y dibujo, un precursor limitado de ActionScript y una línea de tiempo, pero permitió a los diseñadores web ir más allá del HTML, los GIF animados y JavaScript. . Sin embargo, debido a que Flash requería un complemento , muchos desarrolladores web evitaron usarlo por temor a limitar su participación de mercado debido a la falta de compatibilidad. En cambio, los diseñadores recurrieron a las animaciones GIF (si no renunciaron por completo al uso de gráficos en movimiento ) y JavaScript para los widgets . Pero los beneficios de Flash lo hicieron lo suficientemente popular entre mercados objetivo específicos como para eventualmente llegar a la gran mayoría de los navegadores, y lo suficientemente potente como para usarse para desarrollar sitios completos. [7]

Fin de las primeras guerras de navegadores

En 1998, Netscape lanzó el código de Netscape Communicator bajo una licencia de código abierto , lo que permitió a miles de desarrolladores participar en la mejora del software. Sin embargo, estos desarrolladores decidieron comenzar desde cero un estándar para la web, que guió el desarrollo del navegador de código abierto y pronto se expandió a una plataforma de aplicaciones completa. [6] Se formó el Proyecto de Estándares Web y promovió el cumplimiento del navegador con los estándares HTML y CSS . Programas como Acid1 , Acid2 y Acid3 se crearon para probar el cumplimiento de los navegadores con los estándares web. En 2000, se lanzó Internet Explorer para Mac, que fue el primer navegador totalmente compatible con HTML 4.01 y CSS 1. También fue el primer navegador totalmente compatible con el formato de imagen PNG . [6] En 2001, después de una campaña de Microsoft para popularizar Internet Explorer, Internet Explorer había alcanzado el 96% de la cuota de uso de navegadores web , lo que significó el fin de las primeras guerras de navegadores, ya que Internet Explorer no tenía competencia real. [8]

2001-2012

Desde principios del siglo XXI, la web se ha integrado cada vez más en la vida de las personas. Mientras esto sucedía, la tecnología de la web también avanzaba. También ha habido cambios significativos en la forma en que las personas usan y acceden a la web, y esto ha cambiado la forma en que se diseñan los sitios.

Desde el final de la guerra de los navegadores [ ¿cuándo? ] Se han lanzado nuevos navegadores. Muchos de ellos son de código abierto , lo que significa que tienden a tener un desarrollo más rápido y apoyan más los nuevos estándares. Muchas [ palabras de comadreja ] consideran que las nuevas opciones son mejores que Internet Explorer de Microsoft .

El W3C ha lanzado nuevos estándares para HTML ( HTML5 ) y CSS ( CSS3 ), así como nuevas API de JavaScript , cada uno como un estándar nuevo pero individual. [ ¿ cuando? ] Si bien el término HTML5 solo se usa para referirse a la nueva versión de HTML y algunas de las API de JavaScript, se ha vuelto común usarlo para referirse al conjunto completo de nuevos estándares (HTML5, CSS3 y JavaScript).

2012 y posteriores

Con la mejora de la cobertura de Internet 3G y LTE, una gran parte del tráfico del sitio web pasó a generarse a través de dispositivos móviles. Esto afectó a la industria del diseño web, empujándola hacia un estilo minimalista, ligero y simplista. En particular, surgió el enfoque "Mobile first", que implica crear primero un diseño de sitio web orientado a dispositivos móviles y luego adaptarlo a dimensiones de pantalla más altas.

Herramientas y tecnologías

Los diseñadores web utilizan una variedad de herramientas diferentes según la parte del proceso de producción en la que participan. Estas herramientas se actualizan con el tiempo mediante estándares y software más nuevos, pero los principios detrás de ellas siguen siendo los mismos. Los diseñadores web utilizan editores de gráficos vectoriales y rasterizados para crear imágenes con formato web o prototipos de diseño. Se puede crear un sitio web utilizando el software de creación de sitios web WYSIWYG o un sistema de gestión de contenidos , o las páginas web individuales se pueden codificar a mano de la misma manera que se crearon las primeras páginas web. Otras herramientas que los diseñadores web pueden utilizar incluyen validadores de marcado [9] y otras herramientas de prueba de usabilidad y accesibilidad para garantizar que sus sitios web cumplan con las pautas de accesibilidad web. [10]

Diseño de experiencia de usuario

Una herramienta popular en el diseño web es el diseño UX, es un tipo de arte que diseña productos para realizar una experiencia precisa del usuario. El diseño UX es muy profundo. UX es más que la web, es muy independiente y sus fundamentos se pueden aplicar a muchos otros navegadores o aplicaciones. El diseño web se basa principalmente en cosas basadas en la web. UX puede superponerse tanto al diseño web como al diseño. El diseño UX se centra principalmente en productos que están menos basados ​​en la web. [11]

Habilidades y técnicas

Diseño de marketing y comunicación.

El diseño de marketing y comunicación en un sitio web puede identificar qué funciona para su mercado objetivo. Puede ser un grupo de edad o una corriente cultural particular; así el diseñador puede comprender las tendencias de su audiencia. Los diseñadores también pueden comprender el tipo de sitio web que están diseñando, lo que significa, por ejemplo, que las consideraciones de diseño de sitios web de empresa a empresa (B2B) pueden diferir mucho de las de un sitio web dirigido al consumidor, como un sitio web minorista o de entretenimiento. Se podría realizar una cuidadosa consideración para garantizar que la estética o el diseño general de un sitio no entren en conflicto con la claridad y precisión del contenido o la facilidad de navegación web , [12] especialmente en un sitio web B2B. Los diseñadores también pueden considerar la reputación del propietario o de la empresa que representa el sitio para asegurarse de que se presente favorablemente. Los diseñadores web normalmente supervisan todos los sitios web que se crean y cómo funcionan o operan las cosas. Constantemente actualizan y cambian todo en los sitios web entre bastidores. Todos los elementos que realizan son texto, fotografías, gráficos y maquetación de la web. Antes de comenzar a trabajar en un sitio web, los diseñadores web normalmente programan una cita con sus clientes para discutir el diseño, el color, los gráficos y el diseño. Los diseñadores web dedican la mayor parte de su tiempo a diseñar sitios web y a asegurarse de que la velocidad sea la adecuada. Los diseñadores web suelen participar en pruebas y trabajo, marketing y comunicación con otros diseñadores sobre cómo diseñar los sitios web y encontrar los elementos adecuados para los sitios web. [13]

Diseño de experiencia de usuario y diseño interactivo.

La comprensión del usuario del contenido de un sitio web a menudo depende de la comprensión del usuario de cómo funciona el sitio web. Esto es parte del diseño de la experiencia del usuario . La experiencia del usuario está relacionada con el diseño, las instrucciones claras y el etiquetado de un sitio web. Qué tan bien un usuario comprende cómo puede interactuar en un sitio también puede depender del diseño interactivo del sitio. Si un usuario percibe la utilidad del sitio web, es más probable que continúe usándolo. Los usuarios expertos y versados ​​en el uso de sitios web pueden encontrar útil una interfaz de sitio web más distintiva, aunque menos intuitiva o menos fácil de usar . Sin embargo, es menos probable que los usuarios con menos experiencia vean las ventajas o la utilidad de una interfaz de sitio web menos intuitiva. Esto impulsa la tendencia hacia una experiencia de usuario más universal y un acceso fácil para dar cabida a la mayor cantidad de usuarios posible, independientemente de sus habilidades. [14] Gran parte del diseño de la experiencia del usuario y del diseño interactivo se consideran en el diseño de la interfaz de usuario .

Las funciones interactivas avanzadas pueden requerir complementos si no se tienen habilidades avanzadas en lenguaje de codificación. Elegir si utilizar o no interactividad que requiera complementos es una decisión crítica en el diseño de la experiencia del usuario. Si el complemento no viene preinstalado en la mayoría de los navegadores, existe el riesgo de que el usuario no tenga ni los conocimientos ni la paciencia para instalar un complemento sólo para acceder al contenido. Si la función requiere habilidades avanzadas en el lenguaje de codificación, codificar puede resultar demasiado costoso en tiempo o dinero en comparación con la cantidad de mejora que la función agregará a la experiencia del usuario. También existe el riesgo de que la interactividad avanzada sea incompatible con navegadores o configuraciones de hardware más antiguos. Publicar una función que no funciona de manera confiable es potencialmente peor para la experiencia del usuario que no intentarlo. Depende del público objetivo si es probable que sea necesario o si vale la pena correr riesgos.

Mejora progresiva

El orden de mejora progresiva.

La mejora progresiva es una estrategia en el diseño web que pone énfasis en el contenido web primero, permitiendo que todos accedan al contenido y la funcionalidad básicos de una página web, mientras que los usuarios con funciones adicionales del navegador o acceso a Internet más rápido reciben la versión mejorada.

En la práctica, esto significa servir contenido a través de HTML y aplicar estilos y animaciones a través de CSS en la medida de lo técnicamente posible, y luego aplicar mejoras adicionales a través de JavaScript . El texto de las páginas se carga inmediatamente a través del código fuente HTML en lugar de tener que esperar a que JavaScript inicie y cargue el contenido posteriormente, lo que permite que el contenido sea legible con un tiempo de carga y un ancho de banda mínimos, y a través de navegadores basados ​​en texto , y maximiza la compatibilidad con versiones anteriores. . [15]

Como ejemplo, los sitios basados ​​en MediaWiki , incluida Wikipedia, utilizan una mejora progresiva, ya que siguen siendo utilizables mientras JavaScript e incluso CSS están desactivados, ya que el contenido de las páginas se incluye en el código fuente HTML de la página, mientras que el contraejemplo Everipedia se basa en JavaScript para cargar páginas. ' contenido posteriormente; Aparece una página en blanco con JavaScript desactivado.

Diseño de página

Parte del diseño de la interfaz de usuario se ve afectada por la calidad del diseño de la página . Por ejemplo, un diseñador puede considerar si el diseño de la página del sitio debe permanecer coherente en diferentes páginas al diseñar el diseño. El ancho de píxeles de la página también puede considerarse vital para alinear objetos en el diseño. Los sitios web de ancho fijo más populares generalmente tienen el mismo ancho establecido para que coincida con la ventana del navegador más popular actual, con la resolución de pantalla más popular actual y en el tamaño de monitor más popular actual. La mayoría de las páginas también están alineadas en el centro por motivos de estética en pantallas más grandes.

Los diseños fluidos aumentaron en popularidad alrededor del año 2000 para permitir que el navegador realizara ajustes de diseño específicos del usuario en diseños fluidos en función de los detalles de la pantalla del lector (tamaño de la ventana, tamaño de fuente en relación con la ventana, etc.). Crecieron como una alternativa a los diseños basados ​​en tablas HTML y al diseño basado en cuadrículas tanto en los principios de diseño de páginas como en la técnica de codificación, pero su adopción fue muy lenta. [nota 1] Esto se debió a consideraciones sobre los dispositivos de lectura de pantalla y los diferentes tamaños de ventanas sobre los cuales los diseñadores no tienen control. En consecuencia, un diseño puede dividirse en unidades (barras laterales, bloques de contenido, áreas de publicidad integrada , áreas de navegación) que se envían al navegador y que el navegador integrará en la ventana de visualización lo mejor que pueda. Aunque una visualización de este tipo a menudo puede cambiar la posición relativa de las principales unidades de contenido, las barras laterales pueden desplazarse debajo del cuerpo del texto en lugar de a un lado. Esta es una pantalla más flexible que un diseño basado en cuadrícula codificado que no se ajusta a la ventana del dispositivo. En particular, la posición relativa de los bloques de contenido puede cambiar sin afectar el contenido dentro del bloque. Esto también minimiza la necesidad del usuario de desplazarse horizontalmente por la página.

El diseño web responsivo es un enfoque más nuevo, basado en CSS3 y un nivel más profundo de especificación por dispositivo dentro de la hoja de estilos de la página mediante un uso mejorado de la @mediaregla CSS. En marzo de 2018, Google anunció que implementaría una indexación centrada en los dispositivos móviles. [16] Los sitios que utilizan diseño responsivo están bien posicionados para garantizar que cumplan con este nuevo enfoque.

Tipografía

Los diseñadores web pueden optar por limitar la variedad de tipos de letra del sitio web a sólo unos pocos que sean de un estilo similar, en lugar de utilizar una amplia gama de tipos de letra o estilos de letra . La mayoría de los navegadores reconocen un número específico de fuentes seguras, que los diseñadores utilizan principalmente para evitar complicaciones.

La descarga de fuentes se incluyó posteriormente en el módulo de fuentes CSS3 y desde entonces se implementó en Safari 3.1, Opera 10 y Mozilla Firefox 3.5. Posteriormente, esto ha aumentado el interés en la tipografía web , así como el uso de la descarga de fuentes.

La mayoría de los diseños de sitios incorporan espacios negativos para dividir el texto en párrafos y también evitar el texto alineado al centro. [17]

Gráficos en movimiento

El diseño de la página y la interfaz de usuario también pueden verse afectados por el uso de gráficos en movimiento. La elección de utilizar o no gráficos en movimiento puede depender del mercado objetivo del sitio web. Los gráficos en movimiento pueden esperarse o al menos recibirse mejor en un sitio web orientado al entretenimiento. Sin embargo, el público objetivo de un sitio web con un interés más serio o formal (como empresas, comunidades o gobiernos) puede encontrar las animaciones innecesarias y distraídas, aunque solo sea con fines de entretenimiento o decoración. Esto no significa que el contenido más serio no pueda mejorarse con presentaciones animadas o en video que sean relevantes para el contenido. En cualquier caso, el diseño de gráficos en movimiento puede marcar la diferencia entre imágenes más efectivas o imágenes que distraen.

Los gráficos en movimiento que no son iniciados por el visitante del sitio pueden producir problemas de accesibilidad. Los estándares de accesibilidad del consorcio World Wide Web exigen que los visitantes del sitio puedan desactivar las animaciones. [18]

Calidad del código

Los diseñadores de sitios web pueden considerar que es una buena práctica cumplir con los estándares. Esto generalmente se hace mediante una descripción que especifica qué está haciendo el elemento. Es posible que el incumplimiento de los estándares no haga que un sitio web sea inutilizable o propenso a errores, pero los estándares pueden relacionarse con el diseño correcto de las páginas para su legibilidad, así como con garantizar que los elementos codificados se cierren adecuadamente. Esto incluye errores en el código, un diseño más organizado para el código y asegurarse de que los ID y las clases estén identificados correctamente. Las páginas mal codificadas a veces se denominan coloquialmente sopa de etiquetas . La validación a través del W3C [9] solo se puede realizar cuando se realiza una declaración DOCTYPE correcta, que se utiliza para resaltar errores en el código. El sistema identifica los errores y áreas que no se ajustan a los estándares de diseño web. Esta información podrá luego ser corregida por el usuario. [19]

Contenido generado

Hay dos formas en que se generan los sitios web: estática o dinámicamente.

Sitios web estáticos

Un sitio web estático almacena un archivo único para cada página de un sitio web estático. Cada vez que se solicita esa página, se devuelve el mismo contenido. Este contenido se crea una vez, durante el diseño del sitio web. Por lo general, se crea manualmente, aunque algunos sitios utilizan un proceso de creación automatizado, similar a un sitio web dinámico, cuyos resultados se almacenan a largo plazo como páginas completas. Estos sitios estáticos creados automáticamente se hicieron más populares alrededor de 2015, con generadores como Jekyll y Adobe Muse . [20]

Los beneficios de un sitio web estático son que eran más sencillos de alojar, ya que su servidor solo necesitaba ofrecer contenido estático, no ejecutar scripts del lado del servidor. Esto requería menos administración del servidor y tenía menos posibilidades de exponer agujeros de seguridad. También podrían servir páginas más rápidamente, en hardware de servidor de bajo costo. Esta ventaja se volvió menos importante a medida que el alojamiento web barato se expandió para ofrecer también funciones dinámicas y los servidores virtuales ofrecieron alto rendimiento durante intervalos cortos a bajo costo.

Casi todos los sitios web tienen contenido estático, ya que los recursos de soporte, como imágenes y hojas de estilo, suelen ser estáticos, incluso en un sitio web con páginas muy dinámicas.

Sitios web dinámicos

Los sitios web dinámicos se generan sobre la marcha y utilizan tecnología del lado del servidor para generar páginas web. Por lo general, extraen su contenido de una o más bases de datos de back-end: algunas son consultas de bases de datos a través de una base de datos relacional para consultar un catálogo o resumir información numérica, y otras pueden usar una base de datos de documentos como MongoDB o NoSQL para almacenar unidades de contenido más grandes. , como publicaciones de blog o artículos wiki.

En el proceso de diseño, las páginas dinámicas a menudo se simulan o se estructuran utilizando páginas estáticas. El conjunto de habilidades necesarias para desarrollar páginas web dinámicas es mucho más amplio que el de una página estática, e implica codificación del lado del servidor y de la base de datos, así como diseño de interfaz del lado del cliente. Por eso, incluso los proyectos dinámicos de tamaño medio son casi siempre un trabajo de equipo.

Cuando se desarrollaron por primera vez las páginas web dinámicas, normalmente se codificaban directamente en lenguajes como Perl , PHP o ASP . Algunos de ellos, en particular PHP y ASP, utilizaban un enfoque de 'plantilla' en el que una página del lado del servidor se parecía a la estructura de la página del lado del cliente completa y los datos se insertaban en lugares definidos por 'etiquetas'. Este fue un medio de desarrollo más rápido que codificar en un lenguaje de codificación puramente procedimental como Perl.

Ambos enfoques han sido reemplazados en muchos sitios web por herramientas de mayor nivel centradas en aplicaciones, como los sistemas de gestión de contenidos . Estos se basan en plataformas de codificación de propósito general y suponen que existe un sitio web para ofrecer contenido de acuerdo con uno de varios modelos bien reconocidos, como un blog secuenciado en el tiempo , una revista temática o un sitio de noticias, una wiki o un usuario. foro. Estas herramientas hacen que la implementación de un sitio de este tipo sea muy fácil y una tarea puramente organizativa y basada en el diseño, sin necesidad de codificación.

La edición del contenido en sí (así como de la página de plantilla) se puede realizar tanto a través del propio sitio como mediante el uso de software de terceros. La capacidad de editar todas las páginas se proporciona solo a una categoría específica de usuarios (por ejemplo, administradores o usuarios registrados). En algunos casos, a los usuarios anónimos se les permite editar cierto contenido web, lo cual es menos frecuente (por ejemplo, en foros, agregando mensajes). Un ejemplo de un sitio con un cambio anónimo es Wikipedia .

Comunicación Técnica en Diseño Web

En un estudio sobre buenas prácticas en comunicación técnica, los autores exploran los aspectos de una buena comunicación técnica. Describen su método de medición llamado coeficiente de comunicación, que es un número que representa la efectividad en la comunicación de ideas técnicas complejas. Específicamente establecen tres filosofías que creen que conducen a una buena comunicación técnica:

  1. Filosofía 1: La forma en que nos comunicamos afecta cómo los demás perciben nuestro trabajo. Perciben nuestro trabajo como más válido y útil cuando lo comunicamos bien y menos cuando lo comunicamos mal.
  2. Filosofía 2: Los individuos juzgan la calidad de la comunicación basándose en una serie de factores personales, incluidas sus experiencias, preferencias, formación técnica, formación lingüística y pertenencia a grupos profesionales.
  3. Filosofía 3: La comunicación importa durante todas las interacciones interpersonales, en diversos grados.

Los autores no dan indicaciones claras de una aplicación específica, sin embargo, brindan un marco claro y conciso para una comunicación técnica efectiva.

En un estudio adicional sobre políticas de privacidad, los autores presentan una alternativa al acuerdo de privacidad. Proponen un enfoque más visual y basado en el usuario, en contraposición a los clásicos acuerdos de privacidad redactados en largas palabras. Este enfoque implica “clasificaciones de privacidad” que pertenecen a categorías y están claramente representadas jerárquicamente. Esta representación deja claro qué información se comparte y qué tan seguro es un sitio web de una manera más fácil de usar. Sus resultados muestran una respuesta generalmente positiva de su grupo de muestra y describen la utilidad de dicha estructura en el diseño de sitios web.

Diseño de página de inicio

Los expertos en usabilidad, incluidos Jakob Nielsen y Kyle Soucy, a menudo han enfatizado el diseño de la página de inicio para el éxito del sitio web y afirmado que la página de inicio es la página más importante de un sitio web. [21] Nielsen, Jakob; Tahir, Marie (octubre de 2001), Usabilidad de la página de inicio: 50 sitios web deconstruidos, New Riders Publishing, ISBN 978-0-7357-1102-0[22] [23] Sin embargo, en la década de 2000 los profesionales comenzaron a descubrir que un número creciente de tráfico de sitios web pasaba por alto la página de inicio, yendo directamente a páginas de contenido interno a través de motores de búsqueda, boletines electrónicos y canales RSS. [24] Lo que lleva a muchos profesionales a argumentar que las páginas de inicio son menos importantes de lo que la mayoría de la gente piensa. [25] [26] [27] [28] Jared Spool argumentó en 2007 que la página de inicio de un sitio era en realidad la página menos importante de un sitio web. [29]

En 2012 y 2013, los carruseles (también llamados "controles deslizantes" y "banners giratorios") se han convertido en un elemento de diseño extremadamente popular en las páginas de inicio, a menudo utilizados para mostrar contenido destacado o reciente en un espacio reducido. [30] Muchos profesionales argumentan que los carruseles son un elemento de diseño ineficaz y perjudican la optimización y la usabilidad de los motores de búsqueda de un sitio web. [30] [31] [32]

Ocupaciones

Hay dos trabajos principales involucrados en la creación de un sitio web: el diseñador web y el desarrollador web , que a menudo trabajan en estrecha colaboración en un sitio web. [33] Los diseñadores web son responsables del aspecto visual, que incluye el diseño, el color y la tipografía de una página web. Los diseñadores web también tendrán conocimientos prácticos de lenguajes de marcado como HTML y CSS, aunque el alcance de sus conocimientos variará de un diseñador web a otro. Particularmente en organizaciones más pequeñas, una persona necesitará las habilidades necesarias para diseñar y programar la página web completa, mientras que las organizaciones más grandes pueden tener un diseñador web responsable únicamente del aspecto visual.

Otros trabajos que pueden involucrarse en la creación de un sitio web incluyen:

Ver también

Disciplinas relacionadas

Notas

  1. ^ Imágenes .GIF<table> con marcado y espaciador basado en

Referencias

  1. ^ ab Lester, Georgina. "Diferentes trabajos y responsabilidades de varias personas involucradas en la creación de un sitio web". Artes Gales Reino Unido . Consultado el 17 de marzo de 2012 .
  2. ^ CPBI, Ryan Shelley. "La historia del diseño de sitios web: 30 años de construcción de la Web [Actualización de 2022]". www.smamarketing.net . Consultado el 12 de octubre de 2022 .
  3. ^ "Biografía más larga" . Consultado el 16 de marzo de 2012 .
  4. ^ "Navegador de mosaicos" (PDF) . Archivado desde el original (PDF) el 2 de septiembre de 2013 . Consultado el 16 de marzo de 2012 .
  5. ^ Zwicky, ED; Cooper, S; Chapman, DB (2000). Construcción de cortafuegos de Internet. Estados Unidos: O'Reily & Associates. pag. 804.ISBN 1-56592-871-7.
  6. ^ abcd Niederst, Jennifer (2006). Diseño web en pocas palabras. Estados Unidos de América: O'Reilly Media. págs. 12-14. ISBN 0-596-00987-9.
  7. ^ ab Chapman, Cameron, La evolución del diseño web, seis revisiones, archivado desde el original el 30 de octubre de 2013
  8. ^ "AMO.NET America's Multimedia Online (VISTA PREVIA de Internet Explorer 6)". amo.net . Consultado el 27 de mayo de 2020 .
  9. ^ ab "Servicio de validación de marcado W3C".
  10. ^ W3C. "Iniciativa de Accesibilidad Web (WAI)".{{cite web}}: Mantenimiento CS1: nombres numéricos: lista de autores ( enlace )
  11. ^ "¿Qué es el diseño web?". La Fundación de Diseño de Interacción . Consultado el 12 de octubre de 2022 .
  12. ^ THORLACIO, LISBETH (2007). "El papel de la estética en el diseño web". Revisión nórdica . 28 (28): 63–76. doi : 10.1515/nor-2017-0201 . S2CID  146649056.
  13. ^ "¿Qué es un diseñador web? (Guía 2022)". BrainStation® . Consultado el 28 de octubre de 2022 .
  14. ^ Castañeda, JA Francisco; Muñoz-Leiva, Teodoro Luque (2007). "Modelo de aceptación web (WAM): efectos moderadores de la experiencia del usuario". Gestión de la información . 44 (4): 384–396. doi :10.1016/j.im.2007.02.003.
  15. ^ "Construcción de una interfaz resistente mediante mejoras progresivas". GOBIERNO DEL REINO UNIDO . Consultado el 27 de octubre de 2021 .
  16. ^ "Implementación de la indexación centrada en los dispositivos móviles". Blog oficial del Centro para webmasters de Google . Consultado el 9 de junio de 2018 .
  17. ^ Piedra, John (16 de noviembre de 2009). "20 cosas que se deben y no se deben hacer en una tipografía web eficaz" . Consultado el 19 de marzo de 2012 .
  18. ^ Consorcio World Wide Web: Comprensión de las pautas de accesibilidad al contenido web 2.2.2: pausar, detener, ocultar
  19. ^ Control de calidad del W3C. "¡Mi sitio web es estándar! ¿Y el tuyo?" . Consultado el 21 de marzo de 2012 .{{cite web}}: Mantenimiento CS1: nombres numéricos: lista de autores ( enlace )
  20. ^ Christensen, Mathias Bülmann (16 de noviembre de 2015). "Revisión de generadores de sitios web estáticos: Jekyll, Middleman, Roots, Hugo". Revista aplastante . Consultado el 26 de octubre de 2016 .
  21. ^ Soucy, Kyle, ¿Su página de inicio está haciendo lo que debería?, Interfaz utilizable, archivado desde el original el 8 de junio de 2012
  22. ^ Nielsen, Jakob (10 de noviembre de 2003), Las diez pautas de diseño de páginas de inicio más violadas, Nielsen Norman Group, archivado desde el original el 5 de octubre de 2013
  23. ^ Knight, Kayla (20 de agosto de 2009), Consejos esenciales para diseñar una página de inicio eficaz, seis revisiones, archivado desde el original el 21 de agosto de 2013
  24. ^ Spool, Jared (29 de septiembre de 2005), ¿Ya es relevante el diseño de la página de inicio?, Ingeniería de interfaz de usuario, archivado desde el original el 16 de septiembre de 2013
  25. ^ Chapman, Cameron (15 de septiembre de 2010), Diez consejos de usabilidad basados ​​en estudios de investigación, seis revisiones, archivado desde el original el 2 de septiembre de 2013
  26. ^ Gócza, Zoltán, Mito n.º 17: La página de inicio es la página más importante, archivado desde el original el 2 de junio de 2013
  27. ^ McGovern, Gerry (18 de abril de 2010), El declive de la página de inicio, archivado desde el original el 24 de mayo de 2013
  28. ^ Porter, Joshua (24 de abril de 2006), Priorizar el tiempo de diseño: un enfoque de cola larga, Ingeniería de interfaz de usuario, archivado desde el original el 14 de mayo de 2013
  29. ^ Spool, Jared (6 de agosto de 2007), Podcast de herramientas de usabilidad: diseño de página de inicio, archivado desde el original el 29 de abril de 2013
  30. ^ ab Messner, Katie (22 de abril de 2013), Carruseles de imágenes: cómo controlar el tiovivo, Usability.gov, archivado desde el original el 10 de octubre de 2013
  31. ^ Jones, Harrison (19 de junio de 2013), Controles deslizantes de la página de inicio: malo para el SEO, malo para la usabilidad, archivado desde el original el 22 de noviembre de 2013
  32. ^ Laja, Peep (8 de junio de 2019), ¿Carruseles de imágenes y controles deslizantes? No los uses. (He aquí por qué), CXL, archivado desde el original el 10 de diciembre de 2019.
  33. ^ Oleksy, Walter (2001). Carreras en Diseño Web . Nueva York: The Rosen Publishing Group, Inc. págs. 9-11. ISBN 978-0-8239-3191-0.

enlaces externos