Manual de Proyectos Web ARROBA DE ORO - IT … · Manual de Proyectos WEB Escuela Superior de Economía y Negocios 2 | P á g i n a Manual de Proyectos Web Preparado

ManualdeProyectosWeb

EscuelaSuperiordeEconomíayNegocios

Volumen1

PreparadoporIng.FelipeTorresDecanodeIngenieríaIndustrialydeNegocios

ManualdeProyectosWEBEscuelaSuperiordeEconomíayNegocios

2|P á g i n a

ManualdeProyectosWebPreparadoporIng.FelipeTorres

ContentsIntroducción ........................................................................................................................................ 6

1.PlanificaciónGeneraldelProyectoWeb ........................................................................................... 7

1.1.EquipodeTrabajo ............................................................................................................................. 7

1.1.1.CreacióndelComitéWeb .......................................................................................................... 7

1.1.2.LevantamientodeNecesidadesdelServicio............................................................................ 10

1.2.FinanciamientodelProyectodeSitioWeb..................................................................................... 10

1.3.ExternalizacióndelProyecto........................................................................................................... 11

1.3.1.TérminosdeReferencia ........................................................................................................... 11

1.3.2.EvaluaciónyAdjudicacióndePropuestas................................................................................ 13

1.3.3.ElaboracióndeContratosdeServicios..................................................................................... 13

1.4.InstrumentosdeSeguimiento......................................................................................................... 14

1.4.1.Metodologíadeseguimiento................................................................................................... 14

1.4.2.ReunionesdeControl,actasdereunióneInformesdeAvance .............................................. 14

1.5.RecepciónFinaldelProyecto .......................................................................................................... 15

1.5.1.Documentación........................................................................................................................ 15

1.5.2.Capacitación............................................................................................................................. 16

2.Web2.0 ......................................................................................................................................... 17

2.1.DefinicióndelaWeb2.0ysuorigen .............................................................................................. 17

3.DefinicióndelSitioWeb ................................................................................................................. 19

3.1.ArquitecturadeInformación .......................................................................................................... 19

3.1.1.DefinicióndeObjetivosdelSitio .............................................................................................. 19

3.1.2.DefinicióndeAudiencia ........................................................................................................... 20

3.1.3.DefinicióndeContenidosdelSitio ........................................................................................... 21

3.1.4.DefinicióndelaEstructuradelSitio ......................................................................................... 23

3.1.5.DefinicióndelosSistemasdeNavegación ............................................................................... 25

3.1.6.DefinicióndelDiseñoVisual..................................................................................................... 26

4.DiseñoWeb.................................................................................................................................... 30

4.1.¿Quéesunainterface? ................................................................................................................... 30

4.1.1.Elementosdelainterfaz .......................................................................................................... 31


3|P á g i n a


4.1.2.Usodelogotipos ...................................................................................................................... 33

4.1.3.Sistemadenavegación ............................................................................................................ 33

4.1.4.Áreasdecontenidos ................................................................................................................ 34

4.1.5.Áreasdeinteracción ................................................................................................................ 35

4.1.6.Experienciadeusuario ............................................................................................................. 35

4.2.DiseñoparaelAccesoRápido ......................................................................................................... 37

4.2.1.BuenasPrácticas ...................................................................................................................... 38

5.Estándares ..................................................................................................................................... 48

5.1.EstándaresInternacionales............................................................................................................. 48

5.1.1.¿Quésonlosestándares? ........................................................................................................ 48

5.1.2.¿Quiénfijalosestándares? ...................................................................................................... 48

5.1.3.¿Porquéhayqueseguirlosestándares?................................................................................. 49

5.1.4.¿Cómosemideyverificasucumplimiento?............................................................................ 49

5.2.Estándaressugeridos ...................................................................................................................... 50

5.2.1.Utilidad..................................................................................................................................... 50

5.2.2.DesarrollousandoHTML/XMLestándar.................................................................................. 50

5.2.3.Estándar3:MonitoreodeActividad ........................................................................................ 50

5.2.4.Contingencias.......................................................................................................................... 51

5.2.5.CodificacióndeCaracteres...................................................................................................... 51

5.2.6.PolíticadePrivacidad ............................................................................................................... 52

5.2.7.DiagramaciónconCSS............................................................................................................. 52

5.2.8.UtilizacióndeMarcos............................................................................................................... 53

5.2.9.UsodePlug‐ins......................................................................................................................... 53

5.2.10.Accesibilidad .......................................................................................................................... 53

5.2.11.ValidacióndelaHojadeEstilo ............................................................................................... 54

5.3.AplicacióndeEstándares ................................................................................................................ 54

5.3.1.Estructuradelosdocumentosweb ......................................................................................... 54

5.3.2.UtilizacióndelasHojasdeEstilo(CSS)..................................................................................... 59

6.Encontrabilidad.............................................................................................................................. 60

6.1.¿QuéeslaEncontrabilidad? ........................................................................................................... 61

6.1.1.Sitiosvisibleseinvisibles.......................................................................................................... 61

6.1.2.PosicionamientodelSitioWeb ................................................................................................ 62


4|P á g i n a


6.1.3.InclusiónenÍndicesautomatizados ......................................................................................... 62

6.1.4.InclusiónenDirectorios ........................................................................................................... 63

6.1.5.UsuariosyUsodeBuscadores ................................................................................................. 63

6.2.¿CómosemidelaEncontrabilidad?................................................................................................ 64

6.2.1.Relaciónconlosmotoresdebúsqueda ................................................................................... 64

6.2.2.Relaciónconlosíndices ........................................................................................................... 65

6.3.¿CómoseaumentalaEncontrabilidad? ......................................................................................... 65

6.3.1.EstándaresyCódigosrelacionados.......................................................................................... 66

6.3.2.Etiquetasde<head> ................................................................................................................ 66

6.3.3.Usoderobots.txt ..................................................................................................................... 66

6.3.4.Usodesitemaps.xml ................................................................................................................ 68

6.3.5.Administracióndecontenidos ................................................................................................. 69

6.3.MineríaWebyEncontrabilidad. ..................................................................................................... 71

6.3.1.Quiénbuscayquébusca ......................................................................................................... 72

7.Usabilidad ...................................................................................................................................... 73

7.1.¿QuéeslaUsabilidad? .................................................................................................................... 73

7.1.1.CaracterísticasPrincipalesdelaUsabilidad ............................................................................. 74

7.1.2.Áreasteóricasrelacionadas ..................................................................................................... 74

7.1.3.PrincipalesAutores .................................................................................................................. 75

7.1.4.Principalesrecursos ................................................................................................................. 77

7.2.AseguramientodeUsabilidad ......................................................................................................... 77

7.2.1.Medicióndelausabilidad ........................................................................................................ 77

7.2.2.MetodologíadeJakobNielsen................................................................................................. 78

7.2.3.TestHeurístico ......................................................................................................................... 79

7.2.4.TestdeUsuario ........................................................................................................................ 80

7.2.5.MetodologíadeAlanCooper ................................................................................................... 81

7.2.6.CreacióndePersonasyEscenarios .......................................................................................... 81

7.3.EjemplosprácticosdemedicióndeUsabilidad............................................................................... 82

7.3.1.Utilizacióndelametodología .................................................................................................. 82

8.PuestaenMarchadelSitioWeb..................................................................................................... 84

8.1.ErroresenlaEtapadePruebas ....................................................................................................... 84

8.2.CómoyQuéProbar......................................................................................................................... 84


5|P á g i n a


8.2.1.PruebasdeInterfacesyContenidos ........................................................................................ 85

8.2.2.PruebasdeFuncionalidadesyOperación ................................................................................ 87

8.2.3.PruebasdeCarga ..................................................................................................................... 89

8.2.4.PruebasdeSeguridad .............................................................................................................. 91

8.2.5.PruebasdeRespaldoyRecuperación ...................................................................................... 97

8.3.6.RegistroyControldePruebasyErrores .................................................................................. 97

8.4.DesarrollodeunPlandeLanzamiento ........................................................................................... 98

8.4.1.ListadeChequeoPrevia........................................................................................................... 98

8.4.2.DesarrollodeunPlandeComunicaciones............................................................................... 98

8.4.3.ElSitiocomoApoyodelaInstituciónoPrograma ................................................................... 99

8.5.MétricasdeEvaluacióndeDesempeñoInternasyExternas ........................................................ 100

Anexo1–Actadereunión ............................................................................................................... 101

Anexo3–PautaparaEvaluaciónHeurísticadeSitios ....................................................................... 102

Anexo4–TestdeUsuario................................................................................................................ 105

Anexo5‐GráficadeunaPersonayEscenario .................................................................................. 113

Anexo6‐ChecklistdeAccesibilidad................................................................................................. 115

Anexo7‐AccesibilidadparaDiscapacitados .................................................................................... 117

Anexo8‐Metatags ......................................................................................................................... 123

Anexo9‐PautadeComparacióndeSitiosWeb ............................................................................... 129

REFERENCIAS ................................................................................................................................... 130


6|P á g i n a


IntroducciónEste documento conforma parte de una serie de 9 artículos que han sido preparados comomaterial

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


7|P á g i n a


1.PlanificaciónGeneraldelProyectoWeb

1.1.EquipodeTrabajoParaelcorrectodesarrollodelproyectodeSitioWebenlainstituciónoprograma,seráimprescindible

contarconunequipodeprofesionalesmultidisciplinarioquecumplalastareasquecorrespondan,paraofrecer soluciones adecuadas a los desafíos que se irán presentando a lo largo de las etapas quedeberáncumplirse.

Ellosseránlosencargadosdedefinirlastareasespecíficasarealizarydeberánestarfrentealasacciones

concretasquesecomprometanparaavanzar,desdelaplanificación,hastalapuestaenmarchadelSitioWeb.

Por lo anterior, es necesario realizar una conformación adecuada de dicho grupo, para lo cual serecomiendadarlossiguientespasos:

• CreacióndelComitéWeb

• AsegurarlarelaciónconAutoridadesSuperiores• DefinirCompetenciasinternas:perfilesrequeridos• DefinirCaracterísticasdela"Contraparte"interna

Acontinuaciónseentregaunaexplicacióndetalladadecadaunadeestasactividades.

1.1.1.CreacióndelComitéWebEnlasinstitucionesenquesehanlogradolosmayoreséxitosenproyectosweb,sehaconsideradoclave

laexistenciadel"ComitéWeb".Esteesunequipodetrabajomultidisciplinarioqueintegralasdiferentesvisionesdelainstitución,generandoungrupodetrabajoqueinterpretalasnecesidadesexistentes.

Noobstante, así comohayelementospositivosasociadosa suacción, igualmente sedebenevitar lascaracterísticasnegativasasociadasalosgruposdetrabajo,entrelascualesseincluyenlabajacapacidad

de reacción ante decisiones, la burocratización de los procesos y el estancamiento de la toma dedecisiones.Peseaello,losejemplospositivosdesuusodancuentadequeconunabuenaorganizaciónysistematizacióndelasdecisiones,siemprepesaránmásafavorlasventajasquesusproblema

CreacióndelComitéWebysusFunciones

ParaqueunComitéwebfuncioneadecuadamentesesugierecumplirconlosiguiente:

• Contar con un jefe operacional que se encargue de que el comité funcione dentro de los

márgenesestablecidos.• Efectuarreunionessemanalesdeavanceydiscusiónenlasqueseplanteentareasdeejecución

semanal,conincentivosconcretosparasurealizacióndentrodelosplazosdados.

• Desarrollarunapolíticaderedaccióndeactasdetrabajointernas,quepermitanirdandocuentade las promesas adoptadas y su grado de avance y cumplimiento. En ella es imprescindiblegenerarunáreaderesumendetareasrealizadasyotradecompromisosenlasquesedetallela

tarea,suresponsableyelplazocomprometido.


8|P á g i n a


• Dotar al comité de instrumentos adecuados de trabajo y de poder de decisión efectivo parahaceravanzarelproyectodeacuerdoalasmetasquesehayanproyectado.

EntrelosintegrantesdelComitéWebsedeberíacontaralossiguientes:

1. Director institucional: Es el responsableúltimopor el SitioWeb institucional odel programa.

Aportalavisiónestratégicaqueentregaloslineamientosparaeldesarrollo.Supresencianoesnecesaria para todas las reuniones, aunque debe refrendar todos los avances que se vayanrealizando.

2. Director del proyecto: Es el administrador general del proyecto y responsable frente a ladireccióndel servicio. Sus tareasprincipales son: traspasar la visiónestratégicaorganizacionalen un modelo conceptual sólido y consensuado para ser implementado en Internet.

Adicionalmente, debe ser capaz de gestionar todas las instancias involucradas, asegurando lacoherencia del equipo con la organización en su conjunto. Finalmente, es el encargado deobtener los recursoshumanos, técnicosy financierosnecesarios, y conocerel funcionamiento

delsistema,demaneradepoderrealizaruncontroldegestiónefectivo.3. Gestoresdecontenido:Son losprofesionalesquemanejan la informaciónquese incorporaal

sitio,ayudandoadefinirquécontenidosdebenserusadosparaasegurarelcumplimientodelos

objetivos del sitio. Trabajan en la generación de los mismos, en forma coordinada con lasfuentesdeinformación.Sonresponsables,además,derevisarsistemáticamentelaactualizacióndelainformación.

4. Validadoresdecontenidos:Desempeñanestafunciónlosdirectivosinstitucionalesquetrabajanen estrecha colaboración con los gestores de contenidos, asegurando la calidad de lainformaciónadesplegarenelWeb.

5. Validadores técnicos:Desempeñanesta función losprofesionales informáticos, asegurando lacapacidaddelossistemasparaejecutarloqueseleestépidiendoalproyectoenelWeb.

Varios de estos roles no son incompatibles entre ellos y enmuchos casos unamismapersonapuede

asumirlosenformasimultánea,dependiendodelascaracterísticasdela institución.Asimismo,esmuyprobablequeelorganismonocuenteconelequipodeprofesionalesrequeridosdentrodesupersonal,porloquesepuedepensarenlaexternalizacióndeciertasfunciones.

RoldelasAutoridadesSuperiores

ParaqueunproyectodeSitioWeb llegueacumplir losobjetivosquese leplantean,debeexistiruna

decisióncentralenlaorganización,paraotorgarleprioridadencuantoarecursoshumanos,financierosyeltiempoadecuadoparasucorrectaejecución.

Nopodráhaberunbuenproyecto,sielDirectivoPrincipalnoloavalaosidejadeladosuparticipaciónenlasactividadesdelComitéWebenquelecorrespondaparticipar.

Cabeseñalarque,unSitioWebseráexitosoenlamedidaenquecumplaconlosObjetivos,Audienciay

Tecnología definidos previamente. Por ello, se espera que el director de la institución apoye lasactividadesquedesarrolleelComitéWeb,conlocualofrecerálaúnicagarantíaposibledesucorrecta


9|P á g i n a


ejecución.Almismotiempo,cumplirácon los requerimientosexigidosen los instructivos relacionadosconeltematecnológico

CompetenciasInternas:PerfilesRequeridos

Para el adecuado desarrollo de un proyecto de Sitio Web, será indispensable contar con recursos

humanos capacitados, que permitan avanzar con éxito en la generación de las funcionalidadesrequeridas.

Dentro de los roles que es importante considerar para el desarrollo de un proyecto, se puedenconsiderarlossiguientes:

1. WebMáster: Profesional encargado de la infraestructura técnica del sitio y de crear puentes

entrelatecnologíaysuusoporpartedeespecialistasnotécnicos.2. Encargadosdeimplementarelsitio:Eselroldeprogramadores,diseñadoresycomunicadores,

responsablesdeldiseñoeimplementacióndelaherramienta.

3. Gestoresdecontenido:Son losprofesionalesquemanejan la informaciónquese incorporaalsitio,ayudandodefinirquécontenidosdebenserusadosparaasegurarelcumplimientode losobjetivos del sitio. Trabajan en la generación de los mismos, en forma coordinada con las

fuentesdeinformación.Sonresponsables,además,derevisarsistemáticamentelaactualizacióndelainformación.

Es muy importante considerar que dependiendo de la envergadura de un proyecto de SitioWeb serequerirádeprofesionalesdemaneraexclusivaoparcial.Sielproyectoesgrandesedeberácontarcon

personaldedicadoespecialmenteenlasfasesdedesarrollo,pruebaeimplantación;sielproyectoesdemenortamaño,podráserabordadodemaneraparcialporprofesionalesquecompartansujornadadetrabajoenvariaslabores.

Otrafórmulamuyusadaeslaexternalizacióndeservicios,mediantelacualsecontratanpormediodeTérminosdeReferenciacapacidadesexternasa la instituciónpara laconstruccióny luego, las internasparalamantención.

Estesistemahasidoexitosamenteusadoendiversosproyectos,aunquesedebeconsiderarcomoparte

importantedelproyectoeladecuadotraspasodelosconocimientosquesehayangeneradodurantelaconstruccióndelnuevosistemaalpersonaldelainstitución.

Deesamanera,quedaráenlapropiainstituciónlainformaciónyprácticanecesariaparatrabajarconlasnuevasherramientasquesegeneren,ydeesamaneraofrecerunadecuadomantenimientotécnicouna

vezqueelsitiosehayaentregadoyestéenfuncionamiento

CaracterísticasdelaContraparteInterna

Dadoqueenunpuntodeltemaanteriorsemencionólaposibilidaddehacereldesarrolloatravésdeuna contrataciónexterna,endichocasoesmuy relevanteelpapelquedebe jugarelprofesionalqueparaestosefectosllevaráeltítulodeContraparteInterna.


10|P á g i n a


Sustareasprincipalesson:

• Traspasar la visión estratégica organizacional en unmodelo conceptual sólido y consensuadoparaserimplementadoenInternet.

• Ser capazdegestionar todas las instancias involucradas, asegurando la coherenciadel equipoconlaorganizaciónensuconjunto.

• Gestionar los recursos humanos, técnicos y financieros necesarios, para el desarrollo del

proyecto.• Conocer el funcionamiento del sistema, de manera de poder realizar un control de gestión

efectivo.

• Mantenerunarelaciónfructíferaaunquerazonadaconlosproveedoresinternosoexternos,conel findeasegurarel cumplimientodeplazosy laentregade funcionalidadesdeacuerdoa loscompromisosasumidosaliniciodelproyecto.

Paratodoslosefectos,esmuyadecuadoqueestepapellodesempeñeelprofesionalquepreviamente

en este capítulo fue denominado Director del proyecto dado que es quien se desempeña comoadministradorgeneraldelproyectoyeselresponsablefrentealadireccióndelservicio.

1.1.2.LevantamientodeNecesidadesdelServicioEllevantamientodenecesidadesdelainstituciónestáprofundamenterelacionadoconladefinicióndelosObjetivosquedeberácumplirelSitioWebquesedeseadesarrollar.

Enestesentido,unapropuestaconcretaesqueunainstituciónnodebeintentarresolverdeunasolavez

yenunúnicoproyectotodos lasnecesidadescomunicacionalesqueesposibleatenderatravésdeunproyectoWeb.Encambio,espreferibleabordarlasenplanesescalablesquepermitaniravanzandoenunadirecciónconcreta,conplazosadecuadosyetapascuyodesarrollopuedaserevaluadoyaprobado

eneltiempo.

LaetapadeLevantamientodenecesidadesdel servicioconcluyecon la redacciónyaprobacióndeunInformedeEtapaenelquesedenaconocerlasconclusionesalcanzadas,conelfindequepuedaservircomo elemento de especificación del proyecto a desarrollar. Igualmente dicho documento será un

insumoindispensableenlaetapaposteriordeelaboracióndelosTérminosdeReferencia.

Asimismo,estageneracióndedocumentosdereferencia,enunaetapatantempranadelproyecto,llevaa poner la atención sobre lo importante que es documentar cada una, con el fin de que todos losinvolucradospuedancontarconlamismainformaciónparaactuardemaneracoordinadaalolargodel

mismo.

1.2.FinanciamientodelProyectodeSitioWebUnodelostemasquegeneraretrasosenlageneracióndeproyectosdedesarrollodeSitiosWeb,eslacarenciadefondosparafinanciarlos.

Comopuntodepartidaenesteaspecto,sedebetenerencuentaqueeldesarrollodeunSitioWebnosediferenciadeotroproyectoenla institución,encuantoa lanecesidadderecursosparasurealización;


11|P á g i n a


esto implica que se debe calcular y estimar el financiamiento necesario en función del modeloconceptualcreadoparalaimplementacióndelsitio.

Encuantoalosrecursosfinancieros,sepuedenmencionarlossiguientescostosasociados:

• CostodeImplementación:Requerimientosdematerial informáticocomosoftwareyhardware

adecuadosalasfuncionalidadesexigidasalsitioyrecursoshumanoscapacesdellevaradelanteelproyecto,estopuedeimplicarcontratacióndepersonal,capacitacióndepersonalogastosporexternalización.

• CostosdeDesarrollo:Cadaetapaconsideradaenelmodeloconceptualdelsitioestaráasociadaacostosdedesarrollo.Enestesentidoesadecuadorevisarlaposibilidaddeimplementarelsitiomedianteunsistemaescalable,enqueelcostodedesarrollopuedadividirseenetapas;deesta

maneraseevitaráunimpactofuerteenelpresupuesto.• Costos de Mantención y Actualización: Implica gastos en personal, rediseño y ajuste de

procedimientosyactualizaciónde la información.Eneste ítemsedebenconsiderar losgastos

informáticosrelacionados,comoelalojamientodelSitioWeb(hosting)ylaconectividad,entreotros.

1.3.ExternalizacióndelProyectoConelobjetivodeobtenerunatecnologíamásavanzada,accederasoluciones informáticasenmenortiempoyutilizaradecuadamente los recursosdisponibles, la instituciónoprogramapuededesarrollar

losTérminosdeReferenciaparaquetercerosdesarrollenelproyectodeSitioWeb.

A través de éstas es posible recibir ofertas concretas respecto de metodologías de desarrollo,tecnologías apropiadas y soluciones informáticas completas de acuerdo a los recursos disponibles; al

mismotiempopermitenobtenerunaampliagamadeofertasdeprecioparadecidircuálpuedeser lamásadecuadaparaelcaso.

Paracumpliradecuadamenteconunprocedimientodelicitación,esnecesariocumplirconlassiguientesrecomendaciones:

• GenerarlosTérminosdeReferencia

• Utilizarmecanismosdeselección• EvaluaryAdjudicarPropuestas• ElaborarlosContratos

Acontinuaciónseentregaeldetalledecadaunadeellas:

1.3.1.TérminosdeReferenciaConsisteenundocumentoquenormalmenteesgeneradoporeláreajurídicaytécnicadelainstitucióno programa, en el que se estipula la relación que existirá entre las partes durante el desarrollo del

proyecto y que se explicita con tododetalle lo que se requiere desarrollar en elmarcodel proyecto,juntoconlascondicionesdelaentregaysatisfacción.Entrelosítemsquedebeabordarsecuenta:

Aspectoscontractuales:


12|P á g i n a


1. Antecedentes generales: en que se explica en línea gruesa los motivos para desarrollar elproyecto.

2. Calendario de las bases: se refiere a indicar de manera clara cuándo se producirán losprincipaleshitosdelejecutante,queseránlossiguientes:

o ConsultasyAclaraciones: indicaenquémomento las institucionesparticipantesenel

proyectopodránhacersuspreguntasparaaclararconceptosdelasbasesoTérminosdeReferencia.

o RecepcióndePropuestas:fechalímiteenqueserecibiránlaspropuestas.

o Adjudicación de Propuestas: indica en qué fecha se comunicará el ganador delproyecto.

o Presentación de las Propuestas: indica cuáles son las formalidades que se deben

cumplir para la entrega de las propuestas, explicando de manera clara cuál es ladocumentaciónquesedebeincluir.

o Evaluación de las Propuestas: se refiere a la forma en que serán evaluadas las

proposicioneshechaspor losdiferentesoferentesy loscriteriosqueseutilizaránparaello. Se puede indicar que se recurrirá a una Comisión Evaluadora y señalar quiénesseránsusintegrantes.

o AdjudicacióndelasPropuestas:explicalaformaenqueserácomunicadalaaceptacióndelapropuestaylospasosquesedarándespuésdedichaaceptación.

3. Plazos:serefierealosplazosqueseindicanparaqueelproyectohayasidoterminado,dando

cumplimientoestrictoasuscaracterísticas,lasquesedebieronhaberindicadoenlosTérminosdeReferencia.

4. Multas:indicalassituacionesenlasquecorresponderádescontar,delospagosrestantesodelagarantía,montosdedinero.Lassituacionesenqueestosepuedeproducir,correspondeaunadelassiguientes:(1)Incumplimientooretrasoenlosplazosdeentregadelserviciocontratado

(2) No entrega de los productos establecidos en el contrato (3) Entrega del trabajo encondicionesdistintasalasconvenidas

5. FormadePago:indicalamodalidaddepagoquetendráelproyecto.

6. Resolución de Conflictos: se debe indicar de qué forma se zanjarán los conflictos que seproduzcan;usualmenteseindicaenquétribunalestarálacompetenciaparalaresolucióndelosmismos.

AspectosTécnicos

1. ObjetivoGeneral:indicarquéseesperaconseguirconelSitioWeb.

2. ObjetivosEspecíficos:indicarlasmetasporáreaqueseesperaalcanzarconelproyecto.3. ResultadosEsperados:indicarcuálesdebenserloscontenidosmínimosquesedebeincluirenel

sitio.

4. Requerimientos Funcionales: indicar cuálesdeben ser los servicios interactivosque seesperaincluirenelsitio.

5. Requerimientos Técnicos: indicar las características técnicas que debe tener la solución

informáticaqueseproponga.


13|P á g i n a


6. Metodología:indicardequéformayenquéplazossedebenentregarlosavancesquesevayanhaciendoenelproyectodedesarrollo.

7. Elementos de la recepción final: indicar qué elementos serán los que deberá entregar elganadorde la licitación, incluyendodesdeelSitioWebpropiamentetalhastaotroselementosdeimportancia,entrelosquehayquedestacarlossiguientes:

• SitioWebfuncionando• Códigofuentedetodaslasaplicacionesconstruidas• DocumentacióncompletadetodosloselementosdelSitioWeb

• ElementosgráficosdelSitioWeb,originalesyeditables• Capacitaciónentodosloselementosnecesariosparautilizarenelsitio

1.3.2.EvaluaciónyAdjudicacióndePropuestasComopartedelprocesodelicitación,unelementoquesedebeestablecerconladebidaanticipación,eslaformaenquelaInstitucióntomaráladecisióndeadjudicarlaaunodelosproponentes.

Para ello esmuy importante que se establezca elmecanismo y que éste sea conocido en todos sus

aspectos, de tal manera que todos los participantes sepan de manera transparente cómo fueronevaluadoslosparticipantesyquiénhayaresultadoganador.

Por ejemplo, algunos de los criterios y factores que se tendrán en consideración por parte de laComisiónEvaluadora,puedenser:

• Perfildelosparticipantes:composicióndelequipodetrabajo;experienciaenlamateriaobjeto

delestudio.• CalidaddelaOfertaTécnica:comprensióndelosrequerimientosindicadosenlosTérminosde

Referencias;metodologíadetrabajo.

• CaracterísticasdelaOfertaEconómica.

Adicionalmente, existen criterios y políticas específicas para el proceso de selección de la propuestaganadora. En el caso de PROinnova y Fusades por políticas internas solicita un mínimo de trescotizacionesenelprocesodelicitaciónparapodercomenzararealizarlacotizaciónencasocontrariose

declara la licitación desierta. En el caso que los fondos provengan del Banco Interamericano deDesarrollo, como es el caso del convenio ATN/ME’10714‐ES es necesario solicitar la no objeción porparte del Banco Interamericano de Desarrollo de la cotización seleccionada antes de proceder a su

adjudicaciónycontrato.

1.3.3.ElaboracióndeContratosdeServiciosUnavezquesehahecholaadjudicacióndelproyectodedesarrolloesnecesarioavanzarenlaredacción

delcontrato,medianteelcualseincluyantodosloselementosquecorresponderáresguardarmientrassemantengalarelacióndetrabajoconelganadordelalicitación.

Para ello se debe incorporar como elemento de valor en el contrato, todo aquello que indiquen los

TérminosdeReferencia, puestoqueen esta etapa las especificacionesqueéstos contienen serán loselementosquepermitiránverificarelcumplimientoefectivodelproyecto.


14|P á g i n a


1.4.InstrumentosdeSeguimientoTan importante como lasetapasdeplanificación, licitacióny adjudicacióndeunproyecto, loes ladeseguimientodelmismo,mediantelacualserealizalasupervisióncontinuadelaejecucióndelastareas

incluidasenelproyecto,conelfindeasegurarsedequesevadesarrollandodeacuerdoalplanprevisto.

En este sentido es importante tener en cuenta que se debe hacer la supervisión en tres planossimultáneos,quesonlossiguientes:

• Desarrollo de tareas: revisión de las actividades técnicas y operativas contempladas en elproyecto;

• Revisióndeimpacto:paradefinirenquéáreaselproyectoestácausandoproblemasocambiosquedebenserabordados;

• Factores externos: para mantener la atención en elementos que no están necesariamente

ligadosalproyecto,peroquepuedanestarafectándolo.

Graciasaloquesehagaenesostresplanossepodrádisponerdeinformaciónactualizadaquepermitadetectardesviacionesrespectoalaplanificaciónprevista;redefinirlaestrategiaydireccióndelproyectoytomardecisionesdeformarápidayadecuadaparahacerlascorreccionesqueseestimennecesarias.

Con el fin de hacer el seguimiento correspondiente en esos tres planos, se ha consideradonecesario

poderutilizarlassiguientesherramientasmetodológicas:

• Metodologíadeseguimiento• Reunionesdecontrol,actasdereunióneinformesdeavance

1.4.1.MetodologíadeseguimientoPara hacer el seguimiento de unproyecto es necesario contar con alguna herramienta que facilite elcontrolypermitaestablecerlarelacióndecadaunadelasetapasconelrestodelasexistentes.Deesta

manera será más fácil descubrir qué etapa está atrasada y afectando a las siguientes y con ello alconjuntodeltrabajo.

EnestesentidosurgendostécnicasconocidasquesonlaCartaGanttylaMallaPert,quesondeutilidady a travésde las cuales se consiguen losobjetivos antesmencionados. Para crearunaCartaGantt se

pueden usar software simples que van desde Microsoft Excel (o cualquier planilla de cálculo) hastaMicrosoftProjectqueestáorientadoprecisamenteaesetipodetrabajo.ParacrearunaMallaPertsedebenusarsoftwaremáscomplejos,comoMicrosoftProject.

1.4.2.ReunionesdeControl,actasdereunióneInformesdeAvanceTalcomosedebecontarconlasherramientasdesoftwareparahacerelseguimientodelosproyectos,

esnecesarioqueduranteeldesarrollohayareunionesdecontrolenlasquesevayarevisandoelavancedelosproyectos.

Estas deben tener una frecuencia semanal y deben estar basadas en la Carta Gantt, con el fin de ircorrigiendodemanera clara los retrasos yproblemasque se vayandetectando.Además, ésta será la


15|P á g i n a


únicaformadeevitarquehaciaelfinaldelproyectosedescubraquehayunatrasoquehagapeligrarsufinalización.

Respectode lasactasdereuniones,setratadedocumentosescritosen losqueseregistran lostemas

quesehanabordadoenlareunión.VéaseAnexo1paraunejemplodeunactadereuniónqueincluyalossiguienteselementos:

• Tema:Nombredelproyectoyrazóndelareunión• FechayHora:indicarcuándoserealizalareunión

• Participantes:laspersonasqueasistieronalareunión• Puntostratados:dequésetratólareunión;equivalealaagenda• Acuerdos:definicionesydecisionesquefuerontomadasenlareunión

• Tareasporrealizar:quienejecutarálosacuerdosanteriores• PróximaReunión:indicarcuándosehará

1.5.RecepciónFinaldelProyectoPara hacer la recepción final de un proyecto se debe utilizar como lista de tareas lo indicado por elContrato,ylosTérminosdeReferencia,puestoqueenellosdebeestarindicadotodoloqueelganador

delalicitacióndeberíaefectuarenelmarcodelproyecto.

En este sentido, es muy relevante cumplir concretamente con cada uno de los puntos indicados endichosdocumentos,yaque,antelasautoridadescontraloras,seránesosdocumentoslosquepermitanvalidarelcorrectocumplimientodelcontrato.

Paralarecepciónsedebesolicitaralmenoslosiguiente:

1.5.1.DocumentaciónEsimportantehacernotarqueademásderecibirelSitioWebfuncionandoycumpliendoconlastareas

que se le habían solicitado, es necesario que los desarrolladores entreguen al menos la siguientedocumentaciónquedebehabersidosolicitadaenlosTérminosdeReferencia:

• Código fuente: corresponde a los programas de todas las aplicaciones construidas; debe serentregado en formato digital y debidamente documentado para entender de qué manera

funciona.• Documentación:correspondeainformescompletosrespectodelascaracterísticasdetodoslos

elementos del Sitio Web; si se trata de sistemas, debe incluir los manuales de usuario y

administradorquepermitaentendercómofuncionayquéhacerpararesolverproblemas;debeserentregadoenformatodigital,ademásdeimpreso.

• Elementosgráficos:correspondeatodaslasimágenesdelSitioWeb,paralascualessepideque

seanentregadasenelformatooriginalenquefueronconstruidasyquepuedansereditadas,esdecir,cambiadasusandoelmismoprograma.Loanteriorsignificaquenodebeaceptarsequelasimágenesseanentregadasen formatoGIFo JPGusadoenelSitioWeb,yaqueeso impidesu

edición.


16|P á g i n a


1.5.2.CapacitaciónTambién es importante considerar que si el desarrollo de una aplicación o SitioWeb lo realizó unaempresaexternaalainstitución,seránecesariorecibircapacitaciónparaentendercómofunciona.Paraelloesindispensablecontarconhorasdeenseñanzadepartedelosdesarrolladoresendosámbitos:

• CapacitaciónAdministradores:eslaquerecibeelpersonalinformáticodelainstituciónyquele

permiteentendercómohasidoconstruidoelSitioWebylaformademantenerlo,respaldarloeincluso,mejorarlo.

• Capacitación Usuarios: es la que reciben los usuarios avanzados que estarán a cargo de lamantencióndelSitioWebyquelespermitefamiliarizarsecontodosloselementosquesedebanconocerparautilizarelsitioentodasupotencialidad.


17|P á g i n a


2.Web2.0Ninguna entidad hoy en día tiene una hoja de ruta con un esquema claro sobre cuál será su futuromodelodenegocioenlaRed.Enestesentido,estemanualtienecomoobjetivoayudaralasempresasa

entender mejor el concepto de la Web 2.0 y determinar las implicaciones que pudiera tener en sumodelodenegocio,ensuvisibilidadyposicionamientoenlaRed,ensufuturaestrategiademarketingycomunicación,asícomoensupolíticadeorganizaciónyrecursoshumanos.

Losavancestecnológicosdelosúltimosañoshanprovocadotaltransformaciónenlasociedadcivilque

su impactoen laorganizaciónygestiónde lasempresasserá irreversible.Las iniciativasdecreaciónydifusióndelconocimiento,comoWikipedia,elsoftwarelibreolasredesP2P,hantransformadotantolaestructuradelacomunicacióncomolaformadetransmitirelsaberentrelosciudadanos.

Unodelosbeneficiosderivadosdelasnuevastecnologíassocialespuedeverseclaramenteenlamejora

deprocesosdecolaboraciónentrelasdiferentesáreasdeunaempresa.Losblogs,wikis,redessocialespueden lograr que las empresas sean más productivas, más comunicativas y que sus procesos dedecisión sean más ágiles y transparentes. Por ejemplo, la aplicación de este tipo de herramientas

participativasenprocesosdefidelizacióndeclientesesmuyinteresante,yaquepermitealosusuarioscompartirsuconocimientosobreunproducto(funcionalidades,utilización,etc.)yexperienciasconlosdemás.Aunquelatradicionalorganizaciónpiramidaldelamayoríadelasempresasnovaadesaparecer,

losgestoresnopuedenignorarquemuchosdesusfuturosempleadosyclientesutilizanyaadiarioestasherramientasyesperaránquelasempresashaganlomismo.

2.1.DefinicióndelaWeb2.0ysuorigenLasfasesevolutivasdelaWeb‐conocidascomoWeb1.0,Web2.0yhastaalgunosyahablandelaWeb3.0–sonsólounmeroreflejode las fasesdelciclodevidadecualquierproducto.Enelsectorde las

nuevas tecnologías, antes del lanzamiento comercial de cualquier producto o servicio se lanza una“versión beta” delmismo para testar su fiabilidad y comportamiento en elmercado. Esta versión de

pruebasuelecompartirseconclientescercanosalaempresaconelfindedetectaranomalías,recepcióndelproducto,expectativasquegenera,etc.Unavezcorregidostodoslosfallosdetectados,lacompañíalanzaalmercadola“versión1.0”.Sielproductotieneéxito,entonceslacompañíalanzaalcabodeun

tiempo la “versión 2.0” donde incorporar nuevas funcionalidades ymejoras. Y así, sucesivamente, laempresalanzadiferentesversionesdelproducto‐versión3.0,4.0,etc.‐hastaqueconsideraqueelciclodelproductohallegadoasufinyessubstituidoporotro.

SimplificandolahistoriadelaWeb‐elpróximoañolaRedcumple40años‐,podemosdecirquelafase

Web1.0 terminacon laexplosiónde la conocidaburbuja “puntocom”enel año2000yqueenestosmomentosnosencontramosenlaversión2.0,graciasaTimO’Reillyquecreóesteconceptoenelaño2001. Algunas personas hablan ya de una supuesta versión 3.0, que conllevará disfrutar de unaWeb

más semántica, pero enmi opinión esta segunda fase seguirá desarrollándose al menos durante lospróximos10años.


18|P á g i n a


Sin lugar a dudas, existe mucho marketing alrededor de la Web 2.0. En los últimos meses se hanorganizadocentenaresdeconferenciasycongresossobreeste fenómenoysehanpublicadomilesde

artículosdeopiniónyestudiosenmediostradicionalesydigitales.Porejemplo,segúnel informe“TopEnterprise Web 2.0 Predictions for 2008” de la consultora Forrester Research, un 25% de los 1.000responsables de toma de decisiones en entornos corporativos de Europa y Norteamérica prevé

implementartecnologíasWeb2.0en2008.Noobstante,paraun42%delosencuestadoslaWeb2.0nofiguraentresusprioridades.Estosresultadosnosorprenden.Nadiehoyendíatieneclarocuálseráelfuturo de los medios de comunicación, cuáles son las tecnologías que perdurarán, cuáles son puro

marketing,etc.

Según losexpertos,estasupuesta“Web2.0”noessinounaWebmáscolaborativaquepermiteasususuariosaccederyparticiparenlacreacióndeunconocimientoilimitado,ycomoconsecuenciadeestainteracciónsegenerannuevasoportunidadesdenegocioparalasempresas.Enestesentido,eldebatey

lareflexiónnodeberíacentrarseensiestamosonoenlafaseWeb1.0,2.0ó3.0…,loimportanteparalas organizaciones y empresas es analizar los cambios que están surgiendo y las implicaciones quetendránenloshábitosdelosusuarios.Esnecesariotenerencuentaquelosconsumidoresnosehacen

este tipo de preguntas ni reflexiones; más bien están asumiendo con toda naturalidad estas nuevasherramientas de comunicación en sus procesos de consulta, comparación y compra de productos yservicios.

A lo largodeéstemanual sediscutirán lasmejoresprácticas y estándares asociados a la creaciónde

proyectos con tecnologías asociadas a proyectos de Web 2.0. Es importante recalcar que no es latecnologíaoelsoftwarequehahechoposibleestaevolucióndelciclodevidadelosproyectosweb,sinomasbienlareutilizacióndelamismatecnologíadisponible,ygeneracióndemayorinteractividadhacia

elusuario.


19|P á g i n a


3.DefinicióndelSitioWeb

3.1.ArquitecturadeInformaciónEntrelasmetodologíasmásútilesquetendránlosprofesionalesencargadosdedesarrollarunSitioWeb,secontaránlasqueaparecendescritasdentrodelaArquitecturadelaInformación,queeselconjunto

demétodos y herramientasquepermitenorganizar los contenidos, para ser encontrados y utilizadosporlosusuarios,demanerasimpleydirecta.

LaArquitecturade InformaciónestarácumpliendosusobjetivoscuandounusuarioentreporprimeravezalsitioypuedareconoceraquiénperteneceelSitioWeb;lopuedaentenderenformarápidaysin

esfuerzoyencontrar la informaciónofrecidafácilmente.Adicionalmenteesoentregaráelbeneficiodequequienesproducenelsitiopodránubicarlanuevainformaciónsintenerquecrearnuevasestructurasy almismo tiempo tendrán la libertadde incorporarnuevas iniciativas al sitio sin tenerquepartir de

cero.

Los elementos que se muestran a continuación constituyen la metodología de la Arquitectura deInformación,mediantelacualesposibleconseguirlasmetasdeorganizaciónyvisibilidaddelcontenido.Cadaunadeellasdebeserinvestigada,desarrolladaydocumentadaadecuadamente:

3.1.1.DefinicióndeObjetivosdelSitioAtravésdeestaetapasebuscadefinircuálesseránlosobjetivoscentralesquedeberátenerelSitioWeb

yestablecerlaformadecumplirlos.

Serecomiendacomenzarporgenerarunobjetivocentralyluegodefinirvariosobjetivossecundarios;noobstante loanterior,es importantequeestosobjetivosseanexplicitadosadecuadamentealcomienzodeldesarrollo,conelfindequetodoelequipotengaclaroelhorizontequedebetenerelproyecto.

Paragenerarobjetivosqueseanválidosycomprensibles,seaconsejaescribirlosatravésdefrasesque

seinicienconverbosqueexpresenlasaccionesarealizar.Porejemplo:Recibirpreguntasdelosusuariossobre las actividades de la institución o Presentar públicamente los informesmás importantes de lainstitución.

Una forma de llegar más concretamente a los objetivos, es revisar la visión y la misión de la

organización,desdelacualsepuedenobtenerlasclavesquepermitandefinirlos.Demásestádecirquelosobjetivosdelsitiodeberánestarenconcordanciaconlasnecesidadesyplanificaciónquehayahecholainstituciónensusplanesanuales.

Idealmenteellistadodeobjetivosdelsitiodebeestaracotadoynollegaramásdecincoproposiciones.

Estenúmero,sibienesarbitrario,seindicacomounaformadeseñalarquelosobjetivosnopuedensertantoscomoparaimpedirsucumplimiento;nitanpocoscomoparaqueelsitioseapocoambicioso.


20|P á g i n a


De cada uno de estos objetivos se pueden desprender tareas concretas que permitan avanzar en elcumplimientodeellos.

3.1.2.DefinicióndeAudienciaUnavezquesehaterminadoadecuadamente laetapaanteriorcon lageneraciónde losobjetivosdelsitio,sedebedarunsiguientepaso,queeseldedeterminarlasprincipalesaudiencias(públicos)hacia

lascualesseorientaráelsitio.

EstáclaroqueelSitioWebnopodráatenderalmismopúblicoqueatiendelainstituciónoelprograma,dadoqueelaccesoaInternetseproducemayoritariamenteensegmentosdeingresosmedianosaaltos.

Sin embargo, hay varias consideraciones que tener en cuenta, al definir qué tipos de audiencia seatenderándesdelaspantallasdelsitio.

Acontinuaciónsehacenalgunasdefinicionesdeaudiencia, lasque,sin importar lascaracterísticasdelsitio, siempre deberán estar presentes, y por lo mismo, deben traducirse en acciones para poder

atenderlasadecuadamente.

• Porcapacidadfísica: laaudienciadelsitio incluirápersonascondiscapacidadesfísicasatravésdel cumplimiento de las normas de Accesibilidad que se han recomendado como estándaresinternacionales. Para hacerlo se deben seguir los Estándares Técnicos de Accesibilidad. (Ver

Anexo7)• Por capacidad técnica: la audiencia que llegue al sitio se dividirá de acuerdo a la experiencia

técnica que tenga; por ello se deben plantear acceso simples mediante enlaces y otros más

complejos,porejemplo,medianteelusodebuscador• Porconocimientodelainstituciónoprograma:losusuariosdelsitiosedividiránentrequienes

conocen la institución y quienes no la conocen. Por lo anterior, los primeros siempre sabrán

dónde buscar lo que necesitan usando la terminología, siglas y nombres de departamentosinternos;lossegundos,entanto,noentenderánnadadelanomenclaturainternaylesserámuydifícilaccederalainformaciónqueselesofrezcadeesamanera.

• Pornecesidadesdeinformación:losusuariosdelsitiotambiénsedividiránentrequieneslleganabuscarcontenidosdeterminadosyquienessólolleganaversiexistealgoquelespuedaservirenloqueesténrealizando.

• Porubicación geográfica: dentrode la audiencia siemprehabrá salvadoreñosque ingresan alSitio Web desde lugares diferentes a San Salvador o incluso El Salvador, por lo que loscontenidosdebenrespondertambiénaestadiversidad.

Unametodologíaefectiva,almomentode trabajarenel temade lasaudiencias, tienequever con la

formaenqueelequipodedesarrollorespondaadospreguntas:

• ¿Cuálessonlasaudienciasprevistas?• ¿Porquélagentevendráasusitio?


21|P á g i n a


Alresponderlaprimerapregunta,seráposibledeterminarhaciaquiénessedeberáenfocarelsitioy,porlo mismo, comenzar a tomar decisiones respecto de la forma de navegación, servicios interactivos

previstosyotroselementosdedesplieguequetendráelsitio.

Alresponderlasegundapreguntaloquesebuscaesquebasadosenlasaudienciasposibles,seafactibleimaginarlostiposdecontenidosqueellosvendránabuscaralsitio.

Enestesentido,laexpresiónEstudiarescenariosdeuso,buscadeterminarsituacionesdeusorealesenelSitioWeb,basadoenusuariosexistentesquepuedan llegaral sitioabuscardeterminados tiposde

información.

Al llegar a casos reales de uso del sitio, basado en las audiencias que se haya definido, es posibleestablecer conmuchamayorexactitud cómoesaspersonas (esdecir casos reales) vanausarel sitio.Naturalmente, este tipo de revisiones permiten ratificar o modificar lo que se haya definido

previamentecomocontenidodelsitio,debidoaquemuchasveces laplanificacióninicialeshechaporpersonasqueconocen la instituciónydanporobviosmuchosde loscontenidosquepara losusuariosnormalesnolosontanto.

3.1.3.DefinicióndeContenidosdelSitioUna vez que se han identificado los objetivos del sitio y la audiencia, se debe proceder a hacer las

definicionesmásconcretasquepermitandecidirquécontenidossonlosquevaatenerelSitioWebquesedesarrolle.

Para identificarcontenidos,sedebenutilizarcomoinsumolosmaterialesquesehayanobtenidoenlaetapadeidentificacióndeObjetivosydeAudiencias,yaqueenamboslabúsquedagiróentornoalas

necesidadesqueteníanlosusuariosdelsitio.

Paracumplir conunanormageneral respectodequédeberíacontenerunsitio, sepuedenanotar lassiguientes,comolasmásimportantes:

• Acerca del Programa: entregar la información completa referida al objetivo del proyecto óprogramaodelafuncionalidaddelsitioweb.

• Productos / Servicios: destacar las actividades principales que el usuario puede hacer elproyectowebóenelprograma;puede incluiruna listadeservicios interactivosparahacerlosdesdeelSitioWeb.

• NovedadesdelaInstitución:últimasactividades,noticias,etc.

Viendoesta listamínima(quecreceráen lamedidade lasnecesidadesdeentregade informacióndelproyectooprograma),hayquehacerénfasisenqueelinterésdeloscontenidosvariarásisetratadeunusuariointernooexterno.

Por lomismo,esmuy relevanteque tanto losobjetivos como laaudienciadel sitio sehayandefinido

muybienenformaprevia,porquedelocontrarionohabráposibilidaddeatenderaambosusuariosdemaneraadecuada.


22|P á g i n a


AgruparyEtiquetarelContenido

Con lasdefinicioneshechashastaahora, llegaelmomentodeponerenpráctica lasmetodologíasquepermitenordenar los contenidos,agrupándolosenconjuntos coherentesydándolesnombresque los

identifiquen.

Probablemente lamejor técnicaparahacerloeshacerunaspequeñastarjetasdepapel,en lasqueseanotan lasprincipalesáreasdecontenidoquesehayandetectadoyrevisadoenelpasoanterior.Unavez hecho, las cartas se ponen sobre una mesa y se van agrupando, hasta formar conjuntos de

elementoscoherentesentreellos.Luego,acadaconjuntose leponeunnombre(idealmenteunasolapalabra)queidentifiqueatodossuscontenidos.

Conesasagrupacioneshechas,yatendremosloselementosadecuadosparagenerarposteriormenteelárboldecontenidosque,asuvez,permitiráhacerelsistemadenavegación.

Una vezqueel procesode Etiquetadoha concluido, es buenohacer comprobaciones empíricas de la

validezdelosnombresescogidos.Paraello,serequierequeloselegidosseanmostradosapersonasdediversoorigenyqueconozcanlainstitución,comotambiénaquienesladesconozcanporentero.Ellosdebenresponderlassiguientespreguntas:

• ¿Quésignificaestenombre?

• ¿Quétiposdecontenidosesperaríaencontrarenestaárea?

Conlasrespuestasobtenidassepodrájuzgarsilosnombresquesehanusadosonlosmásadecuadoso,bien,hayqueintroducirmodificaciones.

Porejemplo,dentrodelosnombresmásusadosparaunadelasseccioneshabitualesdeunSitioWebcomoesladeinformacióncorporativa,secuentaAcercade,Sobre...,QuiénesSomoseInformacióndel

ProgramaodelaInstritución.

IdentificarRequerimientosFuncionales

Juntoconlabúsquedadelasáreasdecontenidoquedeberátenerelsitio,sedebetrabajartambiénenladefinicióndeloquesebuscaqueelsitiohaga,esdecir,lostiposdeinteracciónquesebuscaincluir.

Dentrodelosserviciosinteractivosmásfrecuentessecuentanlassiguientes:

• FormulariodeContactoparaenvíodemensajeselectrónicos

• Sistemadeenvíodeunanoticiapormailaunamigo• Formatodeimpresióndeloscontenidos• MapadelSitio

Dentro de las funcionalidades de mayor complejidad, pero a las que todo sitio debería aspirar, se

cuenta:

• BuscadorinternodelSitioWeb


23|P á g i n a


• Áreadeaccesoprivadoparausuariosregistrados• Sistemadeenvíodeboletinesdenoticiasdelsitioausuariosregistrados

• Sistemas específicos para alguna funcionalidad requerida e interactividad por parte de losusuarios

Será importantequeel sitio cuentecon todos los servicios interactivosdescritos comomínimos,paraofrecerunamejorexperienciaalusuarioquelovisita.

AnálisisdeSitiosSimilares

ElúltimoelementoquesedebedesarrollarenestaetapaeslabúsquedadeotrossitiosenInternetque

sean similares a nuestra institución, con el fin de revisar de qué manera han resuelto los mismosproblemasquedeberemosatender.

Esta actividad comparativa permitirá llegar a las buenas prácticas que es posible adaptar a lasnecesidades de nuestro sitio, con el fin de asegurarnosmétodos de funcionamiento y despliegue de

contenidos,queseancoherentesconlosobjetivosquesehanplanteadoinicialmente.

Es importantequesehagaunapautapreviadecomparación,conel findesaberdeantemanocuálessonlosparámetrosquesemediránygraciasaeso,optimizarlarevisiónquesehaga.

3.1.4.DefinicióndelaEstructuradelSitioUnavezquesehahechoeltrabajodeidentificacióndecontenidosreseñadoenlasetapasanterioresdeestedocumento,sedebeavanzarhacialasdefinicionesrelacionadasconlaformaquetendráelsitioque

seestádesarrollando.Elloimplicarátrabajarentresáreasconcretas,atravésdelascualessedefinirálaestructuradelsitio,elárboldecontenidosylossistemasdenavegaciónqueseofreceráalosusuariosparaqueavancenatravésdesuscontenidos.

Lastresetapasseexplicanacontinuación:

SerefierealprocesodeidentificarlaformaquetendráelSitioWebqueseestádesarrollando.Eneste

sentidoesimportantehacerunadiferenciaentreestructuraydiseño(queseráexplicadagráficamentemásadelanteenestecapítulo).

• Estructura: se refiere a la forma que tendrá el Sitio Web en términos generales con sussecciones,funcionalidadesysistemasdenavegación.Noconsideraniincluyeelementosgráficos

(logotipos,viñetas,etc.).• Diseño:serefierea lasolucióngráficaquesecrearáparaelsitio,en lacualaparecencolores,

logotipos,viñetas,yotroselementosdediseñoquepermitenidentificarvisualmentealsitio.

Dadoloanterior,cuandohablamosdelaestructuranosestamosrefiriendobásicamenteacuálserá la

experienciaquetendráunusuariocuandoaccedealsitio.Deestamanerapodremosdeterminardóndeestaránubicadoslosserviciosinteractivos(buscador,sistemasdeencuestas,áreasdecontenidos).

Graciasalarealizacióndeestaetapaesposiblediscutirentérminosmuyprácticoscuálserálaofertadeelementos de información e interacción que tendrá el usuario. Al no incluir elementos de diseño, se


24|P á g i n a


permiteque ladiscusión sobre laestructura sedesarrolleenaspectos concretos, sinque intervenganaúnconsideracionesestéticasquehabitualmenteatrasanlaaprobacióndeestaetapadeldesarrollo.

MapasPermanentesdelSitio

Serefierealprocesodecrearunárboldecontenidoenelquesemuestredemaneraprácticacuántas

seccionestendráelsitioendesarrolloycuántosniveleshabrádentrodecadauno.

Cuandoseusalaideadecrearunárbol,serefiereexactamenteagenerarundiagramaquecuenteconun tronco, ramas y hojas, paramostrar las zonasprincipales, secundarias y contenidos finales que seiránincorporando.

Eneste sentido sedebeevitara todacostaqueelárboldecontenidos represente laestructurade la

organización,dadoqueéstaesconocidaycomprendidainternamente,peroconstituyeunabarreradeentradaparausuariosexternos.Siellos lleganabuscarenunaestructuradecontenidosbasadaen laforma en que funciona la organización, primero deberán comprender cómo funciona la entidad para

luegoencontrarloquelesinteresa.

Dadoloanterior,lasrecomendacionesparalageneracióndeesteárbolsonlassiguientes:

• Secciones:sedebeintentarqueseanlasmenosposibles,conelfindeconcentrar lasaccionesdelusuarioenpocasáreas;hayqueconsiderarquecadaunadelasáreasaintegrarenelárbolrequerirádemantenimientoposteriorencontenidos,gráficayfuncionalidad,loqueencarecerá

elcostofinaldeoperacióndelsitio.Dadoloanterior,serecomiendaquelasseccionessesitúenentre5y7.

• Niveles:sedebeintentarqueelusuarioestésiempreamenosdetresclicksdelcontenidoque

andabuscando.Porellono sedebería crearmásde tresnivelesdeacceso;esto significaunaPortada,unaPortadilladeSecciónylosContenidospropiamentetales.

• Contenidosrelacionados:sedebeconsiderarquehabráfuncionalidadesqueesténpresentesentodo el sitio. Entre ellas se incluyen elementos como Buscador, Preguntas Frecuentes yFormularios deContacto. Se recomiendaque este tipode elementos quede fuera del árbol y

flotensobreéste,conelfindeindicarquedesdetodaslaspáginashabráenlacesaellos.

DefinicióndelosSistemasdeNavegación

Unavezquesecuentaconlosárbolesdecontenidodesarrolladosenelpasoanterior,latareasiguienteconsisteengenerar lossistemasdeaccesoadichoscontenidosenelSitioWeb.Atravésdeestos, losusuariospodránavanzarporsusdiferentesáreas,sinperderse.

Enlageneracióndedichossistemassedebeatenderadoselementosqueseránmuyimportantes:

• Textual: se refiere a que la navegación se hará a través de elementos concretos, tales como

menús,guías,botonesyotroselementosquedebenserclaramentedistinguiblesdentrode lainterfaz. Para generarlos se debe conseguir que cada uno de ellos represente claramente lafunción para la que fueron designados y no dejar lugar a dudas sobre su función ni sobre la


25|P á g i n a


acciónquedesarrollaránalserusados.Esdecir,unbotóndebeparecertalynosólounparchedecolorsobrelapantalla.Adicionalmente,esmuyimportantequelaspalabrasescogidaspara

indicaracciones,seanclarasyprecisas.Enestesentido,siunbotónnecesitaserexplicado,esmejordesecharloybuscarotrasolución.

• Contextual: es todo lo referido a cómo se presenta la información, utilizando para ellos

elementosbasadosentexto,gráficosobiendeentorno.Loselementosrelevantesenestecaso,serántodosaquellosquepermitenmostrar lanavegaciónen lapantalla.Entreellos, lagráficautilizada,laredaccióndelostextosquesemuestraneinclusoelnombredeldominio(URL)que

permitiráqueelusuariosientaqueestáenellugarindicado.

CaracterísticasdelosSistemasdeNavegación

Algenerarelsistemadenavegación,sedebentenerencuentalassiguientescaracterísticas:

• Consistente: el sistema debe ser similar en todo el sitio, en lo referido a su ubicación ydisposiciónenlaspáginas.EstoseaplicatambiénaaquellasinstitucionesquepuedentenermásdeunSitioWeb.

• Uniforme:elsistemadebeutilizarsimilarestérminosconelfindequeelusuarioqueloveaenlaspáginas,confíeenquesusopcionesllevansiemprehacialosmismoslugaresdentrodelsitio.

• Visible: el sistema debe distinguirse claramente dentro del sitio, con el fin de que el usuario

cuenteconél,comosisetrataradeunaguíapermanenteeneláreaenqueseencuentredelsitio.

SedebetenerencuentaquelosbuscadoresdeInternettienenlacapacidaddeindexareincluirensusbasesdedatos,cualquierpáginadelsitio,aún lasmás internas.Porello,esdesuma importanciaque

todas las páginas del sitio cuenten con el sistema de navegación, especialmente si el SitioWeb estádesarrollado con frames (o marcos) que normalmente impiden que se indique claramente en cada

páginalainformaciónreferidaalanavegacióngeneral.Deestamanera,siunusuarioaccedealsitioporuna página interior que estaba indexada en un buscador, siempre contará con las herramientasadecuadasparairalaportadaorealizarcualquierotraacciónqueleinterese.

3.1.5.DefinicióndelosSistemasdeNavegaciónEntreloselementosmásrelevantesqueconformanelsistemadenavegaciónsecuentanlossiguientes:

• MenúGeneral:siemprepresenteentodoelsitio,permiteelaccesoacadaunadelasáreasdelsitio.

• PiedePágina:usualmenteubicadoen laparte inferiordecadapágina, indicaelnombrede lainstitución,teléfonos,direcciónfísicaydecorreoelectrónico.

• Barra Corporativa: ofrece diversas opciones de información respecto del sitio y tal como el

anterior,semuestraentodaslaspáginas.• Ruta de Acceso: listado que aparece en la parte superior de cada página y que muestra el

trazado de páginas que hay entre la Portada del sitio hasta la página actual que se esté

revisando;cadaunadeellasdebetenerunenlace,paraaccederaláreade lacualdepende lapágina. Cada uno de los elementos que conforman este camino debe tener un enlace que


26|P á g i n a


permitaelaccesoaesasáreas.Enlaliteraturainternacionaleningléssobreestetema,sellamaaesteelementocomobreadcrumbs.

• Fechadepublicación:parasaberlavigenciadepublicacióndelcontenidodesplegado.• BotónHome:parairalaportada• BotónMapadelsitio:paraverelmapadelSitioWeb

• BotónContacto:paraenviarunmensajealencargadodelsitio.• Buscador:presenteencadapáginasiesquelafuncionalidadexisteenelsitio.• BotónAyuda:pararecibirayudasobrequéhacerencadapantalladelsitio.

• BotónImprimir:paraimprimirelcontenidodelapágina;seesperaqueelformatodeimpresióndeldocumentoquesemuestraenpantallaseamássimplequelapáginanormaldelSitioWeb,paradarlaimpresiónalusuariodequehayunapreocupaciónporayudarleenlatareadellevar

impresoelcontenido.

3.1.6.DefinicióndelDiseñoVisualUnavezquesehaterminadoeltrabajoenlaestructura,yasecuentaconlosinsumossuficientescomopara avanzar hacia la generación del diseño visual de las pantallas del sitio, momento en que seutilizarántodoslosinsumosquesehanidogenerandoenlasetapasanteriores.

Paraellolarecomendaciónestrabajarencuatroetapassucesivaseincrementales,quesedescribena

continuación:

DiseñodelasEstructurasdePáginas

Estaetapaconsideralageneracióndedibujossólolinealesquedescribenloscomponentesdecadaunadelaspantallasdelsitio,conelobjetivodeverificarlaubicacióndecadaunodeellos.

Elidealesquesedibujendiagramascontodaslaspantallasquetendráelsitio,yaquedeestamaneraseráposiblequediseñadoresydesarrolladorestenganundocumentoconcretodetrabajo,atravésdel

cualresuelvantodaslasdudasdeloselementosquecomponenestapágina.Sibienestetrabajoeslargoypuederesultartedioso,suventajaesqueningúnelementoen laspáginasquedapuestoalazarsinoquerespondeanecesidadespuntualesquesehandetectadoyqueseresuelvenporestavía.

Nuevamente,talcomoseplanteócuandoseestabapresentandoeltemadeEstructuraen laspáginas

anteriores,loidealesqueestosdibujosnotenganningúnelementográficoovisualconcreto,sinoquesólo incluyan líneas y bloques que representen objetos de contenido (como logos, viñetas o fotos).Nuevamente, como en ese caso, el uso de estas imágenes ayudará a que la discusión sobre cada

pantalla se centre en la funcionalidad y no en temas más subjetivos como colores o calidad de loselementosdediseñoenlapágina.


27|P á g i n a


Figura2.1.:Estructuradepáginas(Wireframe).

Unelementoquesedebeconsiderarjuntoconestosdibujosdeestructura,esqueenlaspantallasquerepresenten transacciones, se debe incluir un diagrama de flujo sencillo, mediante el cual se

ejemplifiquecuáles son las interaccionesposiblesy sus resultados.Naturalmentesedeberá incluir laspantallascorrespondientescuandoseaadecuado.

Figura2.2.:DiagramadeFlujo.


28|P á g i n a


Gracias a estos diagramas en combinación con las páginas, tanto diseñadores como desarrolladorespodrántenerclarocuáleseltrabajoquedebenrealizarencadaunadelasáreasdelsitioqueseestén

generando.

BocetosdeDiseño

Estaetapaconsisteenlageneracióndedibujosdigitalesacabadosdelaformaquetendránlaspáginasprincipalesdelsitioquesedesarrolla,considerandocomotaleslaPortada,PortadadeSecciónyPáginadedesplieguedecontenidos.

Paradesarrollar loselementosgráficosseutilizancomo insumos losdibujosdeestructuraquesehan

generadoenlaetapaanterior.

Laideaesqueenestaetapasetrabajeensoftwaregráficoparafacilitarelprocesodecorrección,yaquehabitualmentehabrámuchainteracciónconlosusuarios.

Loselementosquesedebentenerpresentesenestaetapa,sonlossiguientes:

• ImagenCorporativadelPrograma:sedebenseguirloslineamientosdeusodecolores,textosyotroselementosdefinidosparalaentidad.

• Criterios de Usabilidad: se deben tener en cuenta los criterios que se dan a conocer en elcapítulodeusabilidad

BorradoresdePágina

Una vez que se ha aprobado la etapa anterior, se toman los bocetos de diseño que hayan sidoaprobados y se genera un prototipo (páginas clickeables) mediante el cual se pueda comprobar

directamentelaformaenquesedesempeñan,cuandoselesaplicalatecnologíaHTMLdeconstruccióndepáginasweb.

Laintencióndeestaetapaesusareldiseñodepantallaquesehacreado,contandoconenlacesreales

que permitan ver la forma de usar sus atributos (cada enlace tiene los estados de Enlace, Flotante,ActivoyVisitado)yrevisarlaformaenquesedesplieganlaspáginasquesevanadesarrollar.

Adicionalmente,enestaetapaseráposiblehacerlacomprobaciónefectivadelpesodelaspáginasunavezconstruidasysepodránoptimizarloselementosquequedenfueradenormaporpesootamaño.

MaquetaWeb

EslaetapafinalyconsisteengenerartodoelsitioentecnologíaHTMLutilizandoimágenesycontenidos

reales.

Enelcasodeunsitioestático,estaetapacorresponderáalaconstruccióndelsitio.Enelcasodeunsitiodinámico, laspáginasquesegenerenpermitiránqueeldiseñadorgenere lasplantillasde trabajoyeldesarrolladordesoftwarelasutilicecomoelementosparaintroducirlaprogramaciónqueseanecesaria

paralacreacióndelsitio.


29|P á g i n a


Es importante considerar que todas las tareas y actividades incluidas en esta etapa pueden serabordadas por un diseñador que tenga experiencia en diseño web. Esto debe ser parte de los

requerimientossolicitadosalasempresasproveedorasdeestetipodeservicios.


30|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ún


31|P á g i n a


sistemadebúsquedaqueseaefectivoparaaccederalcontenidoalquenose lograaccederoquenoseencuentraasimplevista.

3. Demostrarelcontenidodelsitio:significaqueelcontenidosedebemostrardemaneraclara,con títulos comprensibles por parte del usuario y con enlaces hacia las seccionesmásusadasque estén disponibles donde el usuario los busque. Ayudará en este sentido tener un

seguimientodelasvisitasparacomprenderquéeslomásvistoylomásbuscadodelSitioWeb.4. UsardiseñovisualparamejorarynoparadefinirlainteraccióndelSitioWeb:serefiereaque

loselementosgráficosdel SitioWebdebenestarpreparadosparaayudaren losobjetivosdel

sitio 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 como

visitantelogrelosobjetivosquelotrajeronalSitioWebyqueéstalefaciliteelaccesoaloscontenidosqueestánincorporadosatravésdesuspantallas.

Paraconseguiresto,esnecesarioquelainterfazadopteloselementos,quedetallamosenestecapítulo,atravésdeloscualesseráposibleconseguirelcumplimientodelospostuladosantesseñalados.

4.1.1.ElementosdelainterfazLainterfazdelSitioWeb,cualquieraseaelobjetivoquepersiga,debedarcuentadenormasdecarácter

general,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 este

sistema.

Dichascaracterísticastienenqueverconloselementosdeidentificación,denavegación,decontenidosydeacciónqueelSitioWebdebecontener,todosloscualesseanalizanenlassiguientespáginas.

Laexistenciae importanciadedichoselementos, comoasímismo laubicaciónquedeben teneren lainterface,sehavistocomprobadaatravésdelasinvestigacionesquesehanhechoentornoalosSitios

Web. Con ellas se demuestra que las zonas que normalmente se ven en una visita inicial, estánconformadasporunaletraFobienporuntriángulo,cuyasecciónmásrevisadaeslaqueseencuentraen la esquina superior izquierda. Lo anterior se aprecia en esta imagen tomada del SitioWeb de la

consultoradeJakobNielsen:


32|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:


33|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:


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


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


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


37|P á g i n a


diferenciarlo puede variar pero al menos se debe procurar que esté subrayado y de colordiferenteobien,sinoestásubrayado,sísedebemostrarenotrocolor.

2. Suestadodebeservisual:losenlacestienencuatroestadosposibleslosquedebenvisualizarsedemanerasimpleydirecta.

a. Enlacesinvisitar:eselcolorquetieneantesdequeselehagaclicencima;sucolordebe

serdiferentedeltextoquelorodea.b. Enlacedestacado:eselcolorquepuedeadoptarcuandose lepasaelmousesobreel

enlaceypermiteayudaralusuarioadescubrirsuexistencia.

c. Enlace activo: es el color que tiene cuando se le da clic encima; normalmente es uncolorfuertequepermitenotarqueselehaactivado.

d. Enlacevisitado:eselcolorquetieneelenlacecuandoyahasidoactivadoylapáginaa

laqueconduceyahasidovisitada.3. Su contenido debe ser explicativo: los enlaces deben contener palabras que expliquen hacia

dóndesedirigelaacción,detalmaneradeevitarqueloenlazadoseanfrasescomo"clicaquí"y

otrassimilares.Adicionalmenteyparaefectosdeaumentarsuaccesibilidad,lasintaxisHTMLdelosenlacesdebecontenerelmodificador"title"de talmaneraquesedespliegueunrecuadroexplicativoacercadelefectoquetendráhacerclicsobreelenlaceelegido.

Usodeelementosespecíficos

Losrestanteselementosinteractivosquerequierenserrevisadossonlosquepermitendefinireltipode

interacció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ásadecuadaconsisteenemplearuncontadorreversoqueinformeeltotaldecaracteresquesepuedeescribiryquelosvayarestandoamedidaqueelusuariovaingresandolainformación;de

esamaneraseleofreceunaretroalimentaciónadecuada.

Elsegundoelementoesel"checkbutton"quepermitemarcarlasopcionesqueseanlasmásadecuadasparalaacciónqueseestérealizandodentrodeunformulario.Hayquetenerencuentaqueuncampodeestetiposiemprepermitelaselecciónmúltipledeopciones.

Eltercerelementoesel"radiobutton"quepermitemarcarlaopciónmásadecuadaparalaacciónque

seesté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 mostrarcontenidosdemaneragráficayparavinculardemanera fácildocumentosdediferentesorígenes.No

obstante, para que esta simpleza pueda darse efectivamente, es necesario que quienes desarrollen


38|P á g i n a


sitiosycontenidosenestaplataforma,cumplanconciertosestándaresqueasegurenquelamayorpartedelosusuariospodránverloquesepublica.

Paraello,esdesumaimportanciaque lossitiosqueseconstruyancumplanefectivamenteconciertas

característicasdepublicaciónquepermitanconseguirdosobjetivosmuyconcretos:

• Quelaspáginassedesplieguenrápidamenteysindificultadestécnicasenloscomputadoresdelosusuarios;

• Quelaspáginaspuedanservisualizadasporlosusuariosdelamismamaneraenquesusautores

lashanconstruido.

Paraconseguirambosobjetivos,esnecesarioquequienesconstruyan losSitiosWebhaganusodeunconjuntodebuenasprácticasquesehanobtenidodelaexperienciaenlaconstruccióndeestetipodecontenidosdigitales,ytambién,queseasegurendecumplirconestándaresmundialesenesteámbito.

4.2.1.BuenasPrácticasAgrupamosenestaáreaunaseriederecomendacionesextraídasde laexperienciaeneldesarrollode

SitiosWebdetodotipo,quepermitenasegurarunabuenaexperienciadelosusuariosquelosvisitan.

NormasMínimasparaFacilitarelAccesoVíaConexiónTelefónica

Lavisualizaciónde losSitiosWebdependede latransmisióndedatosentredoscomputadores,por loquees 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 cantidad

razonable de kilobytes (kb) que impidan su visualización. En este sentido, lo razonable dependerádirectamentedel tipodesitioqueseestédesarrollandoyde la conexióncon laquecuente lamayorpartedelosusuarios.

Porejemplo,sisetratadeunsitiodedicadoausuariosdezonasruralesalejadasdelacapitalquetienen

unaconexiónmuylenta,50kbseráuntamañoconsiderable,respectodesisecomparaesoconusuariosqueseconectenenlacapital.Estopuedevariardependiendodelniveldeaccesoabandaanchadecadaciudad.

No obstante, se puede estudiar cuánto se demora en que una página llegue completamente al

computadordeunusuariosisecalculalosiguiente:

• Si un módem transmite a 56 kbps (kilobits por segundo) significa que por cada segundo detransmisión,encondicionesideales,escapazdeenviar7kb(kilobytes)deinformación.

• Siunapáginapesa70kb,encondicionesidealesdemorará10segundosenaparecercompleta

enelcomputadordelusuario.


39|P á g i n a


• Aunque no hay información técnica consistente para establecer la velocidad promedio de unmódem,puestoquedependedediversasvariablestécnicas, laexperiencia indicaqueéstosse

conectan habitualmente a la mitad de su valor declarado. Entre las variables que afectan lacalidaddelaconexió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ónpudomejorarseyaqueelcontenidose

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


40|P á g i n a


UsandoCSSsepuedeofrecerdiferentesvisionesdelmismocontenidosinhacerlecambiosasuspáginas.Loúnicoquecorrespondeendichocasoesmodificarelarchivodepresentaciónde loscontenidos, lo

cual 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:

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


41|P á g i n a


Dentrodelelemento<div>sepuedenutilizarotrosdosparaasignartiposdepresentaciónespecialaloscontenidos. El primeroes el elemento<p>quepermite generar párrafosde información textual, a la

cualseleasignanvaloresmedianteatributosdeCSS.

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árrafoypermitegenerar

untipodepresentació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 puedafragmentarenvariastablas:

Deesamanera,cuandoelsitiosepresenteenelprogramavisualizadordelcliente,siempremostrarála

primeratabla(quenormalmentellevaráellogotipoylaidentificacióndelsitio)demanerarápida,dandoal usuario la sensación de haber llegado al destino elegido. Luego en las siguientes tablas se vanponiendolosrestanteselementosdelsitio.

Enlafigura3.3.,sepuedeverqueelsitioestáconstruidoentrestablas,deacuerdoalsiguienteorden:

Tabla1:Muestraellogotipodelainstitución,lafechayelmenúdelsitio.

Tabla2:MuestralasSeccionesdelSitiomásloscontenidosdediferentenivel.

Tabla3:Muestraelpiedelapáginaconlaidentificacióncorporativadelainstitución.


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


43|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:


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


45|P á g i n a


Una tecnología muy popular que se puso de moda en el año 1996 cuando el software NetscapeNavigatorloimplementó,fueelusodeimágenescomofondosobackgroundsdelaspáginasweb.

Salvocasosenqueseaestrictamentenecesario,estaprácticadebeserdejadadeladoporquesuúnico

efecto es el de agregar un paso excesivo a los sitios, afectando el tiempo de descarga y acceso a lainformació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ínima

parahacerunacorrectaindexacióndelcontenidoqueincluye.

LosmetatagssonunconjuntodeelementosqueobedecenaunestándardefinidoporelWorldWideWebConsortiumporloquesuusoestá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ónmuyimportanteatravésdelgrupoDublínCorequehadefinidoloselementosmetatagsausaryquedebenserconsultadosenhttp://www.dublincore.org.

7.UsodeAjax

Ajax es una combinación de tecnologías que se basa en el lenguaje Javascript para ofrecer una

experiencia de intercambio dinámico de información en SitiosWeb, enriqueciendo la experiencia derevisardatosyconseguirresultadosdemanerarápidayconfiable.

Ajaxensínoesunatecnología,sinoqueunaimplementacióndevariastecnologíasyaexistentestalescomo XHTML y CSS para mostrar páginas web; Document Object Model (DOM) para mostrar e

interactuar dinámicamente con la información presentada; el objeto XMLHTTPRequest que permiterealizar 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 fines

maliciososcomoextraerinformacióndepartedelusuario,muchasvecessepuededarelcasoquedicha


46|P á g i n a


capacidad no está habilitada en el browser utilizado. Si este es el caso, la aplicación que utilice Ajaxtambiénquedarádesactivada.

Enestesentidosesugierequedesdelaprogramacióndelaaplicaciónsehagaestetipodedeteccióncon

el objetivo de ofrecer una interfaz distinta en dicho caso y, gracias a eso, entregar otra forma deinteractuarconlapantallaquepermitautilizarlaaplicaciónqueseofrece.

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ágenes

repetidas, tales como los iconos y otros elementos gráficos que son utilizados en diferentes

páginasdelsitio.Alubicarlosenundirectorioúnicosepuedeaprovecharlafuncióndecachédelprogramavisualizadorparamejorarelrendimientodelaspá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 sitios


47|P á g i n a


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

Interoperabilidad

Dado que los Sitios Web pueden ser accedidos sin problemas desde computadores que utilizandiferentessistemasoperativos,enunsitiowebsedebecuidareseaspectodeladiversidad.Paraellosedebe asegurar de que desde la mayor parte de ellos las páginas pueden verse sin mayores

contratiempos.

DebidoaquelosavancesdelosestándareswebsonhaciaelestándarXMLqueademáseselestándarelegido para el intercambio de documentos electrónicos se ha privilegiado destacar el trabajo conXHTML1.0conelfindedestacarlascaracterísticasdesuutilizaciónsobrelosestándaresanteriores.

Entre lasdiferenciasmásrelevantesdeXHTMLrespectodeHTMLyquedebenser tenidasencuenta,

aparecenlassiguientes:

Eldocumentodebeestarbienformadocontodas lasetiquetascerradasenelmismoordenenqueseabren,valedecir,enelcasodeetiquetasqueseabrendentrodeotras,debensercerradasenelmismoorden.

• No puede haber elementos vacíos, por lo que las etiquetas que no tienen cierre deben

completarseconun"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 el

identificadorID.

Debidoaestasdiferencias, losdesarrolladoresquemigrensusSitiosWebhaciaelestándarde laW3Cdeberánhacervariasmodificacionesyaquecomoseaprecia,elusodeXHTMLobligaaserestrictoenelcumplimiento de la especificación, en especial en el uso de minúsculas y en el cierre de todos los

elementos,temaqueenlasversionesanterioresdeHTMLnoeratancrucial.


48|P á g i n a


5.Estándares

5.1.EstándaresInternacionalesLos Sitios Web son el resultado de la implementación de una serie de tecnologías que facilitan latransmisiónde contenidosdesdeun servidor auna seriede clientesousuarios, a travésde redesde

computadoresconectadosaInternet.

Paraqueestesistemafuncione,esnecesarioqueelcomputadorquecontienelainformación(servidor)ofrezca dichos contenidos mediante tecnologías conocidas y que cumplan con ciertas reglas o

estándares, para que quienes acceden a ellas (clientes o usuarios) mediante diferentes tipos desoftware,puedanentenderloselementosdeinformaciónqueselesentregan.

Enestesentido, losestándares jueganunpapelclaveyaquees la formaenqueambaspartes logrenintercambiar información ymás importante aún, permite que otros actores lleguen a ofrecer nuevas

funcionalidades que puedan agregarse a las anteriores sin mayores dificultades. Adicionalmente, losestándaresfacilitanquelaofertadecontenidosyfuncionalidadespuedaserutilizadadesdediferentesplataformas computacionales (sistemas operativos y software), sin que se requiera obligatoriamente

queelusuariotengaunaenparticular,paraaccederadichainformación.

5.1.1.¿Quésonlosestándares?Losestándaressedefinencomolasespecificacionesquedeterminan lamaneraenqueseconstruyey

funciona a una tecnología en particular, con el objetivo de regular la realización de sus procesos;tambiénseconocedeestamaneraalaformaenqueseconstruyenelementosdehardwareosoftware,paraquequienesgeneraránelementosadicionalesaestoslogrenrealizardichatareacorrectamentey

consiganqueesosnuevoselementosseacoplenalosanterioressinproblemas.

En lo que se refiere a los SitiosWeb, los estándares determinan la forma de construir sus páginas ycomponentes,yaqueseenglobabajoestenombrealconjuntodenormasquedanorigenallenguajeenelqueseescribenlaspáginasdelosSitiosWeb.

Para este ámbito existe una organización de carácter mundial conocida como World Wide Web

Consortium(W3C)quegeneraconstantementelasnuevasversionesdelosestándaresdelwebyofreceherramientasquepermitenhacerlavalidacióndelusodelosmismos.

5.1.2.¿Quiénfijalosestándares?Tal como se explicó antes, en el caso del web los estándares son fijados por el World Wide WebConsortium(W3C),unaorganizacióninternacionalqueagrupaamásde400entidadesmiembrosentre

las cuales se cuentan empresas, universidades, medios de comunicación, fundaciones y centros deinvestigación.

El W3C fue creado en 1994 a partir del trabajo de Tim Berners‐Lee quien fue el inventor de estatecnología en el año 1989, mientras trabajaba en la Organización Europea de Investigación Nuclear


49|P á g i n a


(CERN) ubicada en Suiza. Con el fin de facilitar el intercambio de información a través de redes decomputadores,ideóelsistemaparaquecadadocumentotuvieraunadirecciónúnica(UniformResource

Identificator‐URI)conelfindequedesdecualquierlugardelaredpudieraseraccedidosindificultades.Además, ideó la forma de representar ese documento a través de un lenguaje común (Hyper textMarkup Language) y finalmente, la forma de transmitir esos datos a través de la red, utilizando un

protocolodecomunicacionesespecializadoparaestatarea(HypertextTransferProtocol‐HTTP).

Debido a que se requería que esas tecnologías de comunicación de datos y creación de documentostuvieran una continuidad en el tiempo y fuera adaptándose a las mejoras tecnológicas que fueranapareciendoeneltiempo,secreóelW3Cquedesdesufundaciónhageneradomásde90estándares.

5.1.3.¿Porquéhayqueseguirlosestándares?Unode losproblemasprincipalesqueexistíaparael intercambiodedocumentaciónhastaantesde la

aparición delweb, era el formato de los documentos debido a que las plataformas computacionales(sistemasoperativos,software)noerancompatiblesentresí.

ElHTMLpermitióresolvereseproblema,alcrearunestándarquefuesimilarparatodasellasyqueporlotanto,noteníarequerimientosespecíficosparacadaunadelasplataformas,sinoquelosmismospara

todas ellas. Esta solución habilitada por las tecnologíasweb constituyó entonces uno de sus haberesprincipalesyporelloesqueelW3Claincorporódentrodesupropiamisióncomoorganización.

Enestesentido,seindicóquesuobjetivoglobalesaumentarelpotencialdelawebyparaellorealizaacciones mediante las cuales se aseguran que las tecnologías relacionadas al web sean compatibles

entreellas,yasípermitirqueelhardwareysoftwareusadoparaaccederalossitiostrabajeenconjunto.Aestametaledenominan“interoperabilidadweb”yparaconseguirlaesquelosestándaressonabiertosypúblicos.

5.1.4.¿Cómosemideyverificasucumplimiento?Losestándaresdebenofrecerlacapacidaddequesucumplimientopuedasermedido,conelfindequese logre establecer si sus características han sido bien utilizadas. En el caso de los estándares de

Internet, es posible verificar su cumplimiento a través de aplicaciones que funcionan mediantetecnologíaweb,loquehacemuchomássimplesuverificación.

Por ello, se cuenta con un grupo de herramientas que son proporcionadas por el W3C las cualespermitenhacermedicionesinstantáneasacercadelcumplimientodelosestándaresestablecidosporel

organismo.

Entredichasherramientas, lasmásrelevantesyqueestándisponiblesdemaneragratuitaatravésdelweb,sonlassiguientes:

• Verificación deHTML: permite revisar el cumplimiento del estándar de la versión deHTML oXHTMLquesehayaelegido; laherramientacomparaelcódigode lapáginawebqueserevisa

contralanormacorrespondienteydaaconocercuálessonlasinfraccionesquesehancometido


50|P á g i n a


(en caso de existir) y además, ofrece información acerca de cómo resolver el problema. (http://validator.w3.org/)

• Verificacióndeenlacesrotos:permiterevisarquenohayaenlacesrotosoimágenesperdidasenel Sitio Web; la herramienta entrega un listado de los problemas detectados para que elencargado del Sitio Web realice las correcciones correspondientes.

(http://validator.w3.org/checklink)• VerificacióndeCSS:permite revisarel cumplimientode lanormaque indicaqueel contenido

debeestarseparadodelapresentación; laherramientacomparaelcódigodelahojadeestilo

conlanormacorrespondienteydaaconocercuálesdelosestilosnolacumpleneindicacómoresolverelproblema.(http://jigsaw.w3.org/css‐validator/)

5.2.Estándaressugeridos

5.2.1.UtilidadNecesidad de que los contenidos del Sitio Web estén desarrollados con una orientación al usuario,ofreciéndolelainformacióndemanerasimple,rápidayeficiente.Enestesentidolanormaexplicaqueparalograrlosedebenadoptarlassiguientesmedidas:

• OfrecerContenidosdeutilidad:serefiereaqueelSitioWebdebeserútildesdelaperspectiva

delusuario,esdecir,entregarloqueesteandabuscando.• EmplearEtiquetasdescriptivas:serefiereaquesedebenemplearpalabrasydescriptoresque

seandefácilcomprensiónyqueesténescritasenellenguajequehableelusuario.

• AsegurarlaCorrectaIndexación:serefiereaprepararlainformacióndelSitioWebparaqueseaincluidaensistemasdebúsqueda,conelobjetivodequeelSitioWebpuedaserencontradopordiferentesmedios.

• Optimizarelacceso:serefiereaequilibrarelpesoycalidaddeloscontenidos,conelobjetivodeasegurarqueelSitioWebtengacaracterísticasfísicasdepesodearchivosqueseanadecuadasparaunbuentiempodedespliegue.

5.2.2.DesarrollousandoHTML/XMLestándarElcódigodedesplieguedelSitioWebdebeserHTMLoXML,yserecomiendaqueelSitioWebcumplaconlosestándaresHTML4.01oXHTML1.0validadosanteelW3C.

Tal como se explicaba previamente, este artículo detalla que se deben emplear las herramientas de

verificacióndelW3CparaasegurarqueelSitioWebcumpleconelestándarseñalado.Adicionalmenteeste artículo señala que se debe ejecutar una tarea similar con los enlaces rotos y con las imágenes

perdidas.

5.2.3.Estándar3:MonitoreodeActividadObligación del Web Máster de monitorear regularmente la actividad del mismo con el objetivo de

obtenerinformaciónacercadeloscódigosdeerroryloselementosmásvisitados.


51|P á g i n a


A partir de la información conseguidamediante elmonitoreo, se espera que el administrador puedagenerarreportesdeactividadfrecuentesenlosqueseestablezcanlosaciertosyerroresdelsitio,conel

findeestablecerlasbuenastendenciasyrealizarlascorreccionesqueseadelcaso.

Respectodeloserrores,cabetenerencuentaqueelprotocoloHTTPqueutilizanlaspáginaswebparalatransmisión de sus contenidos, genera errores que están estandarizados mediante códigos para sumejorcomprensión.Losquecomienzanconelnúmero4representanerroresdel ladodelclienteylos

que empiezan con 5 son errores del lado del servidor. De ellos, losmás frecuentes y que deben seratendidosatravésdelmonitoreoquesesugiereenesteartículo,sonlossiguientes:

• Error401:Accesonoautorizadoaunapágina,noseingresólacontraseña.• Error 403: Acceso prohibido; normalmente aparece cuando la página que se busca no tiene

permisoparasermostrada.• Error404:Lapáginanoexisteynopuedesermostrada.• Error500:Errorenelservidordebidoaunproblemadesoftware.

• Error503:Elserviciowebnoestádisponible.• Error504:Tiempoderespuestaexcedelonormalyporlotantolapáginanosemuestra.

Es importante considerar que una buena práctica respecto de este tema es adoptar una política deatención de errores, de tal manera de definir qué mensaje recibirá el usuario cuando ocurran los

problemasdescritos.Enparticular sedebeponeratenciónsobreelError404,debidoaquesiel SitioWebnopresentaarchivosfaltantes igualmentesepuedeproducirsi,porejemplo,usuarioescribemalunadirección.

Paraatenderesteproblemasesugierelainclusióndeuna"páginadeerrorestándar"enelsoftwaredel

servidorweb,paraquelamuestreenelcasodeocurrirunerror.Loselementosmínimosson:

• IdentificacióndelSitioWebatravésdeunlogotipoynombre.• SistemadenavegaciónenelSitio:menú,botones,etc.

• Títuloqueexpliqueelsentidodelapágina.• Pequeñopárrafodescribiendoelerror(nomásdedoslíneas).• Buscador interno del SitioWeb para ayudar a encontrar lo que buscaba cuando apareció el

error.• MapadelSitioWebparaubicaralusuariorespectodelcontenidoexistente.

5.2.4.ContingenciasLa institución o programa dueña del Sitio Web debe tener un Plan de Contingencia que incluya lasmedidasaserejecutadasenelcasodequeelSitioWebdejedeestardisponibleparaelpúblico,oqueelniveldeaccesodisminuyaoseaintermitente,oqueseveacomprometidoporataquesexternos.

5.2.5.CodificacióndeCaracteresLa codificación de caracteres se utilizará preferentemente UTF‐8, sigla que significa "8‐bit Unicode

TransformationFormat".


52|P á g i n a


Alrespectosedebeindicarquelacodificacióndecaracteresesunelementoquesedeclaraenlaseccióndecadapáginaypermitequeelprogramanavegador interpreteadecuadamente los símbolos (letras,

númerosyotros)quese incluyanen lamisma.Enelcasode la recomendacióndeesteartículo,debeagregarselasiguientelínea:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

5.2.6.PolíticadePrivacidadEl SitioWeb debe contar con una Política de Privacidad de los Datos Personales de los usuarios que

acceden a éste, en la cual se den a conocer las obligaciones y derechos que tienen por el hecho deentregarsusdatosenlaspantallasdelSitioWeb.

5.2.7.DiagramaciónconCSSElSitioWebdebeserdiagramadoutilizandohojasdeestiloencascada(CSSporsusiglaeninglés),parasepararelcontenido,laestructuraylapresentacióndelosprimeros.

Ladiagramación con tablas seusóhabitualmentedesdeel iniciode los SitiosWebyelproblemacon

estaformadetrabajoserelacionabaconelhechodequeloscontenidosseuníanconelcódigoutilizadoenlapresentación,evitandoqueelSitioWebpudieraserusadoenplataformasdiferentessinadecuarlopreviamente.

Graciasalusode lashojasdeestiloencascada,estasituaciónpudomejorarseyaqueelcontenidose

pudomantener inalterable y sólo hacer los cambios en la capa a de la presentación, lo quepermitióllevardichoscontenidosacualquierplataforma,sólohaciendocambiosenelestilodediagramación,elcualsedefineatravésdelarchivoCSSrelacionadoalapágina.

Otroelementoimportanteenladiagramaciónusandolashojasdeestilo,eslarevisióndeloqueocurre

cuando ellas no están presentes. En este sentido, se debe tender a que el Sitio Web se degrade"aceptablemente",valedecir,quesuscontenidosnoseveandiagramadoscon lapresentacióngráficahabitualperoquealmenospuedanentenderseadecuadamente.Parahaceresteexperimento,existen

una serie de herramientas que facilitan la revisión, destacando entre ellas las extensiones para elnavegadorFirefoxVersión2yposteriores:

• Firebug:softwarequeocupalaparte inferiorde lapantallayvamostrandoelcódigofuenteamedidaquesedesplazael cursor sobreelSitioWebquese revisa;ofrecemucha información

acercadesucódigofuente.• CSSViewer: comandoquepermiteverelestiloutilizadoen lapáginaquese revisa,amedida

quesedesplazaelmousesobrelapáginaweb.

• WebDeveloper:barradeherramientascongrancantidaddeopcionespararevisarelSitioWeb.• MozillaAccessibilityExtension:barradeherramientascon todas lasopcionesnecesariaspara

revisarlaaccesibilidaddelSitioWeb.

En tanto, para Microsoft Internet Explorer también hay herramientas disponibles, entre las que se

cuentan:


53|P á g i n a


• Internet Explorer Developer Toolbar: herramienta provista por la empresa Microsoft paraapoyareldesarrollodeSitiosWeb

5.2.8.UtilizacióndeMarcosAun cuandonoes recomendable lautilizacióndemarcoso “frames”, losmarcosque seutilicenparamostrarelcontenidodelosSitiosWeb,"debenofrecerinformaciónadecuadaalusuario"paraqueéste

notengadificultadesdenavegaciónopierdalosenlacesqueseofrecendentrodelpropioSitioWeb.

Encasoquesesiganusandolosmarcos,sedebentenerlassiguientesconsideraciones:

La información contenida en la sección <noframes> que se inserta dentro de la etiqueta <frameset>debecontenerinformaciónadecuadaacercadelcontenidodelSitioWebeidealmente,entregarenlaces

quepermitanaccederacontenidosenelinteriordelSitioWeb.

Losenlacesquesalgandelosmarcosdebenutilizarsiempreelmodificador"target"enlaetiqueta<a>,conelobjetivodequeelenlacesiemprelleguehaciaunodelosmarcoscuyonombreseindica;hacialaventana donde están contenidos los marcos usando el modificador "target=_top" o bien hacia una

ventananuevausandoelmodificador"target=_blank".

Los buscadores de Internet pueden tener indexado el contenido de losmarcos por separado, lo quepodría motivar su apertura sin los demás archivos que le dan contexto a las páginas. Para ello seaconsejaprogramaraniveldeservidorparaquecadavezquesesoliciteunapáginaporseparado,ésta

semuestreconlosmarcosrelacionados.

5.2.9.UsodePluginsEncasodequeseempleesoftwareadicionalalSitioWebparamostrarcontenidosespecíficos(también

conocidos por la palabra en inglés plug‐in), se debe proporcionar el visualizador correspondiente demaneragratuita, ya seaquepuedan serbajadosdelpropio SitioWeb comodesdeel SitioWebde laempresaqueloofrezca.

Cabe recordar en este sentido, que lo anterior también implica que los SitiosWeb no deben ofrecer

archivos para los cuales no haya visualizadores gratuitos o que pertenezcan a formatos propietarios,aunquesesupongaquetodoelmundotengadichossoftware.

Losvisualizadoresmáshabitualesysusubicacionesvíawebsonlossiguientes:

• Adobe‐PDF• MS‐Excel

• MS‐Word• MS‐PowerPoint

5.2.10.AccesibilidadLosSitiosWebdebenseraccesiblesusandodiferentestiposdenavegadores(browseroprogramaparaverSitiosWeb),deloscualesalmenosunodebesergratuitoyestardisponibleenelpropioSitioWeb

paraqueseaobtenidoporlosusuarios.


54|P á g i n a


Elobjetivodeestamedidaes terminar con la "optimización"quehabitualmente sehaceen los SitiosWebparaquepuedanservistosatravésdeunnavegadorenparticular.

Asimismo,alnoexistiroptimizacióndelnavegador,sedebetrabajarparaqueelSitioWebcumpla los

estándaresweb, ya quede esamanera se puede asegurar que efectivamente cualquier programadenavegaciónpuedaaccederaloscontenidos.

En este ámbito, la organización W3C ofrece su propio browser denominado "Amaya" que estádisponibleparalasplataformasWindows,MacintoshyLinux(Debian,Ubuntu,RedHat,Mandrake,Suse).

Adicionalmente, la comunidad Evolt.org ofrece un SitioWeb especial con una colección histórica debrowsers,dondesepuedenobtenercopiasdetodoelsoftwarequesehanusadoparanavegarInternet,conlaventajadequeestántodaslasversionesquehanexistido.

Otroelementoimportanteaconsideraresqueexistenherramientasinteractivasqueseofrecendesde

SitiosWeb,paradeterminarlaaccesibilidaddeunSitioWeb.Deellaspodemosdestacarlossiguientes:

• Hera: formulario interactivoparadeterminaraccesibilidad,preparadopor laFundaciónSidar ‐AccesoUniversaldeEspaña.

• TestdeAccesibilidadWeb: formulario interactivoparadeterminar laaccesibilidaddeunSitio

Web,preparadoporlaFundaciónCTICdeEspaña.• Herramientas de Accesibilidad Web: listado compilado por la World Wide Consortium con

utilidadesdediversotipoparalatareadeasegurarlaaccesibilidaddeunSitioWeb.

5.2.11.ValidacióndelaHojadeEstiloElobjetivodeestaactividadesasegurarquelashojasdeestilodelSitioWebcumplanconelestándar

adoptadoporelW3C,enelentendidoquedeestamanerasepodráasegurarqueelSitioWebpuedeserutilizadodesdecualquierplataforma.DichashojasdebenservalidadasusandoelserviciodevalidaciónofrecidoporelW3C.(http://jigsaw.w3.org/css‐validator/)

5.3.AplicacióndeEstándaresUna de las características más importantes del estándar HTML es que permite la creación de

documentos que tienen una estructura definida, en la cual se puede ordenar por importancia, elcontenidoqueseincluya.

De loanteriorseconcluyequeal realizar lapuestaenmarchadeldesarrollodeunproyectoweb,suspáginasdeberánestarconformadasdelamaneraqueseindicaacontinuación.

5.3.1.EstructuradelosdocumentoswebElestándarHTMLdeterminaqueloscontenidosdebenserubicadosmedianteelusodeetiquetas(del

inglés "tag")queespecifica la característicadelmismoyquese identificanporqueusan loscorchetesangulados"<"y">"paradesignarlas.

Dichas etiquetas van desde las que permiten darle forma a todo el documento, hasta aquellas quesirven para explicar el comportamiento o características de una parte delmismo, comoun título, un

enlace o una imagen. Lo importante, es que cualquier elemento dentro de la página, debe ser


55|P á g i n a


incorporadomediante una etiqueta y que ésta debe cumplir las formalidades que indica el estándarparaella.

Entérminosgenerales,losdocumentoswebestáncompuestosdetrespartesydentrodeéstas,hayun

ordenqueayudaasucomprensiónyuso.

Dichaspartesson:

• Declaracióndeltipodeestándarausar• Encabezadodelapágina• CuerpodelaPágina

Acontinuaciónseexplicanlascaracterísticasdecadaunadeestaspartes.

Declaracióndeltipodeestándarausar

Corresponde a las primeras líneas que debe tener toda página web y en ella se indica el tipo de

documentodequesetratayconello,elestándarqueregirásucontenido.Normalmenteladeclaraciónessimilaralasiguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es">

Comosepuedeobservardeltexto,loselementosquesonrelevantessonlossiguientes:

• Tipodedocumento:con laexpresión"doctype"se indicacuáleselestándarautilizar,elcual

aparece por escrito. En el caso del ejemplo anterior, es XHTML, versión 1, en su modo detransición(elotrosedenominaestricto).

• Referenciadeldocumento:siempreseindicaunenlaceaundocumentoconlaextensión“dtd”,

queeseldocumentooficialdelW3Cdondeseestableceelestándarysuscaracterísticas.• Etiqueta<html>:eslaquedainicioalasetiquetasdelSitioWebyqueseráfinalizadaaltérmino

del documento con la etiqueta </html>; en el caso de este ejemplo, cuenta con dos

modificadoresquesonxmlnsparadetallarcuáleselconjuntodeatributosdelestándar (cuyaubicación se indica con una dirección web) y lang, para señalar el lenguaje en que estará elcontenido.

EncabezadodelaPágina

Una vez que se ha declarado el estándar como se indicó antes, las siguientes líneas de código de la

páginawebestánreservadasparacrearelencabezado,quesedespliegaentre lasetiquetas<head>y</head>.

Dentrodeellasseubicanloselementosmedianteloscualessedescribeelcontenidodelapáginaweb,porlocualaestoselementosdelesllama"metadatos"(datosacercadelosdatos).


56|P á g i n a


Loshaydecuatrotipos,deacuerdoalasiguientedescripción:

• Título:es laetiqueta<title>quepermitedesignarel títuloque llevaráenelencabezadode laventana el Sitio Web; se recomienda que lleve el nombre del Sitio Web más un título que

describaelcontenidodelapágina.Deestamanera,estainformaciónserálaqueaparezcaenlaspàginas de resultados de los buscadores cuando se muestre el enlace al usuario que buscaalgunapalabraofrasequetengadichapágina.

• Metadadato:esinformaciónacercadelainformaciónysedefinemediantelaetiqueta<meta>.ParahacerlosepuedenemplearlasdescripcionesdelW3CobienlasdelproyectoDublinCore,lascualespermitengenerarinformacióndescriptivaacercadecontenidos,autores,copyrighty

otrasdescripcionesacercadeloscontenidosdelSitioWeb.Losmásusadosson:<meta name="title" content="Nombre del Sitio Web o Programa"> <meta name="description" content="Descripción del Sitio Web o Programa o bien del contenido de la página"> <meta name="keywords" content="Palabras claves del Sitio Web o Programa o bien del contenido de la página">

• Enlacesexternos:permiteinformaraldocumentoacercadeotrosarchivosquesedeben

ejecutaralmismotiempo;elmejorejemploeselllamadoaunahojadeestiloparaejecutarla

presentacióngráficadelapágina:<link href="styles/main.css" rel="stylesheet" type="text/css" />

• Scripts:permitenhacerllamadosalenguajesdeprogramación,comoJavascript,paradesarrollaraccionesycrearfuncionalidadesenlapáginawebqueseestávisitando.Porejemplo:<script type="text/javascript" src="scripts/uifunctions.js">

CuerpodelaPágina

Cuando ya se ha ingresado la información correspondiente al encabezado, se accede a la zona decontenidopropiamentetallaquesedespliegaentrelasetiquetas<body>y</body>.Enelcasodesitios

realizadosmediantemarcoso"frames"estaetiquetavasituadadentrodeestaúltima.

Dentro de ellas se ubican todos los elementos que pueden identificarse como los contenidos de lapágina web, vale decir, textos, imágenes, funcionalidades. No obstante, para que su despliegue sea

adecuado, es importante considerar la estructura de la página, la cual se explica a través de lassiguientesetiquetas:

• Utilizaciónde laetiqueta<h>: es laetiquetautilizadaparamarcar los títulosquehabráenelcontenido,comenzandoporelprincipalquerecibelaetiqueta<h1>.Caberecordarquegracias

al uso de la tecnología CSS de Hojas de Estilo, será a través de ésta que se dará el formatoadecuadoadichotítuloparaquesedistingaenlapágina.Lasetiquetas<h>vandesde1a6,porlo que permiten indicar hasta seis niveles de importancia de los titulares utilizados en el


57|P á g i n a


documento. Su uso esmuy relevante en términos de accesibilidad, ya que los programas desoftware lectores de pantalla –que leen el contenido para que sea escuchado por usuarios

ciegos‐siemprebuscaránestajerarquíadeloscontenidosparadeterminarlasecciónporlaquedebecomenzarlalecturadelapágina.

• Utilizaciónde la etiqueta<p>: es la etiquetautilizadaparamarcar lospárrafosen losque se

divide el contenido; utilizando la tecnología CSS de Hojas de Estilo, es posible agregarle elformatoadecuadocomotamañodeletra,espaciado,interlineado,sangría,justificación,colorytipografíautilizada.

• Utilización de la etiqueta <div> y <span>: son las etiquetas utilizadas para definir elcomportamientoentérminosdepresentaciónquetendráelcontenido.Con<div>sedefine loqueocurreconbloquesde información,mientrasquecon<span>esposiblehaceresamisma

definiciónperopara líneasde contenidos.Ambasetiquetasutilizan lasdefinicionesexistentesenlasHojasdeEstiloypermitenaplicarlasaloscontenidos.

BasándonosenunejemplodeW3C,sepuedeverelsiguientecódigoenqueseaprecialaaplicacióndeestasetiquetas:

<div class="seccion" id="sitio-web"> <h1>Sitio Web</h1> <p>En esta sección se da a conocer la forma de trabajar en un Sitio Web.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque. Fusce a ante. Duis feugiat magna ac ipsum. Aenean orci orci, mollis a, posuere et, dignissim eu, orci. Sed vulputate eros a orci. Nullam vel nulla in diam suscipit tempus. Phasellus nisi dui, cursus eget, vulputate nec, sagittis quis, justo.</p>

<p>Suspendisse dignissim, quam ac consequat aliquet, magna libero mattis urna, sit amet ultricies augue tortor vel velit. Mauris tempus sodales purus. Sed sit amet metus.</p>

<div class="subseccion" id="pagina-web" <h2>Las Páginas Web</H2> <p>Las páginas web <span class="cursiva-bold">son parte de los sitios</span> y se denominan así porque...</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque. Fusce a ante. Duis feugiat magna ac ipsum. Aenean orci orci, mollis a, posuere et, dignissim eu, orci. Sed vulputate eros a orci. Nullam vel nulla in diam suscipit tempus. Phasellus nisi dui, cursus eget, vulputate nec, sagittis quis, justo.</p>

<p>Suspendisse dignissim, quam ac consequat aliquet, magna libero mattis urna, sit amet ultricies augue tortor vel velit. Mauris tempus sodales purus. Sed sit amet metus.</p>

</div> </div>

Sialdocumentoanteriorseleagregalasiguientehojadeestilos(queenestecasosedefineenelpropio

documento):


58|P á g i n a


<head> <title>Manual de Proyectos Web: Acerca de los Sitios Web y las Páginas <style type="text/css"> div.seccion { text-align: justify; font-size: 12pt} div.subseccion { text-indent: 2em } h1 { font-style: italic; color: green } h2 { color: green } </style> </head>

Sepuedeverquelasecciónidentificadaporelid="sitio‐web"vaaapareceralineadaenformajustificada

y con su texto en 12 puntos de altura; adicionalmente su títulomarcado por <h1> se verá en letrascursivasdecolorverde.

Mientras que la sección identificada por el id="pagina‐web" va a heredar las características de laanterior–porqueesunbloquequeestá insertoenéstepero tendráunacolumnamásangostapor la

indentación que se indica‐,mientras que su titular –marcado con <h2>‐ será de color verde pero enestilonormal

Figura4.1.:Laimagenmuestraunapantallaconelresultadoquemuestraun

browseralutilizarelcódigoHTMLqueseexplicaenestapágina.


59|P á g i n a


Otrousomuyinteresantedelaetiqueta<div>esladeexpresarposicionesdelosbloquesdecontenidoen el SitioWeb, gracias a lo cual se puede diagramar la información de una manera adecuada a la

plataformaenqueseestétrabajando.

5.3.2.UtilizacióndelasHojasdeEstilo(CSS)Como se puede apreciar por el ejemplo anterior, cuando se logra separar el contenido de la

presentación,elresultadosuelesermuypoderosoyaquepermitealadministradordelSitioWebhacercambiosaldiseño(colores,ubicaciones,tamaños)delcontenidodesuspáginasconmuypocoesfuerzo:

bastaconmodificarlaHojadeEstilosparaqueéstostenganefecto.

RecursosAdicionales

Paraaprenderypracticarmássobreestetema,deporsícomplejo,sesugierenlossiguientesrecursos:

• TutorialdeCSSenW3C‐http://www.w3.org/Style/Examples/011/firstcss.es.html• DirectoriodeenlacesdeCSSenW3C‐http://www.w3.org/Style/CSS/learning


60|P á g i n a


6.EncontrabilidadUnsitiowebquenoestébienindexadoenlossistemasdebúsquedaenInternetcorreelriesgode"noexistir" si sus contenidos no han sido indexados por los sistemas de búsqueda y recuperación de

información y no tan sólo a travésde la búsquedadel nombrede la instituciónodel programa, sinotambién,atravésdelosprincipalestemasalosqueéstasededica.Debidoaloanterior,sedebehacerun trabajo permanente tanto en la sección visible del Sitio Web (contenidos, imágenes y otros

elementossimilares)comoenlainvisibleparalosusuarios(keywords,metatags,archivosdestinadosarobots de búsqueda), para asegurar que ellos siempre puedan llegar al Sitio Web a través de losbuscadores.

Por lotanto,estecapítulo introduceelconceptode laEncontrabilidadqueesunatraducción libredel

términoeninglés"findability"quesepuedetraducircomola"habilidadparaserencontrado".Entonces,paraefectoséstemanualentenderemosla"Encontrabilidad"comolafacilidadparaqueloscontenidosde un Sitio Web puedan ser indexados y luego encontrados por sistemas de búsqueda externos e

internos. Esta capacidad será el elemento clave que nos permita asegurar que los contenidos que seofrecenatravésdelSitioWebestaránadecuadamenteindexados,facilitandodeesamaneraelaccesodirectoalainformacióndesdelossistemasdebúsqueda.

Para cumplir con este objetivo tan importante, los administradores de los SitiosWeb deberán tener

presentelaimportanciadellevaracabolastareasrelacionadasconlossiguientesaspectos:

• Generacióndeloscontenidos:serefiereaqueloscontenidosdelSitioWebdebenserescritosteniendoenmentelaformaenqueelusuariofinaldenominaalostemasqueincluyeelsitio.Sedebe considerar que si se habla en el lenguaje del usuario, serámás fácil que un sistema de

búsquedamuestreentresusresultadosloscontenidosofrecidosporelsitioyaquecontendránlasmismaspalabrasutilizadasporelusuarioquebusca.

• Presentacióndeloscontenidos:serefiereaquelaspáginasdelSitioWebdebenserpreparadas

para que tengan una estructura válida, en la cual haya consistencia entre los elementos detitulaciónyloscontenidospropiamentetales,demaneraquenohayaalgunadiscordanciaque

laslleveaserpenalizadaporlosbuscadores.• Apoyoalosrobotsdebúsqueda:serefierealadecuadomanejodelascabecerasdelaspáginas

(es decir, los contenidos de la etiqueta <head>); el contenido del archivo robots.txt; la

generacióndelarchivoestándarsitemaps.xmlylarevisióndelsitiomedianteherramientasquesimulanlaaccióndeun"spider"debúsqueda.

• Monitoreodesistemasdebúsqueda:serefierequesedebeprestaratenciónpermanentealos

sistemasquereflejanlaformaenquelosusuariosaccedenalSitioWeb,yaquedeestamanerasepodráentenderquépalabrasestánutilizandoparaeseefectoyoptimizarelcontenidoparareflejardichostérminos.


61|P á g i n a


6.1.¿QuéeslaEncontrabilidad?Uno de los autores que ha apoyado con mayor fuerza el concepto de la Encontrabilidad es PeterMorville,atravésdeuntextodelaño2006titulado"AmbientFindability"cuyoepígrafeindica"loque

encontramosnostransforma".

Basadoenlapremisa"nopuedesusarloquenopuedesencontrar"elautordestacalaimportanciaquetieneen laformaactualdeusar la Internet, lacapacidaddeser indexadopuestoquees laformamáshabitualquetendránlosusuariosdeaccederalSitioWebyemplearloscontenidosqueseofrecen.

Adicionalmente,defineelconceptodetresformas:

1. Lacapacidaddeserubicadoodesernavegable.

2. Elgradoenelqueunobjetodeterminadoesfácildedescubriroubicar.3. El grado en el que un sistema o ambiente apoya la navegación y recuperación por sus

contenidos.

Por lomismo, podemos entender que la calidad de encontrable de un SitioWeb dependerá de dos

aspectos:sucapacidadparaserencontradoatravésdelossistemasdebúsquedadeInternety,unavezque los usuarios decidan llegar al Sitio Web, de la calidad de la navegación que encuentreninternamenteenelpropiositio.

EstorepresentadesafíosinteresantesparaeladministradordelSitioWeb,yaquesiempredeberáestar

mirandoambosaspectospara tener la seguridaddeque laexperienciaque seofrecea travésde suspáginas,escoherenteconlasexpectativasdequienllegaavisitarlo.

6.1.1.SitiosvisibleseinvisiblesUnode losdesafíosmás importantesdetodoadministradordeunSitioWebconsisteenpermitirquesuscontenidosseanindexadosporlossistemasdebúsquedadeInternet.

EstacaracterísticadebetenerencuentaelhechodequeelSitioWebdebeestartantopreparadopara

ser indexado por sistemas automatizados, los cuales están basados en programas (conocidos comorobotsdebúsquedaospiders)quenaveganatravésdelosenlacesofrecidosporelSitioWebyquelepermitendescubrirlaspáginasdecontenidosdisponibles.Loanteriorsignificaquecadapáginadebería

ofrecerenlacesenlenguajeHTMLhaciaelrestodelSitioWeby,porlomismo,queningunapáginadelsitiodeberíaestaraisladadelresto.

Existen estudios que indican que muchos sitios web muestran una sola página. En dicho estudio seindicaquedentrodelosmotivosporloscualesseencuentrasolamenteunapáginaenelsitio,destacan

lossiguientes:

• La página basa su navegación en la tecnología Javascript, por lo que es necesario interpretardichocódigoparanavegarla;comolosrobotsdebúsquedanolohacen,aparececomoquenoexistenmásyelcontenidoqueexistanoseincluye.

• La página necesita un plug‐in de la tecnología Flash para visualizar su contenido; esto ocurrehabitualmenteensitiosquetienenunaintroducciónanimadaquepuedeservistaporhumanos,


62|P á g i n a


peroquenoofrecepuntosdeentradaparaelrobotdebúsqueda;porlotanto,paraésteelsitiosólotieneunapágina.

• LoanteriortambiénesválidoparaaquellaspáginasqueempleantecnologíabasadaenAppletsJavaparalanavegación,loscualestambiénimpidenelaccesoalosprogramasautomáticos.

Enlostrescasosseñaladossedaelfenómenoquelosrobotsdebúsquedanologranentenderlasintaxisofrecidaenelcódigo,yaquenormalmenteenlostrescasosseñaladosdehaberenlaceshaciaelresto

del sitio,estos seofrecendesdeel interiordeprogramasquedebenser interpretadosynomedianteenlacesbasadosenHTML.Debidoaesto,endichoscasos los robotsno logranencontrar la formadeteneraccesoalinteriordelSitioWebysóloguardanlainformacióndelaportadadelSitioWeb.

Cabeindicarque,talcomoseexplicamásadelanteenestasección,enlostrescasosseñaladosexisten

formas de ofrecer acceso alternativo a los robots de búsqueda, facilitando el acceso de estos al sitiopesealusodedichastecnologíasenlaportada.

6.1.2.PosicionamientodelSitioWebUna tarea permanente del administrador del SitioWeb será la de determinar la posición relativa delSitioWeben los sistemasdebúsqueda, respectode laspalabrasmásutilizadaspor losusuarios.Para

conocercuálessonellas,serámuyimportantequesehagaunmonitoreopermanenteyconstantedelasvistasparavercuálessonlasquellegandesdelosbuscadoresylaspalabrasqueseusanparaeso.

Normalmente se deberá esperar que el Sitio Web esté indexado, lo que se puede comprobarescribiendoladirecciónwebprincipaldelsitioenelbuscador.Elresultadodeberámostrarqueelsitio

efectivamenteestáindexado.

Luego,deberáhacerseunabúsquedasimilarparalaspalabrasqueidentificanalserviciouorganismoalque pertenece al Sitio Web. Normalmente para las palabras más importantes, el Sitio Web deberíaaparecer entre los primeros lugares ya que de esa manera se podrá asegurar que los usuarios

efectivamenteveránelenlaceyllegaránalSitioWebporesavía.

Paraello,elSitioWebdebeestarpreparadoparaserindexadoporsistemasautomatizadosquellegaráncomounavisitamás, y sedeberáhacerel trabajoadicionalde incluirel sitioenaquellos sistemasdedirectorioqueseanmásimportantesenlawebmundial.

Paraatenderadecuadamenteestosdosaspectos,esimportanteentenderladiferenciaentreambosya

quesucomportamientoyformadeaccesovaríanotablemente,comotambiénlohacelaformaenqueunSitioWebpuedellegaraquedarincluidoenellos.

6.1.3.InclusiónenÍndicesautomatizadosLos índices automatizados se forman gracias a la actividad realizada por los buscadores de Internet(search engines en inglés) queutilizan robots quenavegan y almacenan informaciónde páginas, queluego integran a una base de datos general, a partir de la cual los usuarios hacen las búsquedas. Al

momentode la edicióndeestaGuía, losmás conocidos sonGoogle, Yahoo!, LiveWeb (exMSN),Ask,TeomayQuaero.


63|P á g i n a


ParaasegurarqueunrobotdebúsquedallegueaunSitioWebserequieredecumplirconalmenoslassiguientescaracterísticas:

• DardealtaelSitioWebpropioenalgunosde losmás importantesbuscadoresdeInternet.Al

menossedeberealizarestaacciónenGoogle,Yahoo!yLiveWeb.• DaryrecibirenlaceshaciaotrossitiosdeInternet,porqueéstaeslaúnicamaneraqueunrobot

debúsquedapuedaconocer ladireccióndenuestroSitioWebaldetectarnuestradireccióna

partirdeotroSitioWeb;adicionalmenteenelcasodeGoogle,estocontribuiráasumejorarsuíndice"PageRank".

• Ofrecer en la página de portada del SitioWeb losmeta‐tag que dirijan a los robots hacia los

archivos robots.txt y sitemaps.xml cuyas características se analizan más adelante en estasección.

• OfrecerenlapáginadeportadadelSitioWebunmeta‐tagqueindiqueelsitiodapermisopara

serindexado,talcomoseexplicamásadelanteenestecapítulo.

Ofreceren lapáginadeportadadelSitioWebunenlacehacia lapáginaMapadelSitio, en laqueseentreguenenlacesenlenguajeHTMLestándarhaciatodaslasseccionesdelSitioWeb.

Aunquehaymáselementosque intervienenen laEncontrabilidaddel SitioWebcomoseanalizamásadelanteenestecapítulo,almenosconlosconsejosanterioressepodráasegurarqueelSitioWebestá

disponibleparaserindexadoporlosrobotsdelossistemasdebúsquedaautomáticos.

6.1.4.InclusiónenDirectoriosLos directorios son índicesmanuales de contenidos, en los que los propios interesados inscriben sussitios, loscualesposteriormentesonanalizadosycatalogadospor losencargadosdelsistema,quesonvoluntariosdetodaspartesdelmundo.

Gracias a esto, los sitios que se integran a un directorio aparecen ordenados por categorías y

subcategorías,permitiendoalosusuariosencontrarlistadosordenadosdesitios,loquefacilitaentenderlossitiossimilaresycompetidoresdelosqueserevisan.Undirectoriopuedetenerunbuscadorinterno,perosóloparaubicarloquesebuscadentrodetodoslosregistrosexistentes.Entrelosmásconocidos

seencuentranYahoo!DirectoryyOpenDirectoryProject(tambiénconocidocomoDMOZ).

Comoseindicó,laúnicaformadeintegrarundirectorioesporlasuscripciónmanualdelsitio,porloqueserátareadeladministradordelSitioWebtomarlasmedidasparaqueelloocurra.

6.1.5.UsuariosyUsodeBuscadoresEn forma adicional a las tareas anteriores, el administrador del SitioWeb deberá tener informaciónactualizadaacercadelaformaenquesususuariosestánaccediendoalSitioWebdesdelosbuscadores.Paraelloserárelevanterevisarlosinformesdevisitas,yaqueéstoscuentanconunasecciónenlaque

seanalizanlosreferersdelSitioWeb,quesonlaspáginasdesdelascualeslleganlosvisitantesgraciasalusodeenlaces.


64|P á g i n a


GraciasaestosepodrásabercuálessonlosbuscadoresmásutilizadosycuálessonlaspalabrasquehanmotivadoalosusuariosallegaralSitioWebporestavía.Esteconocimientopermitirá,además,contar

con una forma concreta de saber cómo se muestran los contenidos del propio Sitio Web en losbuscadoresy, apartirdeello,determinar cuálespueden ser las reformasque sepuedenaplicarparaoptimizardichaexperiencia.

Cabe señalar quemás adelante en ésta sección se analizan algunosde los elementos principales que

permitenmejorarlacapacidaddeloscontenidosparaserencontrados,porloquesepuedeseguirsusindicacionescomounaguíadebuenasprácticasparaayudaralaEncontrabilidad.Estosedebeaquenosólo influye el hecho de inscribir el sitio en un buscador, sino que como se verá, hay una serie de

elementosquecontribuyenahacermáseficientedichainclusióndetalmaneraquecuandolosusuariosbusquencontenidosqueestánintegradosalSitioWeb,ésteaparezcasiempreenlaprimerapágina.Estoúltimoesrelevanteyaqueabundantesestudiosalrespecto,indicanquelosusuariossiempremiranlos

resultadosdedichapágina,sinseguirmásallá.

6.2.¿CómosemidelaEncontrabilidad?Respectodeestoúltimo,hayquetenerencuentaquelosusuariossiempreestaránintentandollegarenla menor cantidad de pasos posibles hacia los contenidos que sean de interés para resolver susnecesidades de información. Debido a esto, su intención siempre será que para las palabras que

ingresanenlosbuscadores,hayaalgodenuestrositioquelespermitaaccederanuestroscontenidos.

LaformadeasegurarestotienemuchoqueverconloscontenidosqueseofrezcandesdeelSitioWeb,pero, principalmente, con el conocimiento de la forma en que los usuarios operan a través de estos

sistemas.Esto significaun llamadoa losadministradoresde los SitiosWebaestarpermanentementeactualizados respecto de las últimas investigaciones y noticias respecto de estos temas, ya que ellasdaránpistassobrelasactividadesarealizarparaestarmáscercadelosusuarios.

En todo caso, la Encontrabilidad de un Sitio Web siempre estará relacionada con su habilidad para

aparecerenlasprimeraspáginasdelosresultadosdebúsquedadeunbuscadorparaaquellaspalabras,frasesytérminosmásrelevantesrelacionadosconlainstitución,yaqueserálaúnicaformadeasegurarque sea visto por quien utiliza dicho servicio. Por lomismo, la Encontrabilidad serámedida con esa

característica:suhabilidadparaubicarselomáscercaposibledelapartesuperiordelaprimerapáginaderesultados.

6.2.1.RelaciónconlosmotoresdebúsquedaPara llegara resultadosdeprivilegiodentrodeunsistemabúsquedas,eladministradordelSitioWebdeberáestarpreocupadopermanentementedequesecumplanlasbuenasprácticasquesedefinenenlassiguientespáginas,peroademásdeberáestarrevisandofrecuentementelasestadísticasdesupropio

sitioparaaveriguarlossiguienteselementos:

• Determinar cuáleselbuscadormásutilizado en suSitioWeb,paraaprenderde sususuarioscuálessonlaspalabrasmásusadas.


65|P á g i n a


• Determinarlaspáginasquerecibenmásvisitasporestavía,detalmaneradeprepararlasconmás elementos que lleven a los usuarios a conocer otros contenidos relacionados a partir de

ellas.• Determinarcuáleselpatróndenavegaciónapartirdeesaspáginas,parasabersieseciclose

puedemejoraratravésdecontenidosmáscompletos.

• DeterminarcadacuántotiempoestánvisitandoelSitioWeblosrobotsdebúsqueda,paratenerencuentaesedatoparaefectodelasactualizacionesdelSitioWeb.

Como se puede adivinar a partir de lo anterior, los administradores deben realizar un trabajopermanenteen tornoa lasestadísticase informesgeneradospor lasvisitasalSitioWeb,yaquees la

única forma de ir aprendiendo de los usuarios, los cuales siempre tendrán actividades cambiantesrelacionadas con la informaciónqueexisteenel ambiente yque losmotiva a visitar el SitioWebdelserviciopropietariodelSitioWeb.

Esimportante,enestesentido,queeladministradorreviseloscontenidosdenoticiasgeneralesdelpaís

referidasalostemasabordadosenelSitioWeb,paradeterminarlasnuevaspalabrasquepodríanllevara losusuariosabuscarcondichostérminos.Graciasaesto,podrámodificaromejorarsuscontenidospara que los nuevos términos también permitan que más usuarios lleguen al Sitio Web tras una

búsqueda.

Finalmente una recomendación habitual es revisar los SitiosWeb que salen antes en las páginas deresultadosdelosbuscadoresparalostérminosenlosqueelSitioWebtieneparticipación,paraindagarloseventualesmotivosquelosllevanatenerunmejorposicionamientoqueelsitiopropio.

6.2.2.RelaciónconlosíndicesAdiferenciadelosmotoresdebúsqueda,larelaciónconlosíndicesesmenosdinámica,yaquesóloestá

asociada a la acción de conseguir que el SitioWeb sea agregado a uno de ellos, sin que esto tengamodificacioneseneltiempo.

Noobstante,hayquetenerlaprecauciónderevisarconcuidadolaformaenqueelsitiohasidodescritoenestosíndices,yaqueestoesrealizadoporpersonasquenormalmentetrabajancomovoluntariosdel

sistemaindexador.

6.3.¿CómoseaumentalaEncontrabilidad?TrasanalizarlaspáginasanterioresquedaclaroquelametadeunSitioWebseráladetenerlamayorcapacidaddeserencontradodesdelosbuscadores,yaqueesogarantizaráquelosusuariosdeInternettenganaccesoalainformaciónqueelSitioWebpuedeofrecer.

Paraello,enestasecciónseabordaestedesafíodesdedosperspectivas:elcódigoHTMLyelcontenido

delaspáginas,yaquedesdeambossecontribuyeaaumentarlacapacidaddeacercarseaesteobjetivo.

Loprimeroqueseanalizaesel códigoHTMLpuestoqueen lamedidaqueel SitioWebsedesarrollemedianteelusodecódigoestándarhabrámayoresposibilidadesdequesuposicionamientoseamayor.


66|P á g i n a


6.3.1.EstándaresyCódigosrelacionadosAunque la Encontrabilidad de un SitioWeb tiene una serie de elementos desde los cuales se puedeexplicarsubuenresultadoenlosbuscadores,lacalidaddesucódigoesunodelomásrelevantes.

Como se ha explicado antes, el código del Sitio Web debe ser estándar y por lo mismo ofrecer uncumplimientoconcretoenelusodelasetiquetasHTMLalolargodesuspáginas,siendolasdelazona

del<head>lasmásrelevantes.

6.3.2.Etiquetasde<head>Laspáginaswebbienestructuradasdividensucontenidoenlaszonasde<head>y<body>.Laprimerase ubica en la parte superior de las páginas y entrega información de referencia para el sistemacomputacional que utiliza y despliega la página, a fin de que pueda entender de quémanera se ha

codificadoel contenido y de esamaneramostrarlo adecuadamente a través del browser o programanavegadorqueseutilice.

Respecto de la Encontrabilidad, las etiquetas sobre las que hay que poner lamayor atención son lassiguientes:

• <title>:permiteindicareltítuloqueapareceenelencabezadodelaventanadecadapáginadel

SitioWeb ; se recomienda que lleve el nombre del SitioWebmás un título que describa elcontenidodelapágina.Porejemplo:"Fusades‐PROinnova:AcercadelprogramaFirstTuesday".Deestamanera,estainformaciónserálaqueaparezcaenlosbuscadorescuandosemuestreel

enlacealusuarioquebuscaalgunapalabraofrasequetengadichapágina.• <meta>:unadelasetiquetas"meta"deestasecciónestáorientadaadarunainstrucción

concretaalosrobotsdebúsqueda,cualesladeindexarelcontenido.Paraello,sutextodebe

indicarlosiguiente:<meta name="robots" content="index,follow">

Esimportanteconsiderarquelosmodificadoresqueseagreganalelemento"content"tienenefectosobreelbuscador,delasiguientemanera:

o index:indicaqueelcontenidodebeserindexado.

o noindex:indicaqueelcontenidonodebeserindexado.o follow:indicaquelosenlacesexistentesenlapáginadebenserseguidos.o nofollow:indicaquelosenlacesexistentesenlapáginanodebenserseguidos.

6.3.3.Usoderobots.txtEn forma paralela a lo que se indique en cada página, para el sitio se debe generar un archivo quecumpleuna función similar a la señaladapara la etiqueta<meta>anterior, cual es la de indicar a los

robotsdelosbuscadorescuáleslaacciónglobalquedebedesarrollarenelSitioWeb.

Paraello,enlaraízdelservidorsedebeincluirunarchivodetextoquelleveelnombrerobots.txtyenelqueseindiquelainformaciónacercadelaacciónadesarrollar.Elcontenidoestándarestádadopordoslíneas,quesonlassiguientes:


67|P á g i n a


User-agent: * Disallow:

Sedebeconsiderarquelalínea"User‐agent"puedeincluirelnombredecualquierrobotyquesitiene

unasterisco,indicaqueladirectivaseaplicaatodos;entantoquelalínea"Disallow"permiteindicarlosdirectoriosdelSitioWebquenosedeseeincluirenlaindexación.Siestáenblanco,indicaquepermiteindexartodoelcontenidodelSitioWeb.

SedebeconsiderarqueestearchivoesrevisadoportodoslosrobotsdebúsquedaqueaccedenalSitio

Webporloqueesmuyimportantesupresencia,yaqueconstituyeunadelasbuenasprácticasentornoalosbuscadores,debidoaqueformanpartedeunasuertedebienvenidaformalatodoslosprogramasenviadosporlossistemasdebúsquedadeInternet.

Cómomostrarcontenidos

De acuerdo a lo indicado en los párrafos precedentes, el Sitio Web deberá cumplir con tener los

siguienteselementosparaasegurarquelosbuscadoresdeInternetlosindexen:

<meta>:enestasecciónlalíneadebeindicarlosiguiente:

<meta name="robots" content="index,follow">

robots.txt:enestearchivoelcontenidodebeindicarlosiguiente:

User-agent: * Disallow:

Cómoescondercontenidos

Para evitar queel contenidodel SitioWeb sea indexado, sedebe tener el siguiente contenidoen laspáginasquenosedeseeincluirenlossistemasdebúsquda:

<meta>:enestasecciónlalíneadebeindicarunodelossiguientescontenidos:

<meta name="robots" content="noindex,follow"> <meta name="robots" content="noindex,nofollow">

Conelprimeroseconsiguenoindexarelcontenido,peroqueelrobotsigalosenlacesofrecidos;conel

segundoseconsiguequenohayaindexaciónniquesesiganlosenlacesexistentes.

robots.txt:enestearchivoelcontenidodebeindicarlosiguiente,dependiendodelcaso:

User-agent: * Disallow: /

Conlaprimeralíneaseindicaquelainstrucciónesparatodoslosrobotsyconlasegunda,seseñalaque

desdelaraízenadelante,nosedebeindexarnada.

User-agent: * Disallow: /fotos/


68|P á g i n a


Conlaprimeralíneaseindicaquelainstrucciónesparatodoslosrobotsyconlasegunda,seseñalaqueeldirectoriollamadofotosnodebeserindexado.

6.3.4.Usodesitemaps.xmlComo se revisó en las páginas anteriores, una de las dificultades más importantes referidas a laindexación en buscadores dice relación con la manera de indicar a estos sistemas cuáles son las

direccionesdelaspáginaswebquesedeseaincluirenellos.

Para enfrentar este tema, desde los sistemas de búsquedas se planteó el uso de un protocolodenominadoSitemapsqueconsisteenunarchivoXMLenelqueseenumerantodaslasURLdeunsitio

junto,alasqueseagreganmetadatosadicionalesacercadecadaunadeellas.Porejemplo,seindicalafecha de la última actualización, la frecuencia de modificación de sus contenidos y la importanciarelativadelapáginaenelsitio.

Unarchivoestándardeestetipotieneelsiguientecontenido:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <urlç> <loc>http://www.example.com/</loc> <lastmod>2005-01-01</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> </urlset>

Loselementosquesedefinenporcadalíneasonlossiguientes:

• <urlset>: su contenido es obligatorio y es el que permite encapsular el archivo, haciendoreferenciaalprotocolositemapsvigente.

• <url>:tambiénesobligatorioyes laetiquetaquepermitedefinircadaunadelaspáginasweb

diferentesquesedeseaincluirenelarchivo.• <loc>: tambiénesobligatorioypermite indicar ladirecciónoURLde lapáginaquese incluye.

Debecomenzarconelprotocolocorrespondiente(httpenelcasodelweb)yterminaconuna

barradiagonalo"slash".• <lastmod>: es un valor opcional que permite indicar la fecha de la última modificación del

archivoqueseestáincluyendo;paralafechaseusaelformatoAAAA‐MM‐DD.

• <changefreq>: es un valor opcional que hace referencia a la frecuencia con la que cambia lapáginaa laquesehacereferencia;susvaloressonenidiomainglésycorrespondenasiempre(always), cada hora (hourly), diariamente (daily), semanalmente (weekly), mensualmente

(monthly),anualmente(yearly)ynunca(never).Esimportanteconsiderarqueelvalor"always"seutilizaparadescribirdocumentosquecambiancadavezqueseaccedeaellos,mientrasque"never"seutilizaparadescribirURLarchivadas.

• <priority>:esunvaloropcionalquepermiteinformaralosmotoresdebúsquedalaspáginasqueseconsideranmásimportantesdentrodelSitioWeb.Losvaloresaceptadosabarcandesde0,0a1,0. La prioridad predeterminada de una página es 0,5. De acuerdo a la información del


69|P á g i n a


protocolo, losmotores de búsqueda pueden utilizar esta información para elegir entre variasURLdelmismositio.

Es importante considerarqueel protocolo Sitemapsesunestándarque ya fue aceptadoporGoogle,

Yahoo!yLiveWeb,loquegarantizaquesuusopermiteatenderalosprincipalesbuscadoresactualesdelaInternet.

Unavezqueel archivoha sido creadoy contiene todas lasdireccionesdepáginaswebque sedeseaindexar,hayquehacerreferenciadeélalSitioWebmedianteunadelassiguientesactividades:

Mediantelainterfazdeenvíodelmotordebúsqueda:sedebeconsultarladocumentaciónofrecidapor

lospropiosmotoresdebúsqueda,losqueindicanlaformadehacerlo.

Medianteelarchivorobots.txt:sedebeañadirunalíneaalfinaldelarchivoqueconsignelaubicacióndelarchivoconelsitemap.Dichalíneadebenindicar:

Sitemap: <ubicación_sitemap>

DeacuerdoaloqueseindicaenelSitioWebenquesedifundeesteprotocolo,laformadeingresarlainformacióncorrespondienteala<ubicacióndelsitemap>debeserlaURLcompletadelSitemap.

Medianteuna solicitudhttpdesdeelbrowser:parahacerlo sedebeutilizarelpropiobrowseryen lalíneadeladirecciónescribirlosiguiente:

<searchengine_URL>/ping?sitemap=sitemap_url

6.3.5.AdministracióndecontenidosTal como se indicó antes, la calidad del código HTML de un Sitio Web es uno de lo aspectos másrelevantes para conseguir que sus contenidos sean incorporados adecuadamente en los índices yaparezcanentrelosprimeroslugaresdelasbúsquedasrealizadasporlosusuarios.

Noobstante,talcomoseindicaenelpárrafoanterior,quienesvisitanlosbuscadoressiempresolicitarán

contenidos ypor tanto, será la calidaddeéstos apoyadapor la formaenque seha creadoel códigoHTMLdelapágina,loquedetermineloformadeaparecerenlaspáginasderesultados.

Acontinuaciónserevisanlostresgrandeselementosquesedebenvigilarencadapágina,paraapoyarunaadecuadaEncontrabilidad:

• EstructuradeContenidos

• CaracterísticasdelosContenidos• CalidaddelosContenidos

Estructuradecontenidos

Para que los contenidos de una páginaweb reciban un trato adecuado en losmotores de búsquedadebe existir una concordancia entre las diferentes partes del código. En este sentido, es importante

velarporqueeltextoqueaparezcaenlaetiqueta<title>delasección<head>seaelmismoqueaparece


70|P á g i n a


en laetiqueta<h1>de lasección<body>.Tambiénesadecuadoque laspalabrasqueaparezcanen laetiqueta<meta...content="keywords">de lasección<head>incluyapalabrasquetambiénaparezcan

enlaetiqueta<h1>delasección<body>

Graciasaestarelación,seestarádandounapruebadequelapáginaserefierealoscontenidosqueseexponenenestasetiquetas,generandounademostracióndecredibilidadqueesvaloradadentrodelosparámetrosdelosbuscadores.

Otroelementode interésesqueelcontenidoestéestructuradoutilizandoetiquetasdeltipo<h>para

los subtítulos,yaquegraciasaello sedemostraráquesehautilizadoelestándar.Adicionalmente,esinteresanteutilizarlaetiqueta<strong>o<em>paraindicarcontenidosdestacados,dejandodeladolaetiqueta<b>quesólodenotanegritas.Además,sidichasetiquetasseasignanapalabrasqueestánenla

lista de palabras claves ("keywords") antes señaladas, se aumentará la correspondencia interna de lapáginalocual,asuvez,ayudaráenlacalidaddesuindexación.

Característicasdeloscontenidos

Un temacentralde lapágina tienequever con la titulaciónde lapágina, valedecir, con la frasequeaparecerepetidatantoen laetiqueta<title>comoen laetiqueta<h1>.Sedebería intentarquedicha

fraseincorporaralaformaenqueelcontenidoesllamadoporlosusuariosatravésdelosbuscadores.

Otra de las prácticas habituales para apoyar la Encontrabilidad de los Sitios Web y fomentar suposicionamientoenlaspáginasderesultados,tienequeverconelhechodequesedebe"convencer"alosrobotsdebúsquedadequelapáginaserefierealostemasqueaparecentantoen<title>comoen

<h1>. Para ello es vital quedentro del texto aparezcan varias veces los términos utilizados en dichassecciones.Lalógicadetrásdeestasituaciónesquesiunapáginaserefiereauntemadeterminado,esnaturalqueensucontenido, laspalabrasutilizadasen lostítulos (de lapáginaydel texto),aparezcan

nombradas con cierta frecuencia. Gracias a esto, se busca reprimir una mala práctica realizada poralgunossitiosqueparasubirensuposicionamiento,ponenciertaspalabrasenlalistadepalabrasclaves

("keywords")peroluegonolasusanenloscontenidos.

Estopuedeserapoyadoporlosenlacesqueofrezcalapágina,quedeberíanirnaturalmentehaciaotrossitios donde también se encuentren lasmismas palabras, con lo que se reforzará el contenido de lapropia página. Adicionalmente dichos enlaces deberían usar el elemento "title" en su sintaxis, de tal

maneradeponerallíalgunafrasequerefuercelaideadequeseaccederáacontenidosrelacionadosconeltemadelapropiapágina.

¿Cuántasvecessedebenrepetir loscontenidos?Larespuestatienequevercon laredacción:sedeberepetirtantasvecescomoseanecesarioparalacomprensióndeltextoporpartedeun"humano"que

estéleyendoymenosdelasquesepuedaninterpretarcomoqueseestáhaciendodicharepeticiónsóloparaelrobotdebúsqueda.

Otroelementodeinterésenestesentido,esquelosbuscadoresvaloranelhechodequehayaenlacesque apunten hacia el contenido que se ofrece. En este sentido, aparece como una herramienta


71|P á g i n a


importante,lacapacidadquetengaelSitioWebdeofrecerelementosquepuedanserenlazadosdesdediferentessitios.Enlamedidaquesehagadichaacción,aumentarálaposibilidaddequeloscontenidos

delsitioaparezcanenmejoreslugaresenlaspáginasderesultadosdelosbuscadores.

Calidaddeloscontenidos

Porúltimo y aunqueesto seplanteópreviamente, es importante reconocer quepormuy importantequeseanlosbuscadores,loscontenidosqueseofrecenseránleídosporpersonasyporlotantodeberánsercreadosparafomentarsucomprensiónporpartedeellas.

Enestesentido,hayqueconvenirqueenlamedidaqueloscontenidosqueseofrezcanseandecalidad

y provengan de una fuente importante, será bien recibido, creído y, eventualmente, enlazado desdeotrosSitiosWebcreandodeestamaneraelcírculovirtuosoquepermitemejorarlapresenciayposiciónenlaspáginasderesultadosdelosbuscadores.

6.3.MineríaWebyEncontrabilidad.LaMineríadelaWebesunadisciplinaquepermitegenerarinformaciónacercadelcomportamientode

losusuariosenunSitioWeb,medianteelanálisisdelosdatosqueellosmismosvandejandoamedidaque visitan los SitiosWeb. Utilizando técnicas provenientes de las ciencias sociales, entre las que secuenta la clasificación, asociación y agrupación mediante patrones, es posible caracterizar a post‐

visitantes conelobjetivodeofrecerlesproductoso serviciosquevayandeacuerdoa lasnecesidadesqueseasignenalostiposdeusuarioquesehayandefinido.

Para mejorar su efectividad, se define que la minería del web se puede hacer en tres áreas que se

refieren al contenido del sitio y la estructura de navegación,más el comportamiento de los usuariosrespectodelosdosprimeros.

El objetivo de utilizarla, es ofrecer una alternativa que permita la generación demayor informaciónacercadelasactividadesquellevanacabolosusuariosquevisitanelSitioWeb.

Respecto de esto es importante tener en cuenta que las acciones que realizan los usuarios son

registradasanónimamenteenarchivosdetextotambiénconocidoscomologs(obitácoras,enespañol),en los cuales se va registrando cada uno de los archivos que sonmostrados por un servidor tras lapeticióndeunclientequevisitaunSitioWeb.Porlomismo,cadavisitageneradecenasocentenaresde

líneas de información que al ser procesadas con software especializado de análisis, permiten tenerinformaciónagregadaacercadevisitas,zonasdelsitioquesonmásvisitadasyotroselementosbásicosdeinformaciónsimilares.

Asimismoesposibletenerinformaciónacercadelaspalabrasingresadasenlosbuscadoresexternose

internosdelSitioWeb,loqueayudaaentendercuálessonlostérminosmásbuscadosyparaloscualeselSitioWebconstituyeunafuentedeinformación.

Enestesentido,laposibilidaddeanalizarporejemplo,loslogsdelanavegacióndelSitioWebobienloslogs de las palabras ingresadas en un buscador, permitirán al administrador del Sitio Web, tener


72|P á g i n a


informacióndeprimerordenparatomardecisionesacercadecontenidos,delaformaquetieneelSitioWebeincluso,paratomardecisionesdereorganizacióndelasseccionesexistentesenelmismo.

6.3.1.QuiénbuscayquébuscaRespecto de los usuarios del SitioWeb se debe intentar conseguir información acerca de qué estánbuscandoenelSitioWebycuálessonlosobjetivosquepersiguenalvisitarlo.

Aunquelainformaciónqueseobtienemediantemineríadewebseráanónima,yaqueestábasadaen

elementosdeeste tipo, seráposibleactivarotros tiposde recursosparaconoceralusuarioydeestamanerasabermásacercadesusnecesidadesylasrazonesquelollevanavisitaralSitioWeb.

Por lomismo, se apoya como una buena práctica que el administrador del SitioWeboWebMáster

puedadedicaralgúntiempodesuslaboressemanalesalassiguientesactividades:

• RespondercorreoselectrónicosdelosusuariosquetenganrelaciónconlaoperacióndelSitioWeb,yaqueenelintercambioconellosseráposibleentendersupercepcióndelSitioWebylasnecesidades de información que lo llevan a visitarlo. Desde allí, serámás fácil conocer si hay

satisfaccióndelasnecesidadesyquépasossedebendarparaconseguirla.• Responderllamadostelefónicosdeusuariosquenoconsiganterminarsusoperacionesypara

quienes los sistemasdeayuda tradicionalesofrecidospor la instituciónoprogramadueñadel

SitioWebtampocoaporteninformaciónadecuada.ElcontactodirectoconlosusuariosseráunaherramientavaliosaparaperfeccionarloscontenidosyfuncionalidadesdelSitioWeb.

• Desarrollar tests deusuario tendientes a entenderdequémanera se relacionan los usuarios

con loscontenidosyapartirdeesto,establecer lasmejorasnecesariasen losámbitosqueserequieran.


73|P á g i n a


7.UsabilidadUnodelosobjetivosmásimportantesquepersiguetodoSitioWebestransformarseenunautoserviciodeinformacióneinteracción,querequieradelamenorexplicaciónposibleparaquelosusuariosquelo

visitan,puedanencontraryobtener la informaciónquebuscanytambién,seancapacesdecompletarlastareasqueselesproponendesdeelespaciodigital.

7.1.¿QuéeslaUsabilidad?LaUsabilidadeslamedidadelacalidaddelaexperienciaquetieneunusuariocuandointeractúaconunproducto o sistema. Esto se mide a través del estudio de la relación que se produce entre las

herramientas (entendidas en un Sitio Web el conjunto integrado por el sistema de navegación, lasfuncionalidadesyloscontenidosofrecidos)yquieneslasutilizan,paradeterminarlaeficienciaenelusodelosdiferenteselementosofrecidosenlaspantallasylaefectividadenelcumplimientodelastareas

quesepuedenllevaracaboatravésdeellas.

OtradefinicióneslaqueentregaelacadémicoYusefHassan(UniversidaddeGranada)alindicarque"lausabilidad es la disciplina que estudia la forma de diseñar SitiosWeb para que los usuarios puedaninteractuarconellosdelaformamásfácil,cómodaeintuitivaposible"yagregarque"lamejorformade

crear un Sitio Web usable es realizando un diseño centrado en el usuario, diseñando para y por elusuario,encontraposiciónaloquepodríaserundiseñocentradoenlatecnologíaounocentradoenlacreatividaduoriginalidad".

Además,elprofesorRicardoBaeza‐Yatesenunartículodelaño2002recalcadefinealadisciplinacomo

"unconceptoqueenglobaaunaseriedemétricasymétodosquebuscanhacerqueunsistemaseafácildeusarydeaprender.Alhablardesistemalareferenciasehaceacualquierdispositivoquetengaqueseroperadoporunusuario.EnestacategoríacaenlosSitiosWeb,aplicacionesdesoftware,hardware,

etc.".

Cabe indicar, finalmente, que la norma internacional ISO 9241‐11:Guidance onUsability (1998) hacereferenciaalaUsabilidadyofreceunadefinicióndesucontenidoyalcance:

“[LaUsabilidadserefiere]elgradoenqueunproductopuedeserusadoporusuariosespecíficospara

conseguir metas específicas con efectividad, eficiencia y satisfacción dado un contexto específico deuso”.

EsimportanteindicarquelaUsabilidadesunadisciplinaquenaceenEstadosUnidosyflorecegraciasaldesarrollocomputacional,consolidándosecomounaprácticahabitualconlaaparicióndelosSitiosWeb

enladécadadelos90s.

Adicionalmente se debe anotar que la palabra Usabilidad deriva del inglés Usability, cuya traducciónmásacertadaes"facilidadysimplicidaddeusodeunartículouobjeto".Sehaconsideradoadecuadoutilizar lapalabrausabilidadcondichatraduccióndebidoaqueenidiomaespañolnoexistenpalabras


74|P á g i n a


quedescribancontantaprecisiónesteconcepto.Enestesentido,lomáscercanoseríaUtilidad,palabraquedeacuerdoalDiccionariode laRealAcademiaEspañola, significa "que traeoproduceprovecho,

comodidad,frutoointerés".Sinembargo,debidoaquedichotérminonoenglobalaideadefacilidadosimplicidadenelusodeunobjetooespacioporpartedequien loemplea, sehapreferidoutilizar laderivacióndelapalabraoriginalmenteenidiomainglés.

7.1.1.CaracterísticasPrincipalesdelaUsabilidadDadaslasdefinicionesanterioresesclaroqueabordarlaUsabilidadimplicatambiénrevisarunaseriede

aspectosrelacionadosconelusoylamaneraenquelaspersonasserelacionanconlossistemasqueselesofrecen.

Porlomismo,sehahechonecesariohacerunaseriedecomprobacionesdeestosaspectos,mediantelarevisióncompletadelaformaenqueelespaciodigitalapoyaalosusuariosencumplirsustareasenla

mejor forma posible. Dicha revisión debe ser hecha a través de diferentes factores, entre los que secuentanlossiguientes:

• Facilidaddeaprendizaje:defineencuántotiempounusuario,quenuncahavistounainterfaz,puedeaprenderausarlabienyrealizaroperacionesbásicas.

• FacilidadyEficienciadeuso:determinalarapidezconquesepuedendesarrollarlastareas,unavezquesehaaprendidoausarelsistema.

• Facilidadderecordarcómofunciona:serefierealacapacidadderecordarlascaracterísticasy

formadeusodeunsistemaparavolverautilizarloafuturo.• Frecuencia y gravedad de errores: plantea el apoyo que se le entrega a los usuarios para

apoyarloscuandodebanenfrentarloserroresquecometenalusarelsistema.

• Satisfacción subjetiva: indica lo satisfechosquequedan losusuarios cuandohanempleadoelsistema,graciasalafacilidadysimplicidaddeusodesuspantallas.

7.1.2.ÁreasteóricasrelacionadasEn torno a la Usabilidad se ha creado una comunidad que ha ido expandiendo sus capacidades yherramientas, abarcando áreas como la "Experiencia de usuario" y la medición de la calidad de lamisma,porqueseentiendequemientrasmayorsealausabilidaddeunsitio,mayorseráelimpactodel

SitioWebenquieneslovisitanyutilizan.

Adicionalmente,esútilentenderelcontextoenelquesedesenvuelveestaformadetrabajoutilizandopara ello la perspectiva que ofrece PeterMorville, cuando él sitúa la Usabilidad en función de otrasvariablesquepermitenmedirlacalidaddeunSitioWebdesdediferentesperspectivas.Enesesentido,

señalaqueunSitioWebpuedesermejoradodesdediferentesacercamientos,quedandolaUsabilidadcomounomásdeellos,permitiendolaaparicióndeotrosconsimilarimportanciaquedebensertenidosencuentaalmomentodehacerelrediseñodeunSitioWeb.

A estos acercamientos simultáneos al de la Usabilidad el autor los denomina las Facetas de laExperienciadelUsuario,ycorrespondenalossiguientes:


75|P á g i n a


• Útil: es necesario preguntarnos si nuestros productos y sistemas son útiles, y aplicar nuestroconocimientoparadefinirsolucionesinnovadorasqueapoyanlautilidad.

• Usable: corresponde a la facilidad de uso oUsabilidad sigue siendo un aspecto fundamental,necesarioperonosuficiente,porloquesedebecomplementarconlasdemásfacetas.

• Deseable: si bien los sitios deben ser eficientes, en particular con el uso de medios más

complejos(imágenes,sonidos,animaciones),estosedebeequilibrarconlosdemásvaloresdeldiseñoemocional.

• Encontrable:losSitiosWebdebensernavegablesypermitirquelosusuariospuedanencontrar

loquenecesitan.• Accesible: lossitiosWebdebenserasequiblesa laspersonascondiscapacidades(másde10%

delapoblación).

• Creíble:lacredibilidadesunodelosfactoresmásimportantesdetenerencuentayporellosedebenrevisarloselementosdediseñoafectanlaconfianzaquenostienenlosusuarios.

• Valioso:lasfacetasayudanadeterminarlosaspectosquellevanaquenuestrossitiosofrezcan

valorparanuestrosusuarios.

Figura6.1.:El"PanaldeMorville"muestralasdiferentes

facetasdelaexperienciadelusuario.

7.1.3.PrincipalesAutoresAdemásdeMorville, losautoresquehantrabajadomásdirectamenteeneltemadelaUsabilidadhansido Jakob Nielsen y Steve Krug. Ambos han presentado libros en los cuales debaten esta forma detrabajoyhandefinidosuscaracterísticasyformasdeabordarlaseneldesarrollodeSitiosWeb.

Jakob Nielsen es un doctor en ingeniería que centró su carrera en el desarrollo de interfaces de

software, desde lo cual evolucionó hacia el tema de la usabilidad . Es el autor y consultor más


76|P á g i n a


relacionadoconeltema,alpuntoquelellamóel"gurúmundialdelausabilidad",apareciendocomotalenmediosdeprensaentodoelplaneta.

Sulibro"DesigningWebUsability:ThePracticeofSimplicity"(DiseñandoUsabilidadWeb‐1999)fijólas

pautas de la disciplina y entregó las herramientas necesarias para los desarrolladores de SitiosWeb,quienes a partir de entonces comenzaron a incorporar las prácticas de la Usabilidad en su trabajohabitual.

Entreotrosaspectos,susconsejosprincipalesparamejorarlausabilidaddeunSitioWebson:

• Aclararelpropósitodelsitio:serefiereaquedesde laprimeramirada,elusuariotengaclaro

quiénhaceelsitioycuáleselalcancedelmismo.• Ayudar a los usuarios a encontrar lo que buscan: ofrecer una buena organización de

informaciónconénfasisenlosmensajesprincipalesysistemasdebúsquedaadecuados.

• Mostrarelcontenidodelsitio:consisteenmostrarloscontenidosdemaneraclaraparaevitarclicksinnecesarios,mostrandotemasanterioresquehayansidodestacados.

• DiseñoparamejorarInteracción,noparadefinirla:tenercomometaqueeldiseñocooperecon

lainformación,másquecompetirconella.

Un segundo autor de importancia es Steve Krug consultor en Usabilidad cuyo libro "Don’tmakemethink"("Nomehagaspensar"‐2000)marcóunhitoalponerenelcentrode ladiscusiónelhechodeque los Sitios Web deben ser creados para que el usuario llegue a sus páginas y actúe en forma

inmediata,sinquetengaquedetenerseaentendercómoestáhechouorganizado.Además,planteólanecesidaddeprobarconlospropiosusuarioslainteracciónqueseofreceenlosespaciosdigitales,conelfindeasegurarquelaofertaqueserealiza,escomprendidaporquieneslasestaránutilizando.

Entreotros,susprincipalesconsejosparaayudaralausabilidaddeunSitioWebson:

• Diseñarunsitioessiempreunactodebalance:priorizarelusodelespacioayudaalaaudienciayaquienpublica,aalcanzarsusmetas;

• Balanceareldiseñoyelformato,paraquelascosastenganunénfasisadecuadoencuantoauso

yespacio.• Siempresedebenoptimizarmuchasvariablesalmismotiempo,mostrandosuficientedeunasin

ocuparmuchoconotra.

• No hay reglas universales porque la solución que funciona en un caso, no funciona en otrocontexto.

Adicionalmentesedebediseñarpensandoquelosusuariosnoleenlostextossinoquevansaltandoporelcontenido;queloscontenidosseránaccedidosdemejorformasisecreanjerarquíasvisuales;quela

navegacióndebeutilizarsignosvisiblesymétodosconvencionalesparaqueseaentendidaentodosloscontextos,entreotrosaspectos.


77|P á g i n a


7.1.4.PrincipalesrecursosAdemás de los libros reseñados, hay en Internet una serie de recursos que pueden ser accedidos enidiomaespañol,paraconocermásacercade lascaracterísticasde laUsabilidadcomodisciplina.Entreellos,citamoslossiguientescomolosmásinteresantes:

• Research‐BasedWebDesign&UsabilityGuidelines(inglés)

http://www.usability.gov/pdfs/guidelines.html• UsabilidaddefinidaenWikipedia

http://es.wikipedia.org/wiki/Usabilidad• HerramientasparalausabilidadenlaFundaciónSidar(España)

http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm

7.2.AseguramientodeUsabilidadUnavezentendidoelalcanceycaracterísticasdelaUsabilidad,esposibleavanzarenlacomprensiónde

loselementosquesedeben tenerencuentaparaasegurar suexistenciayavanzarenmejorasque laamplíen.

Noobstante,paraasegurarquedichoselementosestánpresentesenunSitioWeb,losexpertosdeestaáreadeestudioshandesarrolladounaseriedemetodologíastendientesamedirdemaneraconcretala

existenciadeloselementosqueayudanalaUsabilidad.

Laaplicacióndeestasmedicionesdalugara lageneracióndecriteriosobjetivosypuntosdechequeo,quepermitenhacercomparacionesmetódicasyperiódicas.

Por loanterior,esdesumaimportanciaconocer losmétodosdemediciónparaponerlosenprácticayaprovechar las características de estadisciplinapara aumentar la efectividad y eficiencia de los Sitios

Web.

7.2.1.MedicióndelausabilidadSeentiendepormedicióndelaUsabilidadlatareadeaplicarunomásmétodosquepermitenobtener

datos objetivos acerca de la calidad de la experiencia que tiene un usuario en un SitioWeb. Por lomismo,setratadelaaplicacióndemétricassobrediferentesaspectosquevandesdelainterfazgráficahastaelusoycomprensióndelasfuncionalidades,quepermitancompararlaexperienciaquetieneun

usuario endiferentes SitiosWeb,mediantemétodos quepuedan ser utilizados con cualquier tipodeellos.

Elinteréscentraldelautilizacióndeestasmétricasesquesepuedenlograrcriteriosobjetivosrespectodelosaspectosmedidos,conlocualseobtienemayorinformaciónquelaquesólootorgalapercepción

subjetivadeunapersona,pormuyexpertaoconocedoradelastecnologíasdeinformaciónqueellasea.

Dentrodelosautoresquemáshanavanzadoenlacreacióndecriteriosdemedición,seencuentraJakobNielsen,quientempranamentetraslaaparicióndelweb,desarrollólosestudiosnecesariosparallegara

describirlaexistenciadeunconjuntodeprincipiosdemedición,cuyocumplimientopermitiríaasegurar


78|P á g i n a


la calidad de usable de un SitioWeb. A dichos criterios les llamó principios heurísticos debido a quepermitíanhacerunaevaluaciónconsiderandolaperspectivadelosexpertos.

Dichos principios son diez y su revisión permite desarrollar un proceso repetitivo de desarrollo y

pruebas, que asegure que el producto resultante permita generar un sitio usable. La importancia deponerlosenprácticaradicaenqueofrecenunaformasimplederevisar lascaracterísticasdelosSitiosWeb de una manera más económica que sistemas similares basados en pruebas de laboratorios y

tecnologíasdeseguimientodelasactividadesdelosusuarios.

7.2.2.MetodologíadeJakobNielsenParallegaralosprincipiosdeusabilidadantesseñalados,Nielsenestudió249problemasdeusabilidadyapartirdeellosdiseñóloquellamólas“reglasgenerales”paraidentificarlosproblemasdeusabilidad.Graciasaestasistematizaciónlefueposiblepasardesdeelterrenoempíricoalteórico.

LosprincipiosdefinidosporNielsensonlossiguientes:

• Visibilidad del estado del sistema: el sistema siempre debería mantener informados a los

usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de untiemporazonable.

• Relaciónentreelsistemayelmundoreal:elsistemadeberíahablarellenguajedelosusuarios

mediante palabras, frases y conceptos que sean familiares al usuario,más que con términosrelacionados con el sistema. Seguir las convenciones del mundo real, haciendo que lainformaciónaparezcaenunordennaturalylógico.

• Control y libertad del usuario: hay ocasiones en que los usuarios elegirán las funciones delsistemaporerrorynecesitaránuna“salidadeemergencia”claramentemarcadaparadejarelestado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben

apoyarlasfuncionesdedeshaceryrehacer.• Consistencia y estándares: los usuarios no deberían cuestionarse si acciones, situaciones o

palabrasdiferentessignificanenrealidadlamismacosa;sigalasconvencionesestablecidas.

• Prevencióndeerrores:muchomejorqueunbuendiseñodemensajesdeerrores realizarundiseñocuidadosoqueprevengalaocurrenciadeproblemas.

• Reconocimientoantesquerecuerdo:sedebenhacervisibleslosobjetos,accionesyopciones,El

usuario no tendría que recordar la información que se le da en una parte del proceso, paraseguiradelante.Lasinstruccionesparaelusodelsistemadebenestaralavistaoserfácilmenterecuperablescuandoseanecesario.

• Flexibilidadyeficienciadeuso:lapresenciadeaceleradores,quenosonvistosporlosusuariosnovatos,puedeofrecerunainteracciónmásrápidaalosusuariosexpertosquelaqueelsistemapuedeproveeralosusuariosdetodotipo.Sedebepermitirquelosusuariosadapteelsistema

parausosfrecuentes.• Estéticaydiseñominimalista:losdiálogosnodebencontenerinformaciónqueesirrelevanteo

poco usada. Cada unidad extra de información en un diálogo, compite con las unidades de

informaciónrelevanteydisminuyesuvisibilidadrelativa.


79|P á g i n a


• Ayudaralosusuariosareconocer,diagnosticaryrecuperarsedeerrores:losmensajesdeerrorse deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y

sugerirunasoluciónconstructivaalproblema.• Ayuda y documentación: incluso en los casos en que el sistema pueda ser usado sin

documentación, podría ser necesario ofrecer ayuda y documentación. Dicha información

deberíaser fácildebuscar,estarenfocadaen lastareasdelusuario,conuna listaconcretadepasosadesarrollarynoserdemasiadoextensa.

7.2.3.TestHeurísticoApartirdelosprincipiosseñaladosenelpasoanterior,Nielsenplanteóqueungrupodeexpertospodíahacer la revisión de un Sitio Web –ya fuera operativo o en etapa de construcción‐ y contrastar su

funcionamiento contra el grupodeprincipios enunciados. A dichaprueba se le conoce generalmentecomo"testheurístico".

El grado de cumplimiento y los problemas de usabilidad detectados durante este test heurístico ,permitiría a los desarrolladores tomar las precauciones y sugerir los cambios que fueran los más

adecuadosparaaumentarlausabilidaddelsistema.

Enestesentido,Nielsenexplicóquelosexpertospodríaninclusoaumentarelnúmerodeáreasarevisardependiendodelascaracterísticasdelproyectoaevaluar

El resultado de un test de este tipo es un informe emitido por el evaluador en el que describe elproblema analizado, las reglas específicas que son afectadas por su comportamiento y cómo podría

mejorar el cumplimiento de ellas con un cambio en la interfaz. Añade que si bien esto último no esposible,síseráimportantequelosproblemasconocidosseanreportadosconelfindeintentarhacerlasmodificacionesposiblesparaaportarasusolución.

Unelementodeinterésenestecaso,esquecomosetratadeevaluarinterfacesbasadoenlosprincipios

descritos,noesnecesarioqueéstasesténconstruidasparaevaluarlas;enperíodospreviosaldesarrollopero cuando ya se cuente con las características gráficas operacionales que tendrá la interfaz, estametodologíatambiénpuedeserutilizada.

Respectodelnúmerodeexpertosquedebellevaracaboeltestheurísticoparaqueéstetengavalidezy

un número adecuado de hallazgos, el autor sugiere que cinco es el número más adecuado ya quemuchos de sus hallazgos serán equivalentes pero tambiénhabrá unnúmero importante de ellos queserán únicos. Agrega que "el número exacto de evaluadores que se debería usar depende del costo‐

beneficio.Más evaluadores deberían ser usados en casos en que la usabilidad es crítica o cuando sepuedenesperargrandesahorrosdebidoalagrancapacidaddeunsistemadesercríticoparalamisióndeunaempresa".

EnelAnexo3seencuentrauna“PlantilladeEvaluaciónHeurística”


80|P á g i n a


7.2.4.TestdeUsuarioEl "test de usuario" es un sistemade comprobaciónde la usabilidadque consiste enqueun expertoobservalaformaenqueunusuarioempleaunsistemayapartirdeeso,lograestablecerlosprincipalesproblemasquetienesuinterfaz.Enestesentido,lausabilidadserelacionadirectamenteconelnivelde

desempeñoquetieneelusuarioobservado.

Lasprincipalesventajasdeestemétodoradicanenelhechodequesevealusuarioactuandosobreunapantallareal,manipulandosusopcionesdelamaneraqueloharíaenunasituaciónrealdeuso.Además,

los problemas que se detectan normalmente identifican las principales dificultades que tienen losusuariosanteelsistemaqueselesofrece.

Graciasaestetrabajo,esposibleidentificardemanerarápidaysimplelosproblemas,dejandoleccionesparaque losencargadosdeldesarrollode lasaplicaciones,puedanhacercorreccionesque llevenaun

mejorusodelsistema.Adicionalmentepermiteaislarlaspercepcionesdelosusuariossobreunsistema,respectodelusorealqueledanalmismo,generandoobservacionesmásobjetivasacercadelacalidaddelsistemaprobado.

Noobstante,paraqueunsistemapuedaserprobadoadecuadamentemedianteestesistemasedebe

seguir un protocolo estricto que permita ver al usuario en acción, sin que éste se reste de hacer lapruebacomosiestuvierausandodeverdadelsistema.Paraelloes imprescindible tenerencuenta losiguiente:

• Se debe convencer al usuario de que lo que está a prueba no son sus habilidades, sino el

sistema;siéstenofuncionaseráculpadelsistemaynodelusuario.Porlomismo,esesperablequedigaenvozaltatodoloquelepasaporlamentecuandoestáhaciendolaprueba,paraqueel equipo de desarrollo pueda entender cuáles son sus expectativas y por qué ellas no se

cumplen.• Cadaacciónquesesoliciterealizaralusuariodebetenerunobjetivoclaroasermedido,conel

fin de entender cuáles son las dificultades que enfrenta y cómo podrían atenderse al ver su

formadeusarlainterfaz.• Enningúnmomentodeltestsedeberá"ayudar"oretroalimentaralusuarioexplicándolecómo

hacerunaacción,debidoaqueseesperaverlausabilidaddelsistemaporsímismo,esdeciren

lasmismascondicionesenque funcionarácuandoestéadisposiciónde todos losusuariosvíaweb.

• Aexcepcióndesistemasqueesténdirigidosaunaaudienciaespecífica,cualquierpersonaque

sepausaruncomputadorpodría serelegidoparahacerel testdeusuario.Es importantequequienesseanelegidosseanrepresentativosdelosusuariosqueutilizaránfinalmenteelsistema.

Respectodelnúmerodeusuariosquesedebeempelarenuntestdeestetipo,Nielsenseñalaquecincopersonaseselnúmeromásadecuado.

EnelAnexo4seencuentrauna“PlantilladeTestdeUsuario”


81|P á g i n a


7.2.5.MetodologíadeAlanCooperUnodelosproblemasmáshabitualesquetienenlosdesarrolladoresdeSitiosWeb,esladificultadparaentender las necesidades que tienen los usuarios que llegan a visitar estos espacios digitales.Habitualmente lo que hacen es conseguir que un determinado software funcione adecuadamente,

aunque no necesariamente ligado a la actividad de un usuario en particular lo que lleva a que nosiemprelogreserentendidoyutilizadocompletamenteporestos.

Para atender esta problemática, el consultor Alan Cooper desarrolló una metodología de "diseño

orientadoametas"atravésdelcualsetrabajadirectamenteconlainteracciónquetendránlosusuariosconlossistemasqueseestándesarrollando.

Dichametodologíaimplicaeldesarrollodeunaseriedepiezasgráficasenlasqueseilustralamaneraenque los usuarios trabajan con el sistema y mediante esta fórmula, se busca responder de la mejor

maneraalasnecesidadesquetienenlosusuariosdelossistemasqueselesofrecen.

7.2.6.CreacióndePersonasyEscenariosComo parte integral de dicha metodología se creó el concepto de "persona" que corresponde a

personajes determinados aunque ficticios, que permiten entender demanera clara quiénes serán losusuariosdelmismoymás tardeelde"escenarios”,quecorrespondena lassituacionesenquedichospersonajesemplearánelsistema.

Laformadeutilizardichosconceptosseexplicadelasiguientemanera:"Creamosmodelosdedatosy

flujosde trabajoparadefinir losprocesosdenegocio.Modelamosarquetiposdeusuariosqueson laspersonas para entender sus metas y modelos mentales. Para encontrar el diseño de interacciónadecuado, ponemos a las personas en escenarios y desarrollamos bosquejos gráficos que siguen los

caminos más relevantes en las interfaces. Aplicamos posprincipios de diseño y las plantillas paraconstruirunasolución.Mientrasmásavanzamosadquirimosmásconfianzaen loquedesarrollamosydefinimoslaconductadelasfuncionesmenosusadasydiseñamosnuestrasoluciónconmejoresniveles

de fidelidad. En cada paso, documentamos los cambios en nuestro diseño demanera que podamoscomunicarlosatodoslosmiembrosdenuestroequipodedesarrollo".

Estametodología tieneunusomuy importantealmomentodedefinir las funcionalidadesdeunSitioWeb,yaquealdefiniralospersonajesqueutilizaránylassituacionesenquelosemplearán,serámás

fácil que todo el equipo de desarrollo determine los límites de las funcionalidades y contenidos quedebeponerencadapantalla.

Porejemplo,paraunsitioqueofrezcatrámitesdeunserviciodeterminado,seráimportantedeterminarquiénes son losusuarioshabitualesdelmismo.Si se sabeque sonde la terceraedady con limitados

conocimientos sobreelusodel computador, sepodrádiseñaruna"persona"queseaunhombrequesóloquiere realizar el trámite en elmenornúmerodepasosposibles, conuna interfaz con lamenor

cantidaddeelementostecnológicosylamayorsimplicidadposible,conelfindehacerlaacciónquesenecesita y terminar consiguiendo un comprobante que le ayude posteriormente a demostrar que yahizolagestión.


82|P á g i n a


Comopartedelusodeestametodologíasepuedebautizara la"persona"como"DonRafael", indicarque se trata de un jubilado. Luego, se podrá definir que el “escenario” consistirá en que utilizará el

trámitedesdeun infocentrodondees improbablequepuedarecibirayuda loquedeterminaráque lapantalladebeserlomássimpleposibleyqueesperarásalirdeallíconundocumentoimpresoquelleveun timbre, tal como si hubiera ido a la oficina del servicio. Al conocer estos requerimientos, todo el

equipodedesarrolloentenderámuybien loque tienequehacery su respuestaserádiferentequesisólosehablaradel"usuario"entérminosgenéricos.

EnlosAnexo5seentregaunamuestragráficadeunaPersonayEscenario

7.3.EjemplosprácticosdemedicióndeUsabilidadConlasmetodologíasdadasaconoceranteriormenteesposiblequeelequipoquedesarrollaunsistemapueda capturar información de primer orden durante el proceso de creación de un Sitio Web para

determinar la mejor forma de diseñar tanto sus interfaces gráficas como las interacciones que segeneranapartirdeellas.

7.3.1.UtilizacióndelametodologíaTomando dichas metodologías y aplicándolas a un proceso de desarrollo, se sugiere su uso en elsiguienteorden:

• Creación de personas: el uso de esta metodología aparece como primera actividad en un

procesodedesarrollowebyconsisteenunarevisiónde laaudienciaa laquesedirigeelSitioWebparaelegirdeentreaquellosusuariosqueaparecencomolosprincipales,aunoodosquerepresenten a los usuarios promedio. La actividad en este caso consiste en definirlos con

“nombreyapellido”,otorgarlescaracterísticasdemográficaseinclusodarlesunafotografíaquelos identifique.Dichaspersonasdebenestar siempre referenciadasen las conversacionesquedefinanlascapacidadesdelsitio,conelobjetivodequelainterfazsiempreestéorientadaalos

usuarios.• CreacióndeEscenarios: comosegundaactividadsedeterminaenquémomentos losusuarios

paraloscualessehancreadolas“personas”llegaránautilizarelSitioWebydequémaneralo

harán. Con eso se puede terminar qué funcionalidades son las más relevantes a serdesarrolladasy lamaneraenqueelenfoquea las “personas”debeserexpresado tantoeneldiseñográficocomode interacción.Las interfacesquesegenerentrasestosaportes,deberán

consignardichavisión.• TestHeurístico:unavezquesehancompletadolospasosanterioresyaúnantesdeldesarrollo,

se puede entregar los diseños de interfaces a un pequeño grupo de expertos, para que

determinen las eventuales fallas de usabilidad que puedan existir en las propuestas. Con susinformes será posible hacer correcciones a las interfaces que se hayan desarrollado hasta elmomento,graciasalocualseevitaránproblemasposteriores.

• Test de Usuario: cuando ya se ha avanzado en el desarrollo, es posible hacer pruebas conusuariosrealesparaverlamaneraenqueellosutilizanlas interfaces,paracomprobarsisehaconseguidolametadequelogrenrealizarlastareasqueseproponenenlapantallademanera


83|P á g i n a


eficiente y efectiva. Con los resultados se deben hacer as correcciones que aparezcan comonecesariasparaasegurarlausabilidad.

Es importante considerar que todos los pasos anteriores deben ser insertados en el sistema de

desarrolloquesepongaenpráctica,dandoespacioparalageneracióndesusresultadoseintegrandoaéstos en procesos repetitivos de mejoras. Sólo de esta manera se podrá asegurar que el Sitio Webresultanteserácomprendidoyutilizadoadecuadamenteporlosusuarios.

También es relevante tener la claridad de que un sistema sólo será útil cuando los usuarios que lo

empleenlogrendesarrollarlastareasqueseofrecenensuspantallas;enestesentido,nobastaqueelsoftware realice las operaciones que se desean, sino que sólo se entenderá que funcionaadecuadamentecuandolosusuariosloentienden,loempleanylograncumplirconlasactividadesque

comprendesuinterfaz.


84|P á g i n a


8.PuestaenMarchadelSitioWebUnavezqueel sitiosehaconstruido,esnecesariohacerlopasarporunaseriedepruebasantesdeyentraralafasedeproducción.Mediantedichaspruebas,semedirásureacciónintegralfrenteadiversas

accionesquerealizaránlosusuariosdesdesuspáginas.

Entreotrosaspectosseránecesarioprobareldesempeñocomputacionalde laplataformatecnológicausada;seguridadanteintentosdeataqueyexactitud;correccióndesucontenidoysudespliegueenlosdiferentesprogramasvisualizadores,entreotrosaspectos.

8.1.ErroresenlaEtapadePruebasLos errores seránde comúnocurrencia y no situaciones aisladas, por lo quehayqueutilizar diversas

metodologíasparallevarunrecuentodeellosyhacerunseguimientoordenadodelaformaenquesonabordadosycorregidos.

Si lametodologíadedesarrolloha sidobienaplicada,enestaetapapodríanocurrirproblemasconelfuncionamiento de las aplicaciones por diversas condiciones de borde (tipo de programa visualizador

usado,enlacesnoencontrados,etc.),peronodeberíanproducirseproblemasrelacionadosconqueelsistemaejecuteaccionesdiferentesalasquesehubieransolicitadoatravésdesusformularios,sistemasdebúsquedauotros.

Dadoqueloserroresseráncomunes,sedebepreparara losusuariosqueharánlaspruebasparaeste

tipo de ambiente, explicándoles que las situaciones de error en esta etapa serán lo normal y quegradualmente éstas irán desapareciendo para dar lugar al funcionamiento normal de las aplicacionesprobadas. Pero, lo relevante en este caso, será hacerles hincapié en la necesidad de que ellos vayan

registrando e informando adecuadamente sus hallazgos, con el fin de contribuir al proceso decorreccióndeloserrores.

8.2.CómoyQuéProbarConelfindeprobarlasdiferentescapacidadesdeunSitioWeb,esnecesariodividireltrabajoencinco

áreas,queson:

• PruebasdeInterfacesyContenidos• PruebasdeFuncionalidadesyOperación• PruebasdeCarga

• PruebasdeSeguridad• PruebasdeRespaldoyRecuperación

Por cada una de ellas hay actividades específicas a realizar, de las cuales se entrega un detalle acontinuación.


85|P á g i n a


8.2.1.PruebasdeInterfacesyContenidosLasactividadesdeestaetapaconsistenenhacerrevisionesprecisasdelaformaenquesedesplieganlaspáginasdelsitioyversicumplenconlosTérminosdeReferenciaenestostemasy,además,sicumplenconlosestándaresmínimosquesehayandefinidocomometaasercumplida.

Lasaccionesdepruebasugeridaspararealizarenestaetapasonlassiguientes:

• Verificación de Contenidos: es una prueba básica para revisar si el Sitio Web desarrollado

incluyetodosloscontenidosquesehanespecificadoenlosTérminosdeReferenciaolosquesehayan definido en el marco del plan de desarrollo. Se puede hacer en forma manual o

automática,deacuerdoalassiguientesorientaciones:o SistemaManual:serefiereahacerunarevisiónmanualdeloscontenidosdelSitioWeb

atravésdelanavegacióndesuspáginas.Paraelloserecomiendaprimeroconstruirun

índice de contenidos y luego verificar la existencia de cada uno de los ítemes quecontiene,atravésdehacerunrecorridoexhaustivodelsitio.Loselementosquedebenprobarseobligatoriamenteson:

Verificacióndeortografíayredacción Verificacióndeenlacesprincipales Verificacióndeimágenesenpáginas

Verificacióndeexistenciadearchivosadjuntos VerificacióndelaListadeChequeodeAccesibilidad(verAnexo6)

o SistemaAutomático:especialmenteorientadoalaverificacióndeenlacesrotos,locual

sepuedehacerutilizandosistemasbasadosenInterneto,bien,softwareespecializado.o Sistemas Basados en Internet: se recomienda usar el servicio del W3C Check Link (

http://validator.w3.org/checklink).

o Software: se recomiendabajaryusardesdesucomputadorel softwaregratuitoXenu(http://home.snafu.de/tilman/xenulink.html).Deigualmanera,losactualessoftwaredecreacióndesitiosWebpermitenmanejarenformacontroladalosenlacesinternos;un

error común de este tipo es que una foto se vea normalmente en el computador dedesarrollo,peronoenelSitioWeb,Estoocurreporquees referidaen formaabsolutadesde una ubicación en un disco duro local o en red, en lugar de un directorio de

imágenesdelSitioWeb.• Sitio en Construcción: se debe verificar que el SitioWeb no contenga espacios vacíos o que

tengaeltítulodeenconstrucción.Noesadecuado,bajoningúnsentido,usarespacioscondicha

leyenda; en tal caso es preferible eliminar esa zona y volver a incluirla cuando exista elcontenidocorrespondienteenelsitio.

• Verificación deMeta Tags: losmeta tags sonmarcas en lenguaje HTML que van en la parte

superior de cada página, a través de las cuales se entrega a los sistemas de indexación ybúsqueda(comoGoogle,Yahoo!yotros), la informaciónmínimaquesedebetenerencuentaparahacerunacorrectaindexacióndelcontenidoqueincluye.Losmetatagssonelementosque

obedecenaunestándardefinidoporelWorldWideWebConsortium(http://www.w3c.org)porlo que su uso está regulado. Para verificar que dichas marcas cumplen con los elementos


86|P á g i n a


mínimos requeridospor losbuscadores,existenherramientasen Internetquepermitenhacertalpruebayofrecenrecomendacionesparamejorarlainformacióningresadaendichaárea.

• VerificacióndeEstándares:aunquelosSitiosWebpuedenserconstruidosapartirdediferenteslenguajes, todosdebencumplir ciertasnormasdeorganizaciónde su código fuente (sintaxis),quepermitansuvisualizaciónporsoftwareequivalenteendiferentesplataformas.Dichasintaxis

estáestandarizadaypuedeserprobadaatravésdeherramientaspúblicasqueestándisponiblesenInternet.Lasdosmásimportantesson:

o ValidacióndeHTML:larealizaelWorldWideWebConsortium(http://validator.w3.org)

eindicasielcódigousadoenlapáginaescorrecto.Comoresultadoentregaunreporteconloseventualeserroresparaayudarasureparación.

o ValidacióndeCSS:larealizaelWorldWideWebConsortium(http://jigsaw.w3.org/css‐

validator/)eindicasilaHojadeCascadadeEstilo(CascadingStyleSheet)cumpleconlasintaxis estándar y por lo tanto podrá ser visualizada correctamente en todos lossistemas.

• Verificacionesde Interfaces:medianteestapruebaserevisanaspectosgráficosdelSitioWeb,para determinar si su despliegue en las páginas es correcto. Dentro de los elementos másimportantesaserverificados,seincluyenlossiguientes:

o Plug‐ins necesarios: cuando se utilicen elementos audiovisuales o interactivos querequieran de algún software incrustado para funcionar (plug‐ins), se debe ofrecer unenlace para que los usuarios que no lo tengan instalado, puedan bajarlo y hacer el

proceso de instalación. En el caso del uso de la tecnología Flash, las últimasactualizaciones del producto permiten que el software pueda ser bajado en forma

automáticaporlosprogramasvisualizadores,sisecuentaconlacodificaciónadecuada.Porloanterior,esnecesariohacerlapruebadesdeuncomputadorquecarezcadedichosoftware,paracomprobarqueefectivamentehacedichaoperación.

o Consistencia de la Diagramación: cada una de las páginas del sitio debe tenerelementos consistentes, con el fin de ofrecer al usuario una experiencia similar encualquieráreadelSitioWeb;pornombrarsólotresaspectos,loanteriorimplicaquelos

menús deben aparecer siempre en el mismo lugar; que los listados deben estardiseñadosde similarmaneraen todoel sitio yque los coloresy formasdeusode lasinterfacesdebensersimilaresalolargodelaspáginas.

o Anchode laDiagramación: si la diagramacióndel sitio seha realizadoparaunanchodeterminado(porejemplo,800pixelesdeancho),enestaetapasedebeprobarsiellose cumple. Asimismo, se debe probar en una pantalla configurada con una menor

dimensión(porejemplo640x480pixeles),cuáleseláreavisibledelsitioycómoafectaeso a la navegaciónpor elmismo.Otra pruebadelmismoestilo, se refiere a usar unprograma visualizador orientado sólo a texto como Lynx (

http://www.delorie.com/web/lynxview.html), para obtener visiones alternativas de lamanera en que los usuarios están accediendo a la información que se les ofrece.

En este aspecto, en caso de existir, es de interés contar con un estudio del log delservidor que muestre la forma en que los usuarios están accediendo a las páginas,


87|P á g i n a


porquedeesamanerasepodrádeterminarhaciaquéconfiguracióndepantallasedebeatender con mayor prioridad. La norma en este aspecto es que sin importar las

características técnicasque tengael computadordelusuarioqueaccedealSitioWeb,éstesiempreseveaordenadoylegible.

o Diagramaciónvs.Browsers:aunquelacodificaciónenloslenguajessoportadosporlos

programas visualizadores (browsers) puede apegarse a los estándares, no todosmuestrandelamismamaneralosSitiosWeb.Dadoesto,esnecesariorevisarelsitioendiferentestiposdeprogramas,especialmenteenaquellosqueconformanlaminoría,al

momentodeescribiresteManual.Esdecir, laspruebasalmenosdeberíanhacerseenMicrosoft Internet Explorer (http://www.microsoft.com/explorer), Opera(http://www.opera.com)yMozillaFirefox(http://www.mozilla‐europe.org/es/),yaque

con ellos se cubrirá un amplio espectro. Lo que se debe revisar en este caso es eldesplieguedetodosloselementosquesemuestranenlapantalla,paraasegurardequeaparecenenlasposicionesqueseleshanasignadoeneldiseño.

o Diagramación vs. Sistema Operativo: tal como se explicó en el caso anterior, losdiferentes sistemas operativos pueden establecer diferencias en la forma en que semuestran los Sitios Web. Por ello, es importante conocer cuáles son los sistemas

operativosutilizadosporlaaudienciaalaquesedeseallegaryrevisareldesplieguedelsitio en ellos. Hay que recordar que, además de Microsoft Windows, los usuariospuedenestarvisualizandoelsitiodesdecomputadoresequipadosconAppleMacintosh

odiferentesversionesdelsistemaoperativosUnix.o Imágenes Escaladas: se debe verificar que las imágenes que aparezcan en el sitio no

esténsiendomostradasentamañoreducidoartificialmente;esdecir,quesetomeunaimagendegrandesdimensionesyporprogramaciónsemuestreenuntamañomenor.Elefectodeesoesquelaspáginasconesetipodeimágenesseránmuypesadasyharán

queelaccesoaellassealento.Paracomprobarlo,sedebesolicitarlasPropiedadesdelaimagen;en laventanaquesemuestra se indicaelpesode la imagen,quenodeberíasobrepasarlos5Kbparalasdetamañopequeño(iconosythumbnails)ylos25Kb,para

losdetamañomediano(fotografíasennoticias).Esimportanteconsiderarque,ademásde estas verificaciones individuales de peso de imágenes, el límite de peso para unapáginaesde100Kb,incluyendotodossuselementos.

o Imágenes SinAtributoALT: para cumplir con las normasde accesibilidadesnecesarioquetodaslasimágenesqueseusenenunSitioWeb,tenganunadescripciónutilizandoelatributoALT(paratextoalterno)dellenguajeHTML.Paracomprobarlo,bastasituarel

mousesobreunaimagen,paraquesedespliegueunaleyendaentextoenunaetiquetaamarillaqueflotasobrelafoto;siesonoocurre,elatributonoestásiendousadoydebesercorregidoeincluido.

8.2.2.PruebasdeFuncionalidadesyOperaciónLasactividadesdeestaetapaserefierenahacerchequeoscompletosrespectodelasfuncionalidadesyaplicacionesqueofreceelsitio,yaseandeaplicacionessimplescomoformularioshastamáscomplejas,

comoconsultasymodificacionesderegistrosenbasededatos.


88|P á g i n a


En este sentido, las pruebas se deben hacer sobre diferentes elementos, siendo algunos de losmásimportanteslossiguientes:

• ValidacióndeFormularios:sielSitioWebtieneformulariosparaelenvíooingresodedatos,se

debe utilizar sistemas de validación del ingreso de datos para asegurar que éstos sean bieningresados. En este aspecto, algunas de las validaciones más importantes deben ser lassiguientes:

• Campos Obligatorios: se debe validar que en los formularios sean ingresados todos aquelloscamposqueseannecesarios;éstosdebensermarcadosdealgunamanera(usualmenteconunasterisco) que permita a los usuarios entender la obligatoriedad de ingresar información en

ellos;adicionalmente,debeindicarsetalcondiciónenformaexplícita.• Validaciones Locales: para reducir la carga de validaciones en el servidor, se recomienda

incorporar la mayor cantidad de éstas en el computador del cliente, utilizando en forma

estándarellenguajeJavascriptparahacerlas.• Sintaxis de Ingreso: se debe validar que, en algunos casos, los campos sean ingresados con

datos válidos; elmejor ejemplo es el caso del ingreso de un correo electrónico el cual debe

tenerunaarroba(@)paraservalidado.• SuscripciónaServicios:sedebevalidarquecadavezqueserealicelasuscripciónaunservicio

que ofrezca el SitioWeb, se envíe un e‐mail al usuario (para lo cual se debe necesariamente

solicitar su dirección de correo electrónico) en el que se le informe sobre el resultado de lorealizado.Quienpruebeelsistemadebevalidarqueelsistemaestéenviandocorrectamentelose‐mails y que dicho e‐mail llegó a la dirección correspondiente; en este caso se recomienda

probarconunadirecciónderecepciónexternaalainstitucióndesdelacualseprueba.• IngresodeDatos:sisecuentaconunsistemaquepermitaelingresodeinformaciónhaciauna

basededatos,sedeberevisarenlatabladedestinoqueefectivamenteseesténenviandolosdatosdelamaneraquesehaprevisto.

• Reingreso y Corrección de Datos: para mejorar la interacción del Sitio Web, cuando tras el

ingresoyenvíodelosdatosdeunformulario(despuésdelavalidaciónlocaldelformulario)elusuariopresionaelbotónBackdesuprogramavisualizadorparavolveratrásymodificaralgúncampo, se le debenpresentar todos los datos quehayan sido ingresados.De estamanera se

aprovecha la información ingresadapreviamente,evitandolafrustracióndelusuarioportenerqueescribirnuevamenteelcontenidocompletodelformulario.

• Elementosde Interfaz: al usarelementosdel lenguajeHTMLpara la creaciónde laspantallas

(inputboxes,comboboxes,listboxes,radioycheckbuttons,etc.),serecomiendanomodificarradicalmente sus atributos de despliegue (colores, formas) y comportamientos tradicionales,para lograr que el usuario sepa intuitivamente cómo usarlo y no deba aprender denuevo su

operación.• Multiplataforma:sedebecomprobarquelosformulariosfuncionanendiferentesversionesde

programasvisualizadores(browsers),desistemasoperativosydetiposdeconexióna Internet

(conmutado,bandaanchaydedicado).


89|P á g i n a


• Botones de Interacción: si se cuenta con botones interactivos que permiten imprimir, enviaruna página a un amigo, etc. se debe validar que estén realizando correctamente la acción

indicada.• Sistemas de Búsqueda: si se cuenta con ellos, se debe validar que efectivamente permitan

encontrar documentos existentes en el sitio; en este sentido se deben ingresar documentos

específicos y luego buscarlos de manera de asegurarse que la funcionalidad está operandoadecuadamente.Siel sistemadebúsqueda tieneunaversióndebúsquedaavanzada, sedebeasegurar de que las opciones ofrecidas encuentren los documentos de la manera en que se

ofrezca.Elformularioparahacerlabúsquedadebeserintuitivo,evitándoseellenguajetécnicoyespecíficoque impidaentendersufuncionamientoentreusuariosconmenoresconocimientosdelostemasabordadosenlainstitución.

• Sistemas de Feedback: si se cuenta con sistemas de envío de preguntas o reclamos se debeasegurardeque seestá completandoel ciclode vidade la consulta. Eneste sentido sedebevalidar que el sitio realiza la consulta y que ésta es recibida por el empleado encargado de

atenderla.• Sistemas de Compra: si se cuenta con sistemas de pago en línea, se debe revisar

cuidadosamente el flujo de trabajo de la aplicación y asegurarse de que en cada uno de los

pasosseestáasegurandolacalidadyseguridaddelatransacción.• Administración del Error 404: cuando se ingresa una dirección equivocada, el software del

servidor web muestra una pantalla de error anunciando el número de código del problema

(Error404).Noobstante,dichosoftwarepuedeserconfiguradoparaquemuestreunapáginadiferente, en la que se explique a los usuarios las probables razonesdel error. Es importante

incluir,endichapágina,unenlacealMapadelSitioyunBuscador,detalmaneraqueelusuariotenga más herramientas para resolver la inexistencia del contenido que buscaba. Serecomienda, además, que el Administrador de Sistemasde la institución entregueun reporte

semanalbasadoenloslogsdelservidor,quepermitaverquéesloquemásbuscanlosusuariosydequémaneraelSitioWeblesestárespondiendosusconsultas.

8.2.3.PruebasdeCargaLacargadetrabajoserefierealacapacidadmáximaquetieneunservidorweb(hardwareysoftware),paraatenderaunconjuntodeusuariosdemanerasimultánea.Porello, lasactividadesdeestaetapatienenrelaciónconcomprobar,demaneraanticipada,elfuncionamientoquetendráelservidordelSitio

Webcuandoestéenplenaoperación.

Laspruebasenestecasoconsistenensimularunacargade trabajosimilary superiora laque tendrácuando el sitio esté funcionando, con el fin de detectar si el software instalado (programas yaplicaciones)cumpleconlosrequerimientosdemuchosusuariossimultáneosytambiénsielhardware

(servidor y el equipamiento computacional de redes y enlace que lo conecta a Internet) es capaz desoportarlacantidaddevisitasesperadas.

Es importante considerar que si el servidor está en las dependencias de un tercero que entrega elserviciodealojamientodelSitioWeb(hosting),seledebesolicitaradichoproveedoruninformeenque


90|P á g i n a


déaconocerlascaracterísticasdecargadelasolucióndehardwareysoftwaresobrelacualfuncionaelSitioWebdelainstitución.

Haydiversossoftwareenelmercadoqueestánorientadosaestetipodesimulaciones,todosloscuales

ofrecencaracterísticassimilares.Entrelosdatosmásrelevantesqueesposibleobtenersecuenta:

• Tiempodeaccesodelosusuariosalosdatos• Volumendedatosyanchodebandautilizado• Archivossolicitadosytiemposusadosentransferenciadedatos

• Tiempodeesperadelosusuariostrashacerunclic• Tiempoderespuestaaclicksdeusuarios• Nivelesdeerrorexistentestrasclicksdeusuarios

Comosepuedeapreciardellistadoanterior,losreportesqueseobtienenatravésdeestavíaserefieren

atiemposdeaccesoquetienenlosusuariosqueaccedenalSitioWebyladegradaciónqueocurreenlosservicioscuandoaumentaelvolumendevisitantesconcurrentes.

Figura7.1.:Gráficoconanálisisdedatosdelservidor.

Un ejemplo de las pruebas que se pueden realizar en este tema se puede ver en este gráfico que

muestra lostiemposquedemoraenatender losrequerimientospor lasdireccionessolicitadastrasunclickdeusuarios.

Cadaunadelaslíneasrepresentaunvalorimportantedetenerencuenta:

• Clicktime:demoradelsitioenentregarlosdatostraselprimerclick.• TimetoFirstByte:tiempoquesedemoratraselclick,enenviarelprimerbytededatos.

• TimetoConnect:tiempodedemoratrasenviarelclick,enestablecerlaconexiónentreservidorycliente.

• TimeforDNS:tiempodedemorapararesolverladirecciónsolicitadaenelclick.

Con los resultados obtenidos con pruebas de este tipo se debe hacer una revisión acuciosa de los

sistemas, con el fin de hacer las optimizaciones que aparezcan como necesarias. Asimismo, se debetenerencuentaqueseránormallaexistenciadesituacionesexcepcionalesqueharánquelosserviciosnofuncionenadecuadamente.


91|P á g i n a


8.2.4.PruebasdeSeguridadLasactividadesquesepuedenrealizarparahacerlaspruebasdeseguridadsondiversasyseorientanavariosámbitos,comosedescribeacontinuación.Lostemasatratarsonlossiguientes:

• ManejodeDNS• ProteccióndeEstructuraInternadelSitioWeb

• ProteccióncontraRobots• ManejodePrivacidad

• CanalesSeguros• MecanismosdeControldeAcceso• ProteccióndeProgramas

• Hostingvs.SitioPropio• RolesMínimosaAsegurar

Acontinuaciónseentregainformaciónparacadaunodeellos.

ManejodeDNS

Unaspectoquesedebecuidareseldeutilizarunnombrededominioadecuadoyrelacionadocon laidentidad ymisión de la institución. No obstante, gracias a la forma de operación del DomainName

Service(DNSoServiciodeNombredeDominio)esposibleasignarmásdeunnombrededominioaunmismoSitioWeb.Deestamaneraesposibleincorporarotrasdenominaciones,bajoeldominio.COM.SVu ORG.SV u otro, que permitan generar alias adicionales para el sitio y así permitir utilizar las

denominacionesmáscoloquialesconlacuallainstituciónesconocidaporlosciudadanos.

No obstante, sin importar cuántos alias tenga un sitio, se recomienda que todos los dominios seanredirigidos para que la primera pantalla, en cualquier caso, corresponda a la portada oficial del SitioWeb.

ProteccióndelaEstructuraInternadelSitioWeb

Unodelosmecanismosquepermiteprotegerlaestructurainternadelsitio(especialmenteparacasos

deintentosdeataquesexternosy/ointentosdeviolacióndeconfidencialidad),esdisminuirlacantidaddeinformacióncontenidaenlasURLquesemuestranenelprogramavisualizador.Estoesimportanterespectodedirectoriosynombresdeprogramas,peroespecialmenteenloqueserefierealaentrega

de parámetros de sesión, datos de usuario u otromecanismo de transferencia de información entrepáginasy/oseccionesdecódigo.

Serecomiendaquelosmecanismosdetraspasodeinformaciónentrepáginasseaaniveldeobjetosdelservidor,asociadosalasesión,sinquelainteracciónconelladoclientedebahacerseresponsabledela

transferenciadedatosy/oinformaciónentresesionesdeejecucióndelservidor.

De igual forma, se recomienda evitar que el acceso a elementos del servidor web esté asociado adireccionamientosrelativosporsesiónoasociadosalUserIdoSessionId;estosedebeaquemediantesimplespasossepuedeconocer tokendesesiónygraciasaesosimularqueeselmismousuarioque


92|P á g i n a


regresaalsitio.ParaevitarelproblemaserecomiendaincorporarproteccionesdedirecciónrelativasalaDirecciónIPdeorigen.

Otro método de protección de estructura interna consiste en deshabilitar (excepto para casos

excepcionales, como repositorios públicos de archivos) la navegación sobre directorios mediante elservidorweb.Estaprotecciónsehaceparatodoslosdirectoriosdesdelaconfiguracióndelsoftwaredelservidorweb.Otraformadehacerloconsisteenincorporarunarchivoporomisióndelservidorweben

todos los directorios, aun cuando no sea directamente referenciado por otras páginas para que semuestre su contenidocuandounusuario intente revisarel contenidoexistenteeneldirectorio.Enelcaso de habilitar la navegación sobre directorios, se debe evitar el acceso a ciertos directorios

protegidos.

ProtecciónContraRobots

Notodos losdirectoriosdelsitiodebenestardisponiblesparaque losrobotsdebúsqueda(conocidosmáspopularmentecomoarañasospidersde losbuscadores)entrenenellos.Para impedirlo,sedebeutilizarelarchivorobots.txtolasinstruccionesespecíficasenlosmeta‐tagsdelapáginadeinicio,para

impedirsuingreso.

Elarchivorobots.txtesunarchivodetextoplano(nodeHTML)ubicadoendirectorioselservidorwebquecontieneinstruccionesprecisasrespectodequéhacerenellos.Cadavezqueunrobotvisitaunsitio,primerorevisasiexisteesearchivo.

Sinoloencuentra,indexalapáginaenelsistemabuscadorquelohayaenviado;siloencuentra,analiza

sucontenidobuscandolasiguienteinformación:

User-agent: * disallow: /

La primera línea User‐agent indica que es válida para todos los robots que lleguen (porque tiene un

asterisco; puede restringirse a un robot, indicando su nombre), mientras que la segunda indica condisallowquenoestápermitidoavanzarporlosenlacesdelapáginayaque/hacereferenciaalaraízdelsitio.

Enotrocaso,sisequiereevitarelaccesodetodoslosrobotsaundirectoriodeterminado(porejemplo

cgi‐bin, donde están los archivos más sensibles), se puede indicar esa información de la siguientemanera:

User-agent: * disallow: /cgi-bin/

Adicionalmentesepuedeusarelcommandoallowquepermiteincluirdirectoriosespecíficos,graciasalocualciertoscontenidossísonindexados.Porejemplo:

User-agent: * disallow: /imagenes/ allow: /imagenes/logotipo-institucion.jpg

En este caso la segunda línea indica con disallow que no está permitido ingresar al directorio de

imagenes,peroquesísepuedeindexarunarchivoespecífico,quecorrespondealLogotipoinstitucional.


93|P á g i n a


Otraformadeimpedirelaccesodeunrobotesponiendomarcadoresespecíficosenlosmeta‐tagsdelaspáginas.Noobstante,estemecanismonoessoportadoportodos losrobots,por loquesualcancees

máslimitado.

Laformaprecisadeincluirdichometa‐tageslasiguiente:

<html> <head> <meta name="robots" content="noindex,nofollow"> <meta name="description" content="Este sitio...."> <title>...</title> </head> <body>

Lascuatroposiblescombinacionesdeestemeta‐tagsonlassiguientes:

<meta name="robots" content="index,follow">

Indicaquelapáginapuedeserindexadaysusenlacesseguidos

<meta name="robots" content="index,nofollow">

Indicaquelapáginapuedeserindexada,perosusenlacesnopuedenserseguidos

<meta name="robots" content="noindex,follow">

Indicaquelapáginanopuedeserindexada,perosusenlacespuedenserseguidos

<meta name="robots" content="noindex,nofollow">

Indicaquelapáginanopuedeserindexadanisusenlacesseguidos

ManejodePrivacidad

Mantenerlaprivacidaddelosusuariosdebeserunobjetivopermanentedelsitio.Paraelloserequiere

de contar con una Política de Privacidad formal y explícita en el sitio y, además, deben existirmecanismosdeseguridadconcretosparaprotegerlosdatosdesususuarios.

Entreestos,sedebecontarconproteccionesfísicasylógicassobredichainformación.

En el casodedisponer de arquitecturasmulticapas reales, se recomiendaproteger la informacióndeclientesen servidores físicosdistintosdealmacenamientodedatos, incluyendo interfaces idealmente

separadas de consulta de datos. Además, incorporar mecanismos de encriptación de los datos parainformaciónsensible.

Se recomienda que la información, si es almacenada para efectos de que los usuarios la recuperendesdeelSitioWeb,seaencriptadaconclavesadministradasporellosmismos(porejemplo,suclavede

autenticaciónfrentealsitio).

Unadecisióndearquitecturaquedisminuyeelriesgoderobodeinformacióndeclientesocuentasdeacceso,consisteenevitarquedesdelaBasedeDatosseaposiblegenerarparejasUsuario/Contraseñaquepermitanautenticarsefrentealsitio.Laformadehacerloesincorporarmecanismosquealmacenen

unvalordeíndicedelaclaveenlaBasedeDatos,envezdealmacenarlaclavepropiamentetal.Gracias


94|P á g i n a


a esto, cuando un cliente se autentica frente al sitio, la comparación de claves se realiza sobre losvaloresdeíndiceyseevitaconocerdirectamenteesainformación.

Finalmente,serecomiendauncontrolparticulardetodoslosprocesosderespaldo,recargas,manejode

medios removibles y generación de copias de información, por ser mecanismos internos de fugas ocompromisodeconfidencialidaddelainformación.

CanalesSeguros

Esimportanteincorporarmecanismosdeencriptacióndelcanaldecomunicaciones(comoelprotocoloSecure Socket Layer o SSL), para la transferencia de información privada entre los usuarios y el Sitio

Web,atravésdelaredInternet.Hacerlonorequieredeprogramaciónadicionalalasfuncionalidadesdeinteracción, y asegura la protección de toda la información intercambiada entre el servidor y losusuarios.

Desdeunpuntodevistadedesempeño,sibienelinicio(handshaking)delprocesodeestablecimiento

delcanalSSLpuedesignificarunpequeñoretardoenlaconexióninicial,posteriormentenoprovocaunaumento significativo del ancho de banda utilizado en la conexión, ni tampoco obliga a un aumentosignificativoderecursosdelservidor.

MecanismosdeControldeAcceso

Otroaspectoquegeneramejorasenlaproteccióndelaprivacidaddelosusuariosydela información

contenida en el SitioWeb, es la incorporación demecanismosmodernos de generación de claves yautenticación,comolosqueseplanteanacontinuación.

• Firma Electrónica Simple y Avanzada: es un sistema que identifica al usuario cuando realizatrámitesatravésdeInternetoredescerradas.Existeunaleyyelcorrespondientereglamento

que la regula y empresas que las ofrecen en elmercado.Ambas firmas constituyen las baseslegales para que ciudadanos y empresas puedan identificarse virtualmente y de esa manera

enviar comunicación y hacer negocios de manera más segura y confiable. Se trata de unmecanismodecomplejidadmedia,aunqueincluyefuncionalidadesdeseguridadycriptografía.No obstante, la incorporación de este mecanismo en forma única dependerá del control

absolutoquesetengadelacomunidaddeusuariosdelasolución.Paracomunidadesabiertasespreferibleestablecerdosmecanismosdeautenticación:unofuerte,medianteFirmaElectrónica(usandocertificadosdigitales)yotro,medianteautenticacióndeUsuarioyContraseña.Porotro

lado,laFirmaElectrónicaSimplepodríaserusadaparalascomunicacionesoficialesenviadasporla institución a sus usuarios. El uso de la Firma Electrónica debe definirse al momento dedeterminarlaarquitecturadesolucióndelSitioWeb.

• Autenticación con par Usuario y Clave: si se emplea esta solución, debe existir unprocedimiento concreto para los casos en que un usuario pierda o no recuerde su clave. Serecomiendaofrecermecanismosderegeneracióndeclave,mediantelaentregaderespuestasa

preguntaspredefinidasporlosusuarios,enlugardehacerelenvíodelaclavepore‐mail.Enelcasodecontar conmecanismosdeAyuda, sedebeofrecerapoyopara la regeneraciónde las


95|P á g i n a


claves, sin que el personal de la institución tenga acceso a la información de seguridad delcliente.Sedebeevitarelusodemecanismosdeautenticaciónadministradospor terceros,en

casodequepuedancomprometerlaconfidencialidadolasuplantacióndelusuario.• Sistemas de Hardware para Autentificación: para sistemas de seguridad que requieren una

autenticación absoluta del usuario, es preferible considerar mecanismos de autenticación

fuerte. Para ello, se deben incorporarmecanismos que incluyan elementos de hardware quedebenestarenposicióndelusuario, talescomotarjetasuotrossimilares (security token)quepermitenelaccesoalasáreasdeautenticación.Allíelusuariodebeingresarsuidentificaciónde

Usuario(securitychallengeresponse)yse legeneraunaclavedesesiónquealserdigitadaenpantalla, lepermiteaccederal sistema.Dicha clave cambia frecuentementeparaaumentar laseguridaddeacceso.

ProteccióndeProgramas

Esfundamentalprotegerloscódigosyprogramasinternosdelservidorweb,particularmenteevitandola

transferenciadeparámetrosoinformaciónatravésdeladireccióndeaccesoalaspáginas(porejemplo,alusarelmétodoGETparalaentregadeparámetros),loscualessonmecanismosfrecuentesdehackeoorobodeinformación.

Deigualforma,sedebeevitar la lecturadeejecutablesdesdelosdirectoriosdelservidor,controlando

lospermisosadecuadosdeaccesoaéstos,conelfindeevitardesensamblajey/oingenieríareversaparaanalizaraccesosinternos.

En cuanto a los scripts ubicados en el ladodel cliente, en casode ser críticos, se recomiendautilizarcompactadoresdecódigoyeliminardocumentacióndeapoyoquepermitasufácilcomprensiónapartir

delalecturadelcódigo.

Esimportantequeestasmedidasseanincluidasjuntoalasaccionesdeseguridadinformáticanormalesdelainstitución.

HostingExternovs.SitioPropio

Sin entrar en profundidad en cuanto al detalle de los elementos a considerar para esta decisión, la

principalrecomendacióneshacerunaevaluaciónobjetivabasadaenlossiguientesaspectos:

• Evaluar las reales capacidades disponibles para la operación permanente del sitio, desde unpuntodevistatécnico.

• Evaluarlosrequerimientosdecontrolyseguridadnecesarios.

• Evaluarelniveldesoporteefectivoqueelpersonaltécnicodelserviciopuederealizarsobrelosservidores.

Conestosparámetrossedebedefinirlamejoropción,nosólodesdeelpuntodevistadelinterésdelasáreastécnicas,sinoquemedianteunaevaluacióndeimpactoglobaldeladecisiónasociada.


96|P á g i n a


La amplia oferta disponible permite realizar combinaciones de servicios e infraestructura de muydiversostipos, locualfacilitaconfigurarunasoluciónóptimaentérminosdelcosto/beneficioasociado

(por ejemplo, hosting compartido, dedicado, collocation, housing, red administrada, monitoreo deseguridad,administracióndeseguridadperimetral,controldeaplicaciones,fulfillment,etc.).

Encasodequesedecidaexternalizarestaárea,esimportantecontarconaltosestándaresdepartedelproveedor en todo lo referido a tiempo de desempeño (uptime), respaldos y recuperación,

actualizacionesdesoftware,etc.

RolesMínimosaAsegurar

Unúltimoaspectoconsideradoenestaáreaderecomendaciones,consisteendefinirlosdiversosrolesprofesionalesdentrodeladefiniciónydiseñodeunSitioWebparaunainstitución.

Desde un punto de vista exclusivamente técnico, es fundamental considerar al menos los siguientesroles, identificando tanto sus responsabilidades como el personal más competente que pueda

cumplirlos.

Sibienmásdeunodeestosrolesfuncionalespuedeserdesarrolladosimultáneamenteporunapersonaoáreadelaorganización,es importantequedichasáreasseancubiertasnosólodurantelapuestaenmarchadelasoluciónsinotambiéndurantesuetapadeproducción.

• Arquitecto:encargadodehacerlasconfiguracionesdetrabajodelosservidoresyaplicaciones.

• AdministradordeAplicaciones:encargadodelfuncionamientodelsoftwareoperativo.• AdministradordeControldeCalidad:encargadodelcumplimientodelaspolíticasdecalidad.• Administrador de Seguridad: encargado de hacer generar y hacer cumplir las directivas de

seguridad.• Administrador de Operaciones: encargado de los aspectos operativos relacionados con el

hardware.• AdministradordeContenidos:encargadodelasinformacionescontenidasenelSitioWeb.• Administrador de HelpDesk y Soporte: encargado de dar soporte a usuarios sobre las

funcionalidadesdelSitioWeb.• AdministradordeContingencias:encargadodeenfrentarenprimeralínealosproblemasquese

generenenlaoperación.

• Auditor: encargado de llevar registro de las operaciones realizadas, con el fin de apoyar larevisióndeprocedimientos.

Finalmente, aunque los roles del área Informática pueden estar muy claros, es necesario que seentienda que la operación del SitioWeb es una tarea conjunta en la que participan funcionarios de

diversasáreasdelainstitución.


97|P á g i n a


8.2.5.PruebasdeRespaldoyRecuperaciónRespaldarlainformacióndeunSitioWebserefiereacopiarelcontenidocompletodelsistema(datos,programación,imágenes,etc.)aunmedioqueseaconfiable,queestéenunlugarseguroyquepermitalarecuperacióndemanerarápidayeficiente.

En este sentido, hay que preocuparse no sólo de probar la confiabilidad del sistema almomento de

respaldar,sinotambiénparalaacciónderecuperaryvolverainstalarlorespaldado.

8.3.6.RegistroyControldePruebasyErroresParaqueunapruebaseaválida,debeser lomásdocumentadaposible,conel findeque,quiendebaefectuar la corrección, pueda replicar el error para analizarlo y luego proceder a tomar medidascorrectivas. Para ello se recomienda llevar una planilla de cálculo en que se vayan anotando por

columnalossiguientesdatos:

• DeteccióndelError:paraseranotadoporquienprueba.o Módulo:indicalasecciónenlaqueseproduceelerror.o URL:direccióndelapáginadondeocurrióelerror.

o Acción:Indicarlasecuenciadepasosquesiguióparaqueocurraelerror.o Lo que hace o dice: es la explicación más detallada posible del error, en particular

señalandolasecuenciadepasosseguidahastadarconelerror.

o Loquedebehacerodecir:sedebeindicarloqueseesperaquedeberíaocurrircuandosehacelaacciónquesehadescrito.

o Encontradopor:nombredequienprueba.

o Fecha:fechaenlaquesehacelaanotación.o Reproducible:indicarsielerrorserepitealhacernuevamentelaprueba.o Clasificación: permitedefinir el gradode complejidaddel error, al señalar si afecta el

funcionamientodelsitio(casoextremo)osólosupresentación.• DiagnósticodelError:paraseranotadoporquiencorrige.

o Causa:motivoporelcualseproduceelerror.

o Efectoslaterales: indicarenquéotrosmódulos laexistenciadeesteerrorpuedeestarcausando impacto negativo;muchas veces errores diversos tienen una causa común,porloquealrepararéstasearreglanlosdemás.

• CorreccióndelError:paraseranotadoporquiencorrige.o Descripción:acciónrealizadaparahacerlareparacióndelerror.o Archivos intervenidos: archivos en los que se hicieronmodificaciones o, almenos, el

principaldeellos.o Corregidopor:personaquehizolacorrección.

o Fechacorrección:fechaenquequedóreparadoelerror.• ComprobacióndelaCorrección:paraseranotadoporquienrevisalacorrecciónrealizada.

o Revisor:Nombredequienrevisasielerrorfueefectivamentereparado.

o Fecha:fechaenqueserealizalarevisión.


98|P á g i n a


o Reparado:indicarsiestáreparadoono.Sinoloestá,sedebecopiarlalíneadeerrorenblanco en una nueva planilla, con el fin de solicitar nuevamente el proceso de

corrección.

8.4.DesarrollodeunPlandeLanzamientoPara hacer el lanzamiento de un nuevo Sitio Web es obligatorio que el nuevo sitio haya cumplidoadecuadamente laspruebasantesdescritas, conel findeque todos los contenidosprometidosesténincorporadosylasfuncionalidadesrealicentodoaquelloquesedescriberespectodeellas.

Sihaycontenidosofuncionalidadesdescritasquenopuedenestardisponiblesparaelmomentoenque

sedeseahacerellanzamientodelSitioWeb,espreferibleeliminarlosenesemomentoeincorporarloscuandoesténlistos,enlugardedejarlosenelsitioyquedenunamalaimagensobreelmismo.

8.4.1.ListadeChequeoPreviaPara llegar al lanzamiento del sitio, se recomienda asegurarse del cumplimiento de las siguientesactividadescomomínimo:

• CumplirListasdeChequeo:elsitiodebehabercumplidoadecuadamentelaspruebasindicadas

enestecapítulo,antesdehacersulanzamiento.• DominioDistintivo:sedebecontarconunnombrededominioqueseareconocibleyseasociea

lainstitución,detalmaneraqueseafácilrelacionarloconlaactividadoelnombredelamisma.

• URLSimple:ladireccióndeaccesodelaprimerapáginadelsitiodebesersimple,detalmaneraque sea fácil comunicarla. Idealmente no se debemencionar el nombre del archivo de inicio(que corresponde a su página inicial o portada), si sólo con el nombre del dominio se puede

accederaella.• ChequearDisponibilidad:sieldominioesnuevoyreciénseestálevantandounSitioWebenél,

antesdelanzarlosedebeverificarqueelsitiosevedesdediferenteslugares,paraasegurarsu

disponibilidadparadiferentespúblicos.• RespaldoAdministrativo:muchas veces los sitios generaránnecesidadesde interacciónentre

losusuariosdeunservicioylosfuncionariosdelmismo,locualpodráestarresueltoatravésde

comunicacionesgeneradaspormediodelSitioWeb.Siesteeselcaso,antesdellanzamientosedebeincorporarenelflujodetrabajo.

8.4.2.DesarrollodeunPlandeComunicacionesUna vez que se han hecho las comprobaciones descritas en el título anterior, se está en condicionestécnicasde lanzarelsitio.Loquevieneacontinuaciónesrealizar lapresentacióne incorporarelSitio

Webalasactividadesdedifusióndelainstitución.

Parahacerlo,sedebecontemplarquedichoplandebetenercomponentesonlineyoffline,talcomoseindicaacontinuación:

• ActividadesOnline:dadoqueestamospresentandounmediodecomunicacióntecnológico,esimportantecubriradecuadamenteestaáreaatravésdelassiguientesactividades:


99|P á g i n a


o RegistrarelSitioenBuscadores:eslaactividadmediantelacualelSitioWebcomienzaaformarpartedetodoslosdirectoriosybuscadoresdeInternet.Sibienhayempresas

que ofrecen esta actividad como un servicio, esto puede ser realizado por cualquierencargado del sitio, sin necesidad de tener conocimientos técnicos avanzados. Acontinuacióncuatrolugaresclavedondeinscribirelsitio:

Google‐http://www.google.com/intl/es/addurl.html Yahoo‐http://e1.docs.yahoo.com/info/sugerir.html Dmoz.org‐http://www.dmoz.org/World/Espa%c3%b1ol/add.html

o Generar Enlaces con Otros Sitios: varios de los algoritmos que usan los sitios debúsquedaylosdirectoriosparaincluirunsitioymostrarloenlosprimeroslugaresdeundirectorio, revisan la cantidad de enlaces desde sitios importantes que llegan al sitio.

Peroello,eladministradordelsitiodebepropiciarlosenlaceshaciaelsitioyconseguirquesiemprehayanuevos.ParavercuántosllegandesdeotrosSitiosWeb,sepuedeusarenwww.google.comywww.altavista.comlainstrucciónlink.

o OfrecerElementosdeFidelización:serefiereaofrecerlealosusuariosmotivosdiversospara volver al sitio; puede ser un boletín de noticias en el que se envíen enlaces concontenidos de interés; fondos de pantalla; información útil de áreas relevantes, etc.

Cada instituciónoprogramapuedebuscardentrodesuscontenidos,aquellosquesonlosmásbuscadosporsususuariosyofrecerlosdemaneraatractivaparagarantizarquesiempreesténaccediendoyregresandoalsitio.

• Actividades Offline: se refiere a todas las actividades que se realizan fuera del ambienteInternet,conel findeconsolidar tambiénenestemundo lamarca Internetde la institucióno

programa.Incluyelassiguientesacciones:o ImagenCorporativa:ladireccióndelSitioWebdelainstitucióndebeincorporarseenla

imagen corporativa de la institución para que todo documento de la institución la

incluya (desde informes internos, hasta tarjetas de visita).De estamanera, se lograráuna unidad muy concreta en términos comunicacionales y se dejará diseminada esadirección en todos lugares, permitiendo difundirlo y hacerlo conocido entre quienes

deseenponerseencontactoorevisarinformaciónprovistaporlainstitución.o ActividadesdePrensa: en el lanzamientodel SitioWeb sedebeofrecer unelemento

tecnológicoatractivoynosóloconfiarenquelaaparicióndelSitioWebsea lanoticia.

Porloanterior,sedebedefinircuáldelasfuncionalidadesdelsitiopodráserdestacada,paratransformarlaenlanoticiaqueconvoquealosmedios.

8.4.3.ElSitiocomoApoyodelaInstituciónoProgramaUnavezqueelSitioWebestáoperandonormalmente,latareaarealizaresincorporarelSitioWebenelplandecomunicaciones,esdecir,nosóloutilizarelwebparahacerdifusión,sinoquetambiéncomenzaraincorporarladirecciónwebencualquiercomunicaciónquesehagay,másaún,hacerqueelSitioWeb

formepartedelasactividades.


100|P á g i n a


8.5.MétricasdeEvaluacióndeDesempeñoInternasyExternasUnade lascaracterísticas interesantesquetieneunSitioWeb,esqueofrece informaciónpermanentedelasactividadesqueestánocurriendoensuinterior,loquepermitetenersiemprecifrasqueayudana

evaluarlagestión.

No obstante, para entender dichas cifras es necesario primero establecer ciertas definiciones, quetienen que ver con la terminología que se emplea en Internet para describir los fenómenos que seregistran.Enestesentido,haytresconceptosimportantes:

• Hits:serefiereacadaelementoquepasadesdeelservidordelsitioalcomputadordelusuario;

unapáginapuedetenermuchoshits,yaquesecuentaunoporcadaelementoquelacompone.Entérminosreales,estainformaciónnotienevalor.

• PáginasVistasoVisitadas: serefierea lacantidaddepáginasquehansidosolicitadaspor los

usuarios al Sitio Web; su uso más importante tiene que ver con la capacidad de establecerrankingsinternosenelsitio,respectodeloscontenidosyfuncionalidadesmásvistosyusados.

• Sesiones de Usuario: se refiere al número de personas que ha visitado el Sitio Web,

independientedecuántaspáginashayanvistoosolicitadodurantesuvisita;estamétricaes laúnicaquepuedeentregarinformaciónrealentornoalaaudienciadeunsitio.


101|P á g i n a


Anexo1–Actadereunión


102|P á g i n a


Anexo3–PautaparaEvaluaciónHeurísticadeSitiosLa heurística es una forma de revisión de sitios web basada en la experiencia de quien realiza laevaluación.Consisteen comprobardiferentesaspectos,desdediseñoynavegaciónhastaoperacióny

utilidad.Estedocumentoexplicacómodesarrollarla.

El resultadodeunapruebadeestetipo,esun informeemitidoporelevaluadorenelquedescribeelproblema analizado, las reglas específicas que son afectadas por su comportamiento y cómo podríamejorar el cumplimiento de ellas con un cambio en la interfaz. Añade que si bien esto último no es

posible,síseráimportantequelosproblemasconocidosseanreportadosconelfindeintentarhacerlasmodificacionesposiblesparaaportarasusolución.

Laevaluaciónatravésdeestesistemapermitelageneracióndeuninformequealmenosdeberíaincluirlossiguientesaspectos:

• Descripcióndelaformadetrabajo:Enestapartedelaevaluaciónsedebedejarconstanciade

las características del proceso realizado. Entre los elementos concretos a citar se incluyen lossiguientes:

o Fechayhoradelaevaluación;

o TipodeconexiónaInternet,paradescartarproblemasdebidoalavelocidad;o Datosgeneralessobrelaformaenqueserealizalaevaluación.o Informaciónacercadelaformaenqueseasignanlospuntajesdelaevaluación.

o Informaciónacercadelosprincipalesítemsevaluados.• Principales Hallazgos: en esta parte del reporte se hace un resumen de las principales

característicasevaluadas,indicandolosaspectospositivosynegativosencontrados.

• Conclusión Final: en esta parte se entrega la recomendación final respecto de los problemasencontradosysedetallanloselementospositivosencontradosenlaevaluación.

Cómohacerlaevaluación

AldesarrollarunaEvaluaciónHeurística,esimportantequelosexpertosquelallevenacabotengan

algúnsistemacomúndeevaluación,conelobjetivodehomologaryreunirsuscomentariosdemanerasimilar.

Unafórmulaparahacerloesdefinirunaseriedepreguntasrespectodelsitiowebqueseevalúayparacadaunadeellas,ponerunanotaqueluegopuedasertabulada.Enestesentido,unaescalahabitual

puedeserlasiguiente:

Estaescaladeevaluaciónvaade1a5conlossiguientesvalores:

1. Muymaloonofunciona:loevaluadonorealizalaactividadonomuestraelcontenidoqueofrece.


103|P á g i n a


2. Funcionaperonosirve:loevaluadodesarrollalaactividadomuestrauncontenido,peroengeneral,lorecibidoporelevaluadornoaportaalaexperienciageneraldel

3. sitio.4. Funcionaperodebemejorar:loevaluadodesarrollalaactividadomuestrauncontenido

relativamenteútil,peropodríasermejor.Alrespectoelevaluadordebeaportarinformación

parahacermejorasalsitio.5. Cumple:loevaluadodesarrollalaactividadomuestrauncontenidoútil.Elevaluadordebe

aportarinformaciónparahacermejorasalsitio.

6. Esloqueelusuariobusca:loevaluadodesarrollalaactividadomuestrauncontenidoútilquecumpleoexcedelaexpectativadelusuario.

Dichasnotasdebenserpuestasaunaseriedepreguntasquesevangenerandoentornoalasáreasmásimportantesdelsitioweb;entodocaso,lointeresantedeestetipodeevaluaciónesquelaspreguntas

serelacionandirectamenteconloquesedeseaevaluar.

Amododeejemplo,acontinuaciónsemuestranalgunaspreguntasparalasáreasmásrelevantesaevaluardeunsitioweb:

Concepto Nota

Identidad¿Elsitiowebentregainformacióncorporativadelaorganización ___¿Informadatosrelevanteparaquien“nonavega(Ej.:Horasdeatención) ___

¿Entregainformaciónparahacerconsultaswebono‐web(Ej.:Nos.deteléfono) ___

Diseño¿Eldiseñoesconsistenteentodaslaspantallasdelsitio? ___¿Seadaptaadecuadamentealasresolucionesmáscomunes? ___

¿Laspáginastienenscrolladecuado? ___

TiempodeAcceso¿Tiempodeaccesodelaportadabajo15”enconexióndebajavelocidad? ___¿Permiteverlomásimportantealprincipiodeldesplieguedelaspáginas? ___

¿Ofreceaccesosólotextocuandosetratadeinterfacesgráficas?

Accesibilidad¿Existetextoalternativo(Alt)enlasimágenes? ___¿CuentaconFlashoPlug‐insylosinforma? ___

¿Tamañodeletrasesadecuado?Sepuedenagrandar? ___

Navegación¿Losenlacessonclaramentevisibles? ___¿Senotanlosenlacesvisitados? ___


104|P á g i n a


¿Elmenúdelsitioesconsistenteentodoelsitio? ___¿Todoslosvínculosfuncionan? ___

Operación

¿Presentafallasdesistema? ___¿Seadministraelerror404? ___¿Existeseguridadadecuadaparaeltipodesitio? ___

¿Siesrelevanteparaelsitio,seexplicalaseguridadofrecida? ___

Utilidad¿TieneBuscador?FuncionaOK? ___¿Permitehacerlomismoomásqueloquesepuedehacerlainstituciónfísica? ___

¿Permiteresolverlasdudasbásicasqueelusuariotengasobresuscontenidos? ___¿Elsitiogeneraunaexperienciaqueaunollevaríaarecomendarloaotros? ___

DesarrollodelInforme

Una vez que se ponen las notas a cada una de las preguntas, es espera que el evaluador haga uncomentarioque fundamente supuntodevista.Graciasaesto, seráposible tener suvisiónacercadel

sitiodemaneraconcretayademás,sepodránextraerconclusiones.

Claramentesebuscaráreunireneldocumentotantolosaspectospositivoscomolosnegativosdelsitioevaluado, para cada una de las áreas (es decir, Identidad, Diseño, Tiempo de Acceso, AccesibilidadNavegación, Operación y Utilidad). Con estos comentarios será posible encauzar el trabajo posterior

para buscar mejoras en el sitio web.


105|P á g i n a


Anexo4–TestdeUsuarioAplicacióndelaPruebadeUsabilidad

La Prueba de Usabilidad que se ofrece a través de este documento, está enfocada a los siguientesámbitos,cadaunodeloscualessemideporseparado:

• Identidad

• Contenido• Navegación• GráficaWeb

• Búsqueda• Feedback• Utilidad

Talcomoseindicóencadaunodelasáreasquesemidenenlaprueba,haydiferenteselementosque

son revisados, con el objetivo de evaluar los aspectos que sean de mayor interés para losdesarrolladoresdelsitio.

Enestesentido,hayquedejarenclaroquelaPruebadeUsabilidadpuedesermodificadaconelfindeorientar laspreguntashacia lasáreasde interésquese tenganenunmomentodeterminado;eneste

sentido, la prueba que acompaña a este documento busca establecer elementos generales quepermitan entender cuál es la percepción de un usuario respecto de la oferta de contenidos yfuncionalidadesdeunsitiowebespecífico.

No obstante lo anterior, a continuación se explicará dichas preguntas y el tipo de informaciónque se

buscaobteneratravésdesuformulación.

PreguntassobreIdentidad

Laspreguntasenesteámbitobuscanestablecersielsitiologradiferenciarsedeotrosyestablecerparaefectos del usuario, la imagen corporativa de la institución propietaria del sitio web. Por ello, las

preguntas se enfocan especialmente a determinar si a primera vista el usuario ha entendido en quéespaciohaingresado.

Se hace hincapié en que estas preguntas se deben hacer cuando el usuario estámirando la pantallainicialyantesdecomenzaranavegarohacer“clic”sobrealgúncontenido,debidoaqueloquesebusca

esobtenerla“primeraimpresión”delusuario.

Porloanterior,variasdelaspreguntasestánenfocadasaentendersielusuariosehadadocuentadelaexistencia de elementos en la pantalla que indiquen a qué institución pertenece el sitio. Tanto lapregunta1“¿Conlainformaciónqueseofreceenpantalla,esposiblesaberaquéinstituciónoempresa

correspondeelsitio?¿Cómolosabe?”comolapregunta2,“¿Hayalgúnelementográficoodetextoque


106|P á g i n a


le haya ayudadoa entendermás claramente aque instituciónoempresaperteneceel sitio?”buscanestablecereso.

Adicionalmente se hacen preguntas sobre la imagen corporativa y sobre elementos que pueden ser

discordantesdeésta,conelfindeentendersielusuarioayudaaidentificaráreasdeéstaquenoesténbiendefinidasoqueaúnestándolo, puedangenerar contradicciones con la imagenque la instituciónproyectaenlaciudadanía.Enestesentidosedebetenercuidadodequelaspreguntas4y5sólodeben

formularseenelcasodequenohayansidomencionadasenlasrepuestasentregadasporelusuarioalaspreguntas1y2.

La pregunta 6 en tanto, busca determinar si el usuario se siente “invitado” por el sitio web por serconsideradocomoparede laaudiencia.Enestosedebetener laprecauciónderevisarsipartede los

contenidosqueseofrecenformapartedesusintereses,yaquenonecesariamentehabráunamenciónespecíficaalasaudienciasenlaterminologíaempleadaenelsitio.

Finalmente,laPregunta7buscaestablecerunparámetroclarodeutilidadeidentidad,parasabersielusuariopuedeobtenerdemaneradirecta la informaciónque identifiquea la instituciónconel finde

realizarunaactividad(comohacerunallamada).Enestesentidosedeberecordarquemuchasveceslosusuariospreferiránestableceruncontactofísicoconella,privilegiandoésteantesqueelvirtual.

Unavezquesehaterminadoestegrupodepreguntas,sedebeinvitaralusuarioanavegarelsitio,conelobjetivoderesponderlassiguientesinterrogantesdelaprueba.

PreguntassobreContenido

Laspreguntasdeestasecciónydelassiguientes,comoseindicóantes,sedebenhacerluegodepermitir

alusuarionavegarelsitio,conelfindequeseformeunaopiniónacercadeloqueestáviendoylaformadenavegarporsuscontenidos.

Su objetivo es determinar la calidad que le asigna a los contenidos y si la forma de presentarlos le

permitealusuariohacerseunaideaconcretadelainformaciónqueseleestáentregandotravésdelsitioweb.Comoseveráenlaspreguntas1,2y3,elénfasisesdeterminarsilaformademostrarlosayudaaentenderloqueseofreceenlaspáginasdelsitio.

Luego, con las Preguntas 4, 5 y 6 se busca que el usuario entregue una opinión sobre la forma de

acceder a la información a partir de los títulos, enlaces y archivos adjuntos que se ofrecen,determinandodeestamanerasilamaneradeagruparloscontenidosleescomprensible.

PreguntassobreNavegación

Laspreguntasdeesta secciónpermitenestablecer si la formadeorganizar la informacióndentrodelsitiowebesadecuadadeacuerdoa laexperiencia,conocimientosyexpectativasquetengaelusuario

quevisiteelsitioweb.


107|P á g i n a


Hacia este objetivo se dirigen las preguntas que van desde 1 y 2, mientras que las Preguntas 3 a 6buscandeterminarsi laspantallasofrecenlosdatosnecesariosparaqueelusuariopuedaavanzarpor

ellasyregresaralpuntodepartida,sinperderseenelintento.

Esimportantequeelusuariopuedanavegaryqueenlemediodeeseproceso,selevayanhaciendolasconsultas, para obtener de él la respuesta correspondiente, pero que además la persona que estétomandolapruebapuedanotarsiefectivamenteelusuarioutilizaloselementosdenavegacióndelsitio

o,sólousalosbotonesdelprogramadenavegación(browser)paraejecutartalesmovimientos.

PreguntassobreGráficaWeb

Laspreguntasdeestasecciónbuscanestablecersialusuario leayuda la informacióngráficaquese leofrecea travésde laspantallasdel sitioweb, como también supercepciónacercade la velocidaddedesplieguedeinformación(Pregunta2).

RespectodelaPregunta4,larepuestadebeser“filtrada”paradeterminarcuálessonlosparámetrosde

comparacióndelusuario.Enestesentidosielusuarioconsideraqueelsitioes“recargado”,seledebesolicitarunsitiodeejemploquenolosea,conelfindeentenderdemaneraclaraaquéserefiereconsucomentario.

FinalmentelaPregunta5acercadelos“banners”buscaestablecersielusuarioes“ciego”aestetipode

avisos, de talmanera de comprendermás cabalmente su respuesta a las preguntas que luden a lostemasgráficos.

PreguntassobreBúsqueda

Las preguntas de esta sección buscan establecer si el sistema de búsqueda cubre las necesidades deaccesoainformaciónquetieneelusuario.

Enestesentido, laPregunta1“¿Utilizanormalmenteunbuscadoralaccederaunsitioweb?”permite

sabersielusuariolosemplea,yaqueencasodenohacerlo,sedeberánfiltrarsusrespuestasrespectodeloqueesperaobteneratravésdeellos.

FinalmenteesimportantequelaPregunta3referidaalosresultadosdelabúsquedasehagaenelorden

indicado(antesdebuscarydespuésdeverlosresultados),detalmaneradeentenderclaramentesilafuncióndebúsquedaleaportalainformaciónquenecesita.

PreguntassobreFeedback

Laspreguntasdeestasecciónbuscanestablecersielusuarioencuentralaformadeponerseencontactoconlainstitución.HayquetenerencuentaquelaPregunta1essimilaralaPregunta7delasecciónde

Identidad,porloquesólodeberíaefectuarsedependiendodelarespuestarecibidaenésta.

PreguntassobreUtilidad


108|P á g i n a


Laspreguntasdeestasecciónsonlasfinalesdelapruebaytienenelobjetivodeestablecerunaespeciederesumengeneraldelaexperienciadenavegarelsitio.Porlomismo,ademásdelaspreguntas1y2

decomentariodetallado,seofrece laPregunta3en laquesepuedenconsiderartemasquenohayansidopreguntadosenlasseccionesanteriores,peroqueseadeutilidadconocer.

Cómoanalizarlosresultados

LaPruebadeUsabilidadpermitirádeterminarcuálessonlastareasmásdifícilesdecompletarporpartedelosusuarios,asícomoloselementosdelsitiowebqueseanmenoscomprensibles.Esainformación

deberá ser evaluada y priorizada con el objetivo de hacer una lista de tareas que permita hacer lascorreccionesquemejorapoyenlacapacidaddelsitioparaserusable.

PruebadeUsabilidad

NOTAparaelresponsabledelaprueba:

• Entregartodaslasinstruccionesdeformasimpleyrepetitiva.• Mantenerunaactitudpasiva,pacienteconelusuario,evitando“caras”de impaciencia,enojo,

preocupaciónocualquiergestoquehagasentirmalalusuario• Anotartodoloposible• Apartedelasinstruccionesnecesariasparacompletarlaprueba,nosedebenentregarpistasal

usuariodeloquetienequehacercuandonavegueelsitioweb.• Grabarlapruebaenvideodelacaraydeloquehaceenpantalla.• Acompañanalusuarioelencargadodelapruebay,alomás,1asistentequetomanotas.

<Nombre usuario>, le agradezco su disposición de participar en esta “Prueba deUsabilidad” que nos

ayudaráadetectarproblemasenelsitioquedesarrollamos,siesquelostuviera.VamosacomenzarconalgunaspreguntasquepermitiránsaberquiénesUstedycómoutilizaInternet.

Buenosdías,soy[Nombre,Apellido,Cargo,Empresa]

1.‐¿Cualessunombre?

2.‐¿Aquésededica[Profesión,Actividad]?

3.‐¿QuéexperienciatieneenInternet?

4.‐¿Navegahabitualmente?,¿Cuantashorasnavegaaldía,alasemana?Incluyaelnúmerode

horasqueutilizaelcorreoelectrónico.

Si

No

N°dehoras:_____


109|P á g i n a


5.‐¿Quésitiosvisitahabitualmente?

6.‐¿Cuálessonsussitiospreferidos?

7.‐CuandodeseaencontraralgoenInternet,¿cómollegaaunsitioquepuedateneresainformación?¿UsaunBuscador?¿Cuál?Sinousaunbuscador,¿cómolohace?

SeccionesdePreguntas

<Nombreusuario>:Queremoscomentarleantesde comenzar con laspreguntas sobreel sitiomismo,

quelomásprobableesqueenlapruebaquehagamos,hayaciertasaccionesquenopodrácompletar.Siesoocurre, significaráqueel sitiodebe serperfeccionado y la prueba seráexitosa. Si todo salebien,significará que el sitio fue diseñado pensando en el usuario y también significará que esta prueba

alcanzóeléxito.Lapruebatieneunaduraciónmáximade30minutosaproximadamente.

Levamosapedirquedurante lasaccionesquedesarrolle,vayamanifestandoenvozalta loquevayapensandoconelfindequepodamosentenderquélesugiereloquevamostrandocadapantalla.

Laspreguntasquelesurjanenlanavegaciónsólolaspodremosresponderalfinaldelaprueba.Unavezagradecemossuayuda.Ahora,vamosalsitioquevamosaprobar...

Preguntas

Identidad

Estaspreguntassedebenhacercuandoelusuarioestámirandolapantallainicialyantesdecomenzara

navegarohacer“clic”sobrealgúncontenido.

1.‐ ¿Con la información que se ofrece en pantalla, es posible saber a qué institución o empresacorrespondeelsitio?¿Cómolosabe?

2.‐ ¿Hay algún elemento gráfico o de texto que le haya ayudado a entender más claramente a queinstituciónoempresaperteneceelsitio?

3.‐ <Sólo si no fue mencionado antes> ¿Relaciona los colores predominantes en el sitio web con lainstitución?¿Relacionaladireccióndelsitiowebconlainstitución?

4.‐<Sólosinofuemencionadoantes>¿Deloselementosquemuestraestapantalla,hayalgoqueustedcreaqueestáfueradelugar,porquenopertenecealainstituciónoempresaqueustedidentificacomo

propietaria?

5.‐¿Distinguealgunaimagenquerepresente(logotipo)alainstitución?¿Creequeapareceenunlugarimportantedentrodelapágina?¿Puedeleerelnombredelainstitución?¿Esclaro?

6.‐¿Haciaquétipodeaudienciacreeustedqueestádirigidoestesitio?¿Porqué?


110|P á g i n a


7.‐ Si tuviera que tomar contacto telefónico o enviar una carta tradicional a la institución o empresapropietaria del sitio web, ¿se ofrece información de números o direcciones? ¿Son útiles como para

haceresatarea?¿Lecostóencontraresainformación?

Contenido

Estaspreguntassedebenhacerluegodepermitiralusuarionavegarelsitio,conelfindequeseformeunaopiniónacercadeloqueestáviendoylaformadenavegarporsuscontenidos.

1.‐ ¿Lepareceadecuada la seleccióndecontenidosdestacadosen laportadaoustedechódemenosotrasáreasdeinformaciónquelehabríagustadoverdestacadas?

2.‐¿Alver laportadadelsitio,pudodistinguirdeunasolamiradacuáleraelcontenidomásrelevante

queseofrecía?¿Cómologróhaceresadistinción?

3.‐¿Esfácildistinguir losnuevoscontenidosquepresentaelsitioweb?¿Porejemplo,esposiblesabercuándofuelaúltimaactualizacióndelsitio?

4.‐¿Los textosusadosen loscontenidosde losenlaces son suficientementedescriptivosde loqueseofreceenlaspáginashacialascualesseaccedeatravésdeellos?

5.‐¿Encasodequeloscontenidosofrecieranarchivosadjuntos,fuefácilsabersupesoosierandeun

formato diferente al de una páginaweb? ¿Le ayudó la información ofrecida por el sitio sobre dichosarchivos?¿Onorecibióningunainformación?

6.‐Encasodehaberinformaciónrelacionadaconlaqueestabaviendo,¿seleofreciódemanerasimple?¿Otuvoquevolveranavegarparaencontrarla?

Navegación

1.‐¿Puedeverenlaportadaylasdemáspáginas,laformaenquesenavegaporelsitio?¿Sedistingue

fácilmente?

2.‐¿Existenelementosdentrode laspáginas,que lepermitansaberexactamentedóndeseencuentradentrodeestesitioycómovolveratrássinusarlosbotonesdelprogramanavegador?

3.‐¿Cómovuelvedesdecualquierpáginadel sitioa lapáginade inicio?¿Vealguna formadehacerlo,

quenoseapresionandoelbotóndelbuscador?¿Leparececlaro?

4.‐¿Habitualmente,cómolograaccederdirectamentealoscontenidossintenerquenavegar?¿Usaelbuscador?¿UsaelMapadelSitio?¿Lospuedeverenestesitio?¿Echademenosalguno?

5.‐¿Logradistinguirgráficamentelosenlacesvisitadosdeaquellosquenohavisitadoaún?<Siexisteesadiferenciadecolores>¿Leayudaesadiferencia?

6.‐ El sitio tiene varios niveles de navegación y Usted ha ingresado y salido de varios de ellos. ¿La

información que se le ofrece en pantalla le parece adecuada para entender dónde está ubicado en


111|P á g i n a


cualquiermomento?¿Sehasentidoperdidodentrodel sitio?¿Si loha sentido, recuerdaenquéáreafue?¿Sinolohasentido,quéelementodelsitiocreequeleayudómásaorientarse?

GuiaWeb

1.‐¿Leparecióadecuadalaformaenquesemuestranlasimágenesenelsitioweb?¿Sonnítidas?¿Son

adecuadaspararepresentarelcontenidodelquetrataelsitio?

2.‐ ¿Las imágenes grandes se demoraronmás de lo esperado? ¿Tuvo que seguir navegando sin quellegaranamostrarsecompletamente?¿Creequeelsitioesmuylento?

3.‐ ¿Se fijó si el sitio tenía gráficas con animaciones? ¿Hay alguna que le haya llamado la atención?¿Ninguna?

4.‐¿Consideraquegráficamenteelsitioestáequilibrado,muysimpleorecargado?

5.‐¿Recuerdasiel sitio teníabanners (avisos)publicitarios?¿Tuvo intencióno llegóahacerclicsobre

alguno?¿Porquélehizoclic?¿Quélellamólaatención?

Búsqueda

1.‐¿Utilizanormalmenteunbuscadoralaccederaunsitioweb?¿Distinguiósienestesitioseofrecíaunbuscador?¿Dóndeestá?

2.‐ <antes de usar el buscador> ¿Cómo haría la operación de buscar? ¿Qué escribiría? ¿Dónde loescribiría?

3.‐<antesdepresionarelbotónBuscar>¿Quéesperaencontrar?<alverlapáginaderesultados>¿Ese

esloqueesperabaencontrar?,¿Lesirve?

Feedback

1.‐¿Encuentraalgunaformaonlineyofflinedeponerseencontactoconlaempresaoinstitución,parahacersugerenciasocomentarios?<verpreguntasimilarenlapartedeIdentidad>

2.‐<Traslaoperacióndeenviaralgúnformulariovíaweb>¿Almandardatosmedianteunformulario,el

webleavisasilosrecibiócorrectamenteono?

Utilidad

1.‐¿Trasunaprimeramirada, lequedaclarocuáleselobjetivodel sitio?¿Quécontenidosy serviciosofrece?¿Lospuedeenumerar?

2.‐ ¿Cree que los contenidos y servicios que se ofrecen en este sitio son de utilidad para su casopersonal?

3.‐¿Quéesloquemástellamólaatenciónpositivamenteonegativamentedelautilidadqueofreceel

sitioweb?


112|P á g i n a



113|P á g i n a


Anexo5GráficadeunaPersonayEscenarioCreacióndePersonasyEscenarios

Como parte integral de dicha metodología se creó el concepto de "persona" que corresponde apersonajes determinados aunque ficticios, que permiten entender demanera clara quiénes serán los

usuariosdelmismoymás tardeelde"escenarios",quecorrespondena lassituacionesenquedichospersonajesemplearánelsistema.

Laformadeutilizardichosconceptosseexplicadelasiguientemanera:"Creamosmodelosdedatosyflujosde trabajoparadefinir losprocesosdenegocio.Modelamosarquetiposdeusuariosqueson las

personas para entender sus metas y modelos mentales. Para encontrar el diseño de interacciónadecuado, ponemos a las personas en escenarios y desarrollamos bosquejos gráficos que siguen loscaminos más relevantes en las interfaces. Aplicamos pos principios de diseño y las plantillas para

construirunasolución.Mientrasmásavanzamosadquirimosmásconfianzaen loquedesarrollamosydefinimoslaconductadelasfuncionesmenosusadasydiseñamosnuestrasoluciónconmejoresnivelesde fidelidad. En cada paso, documentamos los cambios en nuestro diseño demanera que podamos

comunicarlosatodoslosmiembrosdenuestroequipodedesarrollo".

Estametodología tieneunusomuy importantealmomentodedefinir las funcionalidadesdeunSitioWeb,yaquealdefiniralospersonajesqueutilizaránylassituacionesenquelosemplearán,serámásfácil que todo el equipo de desarrollo determine los límites de las funcionalidades y contenidos que

debeponerencadapantalla.

Ejemplo

Comopartedelusodeestametodologíaseofreceunejemploquetratadeunpersonajeficticiollamado"DonRafael",quetienelassiguientescaracterísticas:

• Esjubilado.• Utilizaráeltrámitedesdeuninfocentro

• Notendráayudaparaejecutarlaoperación• Esperaobtenerundocumentoimpresoquelleveuntimbre,talcomosihubieraidoalaoficina

delservicio.

"DonTito“

• Esjubilado.• Notienecomputadorensucasa.• Prefiereesavíaparanoiralcentro.

• Utilizaráelsitiowebdesdeuninfocentro.• Notendráayudaparaejecutarlaoperación.• SabequepuedehaceralgunostrámitesporInternet.


114|P á g i n a


• Esperaobtenerundocumentoimpresoquelleveuntimbre,talcomosihubieraidoalaoficinadelservicio.

• PeronosabecómousarInternet;hastaahorasóloleeeldiarioporesavía.

CasosdeUso

Escenario1:

“DonRafael”deseaobtenerdeuntrámitequeestáhaciendounserviciotelefónico.Supopuedehacerpor Internet sabe mucho, quiere vía para ahorrarse un expectativa es que sea el cibercafé cercanopuedanayudar.

Quénecesita:

Esperaquehayaunapantallafácil,dondeaparezcarápidamentelaopcióndepagarsucuentatelefónica

por Internet. Espera también que el la factura salga con timbre, tal como si fuera uno original, paraevitarseproblemascuandolopresente.

Cómoloayudaelsitio:

Elsitiodebetenerunenlacedesdelaportadaalpagoquebusca;lanavegacióndebesersecuencialyenpasos;debeofrecerimpresiónalfinalconunformatosimilaralquesemuestraenpantalla.

Escenario2:

Aprovechando que está haciendo el trámite, “Don Rafael” quiere dejar una consulta para que se la

respondan.Esperaqueselaenvíenporcartaasudirecciónporquenotienemail.Oquelollamenporteléfono.

Quénecesita:

Unformulariosimpleparaescribirlaconsultayojaládirigirlajustodondelopuedanayudar.Quehayalaposibilidaddeingresarladirecciónfísicaderespuestaporquenotienemail.

Cómoloayudaelsitio:

Formulario rápido y simple, de acceso directo. Que no haga preguntas innecesarias. Que permitaingresardirecciónyteléfono,permitiendomarcarsilarespuestalaquierealadirecciónnormaloale‐mail.


115|P á g i n a


Anexo6ChecklistdeAccesibilidad

Cumple

ConceptosdeAccesibilidad

Sí No

1¿Seproporcionauntextoequivalenteparatodoelementonotextual,talescomoimágenes,paraexplicarsucontenidoadiscapacitadosvisuales?

2 ¿Lainformacióntransmitidaatravésdeloscolorestambiénestádisponiblesincolor?

3¿Eldocumentoestáestructuradoparaquepuedaserleídoconosinunahojadeestilo,utilizandoadecuadamentelostagsdeHTML?

4 ¿Eldocumentoestáescritoenunlenguajeadecuadoysedejaclarocuandosecambiadeidioma?

5 ¿LastablasseutilizanparapresentarinformaciónynoparadiagramarelcontenidodelSitioWeb?

6¿Laspáginasqueutilizannuevastecnologíassiguenfuncionandocuandodichatecnologíanoestápresente(porejemplo,losplug‐insdeFlash)?

7¿Esposiblecontrolarlosobjetosolaspáginasqueseactualizanosecambianautomáticamente,permitiendoinclusogenerarpausasparasurevisión?

8¿Seaseguralaaccesibilidaddeloselementosdelapáginaquetengansuspropiasinterfaces?(PorejemploparaelusodePortlets)


116|P á g i n a


9¿Sepermitealusuarioactivarelementosdelaspáginas,usandocualquierdispositivocomoelmouseoeltecladoynosólounoenparticular?

10¿Seofrecensolucionestransitoriasquepermitenausuariosconbrowsersantiguos,accederacontenidosquehansidocreadosennuevastecnologías?

11¿SeusanlastecnologíasyguíasdetrabajogeneradasporlaW3C?

12¿Seofreceayudayorientaciónalosusuariosparaentenderpáginasoelementoscomplejosdentrodeellas?(Porejemplo:mapasygráficos)

12¿Seofrecenelementosdenavegaciónclaros?

14¿SeaseguraquelosdocumentosqueseofrecenatravésdelSitiosonsimples,clarosypuedenserfácilmenteentendidos?

Nota:ParaasegurarelcumplimientodeestaListadeChequeosesugierenlossiguientesmétodos:

• Usarunaherramientadevalidaciónautomática(comoTawdisoHera)• Usarherramientasdevalidaciónparacadaunodelosestándaresolenguajesutilizados(W3C)

• Usarunprogramavisualizadordesólotexto,porejemploLinksoLynxViewer• Usarprogramasvisualizadoresdiferentes,nuevosyantiguos(puedeobtenerversiones

anterioresenhttp://browsers.evolt.org)

• UsarunLectordePantalla(screenreader)oBrowserdevozparanavegarelsitio,porejemploJAWS.

• Usarunprogramaquevalideortografíaysintaxisdetalmaneradeasegurarqueunprogramacomoelindicadoenelpuntoanterior,leeráadecuadamenteelcontenido.(MicrosoftWord)

• Conformarunequipodeevaluadoresdepersonasconysindiscapacidadespararevisarel

contenidodelSitio.Entreotrastareas,debecuidarsucalidadysimplicidad,conelobjetivodeverificarsiseentiendensuscontenidosyformadenavegar.


117|P á g i n a


Anexo7AccesibilidadparaDiscapacitadosCuandoseplanteaeltemadelasdiscapacidades,hayqueconsiderarqueéstasnosólotienenrelacióncon personas que son afectadas por problemas desde nacimiento, sino también, quemuchos de los

problemasfísicosaumentanconlaedad.

En este sentido, si la audiencia hacia la cual está orientado un Sitio Web es de personas adultas oadultosmayores,habrámayorgradodediscapacidadqueatender.Ytambién,queesosusuariosestaránmuchomejoratendidos,sielsitioqueselesofrececuentaconlacapacidaddepresentarloscontenidos

demaneraaccesible.

Lostiposdediscapacidadesqueexistenypuedendificultarelusodelosequiposcomputacionales,son:

• Discapacidadesvisuales:Desdepocavisiónhastalaceguera,elrangodelimitacionesvisualesesamplio.Lossíntomasdevisiónreducidasonvisiónborrosa,visióndesenfocada,problemasparaverde lejosodecerca,daltonismoyvisión túnelentreotros. Laspersonasquepadeceneste

tipo de discapacidades necesitan ver el texto o las imágenes de la pantalla de los equipos ypoder llevar a cabo tareas que requieren la coordinación de manos y ojos, como mover unmouse. El tamaño y el color del texto pueden marcar una gran diferencia en materia de

legibilidadparapersonasconvisiónreducida.• Discapacidadesdemovimiento:Lasdiscapacidadesdemovimientopuedenestarcausadaspor

la artritis, problemas cardíacos, parálisis cerebral, la enfermedad de Parkinson, esclerosis

múltipleylapérdidadelasextremidadesolosdedos,entreotrosfactores.Elcontrolreducidode los músculos o su debilidad puede dificultar el uso de dispositivos de teclado y mouseestándar. Por ejemplo, algunas personas no pueden presionar dos teclas simultáneamente,

mientras que otras tienden a presionar varias teclas o a presionar una tecla varias veces deformainvoluntariacuandoquierenpresionarlasysoltarlas.Laspersonasquesólopuedenusarunamanotienendificultadesconalgunastareasdeltecladooelmouse.

• Discapacidades auditivas: Las personas con dificultades auditivas quizás puedan oír algunossonidos pero es posible que no puedan distinguir las palabras. Otras quizás no puedan oír

ningúnsonido.Alnopoderoírlasadvertenciasdelequipo,comolospitidosymensajesdevoz,puedentenerproblemas.

• Discapacidades cognitivas yde lenguaje: Lasdiscapacidades cognitivas yde lenguajeabarcan

tanto la dislexia como dificultades para recordar, resolver problemas o percibir informaciónsensorialo inclusoproblemaspara comprenderyutilizarel lenguaje.Parapersonas conestasdificultades, el uso de los equipos puede verse dificultado por pantallas complejas o

incoherentesoporlaeleccióndelaspalabras.• Epilepsia: Ciertos patrones de luz o sonido pueden provocar ataques epilépticos en algunas

personassusceptiblesdepadecerlos.

• Discapacidadesrelacionadasconlaedad:Elproblemamáscomúnalenvejecereseldeterioronaturaldelavista.Alos65años,lamayoríadelaspersonashaperdidopartedesucapacidad


118|P á g i n a


paraenfocar,resolverimágenes,distinguircoloresyadaptarsealoscambiosdeluz.Comopartedelprocesonaturaldeenvejecimientoylongevidad,lanecesidaddecontrasteaumentadebido

aladecoloracióndelosfluidosylaslentesoculares.Lamayoríadelaspersonassufrenpérdidasdepercepcióndelcolorqueacompañanalavisiónborrosa.Conlalongevidad,tambiénsuelenexperimentarseotrosefectosdegenerativos.Así,sonhabitualesdiversosgradosdepérdidade

audición,aligualquelasdificultadesdecoordinaciónmotora,amenudodebidasalaartritisoaldesgastedelasarticulaciones.

Estándarestécnicosrecomendados

Lasnormasacumplirparaconseguir laAccesibilidaddeunsitioypor lo tantoatenderaeste tipodeaudiencias,estánseparadasentresáreasalasqueselesasignadiferenteniveldePrioridad:

• Prioridad1:UndesarrolladordecontenidosdepáginasWebtienequesatisfacerestepuntode

verificación, porque de lo contrario, uno o más grupos de usuarios encontrarán imposibleacceder a la información del documento. Satisfacer este punto de verificación es unrequerimientobásicoparaquealgunosgrupospuedanusarestosdocumentosWeb.

• Prioridad 2: Un desarrollador de contenidos de páginas Web debe satisfacer este punto deverificación,porquedelocontrario,unoomásgruposencontrarándificultadesenelaccesoalainformación del documento. Satisfacer este punto de verificación eliminará importantes

barrerasdeaccesoalosdocumentosWeb.• Prioridad 3: Un desarrollador de contenidos de páginasWeb puede satisfacer este punto de

verificación., porque de lo contrario, uno o más grupos de usuarios encontrarán alguna

dificultad para acceder a la información del documento. Satisfacer este punto de verificaciónmejorarálaaccesibilidaddelosdocumentosWeb.

Comoseveenladescripciónanterior,cadaunadelasprioridadesllevaasociadountipodeobligación,

sientolaprimeralamásperentoriadetodas.

ParacumplirloindicadoenPrioridad1,lastareassonlassiguientes:

http://usuarios.discapnet.es/disweb2000/PautaWAI/LPVWCAG10.htm

PuntosdeverificaciónPrioridad1.

• Proporcioneuntextoequivalenteparatodoelementonotextual(porejemplo,atravésde"alt","longdesc"oenel contenidodelelemento).Esto incluye: imágenes, representacionesgráficasdel texto, mapas de imagen, animaciones (por ejemplo, GIFs animados), "applets" y objetos

programados, "ASCII art", marcos, scripts, imágenes usadas como viñetas en las listas,espaciadores, botones gráficos, sonidos (utilizados con o sin interacción), archivosexclusivamenteauditivos,bandasonoradelvídeoyvídeos.

• Asegurequetodalainformacióntransmitidaatravésdeloscolorestambiénestédisponiblesincolor,porejemplomedianteelcontextoopormarcadores.


119|P á g i n a


• Identifiqueclaramenteloscambiosenelidiomaoriginaldeltextodeldocumentoyencualquiertextoequivalente(porejemplo,leyendas).

• Organiceeldocumentodeformaquepuedaserleídosinhojadeestilo.Porejemplo,cuandoundocumentoHTMLesinterpretadosinasociarloaunahojadeestilo,tienequeserposibleleerlo.

• Asegure que los equivalentes de un contenido dinámico son actualizados cuando cambia el

contenidodinámico.• Hasta que las aplicaciones de usuario permitan controlarlo, evite provocar parpadeo en la

pantalla.

• Utiliceellenguajeapropiadomásclaroysimpleparaelcontenidodeunsitio.

Ysiutilizaimágenesymapasdeimagen(Prioridad1):

• Proporcione vínculos de texto redundantes con cada zona activa de unmapa de imagen delservidor.

• Proporcionemapasde imagen controladospor el cliente en lugar depor el servidor, excepto

dondelaszonassensiblesnopuedanserdefinidasconunaformageométrica.• Ysiutilizatablas(Prioridad1):• Enlastablasdedatos,identifiquelosencabezamientosdefilaycolumna.

• Para las tablas de datos que tienen dos o más niveles lógicos de encabezamientos de fila ocolumna,utilicemarcadoresparaasociarlasceldasdeencabezamientoylasceldasdedatos.

Ysiutilizamarcos("frames")(Prioridad1):

• Titulecadamarcoparafacilitarlaidentificaciónynavegacióndelosmismos.

Ysiutiliza"applets"y"scripts"(Prioridad1):

• Asegure que las páginas sigan siendo utilizables cuando se desconecten o no se soporten los

scripts,appletsuotrosobjetosdeprogramación.Siestonoesposible,proporcioneinformaciónequivalenteenunapáginaalternativaaccesible.

Ysiutilizamultimedia(Prioridad1):

• Hastaque lasaplicacionesdeusuariopuedanleerautomáticamenteeltextoequivalentede labanda visual, proporcione una descripción auditiva de la información importante de la banda

visualdeunapresentaciónmultimedia.• Paratodapresentaciónmultimediatempodependiente(porejemplo,unapelículaoanimación)

sincronice alternativas equivalentes (por ejemplo, subtítulos o descripciones de la banda de

visual)conlapresentación.• Ysitodolodemásfalla(Prioridad1):


120|P á g i n a


• Si, después de los mayores esfuerzos, no puede crear una página accesible, proporcione unvínculo a una página alternativa que use tecnologías W3C, sea accesible, tenga información

equivalente(ofuncional)yseaactualizadatanamenudocomolapágina(original)inaccesible.


• Asegure que las combinaciones de los colores de fondo y primer plano tengan el suficientecontrasteparaqueseanpercibidasporpersonascondeficienciasdepercepcióndecoloroporpantallasenblancoynegro[Prioridad2paralasimágenes.Prioridad3paralostextos].

• Cuandoexistaunmarcadorapropiado,usemarcadoresenvezde imágenespara transmitir lainformación.

• Creedocumentosqueesténvalidadosporlasgramáticasformalespublicadas.

• Utilicehojasdeestiloparacontrolarladiagramaciónylapresentación.• Utiliceunidadesrelativasenlugardeabsolutasalespecificarlosvaloresenlosatributosdelos

marcadoresdelenguajeyenlosvaloresdelaspropiedadesdelashojasdeestilo.

• Utiliceelementosdeencabezadoparatransmitirlaestructuralógicayutilícelosdeacuerdoconlaespecificación.

• Marquelaslistasylospuntosdelaslistascorrectamente.

• Marquelascitas.Noutiliceelmarcadordecitasparaefectosdeformatotalescomosangrías.• Asegurequeloscontenidosdinámicossonaccesiblesoproporcioneunapáginaopresentación

alternativa.

• Hastaquelasaplicacionesdeusuariopermitancontrolarlo,eviteelparpadeodelcontenido(porejemplo,cambiodepresentaciónenperiodosregulares,asícomoelencendidoyapagado).

• Hastaquelasaplicacionesdeusuarioproporcionenlaposibilidaddedetenerlasactualizaciones,

nocreepáginasqueseactualicenautomáticamentedeformaperiódica.• Hasta que las aplicaciones de usuario proporcionen la posibilidad de detener el

redireccionamiento automático, no utilice marcadores para redirigir las páginasautomáticamente.Ensulugar,configureelservidorparaqueejecuteestaposibilidad.

• Hastaquelasaplicacionesdeusuariopermitandesconectarlaaperturadenuevasventanas,no

provoqueaparicionesrepentinasdenuevasventanasynocambielaventanaactualsininformaralusuario.

• Utilice tecnologíasW3C cuando estén disponibles y sean apropiadas para la tarea, y use las

últimasversionescuandoseansoportadas.• EvitecaracterísticasdesaconsejadasporlastecnologíasW3C.• Divida los bloques largos de información en grupos más manejables cuando sea natural y

apropiado.• Identifiqueclaramenteelobjetivodecadavínculo.• Proporcionemetadatosparaañadirinformaciónsemánticaalaspáginasysitios.

• Proporcioneinformaciónsobrelamaquetacióngeneraldeunsitio(porejemplo,mapadelsitiootabladecontenidos).

• Utilicelosmecanismosdenavegacióndeformacoherente.


121|P á g i n a


Ysiutilizatablas(Prioridad2):

• Noutilicetablasparadiagramar,amenosquelatablatengasentidocuandosealinee.Porotrolado,silatablanotienesentido,proporcioneunaalternativaequivalente(lacualdebeseruna

versiónalineada).• Si se utiliza una tabla para diagramar, no utilice marcadores estructurales para realizar un

formateovisual.

Ysiutilizamarcos("frames")(Prioridad2):

• Describa el propósito de losmarcos y cómo éstos se relacionan entre sí, si no resulta obvio

solamenteconeltítulodelmarco.

Ysiutilizaformularios(Prioridad2):

• Hasta que las aplicaciones de usuario soporten explícitamente la asociación entre control deformulario y etiqueta, para todos los controles de formularios con etiquetas asociadasimplícitamente,asegurequelaetiquetaestácolocadaadecuadamente.

• Asocieexplícitamentelasetiquetasconsuscontroles.

Ysiutiliza"applets"y"scripts"(Prioridad2):

• Para los scripts y applets, asegure que los manipuladores de eventos sean entradasindependientesdeldispositivo.

• Hastaquelasaplicacionesdeusuariopermitancongelarelmovimientodeloscontenidos,evite

losmovimientosenlaspáginas.• Haga los elementosdeprogramación, tales como scripts y applets, directamente accesibles o

compatibles con las ayudas técnicas [Prioridad 1 si la funcionalidad es importante y no se

presentaenotrolugar;deotramanera,Prioridad2].• Asegure que cualquier elemento que tiene su propia interfaz pueda manejarse de forma

independientedeldispositivo.• Parascripts,especifiquemanipuladoresdeeventoslógicosmejorquemanipuladoresdeeventos

dependientesdedispositivos.


• Especifique la expansión de cada abreviatura y acrónimo en el documento cuando aparezcan

porprimeravez.• Identifiqueelidiomaprincipaldeundocumento.• Creeunordenlógicoparanavegarconeltabuladoratravésdevínculos,controlesdeformulario

yobjetos.• Proporcioneatajosdetecladoparalosvínculosmásimportantes(incluidoslosdelosmapasde

imagendecliente),loscontrolesdeformularioylosgruposdecontrolesdeformulario.


122|P á g i n a


• Hastaquelasaplicacionesdeusuario(incluidaslasayudastécnicas)interpretenclaramentelosvínculoscontiguos, incluyacaracteres imprimibles(rodeadosdeespacios),quenosirvancomo

vínculo,entrelosvínculoscontiguos.• Proporcionelainformacióndemodoquelosusuariospuedanrecibirlosdocumentossegúnsus

preferencias(porejemplo,idioma,tipodecontenido,etc.).

• Proporcionebarrasdenavegaciónparadestacarydaraccesoalmecanismodenavegación.• Agrupelosvínculosrelacionados,identifiqueelgrupo(paralasaplicacionesdeusuario)y,hasta

quelasaplicacionesdeusuariolohagan,proporcioneunamaneradeevitarelgrupo.

• Si proporciona funciones de búsqueda, permita diferentes tipos de búsquedas para diversosnivelesdehabilidadypreferencias.

• Localicelainformacióndestacadaalprincipiodelosencabezamientos,párrafos,listas,etc.

• Proporcione información sobre las colecciones de documentos (por ejemplo, los documentosquecomprendanmúltiplespáginas).

• ProporcioneunmedioparasaltarsobreunASCIIartdevariaslíneas.

• Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite lacomprensióndelapágina.

• Creeunestilodepresentaciónqueseacoherenteparatodaslaspáginas.

Ysiutilizaimágenesomapasdeimagen(Prioridad3):

• Hastaque lasaplicacionesdeusuario interpretenel textoequivalentepara losvínculosde los

mapasdeimagendecliente,proporcionevínculosdetextoredundantesparacadazonaactivadelmapadeimagendecliente.

Ysiutilizatablas(Prioridad3):

• Proporcioneresúmenesdelastablas.

• Proporcioneabreviaturasparalasetiquetasdeencabezamiento.• Hastaquelasaplicacionesdeusuario(incluidaslasayudastécnicas)interpretencorrectamente

los textos contiguos, proporcione un texto lineal alternativo (en la página actual o en alguna

otra)paratodaslastablasquemaquetantextoenparalelo,encolumnasdepalabras.

Ysiutilizaformularios(Prioridad3):

• Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluyacaracterespordefectoenloscuadrosdeediciónyáreasdetexto.


123|P á g i n a


Anexo8MetatagsLasmeta tags son identificadoresocultos,esdecir instruccionesespecialesdel lenguajeHTMLquenosonmostradas directamente en el navegador, pero que gracias a la información que contienende la

páginaweb, ayudanamejorar la posiciónenel listadode los resultadosde losmayoresbuscadores(altavista,excite,lycos....).

ElfuncionamientodelasMetaTagsenlosmotoresdebúsquedaessimple,ylopodemosresumiren3puntos:

1. Seañadelapáginaenelmotordebúsqueda,facilitandoladireccióndelamismaynuestroe‐

mail a losbuscadores.Normalmente cadamotor tieneunapartadoparapoderañadirel SitioWeb, se suelen identificar por "add url", "submit a site" ,"añadir url","sugerir sitio",etc.Masadelanteseda ladireccióndealgunospáginaswebdondesepuederegistrar laURLenvarios

motoresalavez,facilitándoseeltrabajodealtadelSitioWeb.2. ElmotordebúsquedanavegaelSitioWeb,eincluyeensuíndicelainformaciónqueencuentre

en lasMeta Tags de la página, tales comodescripción, palabras clave, titulo, autor ymuchos

masdatosqueayudaránaunbuenindexadodelapáginaenlosmotoresdebúsqueda.3. Elusuariointroduceenunbuscadoreltemaenelcualestáinteresado,mediantepalabrasclave.

Seguidamente el motor de búsqueda revisará en sus archivos todas aquellas páginas que

contengan(enlasMetaTags)laspalabrasclavequehaintroducidoelusuario,ofreciéndoleunalistadetodaslaspáginasquecontenganesaspalabrasclave,yaquíesdondeintervieneeltenerunasbuenasMetaTags,paraqueunadelaspáginasquesemuestranalusuariosealanuestra.

Aunquehayalgunosbuscadoresquenoutilizan todas lasMeta tags,es recomendable incluirlas,para

realizarunacorrectapromocióndelawebenlosmotoresdebúsquedaquesilohacen.

Las Meta Tags se deben de colocar en la cabecera de la página web, entre <HEAD> y </HEAD>.NormalmentealpromocionarelSitioWeb,esteconstadeunapáginaprincipal,quesenombracomo

index.htmodefault.htm,enelcualsedebedeintroducirlasMetaTagsparaqueseanefectivas.

ExistendostiposdeMetaTags,condistintasfunciones:

1. LASMETANAMES2. LASHTTP‐EQUIV

LASMETANAMES

Los Meta Names se utilizan para optimizar el resultado en los motores de búsqueda. ContieneninformaciónreferidaaldocumentoHTMLperonosepresentaenlapantalladelnavegador.

MetanameTITLE


124|P á g i n a


Es la principal etiqueta para los buscadores, que proporciona el titulo de nuestro Sitio Web. Esimportantequesecorrespondaconelcontenidodelaetiqueta<TITLE>contenido</TITLE>,quetienela

páginaweb.

El titulodebede seruna frasebreveque resumabienel temade lapágina,debe incluir laspalabrasclavemasimportantesdelsitio,talescomoelnombredelainstituciónoprograma,sifueraelcaso.

Nosedebeescribirtodoeltextoenmayúsculasysedebeacentuarnormalmente.Evitarpalabrascomo"bienvenido","sitio","web".

<METANAME="title"CONTENT="títulodelsitio">

MetanameDESCRIPTION

Enestatagesdondesecoloca ladescripciónde lapágina,queserá la frasequeacompañaráal titulo

anterior en los listados de los buscadores. No es conveniente repetir palabras en ella, pero si lo es,utilizaralgunade laspalabrasclavequeseutilizaenel campokeywords.Noescribir todoel textoenmayúsculasyserecomiendaacentuarnormalmente.Utilziarunafrasedeextensiónnomuylargayque

describaalaperfecciónelsitio.Sideseaasegurarsequelosbuscadoresmuestrenlamayorpartedesudescripciónnosobrepaselos120y140caracteresenlalongituddelafrase.

<METANAME="description"CONTENT="descripcióndelapágina">

MetanameKEYWORDS

Enestatagpondremoslaspalabrasexactasporlascualesqueremosqueelsitioseaencontradoporlosrobotsdebúsqueda.Laspalabraspuedenestarseparadasporespacios,porcomasoporambosalavez.

Noesconvenienterepetirpalabras,yaquemuchosrobotsdeindexaciónlasrechazan.Sedebenincluirsolo las palabrasmas importantes para la página, acentuadas normalmente, y utilizandomayúsculas

solocuandoesnecesario.Noesconvenientehacerunalistadepalabrasdemasiadolarga,entre10y20,serámasquesuficiente.

<METANAME="Keywords"CONTENT="palabra1,palabra2,....">

MetaNameDCLANGUAGE

Determinaelidiomaenelqueestaescritalapáginaweb.

<METANAME="Language"CONTENT="Spanish">


125|P á g i n a


MetaNameREVISIT

EstaMeta tag sirveparaconfigurar la cachédelexplorador,permitiendo laactualizaciónde lapáginaduranteelperiododetiempoespecificadoenelidentificador.

<METANAME="Revisit"CONTENT="nºdays">

MetaNameAUTHOR

PermitecolocarelnombredelautordelapáginadentrodelasMetaTags.

<METANAME="author"CONTENT="nombre">

MetaNameROBOTS

EstaMetatagdisponedeunaseriedeatributosquepermitenelegirloselementosdelapáginaqueno

seránindexadosporlosmotoresdebúsqueda,talescomolosarchivosolosvínculosdequedisponelapágina.LosparámetrosdeestaMetasonlossiguientes:

allLapáginaseráindexadaporcompleto(incluidosarchivos).

noneLapáginaseráindexadaperosinningúnarchivo.

IndexLapáginapuedeserindexadaporlosrobots.

noindexLapáginanopodráserindexadaporlosrobots.

FollowPermitequelosrobotssiganlosvínculosdelapáginaaotras.

nofollowNopermitequelosrobotssiganlosvínculosdelapáginaaotras.

<METANAME="robots"CONTENT="all|index|follow">

LASMETAHTTP‐EQUIV

La etiqueta HTTP‐EQUIV, tiene control sobre los exploradores, y son utilizadas para refinar la

informaciónydarinstruccionesalexploradorquelasestaleyendo.ExistenvariostiposdeMETAHTTP‐EQUIV:

Pragmaócache‐control

Esunamaneradecontrolarlacachédelexplorador(memoriadondeseguardanlaspáginasquehemosvisitado en la red). Esta etiqueta puede tener dos valores: "cache" (utiliza la memoria caché para


126|P á g i n a


guardar la página, con lo cual se cargarámas rápido en el computador, pero puede ser un punto encontraa lahoradeactualizar lapágina,puestoque losusuariosnoverán losnuevosresultados),"no‐

cache"(noutilizalacachédelexploradorparaguardarlapágina).

<METAHTTP‐EQUIV="Pragma"CONTENT="no‐cache/cache">(paraNetscape)

<METAHTTP‐EQUIV="Cache‐Control"CONTENT="no‐cache">(paraelExplorer)

Expires

Indicaalexploradorcuandoacabalavidadeunapágina,limitandoelusodeunalamismaaunafechayunahoradeterminada.EsunaMetaútilsiemprequeelcontenidodelawebseaperecedero.

METAHTTP‐EQUIV="expires"CONTENT="Fri,20Feb200010:51:12GMT">

Refresh

Especificael tiempoen segundosqueelexplorador tardaráenenviarleauna segundadirecciónURL,unavezquesehayacargadolapáginaquecontienealaMetatag.

<METAHTTP‐EQUIV="Refresh"CONTENT="5;URL=http://www.nuevaurl.es">

Set‐Cookie

Esunade lasmanerasmas fáciles de introducir una cookie enel exploradordel usuarioque visita la

página. Para que la cookie sea guardada en el disco duro del usuario que visita la web, debeespecificarse una fecha de expiración de esta, en caso contrario la cookie se eliminará al acabar la

sesiónactual.

<META HTTP‐EQUIV="Set‐Cookie" CONTENT="cookievalue=xxx ;expires=Friday, 15‐Feb‐01 14:18:41GMT;path=/">

Window‐Target


127|P á g i n a


EstaMetaespecificaelnombrede laventanaen lacual sedebevisualizar lapaginaweb.Esmuyútilparaevitarquelapáginaseavistaenelmarcodeotrapáginawebajenaalanuestra,puestoqueconel

parámetro_topeliminatodoslosmarcosexistentesenelexplorador.Puedetenervariosparámetros:

_blackLapáginasevisualizaenunaventanadelexploradornueva.

_topLapáginasevisualizaenlaventanacompletadelexplorador,eliminandolosmarcosqueexistanenlaventanadelexplorador.

_selfLapáginasevisualizaenelmismomarcodesdeelcualseoriginóelhipervínculo.

<METAHTTP‐EQUIV="Window‐target"CONTENT="_


128|P á g i n a


Anexo9PautadeComparacióndeSitiosWebAtravésdeestapautaseofrecenlosítemsquedebenserrevisadosenunSitioWebparaestablecerlacalidad de su oferta de contenidos. Por cada uno de los puntos descritos, se debe entregar la

informaciónqueseindica.

• NombredelaInstituciónIndicarlaidentificacióndelsitioqueseestárevisando

• URLdelSitioWeb

Direcciónwebdelsitioqueserevisa• PaísdeOrigen

PaísdeorigendelainstituciónquehageneradoelSitioWebqueserevisa

• BreveDescripcióndelSitioIndicardequésetrataelSitioWebqueserevisa,consuprincipalescaracterísticas;tambiénsedebeinformardelascaracterísticasdelainstitución

• ImagendePantallaPrincipalIncluirunaimagendelapantalladeiniciodelSitioWebqueserevisa

• EstructuradelaInformación

IndicardequémaneraestáestructuradalainformaciónqueseentregaenelSitioWebqueserevisa. Idealmente se deben incluir imágenes que apoyen la descripción de cada una de lasseccionesrevisadas.

• TiposdeContenidosIndicardequésetratanloscontenidosysitodospertenecenalainstituciónotomadeterceros.Señalarademásenquénivelesestánestructurados, idealmenteapoyándosecon laestructura

descritaporelMapadelSitio.• CalidaddeContenidos

Emitir un juicio sobre la forma de presentar los contenidos y sobre la pertinencia de sudescripciónparalosobjetivosquetienelainstitución.

• Serviciosinteractivos

IndicarquétipodeelementosinteractivosseofrecenenelSitioWeb.


129|P á g i n a


Anexo9PautadeComparacióndeSitiosWebAtravésdeestapautaseofrecenlosítemsquedebenserrevisadosenunSitioWebparaestablecerlacalidad de su oferta de contenidos. Por cada uno de los puntos descritos, se debe entregar la

informaciónqueseindica.

• NombredelaInstitución:Indicarlaidentificacióndelsitioqueseestárevisando• URLdelSitioWeb:Direcciónwebdelsitioqueserevisa• PaísdeOrigen:PaísdeorigendelainstituciónquehageneradoelSitioWebqueserevisa

• BreveDescripcióndelSitio:IndicardequésetrataelSitioWebqueserevisa,consuprincipalescaracterísticas;tambiénsedebeinformardelascaracterísticasdelainstitución

• ImagendePantallaPrincipal: Incluiruna imagende lapantallade iniciodelSitioWebquese

revisa• Estructurade la Información: Indicardequémaneraestáestructurada la informaciónque se

entrega en el SitioWeb que se revisa. Idealmente se deben incluir imágenes que apoyen la

descripcióndecadaunadelasseccionesrevisadas.• Tipos de Contenidos: Indicar de qué se tratan los contenidos y si todos pertenecen a la

instituciónotomadeterceros.Señalarademásenquénivelesestánestructurados,idealmente

apoyándoseconlaestructuradescritaporelMapadelSitio.• CalidaddeContenidos: Emitirun juicio sobre la formadepresentar los contenidosy sobre la

pertinenciadesudescripciónparalosobjetivosquetienelainstitución.

• Serviciosinteractivos:IndicarquétipodeelementosinteractivosseofrecenenelSitioWeb.


130|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,el

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

[31] ComprendiendolaAccesibilidad:GuíaparaLograrConformidad‐R.Yonaitis


131|P á g i n a


[32] Revistas USERS, Power, .Code, TecTimes © MP Ediciones S.A /(http://www.tectimes.com/magazines/)

Documents

Manual de Proyectos Web ARROBA DE ORO - IT … · Manual de Proyectos WEB Escuela Superior de Economía y Negocios 2 | P á g i n a Manual de Proyectos Web Preparado