Diseo web

El diseo web es una actividad que consiste en la pla- computador, en papel, en un telfono mvil, etc).
nicacin, diseo, implementacin y mantenimiento de Estos documentos o pginas web pueden ser creadas:
sitios web. No es simplemente la implementacin del diseo convencional ya que se abarcan diferentes aspectos
Creando archivos de texto en HTML, Asp, Aspx,
como el diseo grco web, diseo de interfaz y expeJavaScript, JSP, Python, Ruby.
riencia de usuario, como la navegabilidad, interactividad,
usabilidad, arquitectura de la informacin; interaccin de
Utilizando un programa visual WYSIWYG o
medios, entre los que podemos mencionar audio, texto,
WYSIWYM de creacin de pginas.
imagen, enlaces, video y la optimizacin de motores de
Utilizando Script del lado del servidor, para generar
bsqueda. A menudo muchas personas trabajan en equila pgina web.
pos que cubren los diferentes aspectos del proceso de diseo, aunque existen algunos diseadores independientes
que trabajan solos.[1]

1.1 Etapas

Para el diseo de pginas web debemos tener en cuenta

tres etapas:
1. El diseo visual de la informacin que se desea editar. En esta etapa se trabaja distribuyendo el texto,
los grcos, los vnculos a otros documentos y otros
objetos multimedia que se consideren pertinentes.
Es importante que antes de 'escribir' la pgina web
se realice un boceto o prediseo. Esto facilitar tener un orden claro sobre el diseo.
2. Estructura y relacin jerrquica de las pginas del
sitio web. Para esto, y fundamentalmente para manejar los vnculos entre documentos, se cre el lenguaje de marcacin de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento
y otros de Wikipedia son ejemplos de hipertexto,
puesto que al pulsar sobre ellos conducen a otras pginas con informacin relacionada. La importancia
de la estructura y arborescencia web radica en que
los usuarios no siempre entran por la pgina principal o inicial y en ese caso el sitio debe darle la
respuesta a lo que busca rpido, adems permitirle
navegar por el sitio.

Wikipedia tiene su propio diseo Web

La unin de un buen diseo con una jerarqua bien elaborada de contenidos, aumenta la eciencia de la web como
canal de comunicacin e intercambio de datos, que brinda
posibilidades como el contacto directo entre el productor
y el consumidor de contenidos.
El diseo web ha visto amplia aplicacin en los sectores
comerciales de Internet especialmente en la World Wide Web. A menudo la web se utiliza como medio de expresin plstica en s. Artistas y creadores hacen de las
pginas en Internet un medio ms para ofrecer sus producciones y utilizarlas como un canal ms de difusin de
su obra.

3. Posicionamiento en buscadores o SEO. sta consiste

en optimizar la estructura del contenido para mejorar la posicin en que aparece la pgina en determinada bsqueda.

Diseo web aplicado

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 ningn tipo de formato y con extensin
.html o .htm). Aprender HTML es relativamente fcil,

El diseo de pginas web es la construccin de documentos de hipertexto para su visualizacin en diferentes navegadores. As como asignarle una presentacin para diferentes dispositivos de salida (en una pantalla de
1

2
as que es sencillo crear pginas web de este modo. Esta
era la nica 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
aconsejable), con lo cual el desarrollador se concentra en
lo ms importante, el diseo del documento.

3 HTML 5

1.3 Accesibilidad

El diseo web debe seguir unos requerimientos mnimos

de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor nmero de
personas. Para conseguir estos objetivos de accesibilidad
se han desarrollado pautas como las del W3C: Pautas de
Un buen diseo web es aquel que considera dentro de su accesibilidad al contenido Web 1.0 WCAG.a
desarrollo tanto los elementos bsicos del diseo grco (la diagramacin, el color, los grcos y las fuentes)
como los fundamentos tcnicos (estructura, compatibi- 2 Historia
lidad, funcionalidad e interactividad) para crear tanto el
impacto visual como la experiencia de usuario ptima paEn un principio era slo texto, pero a medida que ha evora la asimilacin del contenido.
lucionado la tecnologa, tanto los ordenadores como las
redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusin de imgenes fue
la ms signicativa, pero tambin debemos mencionar el
vdeo y la animacin, o los espacios 3D, lo que aporta
valores estilsticos, de diseo y de interactividad jams
1.2 Fundamentos
imaginados antes.
El diseo web implica conocer cmo se deben utilizar
cada uno de los elementos permitidos en el HTML, es
decir, hacer un uso correcto de este lenguaje dentro de
los estndares establecidos por la W3C y en lo referente
a la web semntica. 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 cdigo propietario, etc. Esto impide que ese
documento web sea universal e independiente del medio
que se utilice para ser mostrado.

El diseo de pginas web se ha desarrollado a medida que

ha evolucionado Internet. En 1992 slo haba alrededor
de 50 sitios web.[2] Estadsticas (2005) nos armaban que
la cantidad de sitios web ronda los 8000 millones de sitios,
a los que diariamente se les suma a raz de 4400 por da.[3]

Rpidamente, su importancia alcanzar las mismas cuotas que la televisin o el telfono. Datos recientes estiman
que hay alrededor de dos mil millones de pginas colgadas y se espera que en los prximos aos llegue a los ocho
mil millones, excediendo el nmero de habitantes del planeta. Sin embargo, slo una fraccin de este nmero es
visitado habitualmente por la mayora de los usuarios (sLa web semntica, por otra parte, aboga por un uso lgico lo alrededor de 15 000 sitios webs, el 0,4 % del total).
de los elementos segn el signicado para el que fueron
A partir de estos datos se puede entender la necesidad de
concebidas. Por ejemplo se utilizar el elemento <P> paconcentrar los esfuerzos para atraer y mantener la atenra marcar prrafos, y <TABLE> para tabular datos (nuncin de los usuarios. Junto con un desarrollo efectivo de
ca para disponer de manera visual los diferentes elemenla estructura web y del contenido, el diseo y el uso del
tos del documento). En su ltima instancia, esto ha sucolor son la llave para atraer y ser identicado, formando
puesto una autntica revolucin en el diseo web puesto
vnculos en el subconsciente del usuario y generar esqueque apuesta por separar totalmente el contenido del domas para captar y delizar a nuevos visitantes.
cumento de la visualizacin.
Al mismo tiempo que la evolucin de los aparatos y de
De esta forma se utiliza el documento HTML nicamensu introduccin en los hogares, tambin ha aumentado la
te para contener, organizar y estructurar la informacin
calidad de las transmisiones a travs Internet y ha bajado
y las hojas de estilo CSS para indicar como se mostrasu precio. A medida que la tecnologa ha solventado esr dicha informacin en los diferentes medios (como por
tas dicultades, ya no nos encontramos con problemas de
ejemplo, una monitor de computadora, un telfono mvil,
forma sino de contenido.
impreso en papel, leda por un sintetizador de voz, etc.).
Por lgica, esta metodologa benecia enormemente la
accesibilidad del documento.
Tambin existen pginas dinmicas, las cuales permiten
interaccin entre la web y el visitante, proporcionndole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de control de
administracin de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en
la misma.

3 HTML 5

La ltima versin de este lenguaje bsico corresponde al

HTML5, donde se introducen nuevos elementos que mejoran la navegacin y la usabilidad de los sitios web en los
distintos navegadores, como por ejemplo el uso de <canvas>, <video> o <footer>.

3
Esta nueva versin no se trata solamente de cambiar y
eliminar etiquetas. Va mucho ms all.
En todo sitio web hay elementos que se utilizan. El encabezado (header), barras laterales (sidebars), el pie de
pgina (footer), los mens de navegacin, se utilizarn en
esta nueva versin como etiquetas ya establecidas, brindando una mejora en la intuicin para el desarrollo.
As mismo una de las mayores mejoras es la utilizacin
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, estndar considerado de facto. Esta opcin es un gran avance, ya que
Flash tiene grandes desventajas en los grcos web, como
que los motores de bsqueda no puedan leer el texto dentro, que pesan mucho y tardan en cargar. Al implementarse con canvas, se usar nicamente cdigo Javascript,
aligerando el peso de la pgina.
Tambin quedan obsoletos algunos elementos del HTML
4, razn por la cual es conveniente repasar acerca de las
novedades que incluye HTML5, cuyo lenguaje es regulado por W3C.

Vase tambin
Diseo web adaptativo
WAI
World Wide Web Consortium
Accesibilidad web
W3C
Posicionamiento en buscadores
Dominio de Internet
Alojamiento web
Correo corporativo

Referencias

[1] Dierent jobs and responsibilities of various people involved in creating a website. Arts Wales UK. Consultado
el 17 de marzo de 2012.
[2] Riojweb. Historia Web: 1992 con algo menos de 50
webs. Consultado el 8 de diciembre de 2014.
[3] Dropmedia. En 2005 se creaban 4400 sitios por da.
Consultado el 29 de agosto de 2015.

6 Enlaces externos
Esta obra contiene una traduccin parcial derivada de Web design de Wikipedia en ingls, concretamente de esta versin del 18 de septiembre de
2015, publicada por sus editores bajo la Licencia de
documentacin libre de GNU y la Licencia Creative Commons Atribucin-CompartirIgual 3.0 Unported.

7 ORIGEN DEL TEXTO Y LAS IMGENES, COLABORADORES Y LICENCIAS

Origen del texto y las imgenes, colaboradores y licencias

7.1

Texto

Diseo web Fuente: https://es.wikipedia.org/wiki/Dise%C3%B1o_web?oldid=95824622 Colaboradores: Sabbut, JorgeGG, 100luz, ManuelGR, Vanbasten 23, Sanbec, Napaboy, Dionisio, Dodo, Ejmeza, Ascnder, Rsg, Cookie, Tano4595, Barcex, Daniel G., Chalisimo5,
Zerjillo, Alexisb~eswiki, Cinabrium, Periku, Ecemaml, Koermejia, Mnts, FAR, Lmsilva, Petronas, Hispa, Airunp, Edub, Yrithinnd, Taichi, Rembiapo pohyiete (bot), Magister Mathematicae, Orgullobot~eswiki, Francosrodriguez, Alhen, Superzerocool, Yrbot, Baito, BOTSuperzerocool, .Sergio, YurikBot, Dark512, Mortadelo2005, Icvav, Lin linao, Equi, Darko Freeman, Santiperez, FedericoMP, HECTOR
ARTURO AZUZ SANCHEZ, Er Komandante, Bolico, Santiagocapel, Tomatejc, Chero07, BOTpolicia, Gizmo II, CEM-bot, Cantero,
Laura Fiorucci, Geminuska, -jem-, Valdrik, Jjvaca, Baiji, Eamezaga, Antur, Fache, Gafotas, Montgomery, FrancoGG, Kaime, Alvaro qc,
Un Mercenario, Promocionwebperu, Yeza, RoyFocker, Leandroidecba, Albireo3000, Locovich, Kasador one, Rafadose, LMLM, Guille,
Isha, Gragry, Gngora, Heckennedy, JAnDbot, Pipistrela, Kved, Nelson medina, CommonsDelinker, Der metzgermeister, Gacq, Humberto, Netito777, Fixertool, ZrzlKing, Nioger, Bedwyr, Plux, InesBlanco, DonBarredora, Delphidius, Xparq, Bucephala, Calvia, Ana1976,
VolkovBot, Seoxinc, Technopat, C'est moi, Queninosta, Erl, Matdrodes, House, BlackBeast, Shooke, Lucien leGrey, Luis1970, ZeDGyGa, Kirby.caco, SieBot, Ctrl Z, Luiseduardoquintero, Cobalttempest, Mel 23, Antonioagc, McOil, Carolina.cruz, Tirithel, XalD, Javierito92, HUB, Lfjaimesb, Nicop, Farisori, Eduardosalg, Veon, Nuvilo, Leonpolanco, Alejandrocaro35, Botito777, LordT, Petruss, Rge,
Codj1987, Frei sein, Raulshc, Aipni-Lovrij, Ouali benmeziane, SilvonenBot, Insight, Camilo, UA31, Heallo, AVBOT, David0811, Louperibot, Adelpine, Angel GN, Diegusjaimes, Davidgutierrezalvarez, Adamsrr, Linfocito B, Arjuno3, Andreasmperu, Luckas-bot, SpiritBlack-Wikipedista, Wikisilki, Aquila ltda, Lebranzy, Enrique Suarez Infante, S J, Djdescu, Caregz, LordboT, Tknologyk, Dangelin5, Bsea,
Jorssa, Xim21, Sakhal~eswiki, Martinezclaret, Sistecnologia, SuperBraulio13, Manuelt15, Xqbot, Jkbw, Thestrike, Axtribeat, Rubinbot,
Killyam, Dan6hell66, Eduardo Vinhas, Zeoroth, Igna, Torrente, Claretm, Botarel, Panderine!, Nachotazz~eswiki, Kwarwer, Miswebamigas, DixonDBot, Francisco medea, Remiserostudio, Pownerus, Ideasmax, PatruBOT, Desing2009, Yago AB, Maxi Varas, KamikazeBot,
Apendata, Cecilia T, Ripchip Bot, Pabloatienza, Tarawa1943, Foundling, Miss Manzana, Edslov, EmausBot, Savh, Sebachia, Sergio Andres Segovia, J. A. Glvez, Argentivora, Wesia, Grillitus, NewWweb, Oguirado, Jcaraballo, ChuispastonBot, MadriCR, Red-esign, Gilipollas123456, Jesuitas, Any Rand, WikitanvirBot, Mjbmrbot, Creando Webs, Samuelfernandez, Oliver0796, Hitechmexico, Antonorsi,
Djshaul, Daaviid37, Lucasjaime, AmericaInternet, Sebrev, Www.GrupoDSP-com, YekoRsm, Invadibot, Gusama Romero, Igiha, Aluscreativos, Odlawsomks04, Arianor, LlamaAl, Elvisor, Pinscher miniatura, DanielithoMoya, Helmy oved, Izero, Urbon, 2rombos, Syum90,
Miguras, MaKiNeoH, Diego nc89, Ainhoajulian, Addbot, Historyje, Balles2601, Cristian9921237, Dcsplace2013, Cedeweb, Jonatha Plua
Choz, Mariana Fosego, Juanmisan2001, Edwinjesus96, Bigarabi, Dayohu, Gastonfc, Employerspain15, Kako s69, Fernixdv, Miguelortega24, JhonnyAlvarez, Jarould, Bruno Rene Vargas, Valrorich, XIME GUZMAN, Duvadearco, Wolabarrieta, Romisharo, PalabraSabia,
INNPERUWEB, Ipmadoaxaca, Benitoargentina, Almamariarico, Mariobeneti4, Kinetikox, EmpresaSEO, Grabado, Agonzale21, Guiem
Duran, TyPetinson, Josemimel, Sergio Hernndez Lpez, TheMatrixNeo, Ramirezsur, Ramonhernandez1720, Ks-M9, Obregonbeat1, Tatiana liceth sifuentes, Mariamar87, Lepervows766, Joanisern, Luifhers81, Javzero1, Sebasorellana1980, Danny2001ve, PEDRO ALEXANDER VILLALOBOS RODAS, Bedefy, Cotelani, JaimeWired, Paula gon y Annimos: 543

7.2

Imgenes

Archivo:Commons-emblem-question_book_orange.svg
Fuente:
https://upload.wikimedia.org/wikipedia/commons/1/1f/
Commons-emblem-question_book_orange.svg Licencia: CC BY-SA 3.0 Colaboradores: <a href='//commons.wikimedia.org/wiki/File:
Commons-emblem-issue.svg' class='image'><img alt='Commons-emblem-issue.svg' src='https://upload.wikimedia.org/wikipedia/
commons/thumb/b/bc/Commons-emblem-issue.svg/25px-Commons-emblem-issue.svg.png' width='25' height='25' srcset='https:
//upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Commons-emblem-issue.svg/38px-Commons-emblem-issue.svg.png
1.5x,
https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Commons-emblem-issue.svg/50px-Commons-emblem-issue.svg.png 2x'
data-le-width='48' data-le-height='48' /></a> + <a href='//commons.wikimedia.org/wiki/File:Question_book.svg' class='image'><img
alt='Question
book.svg'
src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Question_book.svg/25px-Question_
book.svg.png' width='25' height='20' srcset='https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Question_book.svg/
38px-Question_book.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Question_book.svg/50px-Question_
book.svg.png 2x' data-le-width='252' data-le-height='199' /></a> Artista original: GNOME icon artists, Jorge 2701
Archivo:Wikipedia_tiene_su_propio_diseo_Web.PNG Fuente: https://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_
tiene_su_propio_dise%C3%B1o_Web.PNG Licencia: CC BY-SA 4.0 Colaboradores: http://alcalink.com Artista original: David

7.3

Licencia del contenido

Creative Commons Attribution-Share Alike 3.0