Manual de Proyectos Web · 2015-02-24 · Web 2.0, lo que conlleva más que realizar alguna...
Transcript of Manual de Proyectos Web · 2015-02-24 · Web 2.0, lo que conlleva más que realizar alguna...
ManualdeProyectosWeb
EscuelaSuperiordeEconomíayNegocios
Volumen3–DiseñoWeb
PreparadoporIng.FelipeTorresDecanodeIngenieríaIndustrialydeNegocios
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
2|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
IntroducciónEste documento conforma parte de una serie de artículos que han sido preparados como material
académico para el concurso Arroba de Oro y conforman un manual para desarrollar las mejoresprácticasylograrimplementarestándaresdeclasemundialenlosproyectoswebydejarcimientosparalosfuturosdesarrollosweb.
Este manual cubre aspectos administrativos de proyectos y mejores prácticas para la formación del
equipodetrabajo,desarrolloadecuadode lostérminosdereferenciay licitacióndeldesarrolloweboconstruccióndelaaplicacióninternamente.
Se introducen conceptos de vanguardia en el diseño, desarrollo e implementación de proyectoswebasociados a la llamadaWeb 2.0, lo que conllevamás que realizar alguna inversión tecnológica en el
programa , pero escuchar y, sobre todo, conversar y relacionarse con los usuarios. Conlleva unatransformacióntotaldelaculturaactualdelosclientesousuariosdelosproductososerviciosofrecidospor la Internet. Atributos derivados de las nuevas tecnologías, como rapidez, colaboración y
transparencia, afectarán a la tomade decisiones del programa. Las propuestas pasarán de generarseexclusivamenteentre laspersonasque formanpartedelequipodirectivoadarentradaaempleados,proveedoresyhastaclientesenlosprocesosestratégicosdedecisión.
La irrupciónde lasnuevastecnologíassociales (blogs,wikis,podcast,redessociales,etc.)hagenerado
un alto grado de interconectividad entre las personas, lo que les permite intercambiar todo tipo deopiniones sobre diferentes productos, servicios y experiencias con otras personas. Cada día más laspersonas toman decisiones de compra de productos o servicios orientados o motivados por la
información que encuentra en la web social. Las empresas deben tener muy presente que lasconversacionesyrecomendacionesquetienenlugarenlawebsocialocupanyamásdel15%deltráficoenInternet.
Estemanualademáspresentalasherramientasconcretasparaverificar lacorrectaimplementaciónde
todoslosestándaresasociadosalosnuevosproyectosweb,asítambiéncomopruebasespecíficasparacontrolaryauditarlostérminosdereferenciaestablecidosenlaetapainicialdelproyecto.
Elsiguientemanualhasidocompiladoenbaseaunaseriederecursosdisponiblespublicamenteenlawebycitadosen lasreferenciasdecadadocumento.Lacompilacióndelmaterialhasidodesarrollada
por el departamento de Ingeniería Industrial y de Negocios de la Escuela Superior de Economía yNegocios(ESEN).
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
3|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Contenidos
Introducción ........................................................................................................................................ 2
4.DiseñoWeb ..................................................................................................................................... 4
4.1.¿Quéesunainterface?......................................................................................................................4
4.1.1.Elementosdelainterfaz.............................................................................................................5
4.1.2.Usodelogotipos.........................................................................................................................7
4.1.3.Sistemadenavegación ...............................................................................................................7
4.1.4.Áreasdecontenidos ...................................................................................................................8
4.1.5.Áreasdeinteracción...................................................................................................................9
4.1.6.Experienciadeusuario ...............................................................................................................9
4.2.DiseñoparaelAccesoRápido .........................................................................................................11
4.2.1.BuenasPrácticas.......................................................................................................................12
REFERENCIAS ..................................................................................................................................... 22
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
4|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
4.DiseñoWebSeentiendepordiseñowebelconjuntodeactividadesquepermitenavanzardesdeelconceptoquesedefinaparaelSitioWebhastasurealización,porloquenosóloestáreferidoalastareasrelacionadas
con el diseño gráfico, sino que también aborda otras como las definiciones relativas a usabilidad,interacción,ytambiénatodaslasqueestánrelacionadasconloscontenidospropiamentetales.
EnéstasecciónexplicamoslaimportanciaderealizarundiseñodelaspáginasdelSitioWebdeacuerdoanormasestándaresya la importanciaquese ledebeconcedera laexperienciaquetieneelusuario
quelovisita.
Incluye además información de buenas prácticas sobre accesibilidad y para administrar laretroalimentación proporcionada por los usuarios, además demetodologías para realizar pruebas deusuariosorientadasamejorarelsitio.
EsimportanteseñalarquelaclavedeléxitodeunSitioWebestádadaporlaformaenquesepresenta
lainformaciónalosvisitantes.Porelloesqueenestecapítuloseabordanloselementosnecesariosparaque,durantelacreacióndelasinterfacesdelosSitiosWeb(laspantallasqueelusuarioveyutiliza),secumplacondichospreceptosylacomunicaciónfluyamásdirectamenteentreelorganismoyelusuario
final.
4.1.¿Quéesunainterface?Cuando se habla de Sitios Web, se denomina interfaz al conjunto de elementos de la pantalla quepermitenalusuariorealizaraccionessobreelSitioWebqueestávisitando.Porlomismo,seconsiderapartedelainterfazasuselementosdeidentificación,denavegación,decontenidosydeacción.
Todosellosdebenestar preparadosparaofrecer serviciosdeterminados al usuario, conel findeque
ésteobtengaloquevinoabuscarcuandovisitóelSitioWeb.Porloanterior,cadaunodeloselementosqueseanintegradosdentrodelainterfazdebeestarpensadoparacausarunefectosobreelusuarioy
debenserutilizadosconunpropósito.
Enestesentido,esimportanteconsiderarqueunodelosautoresmáscitadosencuantoalausabilidadde los SitiosWeb, destaca que los elementos más importantes de la portada de todo SitioWeb sepuedenresumirencuatropostuladosgenerales:
1. Dejarclaroelpropósitodelsitio:serefiereaqueelsitiodebeexplicaraquiénperteneceyqué
permitehaceraquieneslovisitan;seentiendequedebehacerlodemanerasimpleyrápida.Porejemplo, ayuda en este sentido el cumplimiento de las normas referidas a uso de URLs ylogotiposoficiales.
2. Ayudaralosusuariosaencontrarloquenecesitan:implicaquedebecontarconunsistemadenavegación visible y completo, pero que además deberá estar complementado por algúnsistemadebúsquedaqueseaefectivoparaaccederalcontenidoalquenose lograaccedero
quenoseencuentraasimplevista.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
5|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
3. Demostrarelcontenidodelsitio:significaqueelcontenidosedebemostrardemaneraclara,con títulos comprensibles por parte del usuario y con enlaces hacia las seccionesmásusadas
que estén disponibles donde el usuario los busque. Ayudará en este sentido tener unseguimientodelasvisitasparacomprenderquéeslomásvistoylomásbuscadodelSitioWeb.
4. UsardiseñovisualparamejorarynoparadefinirlainteraccióndelSitioWeb:serefiereaque
loselementosgráficosdel SitioWebdebenestarpreparadosparaayudaren losobjetivosdelsitio y no sólo como adornos utilizados para rellenar espacio. Aunque se trata de uno de lostemasmásdebatibles,sualcancenoeselderestringirelusodeimágenesyelementosgráficos,
sinoaquesuusoseaadecuadoparalaexperienciadeusoquesedeseaofrecer.
Como se puede apreciar, el foco central de una interfaz es permitir que el usuario que llega comovisitantelogrelosobjetivosquelotrajeronalSitioWebyqueéstalefaciliteelaccesoaloscontenidosqueestánincorporadosatravésdesuspantallas.
Paraconseguiresto,esnecesarioquelainterfazadopteloselementos,quedetallamosenestecapítulo,
atravésdeloscualesseráposibleconseguirelcumplimientodelospostuladosantesseñalados.
4.1.1.ElementosdelainterfazLainterfazdelSitioWeb,cualquieraseaelobjetivoquepersiga,debedarcuentadenormasdecaráctergeneral,quese refierena suscaracterísticascomosistemade informaciónycomunicación.Graciasalcumplimiento de éstas, el usuario logrará acceder a las informaciones que se le ofrecen y, además,
podrá realizar las acciones que el organismo dueño del espacio digital le entrega a través de estesistema.
Dichascaracterísticastienenqueverconloselementosdeidentificación,denavegación,decontenidosydeacciónqueelSitioWebdebecontener,todosloscualesseanalizanenlassiguientespáginas.
Laexistenciae importanciadedichoselementos, comoasímismo laubicaciónquedeben teneren la
interface,sehavistocomprobadaatravésdelasinvestigacionesquesehanhechoentornoalosSitiosWeb. Con ellas se demuestra que las zonas que normalmente se ven en una visita inicial, estánconformadasporunaletraFobienporuntriángulo,cuyasecciónmásrevisadaeslaqueseencuentra
en la esquina superior izquierda. Lo anterior se aprecia en esta imagen tomada del SitioWeb de laconsultoradeJakobNielsen:
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
6|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Figura3.1.:LasimágenesmuestranlomásvistoenlosSitiosWebapartirdelasinvestigacionesdeJ.Nielsen;loscoloresrojosy
amarilloindicanlomásvisto;azulygris,lomenosvisto(Copyrightimagen:www.useit.com).
Porloanterior,esimportantequelasinterfacesseconstruyantomandoencuentaestaevidencia,conel
findeasegurarquelosvisitantesrecibanlainformaciónencuantolleguenalSitioWeb,permitiendoqueeldiseñowebcontribuyaalmejorusodeloscontenidosyfuncionalidad,enlugardeafectardichouso.
Respectodeloselementosdelainterface,losaspectosmásrelevantesatenerenconsideraciónsonlossiguientes:
• Usodelogotipos
• Sistemadenavegación• Áreasdecontenidos• Áreasdeinteracción
• Experienciadeusuario
Siserevisaelsiguienteesquema,sepodráverlaubicaciónrelativadetodosellos:
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
7|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Figura3.2.:Laimagenmuestraundiagramaconlosdiferenteselementosquedanformaalainterfaz.
4.1.2.UsodelogotiposUno de los fines del uso de logotipos es que el usuario que ingrese al Sitio Web entienda a quiénpertenece el SitioWebdeun solo vistazo y no tengaque estar adivinando si ha llegado al lugar quedeseabavisitar.Paraenfatizarenesto,esrecomendablequeellogotipodeidentificaciónseubiqueenla
esquina superior izquierda de las páginas por tratarse del lugar que siempre se mira con la mayorfrecuenciayque,porlaformamástradicionaldeconstruccióndelcódigoHTML,aparecerácomounodelosprimeroselementosdelapantalla.
Siguiendocon la identificacióndelSitioWeb,otroelementoqueayudaenesteaspectoeselcorrecto
usodelaetiqueta<title>enlacabeceradelaspáginasweb,atravésdelacualsedefineeltítuloquemostrará el Sitio Web en la parte superior de la ventana del browser utilizado. En las imágenesanterioressepuedeapreciaren labarraazulqueapareceal topedecada imagen.Enestesentidose
recomiendaque lleve el nombredel SitioWebmásun título quedescriba el contenidode la página,debidoaquedichainformaciónserálaqueaparezcaenlosbuscadorescuandosemuestreelenlacealusuarioquebuscaalgunapalabraofrasequetengadichapágina.
4.1.3.SistemadenavegaciónSedenomina"sistemadenavegación"alconjuntodeelementospresenteencadaunadelaspantallas,que permite a un usuario moverse por las diferentes secciones de un SitioWeb y retornar hasta la
portada,sinsentirlasensacióndehaberseperdidoenesecamino.
Paraconseguiresteobjetivoeldiseñowebdebecontemplar,almenos,queel sistemadenavegacióncuenteconlossiguienteselementos:
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
8|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
• Menúdesecciones:esunazonadelainterfazenlaquesedetallanlasseccionesocategoríasenlasqueestádivididalainformacióncontenidaenelSitioWeb.Normalmenteseubicaenlaparte
superiordecadapáginaobienenlazonasuperiorderechaoizquierda.Hastalaaparicióndelosúltimos estudios basados en "eyetracking" no había una recomendación certera acerca de suubicación; tras éstos, parece indicado ubicarlos en la zona superior o en la zona superior
izquierda.Menú de rastros: es el menú que indicamediante los nombres de cada sección ocategoríadelmenú, ladistanciaqueseparaa lapáginaactualdelaportada.Porejemplo,sielusuario está revisando la página del "Programa A", el menú correspondiente debe indicar
Portada>Programas>"ProgramaA".EstemenúdebeirsiempredebajodelaIdentificacióndelasecciónocategoríaysobreeltítulo.
• Identificacióndesecciones:debeestarenlazonasuperiordelapágina,demaneracercanala
zonadondeseencuentraellogotipoquesehayaelegidoparaidentificaralSitioWeb.Puedesergráfico y por lo mismo tener alguna imagen alusiva a la sección o categoría o bien ser unasoluciónque incorpore sólo texto y color. Sí debe tener en formadestacada el nombrede la
sección o categoría y por lomismo, debe aparecer en todas las pantallas que pertenezcan adichaésta.Entérminosdetamaño,suanchodebesereldelazonadecontenidoysualto,nomenora100pixeles(aproximado)paraunaadecuadavisualización.
• Botonesdeacción:sonaquelloselementosquepermitenrealizaraccionesdirectasrelativasalanavegaciónyquesemuestrancomopartedeésta,talescomoloscorrespondientesa"RegresoalaPortada","Contacto","EnvíodeMailalSitio"y"MapadelSitio".
• Piedepágina:aunqueregularmentenoseleconcedeimportanciaentérminosdenavegación,seentiendequelazonainferiordecadapantallacumpleelrelevantepapeldecompletarsula
informaciónqueseofreceenlaszonassuperioresdenavegación,alentregardatosrelativosalaorganización(nombre,direcciones,teléfonos)yrepetirenlacesquesehanentregadoenlazonasuperior,parafacilitarelcontactodelusuarioconelsitio.
4.1.4.ÁreasdecontenidosSeentiendepor"áreasdecontenidos"a laszonasen laqueseentrega la informaciónencadapáginaweb,sinimportarelformatoolosmediosqueéstautilice.
Dentro de la zona de contenido se debe distinguir las zonas de título, resumen e información
propiamentetal.
Para la zona de título, se debe trabajar con las estructuras definidas por las etiquetas <h...> quepermiten indicar hasta seis niveles de importancia de los titulares (incluyendo títulos y subtítulos)utilizadoseneldocumento.Es imprescindibleparaefectosdeAccesibilidadporpartedepersonascon
discapacidadesfísicas,enparticularparaquienestienenproblemasdevisión,queeltítuloprincipaldelcontenidoseescribausandolaetiquetaHTMLconocidacomo<h1>debidoaqueloslectoresdepantallausadaporpersonasciegaslodestacancomoeltítuloprincipaldelapágina.
Elresumenentanto,permitiráexplicarendosotreslíneaselcontenidodelapáginaysepodráutilizar
esamismainformaciónparalaetiquetadelencabezadoquepermiteincluirunadescripción.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
9|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Respecto del contenido o información propiamente tal, se debe privilegiar el uso de textos cortos,separadosporsubtítulossignificativosquepermitanentregardemaneraconcisayclarealainformación
al usuario. Se debe recordar que las personas no leen en pantalla de la misma forma que en losdocumentosimpresos,porloquesedebeprivilegiarlaeconomíadepalabras.
Adicionalmente, como parte de los contenidos, siempre se deberá ofrecer información adicional,recursosmultimediales yotrosqueaprovechenelhechodequeelusuarioaccedea la informacióna
través de un sistema computacional.Nuevamente, se debe recordar que los contenidos que no seantextualesdeberáncumplirconlasnormasdeaccesibilidadrecomendadasporelW3C.
4.1.5.ÁreasdeinteracciónSeentiendepor"áreasdeinteracción"alaszonasenlaqueseofrecerealizacióndeaccionesporpartede losusuariosdel SitioWeb,a travésde las cualespuedenutilizar los serviciosde la instituciónque
pone en marcha el espacio digital. La interacción, en este sentido, va desde acciones menores quepuedenserenlacesparamayor informaciónosuscripciónaservicios informativosperiódicos,hasta larealizacióndetrámitescomplejoscomolaobtencióndecertificadosoelpagodeobligaciones.
Uno de los elementos que se debe tener en cuenta en este aspecto es que el usuario normalmente
entiendequelaszonasdecontenidossonparaleeryrevisarinformaciónylaszonasdeinteracciónsonlas que muestran botones y en ellas no se lee, sino que se ingresa información y se desarrolla laactividadqueelsitioofrecellevaracabo.
Por lomismo,esnecesarioqueen laszonasde interacciónhaya lamínima informaciónposibleyque
siempresealanecesariaparallevaracaboenformaadecuadalaacciónaqueserefierelainterfaz.
Por ejemplo, debido a que normalmente la interacción tendrá lugar a través de un formulario, esnecesario que éste sólo cuente con los datosmínimos para que el usuario ingrese lo solicitado paraactivarlo.
4.1.6.ExperienciadeusuarioSeentiendepor"Experienciadeusuario"a loquesienteyexperimentaunusuarioqueingresaacadapáginaweb.Sibiennoes fácildemediryadquiereuntonosubjetivoalhablardesensación, síesun
elemento que se puede modelar gracias al uso de diferentes elementos que son empleados por elusuarioquevisitaelSitioWeb.
Ademásdeseruncampodeestudiomuyabordadodesdediferentesdisciplinas,eláreadeExperienciadeusuarioharecibidoaportesmuynotablesenelúltimotiempograciasalaintroduccióndetecnologías
deseguimientodelasaccionesdelusuarioenunSitioWeb,talescomolasde"eyetracking"mencionadaantesquehanpermitidoentenderdemanerarealyconcretalamaneraenquelosusuariosempleanlosespaciosdigitales.
Enestesentido,sehaobservadoquelosusuariosnecesitanconfirmacionesvisualesdelaspercepciones
que tienende los contenidosque revisan.Porejemplo, lautilizacióndeun lenguajeclarogeneraunatasa de respuestamás alta que cuando el lenguaje utiliza palabras que no son tan conocidas para el
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
10|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
usuario.Lomismoocurrecuandoloselementosinteractivoscomoenlaces,botonesyzonasdeingresodeinformaciónnosediagramanconlasformasalasqueelusuarioestáacostumbrado.
Debidoaloanterior,acontinuaciónseentregaránrecomendacionesacercadetreselementosqueson
clavesen laexperienciaquetieneelusuarioyqueseutilizancongranfrecuencia:nosreferimosa losenlaces,botonesyformularios.
Usodebotones
LosbotonessonloselementosquepermitenqueelusuariorealiceoconfirmeaccionessolicitadasenlaspantallasdelSitioWeb.Porlomismo,suformadebeserestándar,similarentodoelsitioynoofrecer
dudasacercadesupresenciaodelaacciónalaqueinvita.
Paraelloesnecesarioquesecuidetantosuaspectofísicocomolapalabraquecontiene,yaqueambospermitiránqueelusuarioentienda,sinlugaradudas,quéocurrirásilopresiona.
Otro elemento importante es la palabra que acompaña al botón. Esta necesariamente debe estarrelacionadaconlaacciónarealizarydichaaccióndebesercoherenteconloqueseofreceenlapantalla
enlaqueseestétrabajando.Además,debeserunasolapalabraycorresponderaunverboquedefinaadecuadamentelaacciónofrecida.
Finalmenteelúltimoelementorelevanteesqueelbotóndebecambiardeestadocuandoelmouseestásobreél,utilizandoalgunatecnologíaquehagaevidentesucomportamientocomobotónactivo.
En conclusión, para que un formulario sea efectivo y apoye la experiencia que tendrá el usuario que
visiteelSitioWeb, losbotonesdebenparecertales(entamaño,forma,acciónycontenido)ydeberánestarubicadosdemaneraqueelusuariosepaquéocurrirácuando lospresione.Asimismo,debenserparte integrante de formularios que logren indicar en una frase breve y explicativa, qué ocurrirá al
utilizarlos.
Usodeenlaces
LosenlacessonunadelascaracterísticasesencialesdelosSitiosWeb,yaquepermitenalusuariovisitarotrosdocumentosdelmismooexternos,sólohaciendoclicsobreunazonademarcada.Enestesentido,
sibienelestándarindicaqueelenlacedebesersubrayadoydecolorazul,loscambiostecnológicoshanpermitirquehayaotrasformasdehacerlosevidentes.
No obstante, hay ciertos elementos que siguen siendo esenciales respecto de los enlaces y son lossiguientes:
1. Deben ser diferentes al texto: los enlaces se deben diferenciar del texto que los rodea para
explicarvisualmentealusuarioqueseofreceunaacciónapartirdesucontenido.Laformadediferenciarlo puede variar pero al menos se debe procurar que esté subrayado y de colordiferenteobien,sinoestásubrayado,sísedebemostrarenotrocolor.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
11|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
2. Suestadodebeservisual:losenlacestienencuatroestadosposibleslosquedebenvisualizarsedemanerasimpleydirecta.
a. Enlacesinvisitar:eselcolorquetieneantesdequeselehagaclicencima;sucolordebeserdiferentedeltextoquelorodea.
b. Enlacedestacado:eselcolorquepuedeadoptarcuandose lepasaelmousesobreel
enlaceypermiteayudaralusuarioadescubrirsuexistencia.c. Enlace activo: es el color que tiene cuando se le da clic encima; normalmente es un
colorfuertequepermitenotarqueselehaactivado.
d. Enlacevisitado:eselcolorquetieneelenlacecuandoyahasidoactivadoylapáginaalaqueconduceyahasidovisitada.
3. Su contenido debe ser explicativo: los enlaces deben contener palabras que expliquen hacia
dóndesedirigelaacción,detalmaneradeevitarqueloenlazadoseanfrasescomo"clicaquí"yotrassimilares.Adicionalmenteyparaefectosdeaumentarsuaccesibilidad,lasintaxisHTMLdelosenlacesdebecontenerelmodificador"title"de talmaneraquesedespliegueunrecuadro
explicativoacercadelefectoquetendráhacerclicsobreelenlaceelegido.
Usodeelementosespecíficos
LosrestanteselementosinteractivosquerequierenserrevisadossonlosquepermitendefinireltipodeinteracciónquesedeseaofreceralosusuariosdelSitioWeb.
El primero de ellos es el llamado "Text Area" que es el que permite que el usuario pueda ingresarinformación en los formularios. Respecto de éste, se define como buena práctica ofrecer un espacio
adecuadoparaescritura(porejemplo,500caracteresqueequivalenaseislíneasdetexto).Sinembargo,unaprácticamásadecuadaconsisteenemplearuncontadorreversoqueinformeeltotaldecaracteres
quesepuedeescribiryquelosvayarestandoamedidaqueelusuariovaingresandolainformación;deesamaneraseleofreceunaretroalimentaciónadecuada.
Elsegundoelementoesel"checkbutton"quepermitemarcarlasopcionesqueseanlasmásadecuadasparalaacciónqueseestérealizandodentrodeunformulario.Hayquetenerencuentaqueuncampo
deestetiposiemprepermitelaselecciónmúltipledeopciones.
Eltercerelementoesel"radiobutton"quepermitemarcarlaopciónmásadecuadaparalaacciónqueseestérealizandodentrodeunformulario;normalmentesetratadeopcionesexcluyentesentreellas.
ParaefectosdequeelusuariotengaunaexperienciaadecuadaalusarelSitioWeb,es imprescindiblequeloselementoscitadossóloseempleendelaformaseñalada.
4.2.DiseñoparaelAccesoRápidoUna de las características que hace tan popular a la tecnología web es su facilidad para mostrar
contenidosdemaneragráficayparavinculardemanera fácildocumentosdediferentesorígenes.Noobstante, para que esta simpleza pueda darse efectivamente, es necesario que quienes desarrollensitiosycontenidosenestaplataforma,cumplanconciertosestándaresqueasegurenquelamayorparte
delosusuariospodránverloquesepublica.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
12|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Paraello,esdesumaimportanciaque lossitiosqueseconstruyancumplanefectivamenteconciertascaracterísticasdepublicaciónquepermitanconseguirdosobjetivosmuyconcretos:
• Quelaspáginassedesplieguenrápidamenteysindificultadestécnicasenloscomputadoresde
losusuarios;• Quelaspáginaspuedanservisualizadasporlosusuariosdelamismamaneraenquesusautores
lashanconstruido.
Paraconseguirambosobjetivos,esnecesarioquequienesconstruyan losSitiosWebhaganusodeun
conjuntodebuenasprácticasquesehanobtenidodelaexperienciaenlaconstruccióndeestetipodecontenidosdigitales,ytambién,queseasegurendecumplirconestándaresmundialesenesteámbito.
4.2.1.BuenasPrácticasAgrupamosenestaáreaunaseriederecomendacionesextraídasde laexperienciaeneldesarrollodeSitiosWebdetodotipo,quepermitenasegurarunabuenaexperienciadelosusuariosquelosvisitan.
NormasMínimasparaFacilitarelAccesoVíaConexiónTelefónica
Lavisualizaciónde losSitiosWebdependede latransmisióndedatosentredoscomputadores,por lo
quees importanteoptimizar lacantidadde informaciónqueseenvíaentreambos,detalmaneraquequienlarecibepuedaverlaadecuadamente.
Loanteriorseexpresaensieteáreasderecomendacionesmuyconcretas:
1.PesodelasPáginas
Los Sitios Web deben tener un peso máximo permitido por página que no supere una cantidadrazonable de kilobytes (kb) que impidan su visualización. En este sentido, lo razonable dependerá
directamentedel tipodesitioqueseestédesarrollandoyde la conexióncon laquecuente lamayorpartedelosusuarios.
Porejemplo,sisetratadeunsitiodedicadoausuariosdezonasruralesalejadasdelacapitalquetienenunaconexiónmuylenta,50kbseráuntamañoconsiderable,respectodesisecomparaesoconusuarios
queseconectenenlacapital.Estopuedevariardependiendodelniveldeaccesoabandaanchadecadaciudad.
No obstante, se puede estudiar cuánto se demora en que una página llegue completamente alcomputadordeunusuariosisecalculalosiguiente:
• Si un módem transmite a 56 kbps (kilobits por segundo) significa que por cada segundo de
transmisión,encondicionesideales,escapazdeenviar7kb(kilobytes)deinformación.• Siunapáginapesa70kb,encondicionesidealesdemorará10segundosenaparecercompleta
enelcomputadordelusuario.
• Aunque no hay información técnica consistente para establecer la velocidad promedio de unmódem,puestoquedependedediversasvariablestécnicas, laexperiencia indicaqueéstosseconectan habitualmente a la mitad de su valor declarado. Entre las variables que afectan la
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
13|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
calidaddelaconexiónsecuentanlacapacidaddelcomputador,lacongestióndelasredesyelniveldevisitasdelservidor,entreotras.
• Dado loanterior, lapáginade70kbseñaladaenelejemploanterior, tardaría20segundosendesplegarsecompletamente.
Con esa evidencia, la pregunta que debe hacerse cualquier desarrollador de sitios, es si sus usuariosestarándispuestosaesperartodoeltiempoquesedemoraunapáginawebenbajarcompletamente.
Como lomás probable es que la paciencia de los usuarios se agotarámás rápido que su deseo por
accederalapáginaquetardaendesplegarse,esnecesariopreocuparsedequeeltamañodelaspáginassiempretiendaabajarynoaaumentar.
Lasnormasinternacionalesalrespectoindicanqueunusuarionoesperarámásde:
• 5segundosparaqueaparezcaalgovisibleenlapantalla• 10segundosparaqueaparezcaalgolegibleenlapantalla
• 30segundoshastahacerunclickhaciaotrapartedelsitioohaciaotrositio
2.DiagramacióndelasPáginas
Elestándarparaladiagramacióndepáginaswebindicaquesedebenutilizarhojasdeestiloencascada(CSSporsusiglaenInglés)parasepararelcontenido,laestructuraylapresentacióndelosprimeros.
Ladiagramación con tablas seusóhabitualmentedesdeel iniciode los SitiosWebyelproblemaconestaformadetrabajoserelacionabaconelhechodequeloscontenidosseuníanconelcódigoutilizado
enlapresentación,evitandoqueelSitioWebpudieraserusadoenplataformasdiferentessinadecuarlopreviamente.
Graciasalusode lashojasdeestiloencascada,estasituaciónpudomejorarseyaqueelcontenidosepudomantener inalterable y sólo hacer los cambios en la capa a de la presentación, lo quepermitió
llevardichoscontenidosacualquierplataforma,sólohaciendocambiosenelestilodediagramación,elcualsedefineatravésdelarchivoCSSrelacionadoalapágina.
Enéstedocumentoexplicamoslasmejoresprácticasparaelusodeambos.
UsodeHojasdeEstilo
La tecnología de las Hojas de Estilo en Cascada (CSS por su sigla en inglés) permiten manejar la
presentación de manera externa al contenido. De esta manera, será posible ofrecer páginas condiagramacióndiferentedelaplataformadesdelaqueseaccedao,incluso,contarconlaposibilidaddeofrecerunamejordiagramaciónparaefectosdesuimpresión.
UsandoCSSsepuedeofrecerdiferentesvisionesdelmismocontenidosinhacerlecambiosasuspáginas.
Loúnicoquecorrespondeendichocasoesmodificarelarchivodepresentaciónde loscontenidos, locual se hace a través de los archivos de CSS. Entonces al revisar el código de sus páginas se puedeencontrarenlapartedel<head>lassiguienteslíneas:
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
14|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
<link href="../../../styles/main.css" rel="stylesheet" type="text/css" />
<link href="../../../styles/print.css" rel="stylesheet" type="text/css" media="print" />
CabeseñalarquealavanzarenelusodeCSSsepuedeverqueesteestándarseencuentrapreparado
paraofrecersoporteadiferentestiposdedispositivosentrelosquesecuentanaparatoscomoagendasmóviles, sistemas de proyección, aparatos para lenguaje Braille y otros. Es importante consignarademás,quedemomentoseencuentraenprocesounaversióndeCSSparateléfonosmóvilesporparte
deW3C.
JuntoconelusodeCSSes importante indicarque laseparacióndecontenidosypresentacióndebe iracompañada por la utilización de varios elementos de la sintaxis XHTML que permiten hacer ladiagramaciónypresentaciónfinaldeloscontenidos.
Uno de los principales es el elemento <div> que permite señalar los bloques de información y su
ubicación dentro de la pantalla. <div> proviene de la palabra "división" y es utilizada para crearseccionesoagruparcontenidos.
Normalmenteesteelementopuedellevarlainformaciónsobresupresentaciónenformalocal,esdecirenelpropioarchivo (comoenel casodeesteejemplo,usandoel atributo style), obienpuede tener
asignadoun ID(identificador)medianteelcualse ledaunnombrequepuedeserreferenciadodesdeCSSparaaplicarleunestiloalbloque.
<div style="border: 1px solid black;"> <h2>Espacio generado por DIV </h2> <p> Este es un párrafo creado dentro de un bloque demarcado por DIV. </p> </div>
Figura3.3.:Enlaimagensevelaformaenqueapareceenlapantallaelcódigo
quesediocomoejemploenelrecuadroanterior.
Adicionalmenteelelemento<div>puederecibircomoargumentounaubicaciónespacialdentrode lapantalla,loquepermitegenerarunadiagramacióndelSitioWebcontroladasóloporCSS.
Dentrodelelemento<div>sepuedenutilizarotrosdosparaasignartiposdepresentaciónespecialaloscontenidos. El primeroes el elemento<p>quepermite generar párrafosde información textual, a la
cualseleasignanvaloresmedianteatributosdeCSS.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
15|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
El segundo es el elemento <span> que es un contenedor que se utiliza para aplicar estilo en formadirectaaltexto.
<div style="border: 1px solid black;"> <h2>Espacio generado por DIV </h2> <p> Este es un párrafo creado <span style="color: red;">dentro</span> de un bloque demarcado por DIV. </p> </div>
Figura3.4.:Enlaimagensevelaformaenqueapareceenlapantallaelcódigoquesediocomoejemploenelrecuadro
anterior;seapreciaquelapalabradentroestáescritaencolorrojo.
Enelejemploanteriorsevecómoelelemento<span>aparecedentrodeunpárrafoypermitegeneraruntipodepresentaciónespecíficoparaunapartedeltexto.
UsodeTablas
Cuando los contenidos que semuestran se dispongan en tablas es con el fin de que cada elementoocupeellugarqueselehaasignadodentrodelapágina.
Al respecto se recomienda construir una estructura de presentación de los contenidos que se pueda
fragmentarenvariastablas:
Deesamanera,cuandoelsitiosepresenteenelprogramavisualizadordelcliente,siempremostrarálaprimeratabla(quenormalmentellevaráellogotipoylaidentificacióndelsitio)demanerarápida,dandoal usuario la sensación de haber llegado al destino elegido. Luego en las siguientes tablas se van
poniendolosrestanteselementosdelsitio.
Enlafigura3.3.,sepuedeverqueelsitioestáconstruidoentrestablas,deacuerdoalsiguienteorden:
Tabla1:Muestraellogotipodelainstitución,lafechayelmenúdelsitio.
Tabla2:MuestralasSeccionesdelSitiomásloscontenidosdediferentenivel.
Tabla3:Muestraelpiedelapáginaconlaidentificacióncorporativadelainstitución.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
16|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Figura3.3.:Ejemplodetablasparasepararcontenidosyconseguirdesplieguerápido.
HayquerecordarquelosestudiossobreaccesoaSitiosWebindicanqueelusuarioesperaquealprimersegundodespuésdehaberhechoclicsobreunenlaceohaberingresadounadirecciónenunprograma
visualizador,yaquiereveralgunareacciónynotarquealgoestáocurriendo.
Porloanteriorsedebeevitaratodolugarlastablasgeneralesqueincluyenensímismasaotras(tablasanidadas), ya que el programa visualizador usará una parte del tiempo en calcular esa relación dedependenciaentrelastablas,antesdemostraralgoútilenlapantalla.
Enlafigura3.4.sepuedeverqueelsitioestáconstruidoentrestablasinteriores,quesonagrupadaspor
unatablageneral;tambiénenlazonadeContenido1sedispusounatablaquepermiteincluirunafotojuntoalcontenido:
Figura3.4.:Ejemplodetablasanidadasquedificultaneldesplieguerápido.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
17|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
3.UsodeFlash
FlashesunatecnologíapropietariadelaempresaAdobequetienecomoobjetivoofrecerinteractividadenunentornográficomejorado.Debidoaquetieneherramientasparahacerunusoespecializadode
sonidos, imágenes y video, es el entornomás utilizado cuando se desea ofrecer información de estetipo.
AuncuandoalgunosañosatrásserecomendabaevitarelusodeestatecnologíaenlaportadadelSitioWeb,explicándoseque"suusorecargalapresentacióndelsitioysilapresentaciónnoestábienhecha,
puedeimpedirelaccesodelosrobotsdebúsquedaalinteriordelmismo".
Con el tiempo transcurrido y las sucesivas versiones de esta tecnología, se ha avanzado en laespecificacióndesuaccesibilidad,existiendovariadosejemplosparaofrecerformasdeaccesoparalelas.AdicionalmentelapropiaempresaAdobehaofrecidoguíasparahaceraccesibleslasaplicacioneshechas
conFlash (desde laversiónFlashMX2004enadelante)quepermitenofreceralternativasnográficasparasuspantallasgráficas.
Entrelasaccionesquesedebenrealizarenestesentidosecuentanlassiguientes:
• Utilizarequivalentesdetexto:paraloselementosgráficosqueseincluyanenlasescenasdelapelícula Flash; la aplicación ofrece una paleta de accesibilidad en que se puede realizar esta
operación demanera simple y directa. En todo caso los equivalentes deben ser completos ydescriptivos,nosóloelnombredelobjetográficoqueseincluye.
• Habilitar la accesibilidad para objetos: de esta manera los equivalentes de texto serán
utilizados como las descripciones de texto para botones y otros controles utilizados en lapelículaFlash.
• Ofrecerunadescripciónparalapelícula:cuandosegeneraunbotónconelnombre"siteinfo"
en laquesedescribe laescena, los lectoresdepantallareciben la informaciónadecuadaparaserleídapordichossoftware.
• Entregar controles de teclado: se deben habilitar atajos de teclado que permitanmanejar lapelículaFlashdelamismamaneraenqueseutilizaelmouse.
• Asegurarelcontrastedecolores:personasconproblemasvisualestienendificultadesparaver
determinados contrastes de colores, por lo que los elementos gráficos deben ser tratados demaneraquehayauncontrastesuficientequepermitasucomprensión.
4.UsodeMarcosoFrames
La tecnología de marcos o frames consiste en agrupar varios archivos para que se desplieguen demanerasimultánea,permitiendoalosusuariosvervarioscontenidosalmismotiempo.
Enelejemplosiguientesepuedevergráficamentecómosehaceeldesplieguededichosarchivos:
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
18|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Figura3.6.:Ejemplodeusodeframesparadesplegarcontenidossimultáneos.
Estatecnologíatieneaspectospositivosynegativos,quedetallamosbrevemente:
Positivos:
• Permitetenerciertoscontenidospresentestodoeltiempo,comouncabezalomenú.• Facilitalanavegaciónyaqueelusuarionuncapierdedevistadóndeseencuentra.
Negativos:
• Impidequeelusuariopuedamarcarunapáginacomofavorita(bookmark)porquenuncase lemuestracuálessudirecciónweb.
• Cuandounusuariollegaauncontenidodesdeunenlaceprovistoporunbuscador,veráelsitiosinlosotrosmarcosynosabrácómonavegarenél.
• Laexistenciadevariosarchivosenunogeneraunacargamayorparaelusuarioquellegaalsitio;
esoloobligaaesperaraqueaparezcantodosloscontenidosdelosarchivosparapoderusarlo.
Debido a lo anterior y salvo que sea muy necesario, esta forma de organizar los Sitios Web debedesecharseparapasarasitiosdeinterfazcontenidaenunsoloarchivo.
5.UsodeImágenesdebackground
Una tecnología muy popular que se puso de moda en el año 1996 cuando el software NetscapeNavigatorloimplementó,fueelusodeimágenescomofondosobackgroundsdelaspáginasweb.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
19|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Salvocasosenqueseaestrictamentenecesario,estaprácticadebeserdejadadeladoporquesuúnicoefecto es el de agregar un paso excesivo a los sitios, afectando el tiempo de descarga y acceso a la
información.
6.Usodemetatagsadecuados
Losmeta tags sonmarcas en lenguajeHTMLque van en la parte superior del código fuente de cadapágina,atravésdelascualesseentregaalossistemasdeindexaciónybúsqueda,lainformaciónmínimaparahacerunacorrectaindexacióndelcontenidoqueincluye.
LosmetatagssonunconjuntodeelementosqueobedecenaunestándardefinidoporelWorldWide
WebConsortiumporloquesuusoestáreguladoymedianteloscualesredescribeinformaciónconcretasobrelapágina,talcomotítulo,autor,descripción,idiomayotros.Losmásimportantes,aunquenolosúnicos,sonlossiguientes:
<title>Nombre del Sitio o Institución</title>
<meta name="title" content="Nombre del Sitio o Institución">
<meta name="description" content="Descripción del Sitio o Institución">
<meta name="keywords" content="Palabras claves del Sitio o Institución">
Adicionalmente sobre este tema se ha dado en los últimos años un trabajo de estandarizaciónmuy
importanteatravésdelgrupoDublínCorequehadefinidoloselementosmetatagsausaryquedebenserconsultadosenhttp://www.dublincore.org.
7.UsodeAjax
Ajax es una combinación de tecnologías que se basa en el lenguaje Javascript para ofrecer unaexperiencia de intercambio dinámico de información en SitiosWeb, enriqueciendo la experiencia de
revisardatosyconseguirresultadosdemanerarápidayconfiable.
Ajaxensínoesunatecnología,sinoqueunaimplementacióndevariastecnologíasyaexistentestalescomo XHTML y CSS para mostrar páginas web; Document Object Model (DOM) para mostrar einteractuar dinámicamente con la información presentada; el objeto XMLHTTPRequest que permite
realizar peticiones HTTP y HTTPS a servidoresWEB demanera asíncrona y XML para intercambio deinformaciónentreelbrowserdelusuarioyelservidorquecontienelainformación.
Debido a que se basa en un lenguaje de scripting como Javascript, el cual se puede usar con finesmaliciososcomoextraerinformacióndepartedelusuario,muchasvecessepuededarelcasoquedicha
capacidad no está habilitada en el browser utilizado. Si este es el caso, la aplicación que utilice Ajaxtambiénquedarádesactivada.
Enestesentidosesugierequedesdelaprogramacióndelaaplicaciónsehagaestetipodedetecciónconel objetivo de ofrecer una interfaz distinta en dicho caso y, gracias a eso, entregar otra forma de
interactuarconlapantallaquepermitautilizarlaaplicaciónqueseofrece.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
20|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Es importante señalar que al tiempo de la edición de este documento, la organización W3C estádesarrollandounnuevoestándarorientadasalasaplicacionesdeinteracciónenriquecidaconelobjetivo
dedefinirlamejormaneradehacerlasaccesiblesyquefuncionenenlosdiferentesentornosdesdelascualessonutilizadas.
NormasparaIncorporarElementosGráficosyMultimediales
CuandoenunSitioWebseincorporanelementosgráficosymultimediales,sedebenseguirnormasmuyconcretas para evitar que su peso afecte el desempeño de la página cuando sea solicitada por los
usuariosdelSitioWeb.
A continuación entregamos algunas recomendaciones tendientes a asegurar la correcta inclusión dedichoselementos:
• Optimizar el pesode las imágenes: sedebebajar almáximoposibleel pesode las imágenes;cuando esto no sea posible hacerlo por su tamaño, se debe reducir el número de colores
disponiblesylaresolución(72dpieslanorma).• Elegirelformatoadecuado:anteunmismotamañodeimagen,elpesovaríadependiendodesi
sonprocesadasparadesplegarseenformatoGIFrespectodel formatoJPG.Normalmenteuna
imagenconcoloresplanos(comounicono)tendráunpesomenorsiseguardaenGIFrespectode si es guardada en JPG. Lo contrario ocurrirá conuna imagen conmuchos colores diversos(comounafoto).Serecomiendaprobarambosformatosparadeterminarelóptimo.
• Ubicación de imágenes: se recomienda usar un solo directorio para almacenar las imágenesrepetidas, tales como los iconos y otros elementos gráficos que son utilizados en diferentespáginasdelsitio.Alubicarlosenundirectorioúnicosepuedeaprovecharlafuncióndecachédel
programavisualizadorparamejorarelrendimientodelaspáginas.Paraefectosdeseguridad,serecomiendaimpedirqueunprogramavisualizadorpuedaverelcontenidodedichodirectorioo
cualquierotrodentrodelsitio.• UsarelatributoALTenimágenes:enelcódigoHTMLsedebeusarelatributoALT(textoalterno)
enlasimágenesparaqueéstesedespliegueantesquelasimágenesyfacilitedeestaformala
comprensióndelcontenidoalosusuarios.• Imágenesconaltoyancho:lasimágenes(dibujos,fotos,iconos,botones)debentenertamaño
paraelanchoyelalto,paraqueelprogramavisualizadorpuedadejarreservadoelespaciopara
dichocontenidoantesdequeserealicesudesplieguevisual.• Ofrecer plug‐ins: cuando se utilizan archivos multimediales que requieren el uso de plugins
(programasvisualizadoresespeciales)pararevisarlos,serecomiendaponerelprogramaparaser
bajadou ofrecer un enlace a lugares dondeobtenerlo. Esto es especialmente válido en sitiosque ofrecen presentaciones de portada en tecnología Flash, las cuales deben ser anunciadasparaqueelusuariotengalaopcióndeverlasoavanzardirectoalsitio.
• Indicarelpesodelosarchivos:cuandoseofrecenelementosgráficosoaudiovisualesparaquesean bajados al computador personal por el usuario (especialmente en Video, Audio, Flash uotros),serecomiendaindicarelpesodelosmismos,conelobjetodeofrecerleinformaciónútil
paraefectuarlaoperación.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
21|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
Interoperabilidad
Dado que los Sitios Web pueden ser accedidos sin problemas desde computadores que utilizandiferentessistemasoperativos,enunsitiowebsedebecuidareseaspectodeladiversidad.Paraellose
debe asegurar de que desde la mayor parte de ellos las páginas pueden verse sin mayorescontratiempos.
DebidoaquelosavancesdelosestándareswebsonhaciaelestándarXMLqueademáseselestándarelegido para el intercambio de documentos electrónicos se ha privilegiado destacar el trabajo con
XHTML1.0conelfindedestacarlascaracterísticasdesuutilizaciónsobrelosestándaresanteriores.
Entre lasdiferenciasmásrelevantesdeXHTMLrespectodeHTMLyquedebenser tenidasencuenta,aparecenlassiguientes:
Eldocumentodebeestarbienformadocontodas lasetiquetascerradasenelmismoordenenqueseabren,valedecir,enelcasodeetiquetasqueseabrendentrodeotras,debensercerradasenelmismo
orden.
• No puede haber elementos vacíos, por lo que las etiquetas que no tienen cierre debencompletarseconun"slash"alfinal,comoen<img.../>,<br/>y<hr/>.
• Las etiquetas deben escribirse en minúsculas debido a que XML es sensible a mayúsculas y
minúsculas.• Losvaloresdelosatributosdebenencerrarseentrecomillas"dobles".• La información de scripts como los de Javascript debe ser incluida dentro de marcadores
especialesllamados[CDATA].Porejemplo:
<script type="text/javascript"> <![CDATA[ ... unescaped script content ... ]]> </script>
• Los elementos ya no pueden usar el identificador "name" el cual debe ser cambiado por elidentificadorID.
Debidoaestasdiferencias, losdesarrolladoresquemigrensusSitiosWebhaciaelestándarde laW3Cdeberánhacervariasmodificacionesyaquecomoseaprecia,elusodeXHTMLobligaaserestrictoenel
cumplimiento de la especificación, en especial en el uso de minúsculas y en el cierre de todos loselementos,temaqueenlasversionesanterioresdeHTMLnoeratancrucial.
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
22|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
REFERENCIAS[1] TheWorldWideWebConsortium(W3C)http://www.w3.org/[2] OficinaEspañoladelW3Chttp://www.w3c.es/[3] EspecificaciónHTML4.01http://html.conclase.net/w3c/html401‐es/cover.html
[4] GuíaBrevedeCSShttp://www.w3c.es/Divulgacion/Guiasbreves/HojasEstilo[5] Hojas de Estilo en Cascada Especificación CSS2.1 http://www.w3.org/Style/css21‐
updates/css2.1_spa.pdf
[6] Programación y Diseño en Entornos Gráficos. Grado Superior ‐ Félix Chamorro Atance ‐ Ed.McGraw‐Hill
[7] VBScriptyprogramaciónASP‐GonzálezMoreno,Óscar‐Ed.AnayaMultimedia,1997
[8] ProgramaciónAvanzadaParaInternet‐JorgeSerranoPérez‐Ed.AnayaMultimedia[9] Active Server Pages 3. Creación de aplicaciones Web a través de ejemplos. Rodríguez‐
Manzaneque.Ed.RaMa,2000.
[10] ProgramaciónconASP3‐JorgeSerranoPerez.AnayaMultimedia[11] Web 2.0 y Empresa, Manual de aplicación en entornos corporativos, Asociación Nacional de
EmpresasInternet,España
[12] PHPBible.TimConverseandJoycePark.HungryMindsInc.[13] CreacióndesitioswebconPHP4.FranciscoJavierGilRubio.Mc.Graw‐Hill.[14] XML.IniciaciónyReferencia‐RamónMonteroAyala–Ed.McGraw‐Hill
[15] Latindex,SistemaregionaldeinformaciónenlíneapararevistascientíficasdeAméricaLatina,elCaribe,EspañayPortugal.Directorio,catálogoeíndice(www.latindex.unam.mx)
[16] DHTMLhttp://www.dhtmlcentral.com
[17] JavaScripthttp://www.javascript.com/[18] XML 1.0 (Second Edition), W3C Recommendation http://www.w3.org/TR/2004/REC‐xml‐
20040204
[19] GuíaWeb(http://www.guiaweb.gob.cl/)[20] FundaciónSidar‐AccesoUniversalhttp://www.sidar.org/index.php[21] Guíadeusabilidadhttp://www.usability.gov/
[22] GuíadeReferenciaRápidaCSS2.1http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/[23] GuíaBrevedeXHTMLhttp://www.w3c.es/divulgacion/guiasbreves/XHTML
[24] XHTML1.0:(SecondEdition),W3CRecommendationhttp://www.w3.org/TR/2002/REC‐xhtml1‐20020801
[25] Client‐SideJavaScriptReferentehttp://docs.sun.com/source/816‐6408‐10/contents.htm
[26] ManualdeASP(http://msdn.microsoft.com/asp)[27] ManualdePHP(http://www.php.net/)[28] ProgramacióndeAplicacionesparaInternetconASP3‐GrupoEidos
[29] PHP‐Guíadeaprendizaje‐LarryUllman‐PrenticeHall[30] GuíasBrevesdeTecnologíasW3C(http://www.w3.org/)
ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios
23|P á g i n a
ManualdeProyectosWebPreparadoporIng.FelipeTorres
[31] ComprendiendolaAccesibilidad:GuíaparaLograrConformidad‐R.Yonaitis[32] Revistas USERS, Power, .Code, TecTimes © MP Ediciones S.A /
(http://www.tectimes.com/magazines/)