[{"@context":"http:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/wiki.edu.vn\/es\/wiki01\/2017\/10\/30\/diseno-web-wikipedia-la-enciclopedia-libre\/#BlogPosting","mainEntityOfPage":"https:\/\/wiki.edu.vn\/es\/wiki01\/2017\/10\/30\/diseno-web-wikipedia-la-enciclopedia-libre\/","headline":"Dise\u00f1o web – Wikipedia, la enciclopedia libre","name":"Dise\u00f1o web – Wikipedia, la enciclopedia libre","description":"Este art\u00edculo o secci\u00f3n tiene referencias, pero necesita m\u00e1s para complementar su verificabilidad. Este aviso fue puesto el 11 de","datePublished":"2017-10-30","dateModified":"2023-02-25","author":{"@type":"Person","@id":"https:\/\/wiki.edu.vn\/es\/wiki01\/author\/lordneo\/#Person","name":"lordneo","url":"https:\/\/wiki.edu.vn\/es\/wiki01\/author\/lordneo\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/c9645c498c9701c88b89b8537773dd7c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c9645c498c9701c88b89b8537773dd7c?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"Enzyklop\u00e4die","logo":{"@type":"ImageObject","@id":"https:\/\/wiki.edu.vn\/wiki4\/wp-content\/uploads\/2023\/08\/download.jpg","url":"https:\/\/wiki.edu.vn\/wiki4\/wp-content\/uploads\/2023\/08\/download.jpg","width":600,"height":60}},"image":{"@type":"ImageObject","@id":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/1f\/Commons-emblem-question_book_orange.svg\/45px-Commons-emblem-question_book_orange.svg.png","url":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/1f\/Commons-emblem-question_book_orange.svg\/45px-Commons-emblem-question_book_orange.svg.png","height":"45","width":"45"},"url":"https:\/\/wiki.edu.vn\/es\/wiki01\/2017\/10\/30\/diseno-web-wikipedia-la-enciclopedia-libre\/","wordCount":6693,"articleBody":"Este art\u00edculo o secci\u00f3n tiene referencias, pero necesita m\u00e1s para complementar su verificabilidad.Este aviso fue puesto el 11 de noviembre de 2017.  El dise\u00f1o web es una actividad que consiste en la planificaci\u00f3n, dise\u00f1o, implementaci\u00f3n y mantenimiento de sitios web. Abarca diferentes aspectos como el dise\u00f1o gr\u00e1fico web, dise\u00f1o de interfaz y la experiencia de usuario, adem\u00e1s de la navegabilidad, interactividad, usabilidad, arquitectura de la informaci\u00f3n e interacci\u00f3n de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, video y la optimizaci\u00f3n de motores de b\u00fasqueda. A menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del proceso de dise\u00f1o, aunque existen algunos dise\u00f1adores independientes que trabajan solos.La uni\u00f3n de un buen dise\u00f1o con una jerarqu\u00eda bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicaci\u00f3n e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos.  El dise\u00f1o web ha visto amplia aplicaci\u00f3n en los sectores comerciales de Internet, especialmente en la World Wide Web. A menudo la web se utiliza como medio de expresi\u00f3n pl\u00e1stica en s\u00ed. Artistas y creadores hacen de las p\u00e1ginas en Internet un medio m\u00e1s para ofrecer sus producciones y utilizarlas como un canal m\u00e1s de difusi\u00f3n de su obra.Table of ContentsDise\u00f1o web aplicado[editar]Fundamentos[editar]Est\u00e1ndares[editar]Accesibilidad[editar]Web sem\u00e1ntica[editar]Dise\u00f1o web adaptable[editar]Experiencia de usuario en dise\u00f1o web[editar]V\u00e9ase tambi\u00e9n[editar]Referencias[editar]Dise\u00f1o web aplicado[editar]El dise\u00f1o de p\u00e1ginas web es la construcci\u00f3n de documentos de hipertexto para su visualizaci\u00f3n en diferentes navegadores. As\u00ed como asignarle una presentaci\u00f3n para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un tel\u00e9fono m\u00f3vil, etc).Estos documentos o p\u00e1ginas web pueden ser creadas:  Para el dise\u00f1o de p\u00e1ginas web debemos tener en cuenta ocho etapas:Objetivos:  El proceso para establecer los objetivos, para definir el prop\u00f3sito del sitio web y el p\u00fablico objetivo. Durante este proceso, es importante saber si la arquitectura de la p\u00e1gina ya ha sido alineada y, en caso de que lo est\u00e9, tener claro que est\u00e1 sujeta a cambios a medida que el proyecto evoluciona.Investigaci\u00f3n y an\u00e1lisis: Una investigaci\u00f3n detallada garantiza que se dispone de todos los conocimientos necesarios para ser competitivos. La investigaci\u00f3n asegura que el sitio web considera todos los desarrollos actuales en t\u00e9rminos de tecnolog\u00eda, industria, comportamiento del usuario y expectativas del usuario (UX).Arquitectura del sitio: Bas\u00e1ndose en los objetivos y los resultados de la investigaci\u00f3n, ahora se puede elaborar una arquitectura de sitio exhaustiva. Estos resultados deben delinear c\u00f3mo debe ser la navegaci\u00f3n principal y secundaria, las subp\u00e1ginas, las categor\u00edas y otras secciones del sitio web. Lo ideal ser\u00eda que la arquitectura del sitio cambie despu\u00e9s de que se tengan en cuenta los resultados de la investigaci\u00f3n. Si por alguna raz\u00f3n ninguna nueva percepci\u00f3n de la investigaci\u00f3n y el an\u00e1lisis fue capaz de proporcionar o recomendar cambios en la arquitectura del sitio, deber\u00eda alarmarse ya que podr\u00eda haber algo mal. Durante la arquitectura del sitio, se deben responder las siguientes preguntas: \u00bfCu\u00e1les son los objetivos y mensajes de cada p\u00e1gina? \u00bfQu\u00e9 acci\u00f3n se espera del usuario en estas p\u00e1ginas?Wireframing: El Wireframing es un paso importante en cualquier proceso ya que te permite definir la jerarqu\u00eda de la informaci\u00f3n. Despu\u00e9s de que todos los resultados de la investigaci\u00f3n est\u00e9n disponibles y se pueda usar una arquitectura de p\u00e1gina clara como plantilla, ahora se debe crear un wireframe para cada p\u00e1gina. El wireframing es una de las fases m\u00e1s incomprendidas y dif\u00edciles durante todo el proceso de un Dise\u00f1o de una p\u00e1gina web.Dise\u00f1o y Maquetaci\u00f3n: El dise\u00f1o y la maquetaci\u00f3n web es el proceso en el que el prototipo gr\u00e1fico tambi\u00e9n denominado \u00ablayout\u00bb \u00abLook and Feel\u00bb (con los requisitos estructurales y est\u00e9ticos definidos y aprobados en un an\u00e1lisis inicial) pasa a transformase en c\u00f3digo html, css y js (est\u00e1ndares web) para que los navegadores puedan interpretarlo correctamente.Especificaciones t\u00e9cnicas: Las Especificaciones T\u00e9cnicas (Tech Specs) son un documento que consiste en una serie de instrucciones para el desarrollador sobre c\u00f3mo programar el sitio web. Por ejemplo, las fuentes, el espaciado, el texto y el comportamiento de las im\u00e1genes se describen en detalle en una Especificaci\u00f3n T\u00e9cnica. Las funciones y caracter\u00edsticas deben ser mostradas y explicadas, as\u00ed como el comportamiento de navegaci\u00f3n, animaciones, pop-ups y muchas m\u00e1s.Programaci\u00f3n: Ahora que todos los pasos anteriores se han realizado correctamente, nada se interpone en el camino de la codificaci\u00f3n de la p\u00e1gina web. Una vez terminada, es clave realizar un control de calidad para enumerar los errores y gestionar sus soluciones. Este proceso no deber\u00eda tardar m\u00e1s de dos d\u00edas ni deber\u00eda tener un costo adicional.Migraci\u00f3n y transici\u00f3n: Si se trata de un nuevo sitio web, todo el contenido tiene que ser migrado al nuevo dise\u00f1o. Para sitios m\u00e1s grandes, todo el contenido del sitio antiguo debe ser incluido ahora en el nuevo sitio. Uno de los procesos m\u00e1s importantes dentro de la migraci\u00f3n es el mapeo de URL. Para todos los URLs de p\u00e1ginas antiguas, se debe establecer una redirecci\u00f3n 301 a los nuevos URLs. Si se omite este punto de SEO, el nuevo sitio web pierde toda la confianza SEO ganada con anterioridad y todas las clasificaciones de los motores de b\u00fasqueda como Google.El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de textos (debe guardarse como texto plano, sin ning\u00fan tipo de formato y con extensi\u00f3n .html o .htm). Aprender HTML es relativamente f\u00e1cil, as\u00ed que es sencillo crear p\u00e1ginas web de este modo. Esta era la \u00fanica manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque s\u00ed aconsejable), con lo cual el desarrollador se concentra en lo m\u00e1s importante, el dise\u00f1o del documento.Fundamentos[editar]Un buen dise\u00f1o web es aquel que considera dentro de su desarrollo tanto los elementos b\u00e1sicos del dise\u00f1o gr\u00e1fico (la diagramaci\u00f3n, el color, los gr\u00e1ficos y las fuentes) como los fundamentos t\u00e9cnicos (estructura, compatibilidad, funcionalidad e interactividad) para crear tanto el impacto visual como la experiencia de usuario \u00f3ptima para la asimilaci\u00f3n del contenido.Est\u00e1ndares[editar]El dise\u00f1o web implica conocer c\u00f3mo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los est\u00e1ndares establecidos por la W3C y en lo referente a la web sem\u00e1ntica. Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza c\u00f3digo propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.Accesibilidad[editar]El dise\u00f1o web debe seguir unos requerimientos m\u00ednimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor n\u00famero de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.aWeb sem\u00e1ntica[editar]La web sem\u00e1ntica, por otra parte, aboga por un uso l\u00f3gico de los elementos seg\u00fan el significado para el que fueron concebidas. Por ejemplo se utilizar\u00e1 el elemento  para marcar p\u00e1rrafos, y  para tabular datos (nunca para disponer de manera visual los diferentes elementos del documento). En su \u00faltima instancia, esto ha supuesto una aut\u00e9ntica revoluci\u00f3n en el dise\u00f1o web puesto que apuesta por separar totalmente el contenido del documento de la visualizaci\u00f3n.De esta forma se utiliza el documento HTML \u00fanicamente para contener, organizar y estructurar la informaci\u00f3n y las hojas de estilo CSS para indicar como se mostrar\u00e1 dicha informaci\u00f3n en los diferentes medios (como por ejemplo, una monitor de computadora, un tel\u00e9fono m\u00f3vil, impreso en papel, le\u00edda por un sintetizador de voz, etc.). Por l\u00f3gica, esta metodolog\u00eda beneficia enormemente la accesibilidad del documento.Tambi\u00e9n existen p\u00e1ginas din\u00e1micas, las cuales permiten interacci\u00f3n entre la web y el visitante, proporcion\u00e1ndole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de control de administraci\u00f3n de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la misma.En un principio era solo texto, pero a medida que ha evolucionado la tecnolog\u00eda, tanto los ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusi\u00f3n de im\u00e1genes fue la m\u00e1s significativa, pero tambi\u00e9n debemos mencionar el v\u00eddeo y la animaci\u00f3n, o los espacios 3D, lo que aporta valores estil\u00edsticos, de dise\u00f1o y de interactividad jam\u00e1s imaginados antes.El dise\u00f1o de p\u00e1ginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 solo hab\u00eda alrededor de 50 sitios web.[1]\u200b Estad\u00edsticas (2005) nos afirmaban que la cantidad de sitios web ronda los 8000 millones de sitios, a los que diariamente se les suma a ra\u00edz de 4400 por d\u00eda.R\u00e1pidamente, su importancia alcanzar\u00e1 las mismas cuotas que la televisi\u00f3n o el tel\u00e9fono. Datos recientes estiman que hay alrededor de dos mil millones de p\u00e1ginas colgadas y se espera que en los pr\u00f3ximos a\u00f1os llegue a los ocho mil millones, excediendo el n\u00famero de habitantes del planeta. Sin embargo, solo una fracci\u00f3n de este n\u00famero es visitado habitualmente por la mayor\u00eda de los usuarios (solo alrededor de 15\u00a0000 sitios webs, el 0,4\u00a0% del total).A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para atraer y mantener la atenci\u00f3n de los usuarios. Junto con un desarrollo efectivo de la estructura web y del contenido, el dise\u00f1o y el uso del color son la llave para atraer y ser identificado, formando v\u00ednculos en el subconsciente del usuario y generar esquemas para captar y fidelizar a nuevos visitantes.Al mismo tiempo que la evoluci\u00f3n de los aparatos y de su introducci\u00f3n en los hogares, tambi\u00e9n ha aumentado la calidad de las transmisiones a trav\u00e9s Internet y ha bajado su precio. A medida que la tecnolog\u00eda ha solventado estas dificultades, ya no nos encontramos con problemas de forma sino de contenido.La \u00faltima versi\u00f3n de este lenguaje b\u00e1sico corresponde al HTML5, donde se introducen nuevos elementos que mejoran la navegaci\u00f3n y la usabilidad de los sitios web en los distintos navegadores, como por ejemplo el uso de , , , , ,  y .[2]\u200bEsta nueva versi\u00f3n no se trata solamente de cambiar y eliminar etiquetas. Va mucho m\u00e1s all\u00e1.En todo sitio web hay elementos que se utilizan. El encabezado (header), barras laterales (sidebars), el pie de p\u00e1gina (footer), los men\u00fas de navegaci\u00f3n (nav), se utilizar\u00e1n en esta nueva versi\u00f3n como etiquetas ya establecidas, brindando una mejora en la intuici\u00f3n para el desarrollo.As\u00ed mismo, una de las mayores mejoras es la utilizaci\u00f3n de “Canvas” o marcos de trabajo, que sirven para utilizar animaciones sin necesidad de instalar plugins ni usar un reproductor Adobe Flash para videos web, est\u00e1ndar considerado de facto. Esta opci\u00f3n es un gran avance, ya que Flash tiene grandes desventajas en los gr\u00e1ficos web, como que los motores de b\u00fasqueda no puedan leer el texto dentro, que pesan mucho y tardan en cargar. Al implementarse con canvas, se usar\u00e1 \u00fanicamente c\u00f3digo Javascript, aligerando el peso de la p\u00e1gina.Tambi\u00e9n quedan obsoletos algunos elementos del HTML 4, raz\u00f3n por la cual es conveniente repasar acerca de las novedades que incluye HTML5, cuyo lenguaje es regulado por W3C.Los CMS o sistema de gesti\u00f3n de contenido son plataformas web que estandarizan procesos y que permiten a los usuarios que no poseen mucho conocimiento t\u00e9cnico en lenguaje de programaci\u00f3n crear y maquetar contenido f\u00e1cilmente para su p\u00e1gina web a trav\u00e9s de un backend o gestor de contenido .Entre los CMS m\u00e1s completos y famosos del mercado encontramos a WordPress y Joomla. Detr\u00e1s de varios CMS existe una gran comunidad de desarrolladores de complementos o plugins que realizar trabajos espec\u00edficos como administraci\u00f3n de contenido. Estas plataformas son famosas por la versatilidad de dise\u00f1os que se pueden implementar a trav\u00e9s de plantillas. Lo cual por su parte abarata los costos de realizaci\u00f3n de la p\u00e1gina, ya que se elimina un eslab\u00f3n de la cadena de publicaci\u00f3n, el maquetador, y agrega la capacidad de replicar contenido con facilidad.El lenguaje de programaci\u00f3n utilizado normalmente por estas plataformas es PHP, HMTL5, CSS Java Script y JQuery. El usuario puede tener acceso a la programaci\u00f3n del sitio, lo cual vuelve muy vers\u00e1tiles a estas plataformas de creaci\u00f3n de contenido web. Son bastante escalables por su estandarizaci\u00f3n de contenidos y su gesti\u00f3n din\u00e1mica de usuarios y permisos .[3]\u200bDise\u00f1o web adaptable[editar]  El dise\u00f1o web adaptable (en ingl\u00e9s, responsive, a veces mal adaptado como \u00abresponsivo\u00bb) es una filosof\u00eda de dise\u00f1o web que tiene como objetivo adaptar una misma p\u00e1gina web a distintos tama\u00f1os de pantalla, dispositivos y orientaciones. Aunque el c\u00f3digo HTML que env\u00eda el servidor sea el mismo, la apariencia del sitio cambiar\u00e1 de acuerdo con las especificaciones (denominadas media queries) de las hojas de estilo en cascada CSS.[4]\u200bExperiencia de usuario en dise\u00f1o web[editar]La usabilidad web (UX o user experience, en ingl\u00e9s) es el grado de facilidad de uso que tiene una p\u00e1gina web para los usuarios que acceden e interact\u00faan con ella. Jacob Nielsen est\u00e1 considerado el padre de la usabilidad y, en 2000 lanz\u00f3 al mercado el libro Designing Web Usability: The Practice of Simplicity (1999) (ISBN 1-56205-810-X) [5]\u200b donde expone los 10 principios que deben regir la usabilidad de cualquier web[6]\u200b.Estos principios son:Visibilidad del estado del sistema. El sistema, es decir la web o aplicaci\u00f3n, siempre debe mantener en todo momento a los usuarios informados sobre lo que est\u00e1 sucediendo, a trav\u00e9s de mensajes en tiempo y forma.Coincidencia entre el sistema y el mundo real. El sistema debe hablar el idioma de los usuarios, con palabras, frases y conceptos familiares para el usuario y no con t\u00e9rminos t\u00e9cnicos.Control y libertad del usuario. Dar la posibilidad a los usuarios a corregir sus errores en la navegaci\u00f3n por la p\u00e1gina web.Consistencia y est\u00e1ndares. Los usuarios no deber\u00edan tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Uno de los grandes retos como dise\u00f1adores es saber usar de forma habitual las convenciones o recursos habituales de las p\u00e1ginas web.Prevenci\u00f3n de errores. Incluso mejor que los buenos mensajes de error es un dise\u00f1o cuidadoso que evita que nos equivoquemos. Un buen dise\u00f1o web debe eliminar las condiciones propensas a errores.Reconocimiento en lugar de recuerdo. Debemos minimizar en lo posible que el usuario haya de recordar de que ha hecho previamente haciendo visibles los objetos, las acciones y las opciones.Flexibilidad y eficiencia de uso. Los aceleradores, que no son vistos por el usuario novato, a menudo pueden acelerar la interacci\u00f3n para el usuario experto, de modo que el sistema puede atender tanto a usuarios inexpertos como experimentados.Dise\u00f1o est\u00e9tico y minimalista. En dise\u00f1o web menos es m\u00e1s. Debemos mostrar la informaci\u00f3n estrictamente necesaria para que el usuario no se pierda o marche. Debemos conducirlo por donde nos interesa.Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores.Ayuda y documentaci\u00f3n. Aunque es mejor si el sistema se puede utilizar sin documentaci\u00f3n, puede ser necesario proporcionar ayuda y documentaci\u00f3n.Johnson (2010) recapitula en la introducci\u00f3n de su libro Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules[7]\u200b algunos de los intentos que se han realizado a lo largo de la historia contempor\u00e1nea para establecer reglas que gu\u00eden el dise\u00f1o de interfaces de usuario aplicado a sistemas computacionales interactivos:Cheriton (1976)[8]\u200b propuso pautas de dise\u00f1o de interfaz de usuario para los primeros sistemas inform\u00e1ticos interactivos (de tiempo compartido).Norman (1983a[9]\u200b, 1983b[10]\u200b) present\u00f3 reglas de dise\u00f1o para interfaces de usuario de software basadas en la cognici\u00f3n humana, incluidos los errores cognitivos.Smith y Mosier (1986)[11]\u200b escribieron quiz\u00e1s el conjunto m\u00e1s completo de pautas de dise\u00f1o de interfaz de usuario.Shneiderman (1987) incluy\u00f3 “Ocho reglas de oro del dise\u00f1o de interfaz” en la primera edici\u00f3n de su libro Designing the User Interface[12]\u200b y en todas las ediciones posteriores.Brown (1988) escribi\u00f3 un libro de directrices de dise\u00f1o, titulado Human-Computer Interface Design Guidelines[13]\u200b.Nielsen y Molich (1990)[14]\u200b ofrecieron un conjunto de reglas de dise\u00f1o para su uso en la evaluaci\u00f3n heur\u00edstica de interfaces de usuario.Marcus (1991)[15]\u200b present\u00f3 directrices para el dise\u00f1o gr\u00e1fico en documentos en l\u00ednea e interfaces de usuario.Por otra parte, Garrett (2011) explica en su libro The Elements of User Experience: User-centered Design for the Web[16]\u200b que la implementaci\u00f3n de principios de experiencia de usuario al dise\u00f1o de sitios web, ya sean productos orientados a contenidos o aplicaciones interactivas, es particularmente importante debido a su naturaleza de auto-servico; es decir, que no cuentan con un “manual de instrucciones” o una “plataforma de servicio al cliente” dirigida espec\u00edficamente al aprendizaje de la navegaci\u00f3n e interacci\u00f3n de los usuarios con los contenidos desplegados, sino que dichas acciones se llevan a cabo de forma individual e intuitiva. Mientras m\u00e1s complicada sea la interfaz de cualquier sitio web, m\u00e1s dificultades tendr\u00e1n sus visitantes para navegar en ella, y como consecuencia, en palabras de Garrett, se sentir\u00e1n “incompetentes, est\u00fapidos, culpables”. El autor tambi\u00e9n establece que, si bien los usuarios no tienen la culpa de c\u00f3mo est\u00e9 configurada una p\u00e1gina en l\u00ednea, esa sensaci\u00f3n que les cause interactuar con ella ser\u00e1 la que determine si volver\u00edan a visitar ese sitio en el futuro, y por lo tanto, su \u00e9xito como producto digital.El libro divide la construcci\u00f3n de la experiencia de usuario de un sitio web en cinco grandes capas:Superficie: Conformada por elementos gr\u00e1ficos, como textos, fotograf\u00edas e ilustraciones. Pueden contener v\u00ednculos a otras partes dentro del mismo sitio web.Esqueleto: Es la posici\u00f3n establecida a los botones, controles, im\u00e1genes y bloques de texto dentro del espacio que ocupa la p\u00e1gina en una pantalla. Est\u00e1 dise\u00f1ado para optimizar la disposici\u00f3n de estos elementos y as\u00ed lograr la m\u00e1xima eficiencia al navegar en la web.Estructura: Es el despliegue conceptual de todas las funcionalidades incluidas en una p\u00e1gina web, y los contenidos que se quieren mostrar tras efectuar acciones concretas. Puede visualizarse como una ramificaci\u00f3n que contempla la uni\u00f3n de todos los elementos de un sitio con una operaci\u00f3n espec\u00edfica (por dar algunos ejemplos, la redirecci\u00f3n a una subp\u00e1gina, apertura de una nueva ventana, reproducci\u00f3n de v\u00eddeo o audio, etc\u00e9tera).Alcance: Es la definici\u00f3n de cu\u00e1les contenidos y funcionalidades se desean incorporar en una p\u00e1gina. Se determinan, entre otros factores, dependiendo del prop\u00f3sito que se persigue con la creaci\u00f3n del sitio web, y el tipo de usuarios a los que se desea llegar.Estrategia: Incluye no solo lo que las personas que administran un sitio quieren obtener de \u00e9l, sino tambi\u00e9n lo que los usuarios quieren obtener de su visita a la p\u00e1gina web. En otras palabras, es la determinaci\u00f3n de los objetivos que se quieren perseguir y los potenciales usuarios a los que se desean llegar por medio del dise\u00f1o e implementaci\u00f3n de un sitio en l\u00ednea.Si bien el funcionamiento correcto de las capas superiores depende en gran medida del planteamiento conceptual de las capas inferiores, su orden al momento de trabajar en ellas no es forzosamente lineal; muchas fallas detectadas en sitios ya terminados, seg\u00fan argumenta Garrett, se han dado por incoherencias entre el planteamiento inicial de la p\u00e1gina y el producto final. Para evitar contratiempos, y que los gastos de producci\u00f3n superen al presupuesto contemplado al principio de cada proyecto, \u00e9l recomienda no avanzar hacia el desarrollo de las capas superiores hasta haber terminado completamente de trabajar en las capas inferiores.V\u00e9ase tambi\u00e9n[editar]Referencias[editar]\u2191 Riojaweb. \u00abHistoria Web: 1992 con algo menos de 50 webs\u00bb. Consultado el 8 de diciembre de 2014.\u00a0\u2191 \u00abDise\u00f1o web: Definici\u00f3n e Historia\u00bb. Consultado el 19 de enero de 2016.\u00a0\u2191 \u00abQue es un CMS y su historia\u00bb. 18 de octubre de 2017.\u00a0\u2191 \u00abResponsive Web Design | Search\u00bb. Google Developers. Consultado el 17 de diciembre de 2018.\u00a0\u2191 Experience, World Leaders in Research-Based User. \u00abDesigning Web Usability: a Book by Jakob Nielsen\u00bb. Nielsen Norman Group (en ingl\u00e9s). Consultado el 26 de febrero de 2022.\u00a0\u2191 S\u00e1nchez Loro, Francesc (26 de febrero de 2022). \u00abDiferencia dise\u00f1o web vs dise\u00f1o gr\u00e1fico\u00bb. Consultado el 26 de febrero de 2022.\u00a0\u2191 Johnson, Jeff (2010). Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules (en ingl\u00e9s). Burlington, MA: Morgan Kaufmann. p.\u00a0xi. ISBN\u00a0978-0-12-375030-3.\u00a0\u2191 Cheriton, David Ross (1976). Man\u2013machine interface design for time-sharing systems (en ingl\u00e9s). Proceedings of the ACM National Conference. p.\u00a0362\u2013380.\u00a0\u2191 Norman, Donald Arthur (1983). \u00ab26(4)\u00bb. Design  rules  based  on  analysis  of  human  error (en ingl\u00e9s). Communications  of  the ACM. p.\u00a0254\u2013258.\u00a0\u2191 Norman, Donald Arthur (1983).  A.  Janda, ed. Design  principles  for  human\u2013computer  interfaces (en ingl\u00e9s). Boston, NY: Proceedings of the CHI-83 conference on human factors in computing systems.\u00a0\u2191 Smith, Sidney L.; Mosier, Jane N. (1986). Guidelines for designing user interface software (en ingl\u00e9s). Springfield, VA: National Technical Information Service. p.\u00a086-278.\u00a0\u2191 Shneiderman, Ben (1987). Designing  the  user  interface:  Strategies  for  effective  human\u2013computer interaction (en ingl\u00e9s) (1ra. edici\u00f3n). Reading, MA: Addison-Wesley.\u00a0\u2191 Brown, C. Marlin (1988). Human\u2013computer  interface  design  guidelines (en ingl\u00e9s). Norwood,  NJ: Ablex Publishing Corporation.\u00a0\u2191 Nielsen, Jakob; Molich, Rolf (1990). Heuristic evaluation of user interfaces (en ingl\u00e9s). Seattle, WA: Proceedings of ACM CHI\u201990 Conference. p.\u00a0249\u2013256.\u00a0\u2191 Marcus, Aaron (1991). Graphic  design  for  electronic  documents  and  user  interfaces (en ingl\u00e9s). Reading,  MA: Addison-Wesley.\u00a0\u2191 Garrett, Jesse James (2011). The Elements of User Experience: User-centered Design for the Web (en ingl\u00e9s) (2da. edici\u00f3n). Berkeley, CA: New Riders. p.\u00a010, 19-24. ISBN\u00a0978-0-321-68368-7.\u00a0 "},{"@context":"http:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/wiki.edu.vn\/es\/wiki01\/#breadcrumbitem","name":"Enzyklop\u00e4die"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/wiki.edu.vn\/es\/wiki01\/2017\/10\/30\/diseno-web-wikipedia-la-enciclopedia-libre\/#breadcrumbitem","name":"Dise\u00f1o web – Wikipedia, la enciclopedia libre"}}]}]