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).


3|P á g i n a


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


4|P á g i n a


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.


5|P á g i n a


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:


6|P á g i n a


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:


7|P á g i n a


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:


8|P á g i n a


• 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.


9|P á g i n a


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


10|P á g i n a


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.


11|P á g i n a


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.


12|P á g i n a


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


13|P á g i n a


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:


14|P á g i n a


<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.


15|P á g i n a


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.


16|P á g i n a


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.


17|P á g i n a


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:


18|P á g i n a


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.


19|P á g i n a


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.


20|P á g i n a


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.


21|P á g i n a


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.


22|P á g i n a


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/)


23|P á g i n a


[31] ComprendiendolaAccesibilidad:GuíaparaLograrConformidad‐R.Yonaitis[32] Revistas USERS, Power, .Code, TecTimes © MP Ediciones S.A /

(http://www.tectimes.com/magazines/)

manual de proyectos web · 2015-02-24 · web 2.0, lo que conlleva más que realizar alguna...

Documents