1-Guia de Comunicacion Digital Para La AGE- Aspectos Generales _14!02!2013_ (1)

ASPECTOS GENERALES

Gua de Comunicacin Digital para Administracin General del Estado ASPECTOS GENERALES

GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES

Pgina2de80

REQUISITOS ANTES DE TENER EL SITIO WEB 4

1. ASPECTOSGENERALES 41.1 SISTEMASDENAVEGACIN 5

1.1.1 NAVEGACINPRINCIPAL 71.1.2 NAVEGACINSECUNDARIA 91.1.3 OTROSELEMENTOSDEORIENTACINYNAVEGACIN 111.1.4 SISTEMASDENAVEGACINYORGANIZACINDELASPGINAS(ZONING) 141.1.5 NAVEGACINGUIADA 151.1.6 NAVEGACINYACCESIBILIDAD 16

1.2 LEGIBILIDAD 181.2.1 FUENTES 181.2.2 COLORES 211.2.3 PICTOGRAMASEICONOS 241.2.4 TTULOS,JERARQUAYAGRUPACINDELAINFORMACIN 261.2.5 AGRUPACINDELAINFORMACINPARAFACILITARSUCOMPRENSIN 271.2.6 LAESTRUCTURADELASPGINAS. 29

1.3 CONSIDERACIONESTCNICAS 361.3.1 DISPOSITIVOSMVILES 361.3.2 NAVEGADORES 381.3.3 RESOLUCINDEPANTALLA 421.3.4 LENGUAJESYNORMASDEDESARROLLO 461.3.5 SCRIPTS,PLUGINSYAPPLETS 51

1.4 OPTIMIZARLAWEBMVIL 531.4.1 ESTRATEGIA1:NOHACERUNSITIOESPECIALPARADISPOSITIVOMVIL 551.4.2 ESTRATEGIA2:HACERUNSITIOESPECIALPARADISPOSITIVOMVIL 561.4.3 ESTRATEGIA3:CONSTRUIRUNSITIOMVILCONCONTENIDOADAPTABLEALOSDISPOSITIVOS 56

1.5 ACCESOCONAUTENTICACIN 561.5.1 CONTINUIDADDELMODOVISITANTEALMODOAUTENTICADO 571.5.2 DESCONEXINOCIERREDESESIN 581.5.3 TRATAMIENTODEDATOSPERSONALES 59

1.6 ANEXOIAVISOLEGAL 621.6.1 CONDICIONESGENERALESDEUSODELPORTALDELMINISTERIOUORGANISMO 621.6.2 DERECHOSDEPROPIEDADINTELECTUALYDEPROPIEDADINDUSTRIAL 631.6.3 PRIVACIDAD 631.6.4 LEYAPLICABLEYJURISDICCIN 641.6.5 POLTICADECERTIFICADOSELECTRNICOS.REQUISITOS 651.6.6 REUTILIZACINDELAINFORMACINDELSECTORPBLICO 651.6.7 LINKSOHIPERENLACES 671.6.8 VERSINMULTILINGE 671.6.9 FRAMES 681.6.10LICENCIASCREATIVECOMMONS 68


Pgina3de80

1.6.11ESTADSTICASDEUSO 691.6.12SEDESELECTRNICAS 69

1.7 ANEXOIIDECLARACINDEACCESIBILIDAD 741.7.1 POLTICADEACCESIBILIDAD 741.7.2 CUMPLIMIENTODELOSESTNDARES 741.7.3 EXCEPCIONES 741.7.4 ACTUALIZADOEL. 751.7.5 CONTACTO 75

1.8 ANEXOIII.LENGUAJESDEDESARROLLO 761.8.1 LENGUAJEASP 761.8.2 LENGUAJEASP.NET 761.8.3 LENGUAJEPYTHON 771.8.4 LENGUAJERUBY 771.8.5 OTRASTECNOLOGAS 78


Pgina4de80

REQUISITOSANTESDETENERELSITIOWEB

1. ASPECTOSGENERALESEste primer fascculo de laGua de ComunicacinDigital de laAdministracinGeneral delEstado1recoge losaspectosbsicosatenerencuentaen laconstruccindesitioswebde laAdministracinGeneraldelEstado.Enparticularsonsietelosaspectosgeneralestratados:

- SistemasdeNavegacin:esteaspectotratasobreeldiseode lanavegacinycomose

estructuran las pginas, haciendo ms sencillo y homogneo el uso por parte de losvisitantes.

- Legibilidad: se trata de exponer recomendaciones referentes al uso de diferentesformatosenlaspginasquefacilitanlalegibilidaddeloscontenidos.

- Aspectos lingsticos: con este captulo se ofrece una aproximacin a cmo redactarcontenidos manteniendo coherencia en el mensaje y respetando las consideracionespredefinidasenmateriadeigualdad,diferenciasculturales,etc.

- Consideraciones tcnicas: en este aspecto se recogen las recomendaciones referidas acomo impactan diferentes aspectos tcnicos relacionados con la construccin o lanavegacin,talescomolaresolucindelosdispositivos,losnavegadoresdelosusuarios,lenguajesdeprogramacin,etc.

- Accesoautenticadodeusuarios:enesteapartadosetratanlasrecomendacionesatenercuentacuandosenecesitadelaidentificacindelosusuarios

- ReferenciasaotrossitioswebdelaAdministracinGeneraldelEstado:cuandoseenlazanotros sitios web de la Administracin General del Estado hay una serie derecomendacionesparaconseguirlahomogeneidad

- Estadsticas deUso: en este apartado se incluyen las recomendaciones para incluir elserviciodeestadsticasqueposibiliteelanlisisposteriordelasvisitasdelosusuarios.

LalecturadeestefascculosedebecompletarconlalecturadelossiguientesfascculosdelaGuadeComunicacinDigital: Imagen institucional,Multilingismo,AccesibilidadyAspectosdecomunicacin

1 Los fascculos de la Gua de Comunicacin digital de la AGE son: Aspectos Generales, ImagenInstitucional,Multilingismo,Accesibilidad,Seguridad,AspectosdeComunicacin,TecnologaWeb2.0yMejorayMantenimiento.


Pgina5de80

1.1 SistemasdeNavegacinA la hora de disear el sitioweb y una vez decidido cmo organizar la informacindentrodelsitio,hayquedisearloselementosdelainterfazquepermitenrecorrerlasdiferentesseccionesypginasquelocomponenyqueconsiguenelencadenamientodepantallas a travs de herramientas tales como: barras de navegacin, menscontextuales o accesos directos, tambin hay que estructurar dichos elementos ydefinirsucolocacindentrodelasdiferentespginas.Los elementos de la interfaz citados y su ubicacin en las pginas, constituyen el"sistemadenavegacindeunsitioweb.Hay que tener en cuenta que en internet son cientos de millones las pginas quepuedenseraccedidasporcualquierusuarioyestosvancogiendohbitosamedidaquedesarrollansuexperiencia.Estaexperienciaesaprovechadapor losdiseadoresde lossitioswebalahoradeenfocareldiseoyhacequesevayanimponiendoestndaresdefactoen laorganizacinde loselementosdenavegacin.Esdecir, lasmaquetacionestiendenahomogeneizarseenunacoleccinreducidadediferentestiposdeestructura,demodoquecuandounusuarioaccedeaun sitioweb identifica rpidamentedondepuede encontrar cada elemento de la navegacin, en qu zonas puede encontrar lainformacinycmosedestacanlosdiferenteselementos.Conseguirunabuenanavegacindelsitiowebeslamisinprincipaldelosdiseadoresde la interfaz de usuario y garantizar la consistencia y la transparencia en loscontenidosquesepresentan,aumentandolacapacidaddeconcentracindelusuario.Lanavegacindebesersencilla,intuitivayconsistenteparapermitiralusuarioentenderfcilmentedndeobtenerlainformacinylamaneradeaccederalafuncionalidadolosservicios que necesita, pero de forma transparente para l. Un buen sistema denavegacinpropiciarqueelsitioseavisitadoporelusuarioypermanezcanavegandoenl.Elusuariodebe ser capazde localizar lapginamostrada yorientarseentreelrestodelaspginasdelawebparapoderseguirnavegando,paraconsultarmspginasointeractuarconsusservicios.Delacorrectaubicacindeloselementosydeunbuendiseo de navegacin depende que el usuario se sienta o no cmodo en su visita anuestraweb.Elusuariodebesercapazdeconcentrarseenloscontenidosquesepresentanenelsitioy no en la investigacin y la comprensin de los mecanismos de navegacin que lepermitenaccederaellos.Medianteloshilosconductoresdelsistemadenavegacin,elusuario debe entender dnde obtener rpidamente la informacin y la forma deaccederalafuncionalidadquenecesita.

GuaAdmASPE

deComunicaciinistracinGenECTOSGENERAL

Rec

La eleccclasificacinformacjerrquicdispondrrelacionadiferentecmoquLanavegsistemas- Men

llam

- Enlasecuacce

inDigitalparaneraldelEstadoLES

comendado

Ellugarelmismo

Cada ppermita Dn Ded Dn

Se puedaccederunoova

cin del scindelaincinmedianco. Si ademr de la padosoafinesunidadeuedarestrugacin yelsdenavegansobotonmada"sistemaces, iconosundario deesoadivers

ao

odelapginoentodaslgina del sialusuariorndeestoy?dndevengndepuedoiden diseara loscontearioscamino

istema denformacinntetaxonomms se hanposibilidadnes, relacionsde conteucturadofinaccesoa lcinquesenesdenavemaprincipalsobannersnavegacinoscontenid

aenelquelaspginastio debe inrespondera

go?r?r elementoenidosdelsosalternati

navegacielegido.Simasjerrqn aplicadode realiza

nandopornido. Enesnalmenteelosdiversoseclasificangegacin,agrldenavegasque sirvenn, para ladosyfuncio

esesitanldelsitio.ncluir un seatrespregu

s de navesitioatravvos).

n vendrsehaeleguicas,lawemetadatosar navegacejemplo,pstemomenlSitioWeb.selementosgeneralmen

rupadosencin".n comouna orientacionesdelSiti

ossistemas

eguimientountas:

egacin parsdedosv

condicionaidoclasificaebtendrus a las uniciones tranpalabras clato ya se tesdel sitio snteendoscunabarrad

sistema con en la naoWeb.

sdenavega

de la nave

ra que el uvas(unaru

ada por eartodaslasunsistemaddades densversalesve comuneendrunm

sehacenacategoras:denavegac

omplementavegacin y

Pgina6de

acindebe

egacin y q

usuario puetaprincipa

el sistemacategorasdenavegaccontenido,a contenidesasignadamapa visual

travsde

cinamenu

ario, sistey permiten

80

ser

que

edal y

dedeinse

dossade

los

udo

man el

GuaAdmASPE


1.1.1 N

LanaveglasseccioLostipos Nav

sehdeloEsuquieconsalm

Rec

NavLavpara

La fdesp

Elusbarrenlade lrelie


Navegacin

gacinprinconesmsimsmsfrecueegacinenhahechomosusuariosunsistemageren destacstantement

mostrarmen

comendado

Aseguranavegacprimera

Elanchoelfindelapanta

egacinsuentajadeuaelcontenifilosofa esplegablesensode iconoradenavegabarradenos botoneseve,color,

ao

nPrincipalcipalresaltamportantes

entesdesisnelrea izquypopularenlossitiogeneralmencar la jerartelaposicinsdesplega

orse de quein ms impgina.

odeenlacesdejarsuficilla.

perioruhounabarradedoyotrainigual quensubmensos"pinchabgacinpermnavegacins. Indicar vnfasis,etc.

alospuntos,dejandoestemadenaquierdaovdebidoaqsweb,deinntebiencorqua de nindelaarqablesensu

e en resolumportantes

sdenavegaienteespac

orizontal:esenavegacinformacinla de la ns.blesenvezmiteelahorsedebepr

visualmente.

smsimpolrestoparaavegacinpvertical:esquerespondnicioporlamprendidoveles de laquitecturadbmens.

uciones des estn vis

acindebescioparaelt

selsegundnsuperiorpertinente.

avegacin

zdebotonerrodeesparoporcionare al usuario

ortantesdelalanavegacprincipalsoneltipomsdealacondizquierda.yqueseaa informacdelsitioen

1024x768ibles en su

sermsestextoyque

dotipodenesquedeja.a la izquie

estextualescio.Encasounequivalo en qum

sitiomediacinsecundnlossiguienscomndeductahabit

adecuabienin, y a sulaquenos

pxeles lou totalidad

trechode30nosepliegu

navegacinamsespac

erda, se tra

spara lareaodeutilizaentetextua

men o sec

Pgina7de

anteenlacedaria.ntes:enavegacitualdelectu

nensitiosqu vez mostencontram

s vnculosd al cargar

00pxelescuendebajo

msutilizaciopordeb

ata de men

alizacinderestos iconaldecadauccin est c

80

esa

nyura

quetrarmos,

de la

conde

do.ajo

ns

e lanosunocon

GuaAdmASPE


O

Rec

Nav

supe

Existenm

Rec


Obligatorio En caso

barradeunodelo

comendado

Destacarusuariot

Siseponbarra depuedenpudiend

egacin poeriorenquemodelosmix

comendado

Normalmeslabone

Fuera ddesarrol

La jerardebiend

Se debegrficos

Los ttulintuitivolaspginquelasp

Elusodperodeb

ao

de utilizar

enavegaciosbotones

or adecuadatiendeaignnengrficose navegaciignorar loollegarap

or pestaaseincorporaxtosqueme

omente no desmsimpoel sistemalarseenmorqua entreollegarasue conseguirovnculosdlos de losos.Encadanasconunpginascondel colorenbepermitir

r iconos "pin sedebeporcuestio

amente estenorartodolsenlacaben se encueos grficosensarquen

s: es una vpestaasvezclanvario

debera tenortantes,dede navegaodotextoHe los niveleuponerunaque la navdetipodifeenlaces depginadebnmerode

nunnmeron los enlacealusuarios

inchablesproporcion

onesdeacc

e tipo de noqueseveeceradelapentrapor dy la barra

nohaynada

variante devisiblesenluosdelostip

ner ms deejandoelreacin, los bTML.es debe seafuentedevegacin prente. navegaciehaberuneenlacesdomenordeesnonecessabersisob

en vez denarun equesibilidad.

navegacineadistanciapginahaydebajo de la de naveamsenes

las anteriougardelosposdenaveg

e 67 enlaestoparalabotones qu

er evidenteambigeda

rincipal se

n deben senmerora

de20a30senlaces.sariamentebrelseha

botones teuivalente te

porque noa.queasegurlos grficosegacin junseSitioWeb

ores. Se difdesplegable

gacindesc

ces y contnavegacine realicen

e para losd.destaque

er cortos, dzonabledesonmsdi

tienequehechoclica

Pgina8de

extuales enextualde ca

ormalmente

rarsedeques, los usuarnto con ellb.

ferencia dees.critos.

tener slonsecundariaccin deb

usuarios,

por el uso

descriptivosenlaces,pufcilesdeu

serestndantesono.

80

n laada

e el

elarioslos,

e la

losa.ben

no

de

s euessar

dar,


Pgina9de80

Obligatorio Si el uso de grficos o enlaces JavaScript debe estar disponible, debe

notificarsepormediodeuntextoalternativoporcuestionesdeaccesibilidad.

1.1.2 NavegacinSecundaria2Losenlacesqueconstituyenlanavegacinsecundariasonlosvnculosqueestablecenelcontacto habitual con el usuario, con literales como Nosotros, Quines Somos,PolticadePrivacidad,CondicionesdeUso,Mapaweb,Guadenavegacinweb,Contactarconeladministrador,etc.

Nosotros,Quines somos,Contactarconeladministrador: lasreasdecontacto

sirvenparadarrespaldo,credibilidadyseguridadalsitioysucontenido.Eshabitualque losusuariosde Internetqueaccedenaunsitiobusquenunreadecontactoparacorroborarquelainformacinpublicadaseaverdica.Lainformacinqueseesperaencontrarenenlacesdeestetipoes:

Telfonosdecontacto. Direccionesfsicas. Nombresdepersonasconlascualescontactarenlasdistintasreas. Direcciones de correo electrnico de contacto para cada una de las

distintasreas. FormulariodeContacto,endondeseespecifiqueunasuntoomotivode

contacto, campo de explicacin, nombre, email, telfono de contacto,etc.

Aviso legal3oPolticadeprivacidad:medianteesteenlaceserposibleaccederaldocumentoqueespecifica losprocedimientos, reglas,yprcticasde seguridaddedatosqueserealizanenunSitioWeb,conlasquesegarantizaelmantenimientodelaintegridad,confidencialidadydisponibilidaddelainformacinquerecogedesususuariosydeotrosinteresadostitularesdedatos,deconformidadconlalegislacinvigente,ylasnecesidadesdeseguridadinformticaylosobjetivosquesepersiga.

2 Sobre los contenidos de las pginas ver el fascculo Aspectos de Comunicacin de esta Gua deComunicacinDigital.3VerANEXOI


Pgina10de80

Condicionesdeuso:medianteesteenlaceseaccedea lostrminosycondicionesgeneralesaplicablesalusodelosservicioseinformacinofrecidosporelSitioWeb.CualquierusuarioquedeseeaccederyusarelSitioWebpodrhacerlocumpliendodichostrminosycondicionesgeneralesrespectivos.

Mapaweb:es la representacingrficao textualdeunSitioWeb.Esunapginadonde se listan de manera jerrquica las pginas que componen un sitio,generalmente representadas como enlaces que permiten el acceso rpido a lasmismas.

Gua de navegacin web: Facilita la navegacin de los usuarios, incluyendoinformacin sobre la organizacin de la informacin el sitio web y elementosutilizados o a disposicin para facilitar la navegacin a los usuarios tales como:Programasyplugins,Microformatos,SuscripcinacontenidosporRSS,ArchivoKMLoNavegacinSemntica.

AyudayPreguntas Frecuentes (FAQ): Lapgina "Ayuda" y lade PreguntasmsFrecuentes, sonesencialespara los serviciosen lneapor loquees convenientequecuentenconunenlacediferenciado.ysepuedenrecordarenlaparteinferiorde la pgina. La pgina de FAQ incluye las preguntas ms frecuentementeplanteadaspor losusuariosconsurespuestaysepuedeacompaardeunenlaceparaelenvodemspreguntas.

Otrosenlacesdeinters:Enlacealapginadeprensa,Enlacealoshorariosyelplanodeaccesosielsitiotieneoficinasdeatencinalpblico.Enlacealapginadedirectoriodelainformacinpblica060.

Otros avisos de inters: Poltica de proteccin de datos del sitio, Poltica deseguridaddelsitio,Polticadeautenticacin,Interoperabilidaddelsitio,plataformaso navegadores para los que el sitio est disponible, resolucin u otros aspectostcnicos,Fechadelaltimaactualizacin.

Obligatorio Si el uso de grficos o enlaces JavaScript debe estar disponible, debe

notificarsepormediodeuntextoalternativoporcuestionesdeaccesibilidad. Mapaweb:es la representacin grficao textualdeun SitioWeb. Esuna

pginadondese listandemanera jerrquica laspginasquecomponenunsitio, generalmente representadas como enlaces que permiten el accesorpidoalasmismas.

Condicionesdeaccesibilidad:

GuaAdmASPE


Rec

1.1.3 O

AdemsayudaaWebsee


Lascontecontehizo

Laspal udificucualqcompsobre

(Real DeReglamediscapacsociedad

comendado

Diferenc

Losenlaconuntrazonabentreva

Sesuele

Si lacom

unaGuadentrod

Otroselemdeloselemlanavegaciencuentra.

ao

pginas denerdeforenidodelaslarevisindpginasdesuario unultadesdeaquier quejpetentes reelasconsulecreto 1494entosobrelcidad a lasddelainfor

ociarenlopoaces corresptamaodele para querios.ncolocare

mplejidaddadenavegdelapartado

mentosdeOmentosdeninydeorieLosmsim

de Internetrmaclaralasmismasqdelniveldeinternetdesistema daccesoalcoja, consultealizarn pltas,sugere4/2007, delascondicios tecnologarmacinym

osibleentrepondientestextomse el usuario

nlapartein

elsitiowebgacindelsoAyuda.

Orientaci

navegacinentacinalportantess

t de las aainformaciuehayanaaccesibilida

e lasadminide contactoontenidodeta o sugeperidicameenciasyquej 12 de novonesbsicasas, productmediosdeco

lanavegaca lanavegpequeo,uo sea capa

nferiordela

bosedeelsitio,cuyoe

nyNavegaprincipalyusuarioenson:

administracnsobreelaplicado,asadexpresadistracioneso para queelaspginaerencia deente estudejasformulaviembre, posparaelactos y servicomunicacin

cinprincipagacin secuusarunsepaz, sin esfue

apginapri

ectrnicaaenlaceapar

acinsecundarioloreferent

ciones pblgradodeacomolafedo.pblicasdee puedanasdeIntern

mejora.ios de caradas.or el que sccesodelascios relacionsocial).

alylasecunndaria se saradorodeerzo, de ha

incipal.

as loaconsreceralpi

ohayotrosteaenqu

Pgina11de

licas deberaccesibilidadechaenque

ebernofretransmitirnet,oformuLos rgan

rcter pbl

se apruebaspersonasconados con

ndariasuelendiseejarunespaacer distinc

ejase incluedepgina

elementoslugardelS

80

rndalese

ecerlasularnoslico

a elcon la

aracioin

uirao

deitio


Pgina12de80

Men Principal: este elemento se encuentra siempre presente, permitiendofcilmenteelaccesoacadaunadelasreasdelsitio,comovolveralapginainicial,etc.

BarraCorporativa:ofrecediversasopcionesdeinformacinrespectodelsitio. RutadeAcceso(migas):esunalistaquedebeaparecerenlapartesuperiordecada

pginayquemuestralatrazadepginasquehayentrelapginadeiniciooPortadadelsitiohastalapginaactualqueseestvisitando.

Cabecera: tiene como misin principal albergar la imagen corporativa paraidentificarconclaridadelorganismoalqueperteneceelSitioWeb.

Enlacesautilidades:losenlacesautilidadesestnenfocadosaayudaralusuarioenlas tareasque representan,porejemplo, seleccinde idiomas,bsquedasdentrodel sitio, etc. Normalmente estos enlaces se encontrarn siempre en la partesuperiorderechadecadapgina.

Fecha de publicacin: nos permitir indicar la fecha de actualizacin de lainformacin y, por tanto, la posible vigencia del contenido presentado.Normalmente ocupar un lugar en la parte baja de la pgina, aunque puedepresentarsetambinenlapartesuperiorizquierdadelcontenido.

PiedePgina:seutilizaprincipalmentepara informarsobreavisos legalesymapadelwebyotrainformacingeneraldelSitioWeb.Esunpuntodereferenciaentodoelsitio,asociadodirectamenteasunaturalezaycaractersticasysueleconteneraccesosa:

EnlacesapginasdePrensa. HorariosyPlanodeacceso,siexistenoficinasdeatencinalpblico. Enlacealapginadepreguntasfrecuentes(FAQ),siesqueexiste. Aviso sobre la poltica de proteccin de datos del sitio, seguridad e

interoperabilidad. Enlacesaotrossitiospblicosdeintersgeneralcomoporejemploel060 Campaasinstitucionales.

Losenlacesacontactoyayudaquesuelen iren lapartesuperiorpuedenponersetambinenelpiedepginaparamayorfacilidadosolamenteenelpiedepginasielresponsabledelawebnoquieredarleunaimportanciaparticular.

GuaAdmASPE


OtroselemapartadoportadaoWeb,Conotra coordpresenteecadapantfotogrficlaspgina

Rec


mentoscom1.2.3) ,ent

opgina inicntacto,condenadaparencadapgtalladelsitiadelSitioWsdelsitiop

comendado

MenPr BarraCo Rutade

enlacepquemarconlost

Ejemp Cabecer

sitio. Los enla

derecha

ao

munessontre los cuacial,Mapanladireccira comunicgina,Ayudio.PermiteWeb,porloparaguiara

Ejem

E

orincipal:estorporativa:

Acceso (bparaaccedercael lugarttulosdelaplo:Servicira:laconfig

aces a utidecadap

losbotoneles, losmadelsitio,npostal,earse conelda,pararenalusuarioqueestoselusuarioya

mplodeBotone

EjemplodeBot

tarsiemprsemuestrareadcrumberalreadractualdelspginasaios>proceso

uracinde

lidades: segina.

es (enocasis frecuenteparaver la

electrnica,lorganismoecibirconsejoencontrarelementossayudarleap

es/enlacesenl

ones/enlacese

represente.aentodaslabsomigas)de la cuald restoyqulasquehac

os_selectiv

lacabecera

e encontrar

onesreprees son, Iniaestructuratelfono,ro responsabjouorientar loscontensesitanenpriorizarla

lacabecera

enelpie

.aspginas.: cadaunadepende laue lasetiqucenreferenvos>convoc

aserigua

rn siempr

sentadospcio (Home)ade laspredessocialbledel sitioacinsobrenidosyguanelmismoinformacin

deellas copgina,dif

uetasutilizacia.

catorias>for

lentodasl

re en la p

Pgina13de

or iconos,v,para iraginasdelSesocualquo, Buscadoequhacerrdarmemolugarentodn.

ontar conferenciandoadascoincid

rmulario

aspginas

parte super

80

vera laitiouieror,en

oriadas

uno ladan

del

rior


Pgina14de80

Fechadepublicacin:ocuparunlugarenlapartebajadelapgina. PiedePgina:seubicaren laparte inferiordecadapgina.Apareceren

todaslaspginasdelsitio. Botones: los iconos que representen los botones sern legibles y claros,

estarndotadosdeun textoalternativo y seubicarnenun lugarde fcilacceso.

ElBuscador estarpresenteentodas laspginassiesque lafuncionalidadexisteenelsitio.

1.1.4 Sistemasdenavegacinyorganizacindelaspginas(zoning)Una vez definida la arquitectura de la informacin, la eleccin de los sistemas denavegacin sebasaengeneralenunescenariode "zoning"odivisinen zonasde lapgina,esdecir,cmoseorganizan losdiferenteselementosagrupadosentreellosenlaspginas.Normalmente, antes de abordar la realizacin concreta del modelo de la pgina, lazonificacinpermitirverelguiongrficoparadescribir la interfazdelSitioWeb.EstafasedeldiseodelsitiodarcomoresultadolaorganizacindelainformacinenelSitioWeb,teniendoencuentaque loscontenidoscon funcionessimilaresseagrupanen lamismazonadelapginayqueesnecesariotenerjerarquizadalainformacinyelguingrficoparadescribirlascaractersticas.El resultado de la zonificacin ofrece varios escenarios para comparar grficamentedeterminadasorientacionesoposicionesdecadaunodelosbloquesquecomponenlapgina,quediferirnprincipalmenteensussistemasdenavegacin.Deestemodoserms sencillo decidir si es ms apropiado el uso de unos tipos de men u otros(horizontalesoverticales,porejemplo).LazonificacintambindebetenerencuentalasprcticasdelecturadelosusuariosdeInternet(izquierdaaderechaydearribaaabajo)yqueciertaszonasdelapantallasonestadsticamentems"vistas"queotras,conocidascomozonasmuertas.

GuaAdmASPE


Z

Rec

1.1.5 N

LanavegusuariouEjemplostrmitescumplimporejemExisteunla vez eposibilidestime oprogram


Zonificacino

comendado

Los contpgina.

Tenerenaderech

Laszona

Navegacin

gacinguiaunrecorridos de este t online (

mentacindmplo,cursosnavarianteen forma daddesaltaoportuno,

maypudiend

ao

zoningconej

otenidos con

ncuentalashaydearribasestadstic

nGuiadada,porconopredefinidtipo de na(acciones cdemuchossonline,exdeestetip

de pestaasrdeunaaono estandodovolverso

jemplodedifer

n funciones

sprcticasdbaaabajo).camentem

ntraposicindo.vegacin scomunes dcamposdexmenes,etodenavegs dentro dotraparamo sometidoobresuspas

rentesbloques

s similares s

delecturadsvistas.

na lanaveg

on los quedentro dee informacitc.gacinenlae la mism

modificarlaio as el ussoslasvece

ynavegacinp

seagrupan

delosusuar

gacin libre

e se utilizalas sedes

nenund

quesemua pgina, oinformacinsuario a laesquesean

principalenho

en lamism

iosdeInter

e,consistee

n para la rs), o queeterminado

estrantodaofreciendonperoenea pauta manecesarias

Pgina15de

orizontal

ma zonade

rnet(izquier

en imponer

realizacinrequieren

oorden co

aslasetapaal usuariolordenquearcada por.

80

e la

rda

ral

dela

mo

asao laese el

GuaAdmASPE


Rec

1.1.6 N

Para garcontenid


comendado

Elusuariprimera)

Cada etintroduc

Sedebelospasosistemacomoopintermedconfirma

Se puedcancelar

Navegacin

rantizar ladosquecom

Obligator El texto

concisoy Sedeben

porelse Sedeben

activade

Obligator Si se de

debepo Nodebe

ao

oiodebepod).tapa debecidos.proporcion

os ya realizadepestaapcinelabadia en la qacindelabde avisar dreltrmite

nyaccesibaccesibilidamponenels

rioAccesibide losenlayexplicitopnproporcioervidorsalvonproporcioeunmapad

rioAccesibiefinen pgiderevitareenusarsem

dervolvera

ir acompa

naralosusados y losascondistinandonodelque un texbandono.el periodoe.

bilidadad de losmsitioweb,de

ilidadNivelacesdebe iposibleonarmapasoqueseaeonarenlacesdeimagend

ilidadNivelnas que seelrefrescoaarcadoresp

alpasoante

aada de u

suariosinfoprximospncinvisualprocedimiexto explique

de tiempo

mecanismoseberemost

lAidentificarc

deimagenstrictament

sredundandelservidor

lAAe autorefreautomtico.

pararedirig

eriorparac

un auto g

rmacinvispasos (pordelapesta

ento,habre la prdid

o en el que

s de navegtenerencue

claramente

controladotenecesariotesenformr

esquen per.girautomti

cadaetapa

guardado

sualsobreeejemplo, aaaactiva).queofrece

da de dato

e si no hay

acin entreenta:

e sudestino

osporelclieomatotextop

ridicament

icamentela

Pgina16de

(exceptoen

de los da

elpasoactu travsdeSisepropo

erunapantas y solicite

y actividad

e los distin

oy ser lom

enteenvez

paracada

te, el usua

aspginas.

80

nla

tos

ual,unoneallae la

se

tos

ms

de

rea

ario

GuaAdmASPE


Rec

(Para amComunic


Debeevexpositoopciones

Sedebe Losmec Se debe

controle

comendado

Se proppertenec

Se propsitio.

Cuandodiferente

Se agruproporci

Los enlaadyacen

Sepropolosdelodecontr

Se debezonaact

mpliacin scacinDigit

ao

vitarseprovores o ventsparaquecproporcion

anismosdeemanteneresdeformu

oAccesibilidorcionar icenaunacorcionarn

se proporcestiposdeuparn loionandounaces se distesentresorcionanatosmapasderolesdeformen proporcitivadelosm

obre AccesalparalaA

vocarqueatanas emercontroleesanarinformacenavegacin un ordenlarioyobje

dadNivelAnformacinoleccin.barras de

cione un sibsquedas

s enlacesamaneradstinguirn d.tajosdeteceimagendemulario.onar enlacmapasdeim

sibilidad veGE)

parezcanorgentes, sinaaparicincinsobrelnseutilizarlgico de ttos.

AAAn sobre las

navegacin

istema de.relaciona

desaltarseddel resto d

cladopara letipoclient

ces redundamagendetip

er Fascculo

otrasventann informar.laestructurrndemanetabulacin

relaciones

n para faci

bsqueda

ados, idendichogrupodel texto, a

losenlaceste),controle

antes, en fpocliente.

o de Accesi

nasdelnavantes al us

rageneralderaconsistea travs d

s entre doc

litar la nav

en el sitio,

ntificandoo.as como d

importanteesdeformu

formato tex

ibilidad de

Pgina17de

vegador,cosuario y da

delsitio.ente.e los enlac

cumentos q

vegacin en

se ofrecer

el grupo

de los enlac

es(incluyenularioygrup

xto para ca

esta Gua

80

moarle

ces,

que

n el

rn

y

ces

ndopos

ada

de


Pgina18de80

1.2 LegibilidadLa lecturaenpginaswebnoesequivalentea la lecturaenpapel:elconfortvisual, laorganizacin de la informacin, la presentacin de los contenidos y los modos denavegacindifierensignificativamentedeunmedioaotro.Losestudiossugierenquelamayoradel tiempodenavegacinsededicaaexplorarde formageneral lossitiosendetrimentodelalecturadelcontenidopropiamentedicho.El segundonivelde lectura,enelque la calidaddel textoesdecisiva, slo intervienecuando la informacin buscada ha sido localizada. El usuario debe entender muyrpidamente si el contenido de una pgina le interesa o es la informacin que estbuscando. Para que el usuario pueda deducir sin esfuerzo esta conclusin es muyimportanteelconceptodelegibilidad.La legibilidadserefiereacmountextopuedesercomprendidoe interpretadoporunusuarioyestrelacionadaconlalecturavisual(fuentes,estilos,coloresypictogramaseiconos) y con la organizacin de la informacin y la distribucin jerrquica de loscontenidos.Lalegibilidad,portanto,estrelacionadaconcriteriosdeimagenyaspectooestiloquecontemplanunaseriedeelementosbsicos(logotipo,tipografaogamacromtica),conla necesaria referencia a los estilos ya establecidos para papelera (sealizaciones ypublicaciones), as como los criterios para la estructuracin de las pginas quegaranticenunasimilitudentre laspginasde losdiferentesMinisteriossinmenoscabarlasespecificidadesconsecuenciadesusmbitoscompetenciales.Esmuy importanteasegurarunapercepcineidentificacinvisualrpidae intuitivadelaspginasdelaAdministracinGeneraldelEstadoyreforzarlaexperienciadeusuario,permitiendounaciertafamiliaridadenlanavegacinporloscontenidosyserviciosdelasdiferentespginasdelaAdministracinGeneraldelEstado.Relacionado indirectamente con la nocin de legibilidad podramos considerar elMultilingismo que dado el impacto que tiene en nuestro pas con cinco lenguas, estratadoenunfascculoaparte.

1.2.1 FuentesAunqueelusuariosiempretienelaposibilidaddemodificarlafuentequesemuestraenlos navegadores por defecto, es conveniente seguir una serie de recomendacionesrelativasasuusoenlasdiferentespginasquecomponenelSitioWeb.

GuaAdmASPE


Como notamao,ledosensuaplicasu uso.correspoInstitucio

Rec


orma genestosdebe

npantallasicin(usoeEs import

ondan cononal.

comendado

LautilizagarantizatipografdefuentVerdanaespecialutiliznd

Genevaque apasansserHelvticsulegibArial: nsimplific

Enlorefinferiora1112pquelasfsu redicomportnavegad

Deberansuperiorasociadapiesdep

ao

ral, en loernser londificultadnbotones,tante que,los que

o

acinde tiar una measestndtesmsapra: perteneclmente inddolaenpeq:cuentacoarezcanmrifca:tipografilidadentanace de hecadasquemferenteala10pxelesxelesparafuentesestmensionamtamientodedorqueseunutilizarser a ms dasafuncionpgina,boto

referente asuficientemd.Sepodrnttulos,etctanto lasaparezcan

posde letrejor legibiliseadaspaopiadasconce al grupoicadasparaqueostamaonunagrans amplios

adegranimaospeqelvtica, comejoransulcuerpootsparaeltexunaptimanindicadamiento, auedichoredutilice.pocasfuene dos difenesbiendifeones,etc.

a los tiposmenteclaronutilizardif.),ascomotipografacontempla

ra sin seriflidad de lara facilitarnlassiguieno de fuenta suusoenaos,ofrecnalturadelyms alto

nfluenciahueos.on la quelegibilidad.

tamaodextonormalalegibilidadasentamanque debdimensionam

ntesdistintaerentes y,erenciadas

de letra usvisualmenferentestipodiferentess como loados en e

ao sans sos contenir la lecturantes:es denominportalesweunalegibicuerpodes que lam

istricacon

comparte

letra,nout(aunquesed).Encualqosrelativoemos tenemientopue

asysiempren cualquicomopued

utilizados antecomopposdeletrascoloresdeos coloresel fascculo

serif (sin ridos, puestenpantalla

nadas weweb,puestoilidadaceptloscaracte

mayora de

nalgunosde

caracterst

tilizarunvaerecomienduiercaso,sosparafaciler en cuedevariare

reutilizaruier caso, ddesersuus

Pgina19de

s como aparapoderenfuncin

ependiendoutilizados

o de Imag

remates)pto que esa.Las fami

bsafe fontoque, inclutable.eres,hacienlas tipograf

etractoresp

ticas, aunq

alordepartdaunvalorserecomienitaralusuaenta queen funcin

nconjuntodebern essoparattul

80

suserdedese

gen

arastaslias

ts,uso

ndofas

por

que

idadendaarioel

del

nostarlos,

GuaAdmASPE


Unestiloatributosminsculjustificac

Latecnoformatosatributosde la legatributospasando

Rec


Las fuenpor defeMacinto

odefineelfos de la flas),elespacindeltextlogaCSS("s a los elesdeformatgibilidad, ms (aplicaciporsucolo

comendado

Para coutilizadopartede

Sedebeespecialexcesivasuperen

No se dpuestoqcumplenGua).

Enelcasletras mpermitid

Paradesnegrita

Nousarnicame

Se debelargaspu

ao

ntesutilizadecto en lasosh,disposit

ormato:eltuente (noacioentreto."Cascadingementos HTto,loquepemediante unn de negrior,justificac

onseguir unos deberneldiseo.respetar lamenteeneamente graeltamao

deben utilizquesuelennconlasno

sodecontemaysculas,doenelcasostacar alg.subrayado

enteenloshe evitar lauestoqueo

daseneldis diferentestivosmvile

tipodeletrarmal, negrlneas,ele

StyleSheetTML de unermitesepan estilo puita, etc.) hcin,utilizac

a coherencser comun

a jerarquaelcasodeloandes aplicdelainformzar textos qserincmoormasmnim

enidostextu, puesto qodettulosnelemento

sparadesthipervnculo

utilizacinofreceunal

seode lass plataformes,tablets,e

aofuente,rita, etc.),spaciadoe

t"uHojadena pginaararelcontede definirasta la sepcindemay

cia grficanes para ca

visualde loosttulos.Ncados enmacinprinque parpadodosparalomasdeacce

uales,sedeque dificultdeseccionoenel con

tacarconteos.de cursivaegibilidadm

spginasdmas y sistemetc.).

elcuerpoosu capita

ntre letras,

eEstilosenweb sin uenidodelarse el formparacin enysculas,et

en todo eada categor

osdistintosodebemosinformaciocipal.deen (blinosusuarios,esibilidad(v

ebeevitar lta la lectues,botonesntenido text

nidostextu

a en prrmenor.

ebernestmas de visu

otamaodealizacin (m,elcolory

Cascada)putilizar direapresentaciato del texntre lneasc.

el Sitio Wera de obje

snivelesdesutilizartamnes secund

k) o quedesvanlavermsade

autilizacinura. Sin es,advertenctual, sepu

uales.stos

afos compl

Pgina20de

ardisponibualizacin (

elafuente,maysculaslaalineaci

permiteaplictamentein.Enelcaxto desde so caracter

eb, los estito que for

e informacimaosdeledarias o q

se desplacatencinyelanteene

ndefrasesmbargo, ecias,etc.edeutilizar

debenusa

letos o fra

80

blesPC,

loso

n

carsusasosusres,

ilosme

n,etraque

en,no

esta

enest

r la

rse

ses

GuaAdmASPE


1.2.2 C

Cada eletenerundelconjudiseowLa utilizaaccesibilitransmiticolorno

Rec


Aniveldde justifcaracterquepue

Coloresemento depapeldefiuntototaldwebparacumacin del coidad en elir informacpercibirnc

comendado

En ningello, losmedidalegibilida

Debeexcasodeser posipuedepcontrastsern coresultadeleccin

Serecomcomoevunprraunalectu

Es conve(activo,cdigos"empeza

ao

dealineacificarlo a aesestetipodendificult

una pginanidoclaramde lamismampliresteoolor deberSitio Webin,usuariocorrectame

on caso elcoloresutide loposibad,favorecexistirunconlos textostivo (textorovocarfatteesverlasonvertidosaodelaimpdeloscolomiendanovitaralgunaafoescritoeuraincmoeniente utivisitado), rde color (ar",etc.).

nesrecomambos ladoodejustificatareinterru

a as comomente,quea.Unade laobjetivoese garantizab, ya que soscon limitentedichain

uso de difeilizadosenbledecoloretambinlntrastesufique forma oscuro sotigavisual.Uspginasenaescaladepresindeuores.utilizarmsascombinaenrojosobodayunamlizar un corespetandopor ejempl

mendableajuos, ya queacionesgenumpirlalect

las diferendebeestarasmejoreselusoadecr el cumplisi se utilizatacionesvisnformacin

erentes colel fondoderesclaros.Eaimpresincienteentrnpartedeobre fondoUnapruebanunapantaegrises.Sieunapgina

sdetrescocionesde fbreunfondalaexperielor para lo las convelo, rojo sig

ustareltexten el cas

neraunasetura.

ntes agrupaacordeconherramientuadodelosmiento dea el color csualesbasan.

loresdebee lasdifereEstehecho,ndelaspgreel fondolcontenidoclaro), pue

aprcticapllamonocroempreesacantesdede

oloresdiferfondoypridoazulmarnciadeusuos enlaces enciones penifica "dete

toalaizquiso de lneariedeespa

aciones entnsupesotascon lasscolores.las normacomo nicodasen lap

causar fatientespgina,ademsdginas.yelprime

o).Este conesto que earaevaluaromaenlaqconsejableecidirfinalm

rentesenumerplanorinodarcouario).en funcinertinentes rener" o "p

Pgina21de

ierda,enlugas con pocciosenblan

tre ellos devisualdenquecuenta

s y pautaso medio papercepcin

iga visual. Passernene favorecer

rplano (enntrastedebeel uso inverlacalidadqueloscolocomprobar

mentesobre

napgina,(porejempomoresulta

de su estarelativas aeligro", ver

80

garcosnco

ebetroael

dearadel

Porn lar la

nelerrsodelresrelela

asplo,ado

adolosrde


Pgina22de80

Los colores brillantes (como el rojo, por ejemplo) se deben reservarnicamenteparaatraerycaptarlaatencin.

Noserecomiendautilizarfondoscontexturaomotivosenmosaico,puestoquedificultanengranmedidalalegibilidaddeltexto.

Para garantizar la accesibilidad no use el color slo para dar acceso ainformacin,esrecomendableproporcionarsuficientescontrastesdecoloryevitar cambios bruscos de brillo as como evitar tambin elementosparpadeantesocondesplazamientodetextos.

ColordelTexto Colordelfondoaevitar ColordelfondoautilizarBlanco Amarillo Magenta,Rojo,Verde,AzulAmarillo Blanco,Cian Azul,(Rojo),(Magenta)Cian Verde,Amarillo Azul,(Blanco),(Rojo)Verde Cian,Azul Amarillo,Blanco,(Rojo),(Magenta)

Magenta Rojo Azul,Blanco,(Cian),(Verde)Rojo Magenta,Azul Blanco,Amarillo,Cian,VerdeAzul Rojo Banco,(Amarillo),(Verde)

ColorComplementarioLossiguientescomentariosserefierena lapginaprincipal(Portada,Home,Inicio,Index, Introduccin) del sitio web de los Ministerios. Tanto las Secretaras deEstado o Secretaras Generales, como los organismos e instituciones adscritos odependientes, tienen que considerarlos en trabajos a futuro, aunque sin que eneste momento se deba generar costes o promover rediseos basados en estasrecomendaciones.ParatodosaquellosdiseosgrficosdepginawebdeMinisteriosqueprecisendeun color complementario a los propios de la imagen institucional del propioministerio, tal como se describe en estemismomanual, se utilizar el conocidocomoAzulEuropa,esdecirelcolordefondodelabanderadelaUninEuropea.Sepuedeutilizarestecolorensusdistintasgamasytonalidades,detalformaque,sinabandonarelmismo, sepuedadar aldiseo la riqueza y visibilidadqueen cadamomentoseprecise.

GuaAdmASPE


Todo(sobutiliz

PMS

Azul

HTML

RGB(r,

B)NorC)Nor


os los fondbre fondo dzndosepa

ModeloRGB

rojo

Reflexblue

00

,g,b)B (0,

malizadoconmalizadocon

ao

dos de pgde color),raellolosd

odecolorBaprox.

verde az

0 51

000FF

,0,255)

rango[025rango[010

ina se harnegro, rojodescritosen

Hexade

zul

1 153

Coo

55](byte)00](cien)

n en blanco, y las tonnlapartede

ecimal

cia

0033

Azul

ordenadasde

CMYK(c,m

HSV(h,s,v

co. Los texnalidades delaimagen

Modelo

an magen

399 100%

ecolor

m,y,k)C

)

xtos podrnde gris queinstituciona

decolorCMY

nta amarillo

80%

(100,1

(240,

Pgina23de

n ir en blane se precisal.

YK

o negro

0%

100,0,0)

100%,100%)

80

ncoen,

0%

)

GuaAdmASPE


Rec

1.2.3 P

Los iconocomunes

Lospictode maneindependconcepto

Algunaspuedenp


comendado

UtilizarImagenMinister

Para curecomieactualmevayahacmisma.

Pictograma

osypictogrsentreellosogramassoera simplifdientes deos.

disposicionposeerunp

ao

oel Azul EuInstitucionarios.alquier otrnda que, eentevigentciaunaesta

aseiconosramas,debs.ndibujoscoficada y qucualquier

nes o recopictograma

uropa comoal,en losd

ro nivel deen caso dete,seutiliceandarizacin

sbernser in

onvencionaue contriblengua par

Ejemplos

mendacionparticular.

o color comdiseosde

e la Admie plantearseenestasrecndelaimag

ntuitivosyc

alizadosqueuyen a larticular por

sdepictogram

es propias

mplementalaportada

nistracine un redisecomendaciogen,ynoha

contarcon

erepresentcomprens

rque no re

a

de servici

ario a los pde los sitio

General deeo del maones,detalaciaunadiv

caractersti

tanunobjein del copresentan

os pblicos

Pgina24de

propios deoswebde

el Estado,aterial grfformaquevergenciade

icasdedise

tooconcepontenido. Spalabras s

s electrnic

80

lalos

seficoeseela

eo

ptoSonino

cos

GuaAdmASPE


Losiconolainterfacomoela

Rec


ossonelemaz.Puedenaccesoala

Obligator Los orga

una cierutilizarloAccesibi

(png

(png

comendado

Cuandoinducira

Los pictcorrespo

ao

mentosvisuasermuytHomeop

rioAccesibianismos qurta normao al pie dlidad.

A

g, gif, svg, e

g, gif, svg, e

oel icono o

aerror,portogramas eondientete

Ejemplo

alesqueayilesparaacpginadein

Ejemp

ilidadNivelue han preso recomene sus pg

eps)

eps)

o pictogramloquedebee iconos siextoalternat

odepictograma

udanalusuccederadetnicio,enlace

plosdeiconos

lAAsentado unndacin quginas, como

AA

(png, gif,

(png, gif,

ma no seaercontarcempre debtivo.

a

uarioaorieterminadasealbuscado

na declaracue tiene suo por ejem

A

svg, eps)

svg, eps)

lo suficientconunaetiqben incluir

ntarseyasfuncionesor,cierresd

in de conu propio icmplo la De

(png,

(png,

temente inquetaexplcla etiquet

Pgina25de

moverseptransversaldesesin,e

nformidad cono, debereclaracin

AAA

gif, svg, ep

gif, svg, ep

ntuitivo puecita.a ALT con

80

porles,tc.

conrnde

ps)

ps)

ede

el

GuaAdmASPE


1.2.4 T

Laorganrecorrido

Hayqueindeseadmismocoes muyalternativ

ElttulodHTML,el

Rec


Ttulos,jeraizacindeostpicosdeintentarnododelabandontenidonotil multipvos.delapginalttuloesel

comendado

Si se trhttps://ministerfacilitargeneraleAdministnombre

Sisetranocoincutilizarlahttps://w

Noobstaautomtdosdom

Encuanthttphttphttp

ao

arquayagla informaceconsultadocaerenladonodelaodeberepelicar los pu

aeselttuloltextoquea

orata de unsede.xxxxxrio u organsu identifices que setracin Gededominiotadeorgancidacon laadenominawww.organ

ante,parauticamentedminios:orgatoalautilizs://www.se

://www.sed

s://sede.eje

grupacinciny la jerdelosdistinredundancnavegacinetirseendiuntos de ac

odelcontenapareceen

7.Ejemplo

na sede exx.gob.es,nismo. (Recacin, lase establezneral del Eodetercernnismosmuydenominacacindelornismo.gob.

unamayordesdeunaUnismo.gob.

zacinde:ede.ejemplo

de.ejemplo

emplo.gob.e

delainforrarquizacinntosperfilesciadelosconporpartedferenteslugcceso a est

nidoeditorilabarrade

dettulodep

lectrnica,dondexxxxeal Decretosedes elec

zcan paraEstado y snivel.gob.esyconocidoscindelporrganismocoesnormalizacURLaotra,esysede.o

o.gob.es.gob.eses

rmacinnde loscosdeusuarioontenidosqdelosusuagaresdelSitos conteni

aldelapgelaventana

gina

se nombrxxxxsesusto 1671/200ctrnicas sela image

su direccins).spor loscirtal,paranoon.gob.es

cinsiemprparalocuarganismo.g

ntenidosseo.quepuedetrios;enotritioWeb.Poidos ofrecie

ginaHTML.delnavega

rar siguientituirpore09. Artculoeguirn lasen institucn electrni

udadanosyombrar las.Enesteca

esepodraalhabrquob.es.

Pgina26de

ebasanen

tenerelefeaspalabrasorelcontraendo camin

Enunapgador.

ndo la regelnombreo 17.2. Padisposicion

cional deica incluir

ysiempreqsedesepueasopodras

redireccionueregistrar

80

los

ctos,elarionos

gina

gla:delaranesla

el

queedeser:

narlos

GuaAdmASPE


Seconsidconfianzanormalizmuestrenyaquelamotores

Rec

1.2.5 A

Las inforquelose


httpdepende

deraconvena a los cadade lasnen lospriaindexacindebsqued

comendado

Cada pcontenid

Esimpormostradpalabras

Los ttulregistrad

Cuandoviceverscondiciomenosin

Cuandomismam.domindichaveURLhab

Agrupacin

rmacionesdelementosh

ao

://sede.eje

erdelaco

nienteutilizciudadanos,sedeselectimeros lugandelasURda.

ogina del sdodelapgrtantequedos. Se recos,ydesesenos deberndosenlosFmediantea, se puedonessondifndicndoloexistaunaURL precenio.gob.es)ersinmviitual,yase

ndelainfode lamismaheterogneo

mplo.gob.e

nfiguracin

zarlapalab en seguntrnicasy,pares lassedLsesunad

itio debe sgina,nodebelttulodeomienda contacaractern ser lo sufFavoritos).

un enlacede avisar querentes,abeneltittleversindeledida por,redirigienil,enel caseadominio

ormacinpanaturalezossedisting

sndelosserv

rasede,endo lugar,porltimo,eselectrnelasestrat

ser identificbiendosupecadapginomponer eres.ficientemen

e se remitaue se salebriendolapdelenlace.sitiowebp"m." (Ejedoa laURsodequeeo.mobi;m

parafacilitaadebenaggan.

vidores.

enprimerlupara moparaque l

nicasalbuscegiasqueu

cada con uerarlostreinatengareleste ttulo

nte precisos

a desde uo entra enginaenun

paradisposmplo: wwLen laqueexista comoovil.domini

arsucompgruparse,de

ugar,paradstrar unaosmotorescarpor lapusanlosalgo

un ttulo dntacaractelacinconlcon un m

s (sern los

na sede an la sede,nanuevape

itivosmviww.dominioesetenga ioURLdifero;domini

prensinemodoqu

Pgina27de

darunamayimagen m

sdebsquepalabrasedoritmosde

escriptivores.oscontenidximo de s

s que qued

un portadado queestaaopor

lesseusaro.gob.es semplementarenciadadeio/movil;e

ese facilite

80

yormsedade,los

del

dosseis

den

l olasrlo

laeraadae laetc.

eel

GuaAdmASPE


Estaclascolores,numeradunavisi

Rec


ificacinpuetc.). Cuandaspermitensinttica

comendado

Lostextositio serergonomnecesidael20%re

Los textpor defipalabrasalusuari

Lascontenunapsinambi

Esaconspuespuetamao

Paragarde los tformacodescribirinformacidentificcontenidutilizaru

Laergon Lapr Las

mejo

Loseconnom

ao

uedeserfsindo hay me reagruparyorganizad

oosparaaporn cortosma,mostraadesyofrecestante.osdeconteinicin, msclavemediosobrelantracciones,apalabraofrigedades,sejablenoeedegeneradelaventarantizar laatulos y lasompletader el propciones dean,describdodeuna funlenguajenomadelasresentacin

listas serorarlalegibelementosdel mismobre,etc.).

ica(ubicacims de tresr visualmendadelasmi

oyarlanavey explcito

ar slo la incerenlaces

enidos (arts largos. Ddianteelusonaturalezadacrnimos,rase.Esacotantocomoescribirlaslrproblemana.accesibilidad listas;mareabreviatursito y la

tipo simenyclasificforma simpsencillo.slistasrespndelaslistan espaciosbilidad.delalistasetipo de pa

nenlaps tems, elnte las inforsmas.

egacinylaos. En estenformacinsparams

culos, instrDestacar laodelosestdelosconteabreviaturaonsejableeoseaposiblneasdetexasdepresen

dsedebenrcar correctrasyacrniinteraccin

milar; propcancadadople, lgica,

petarlosprasserhomsas y ligera

erncoherelabra (por

gina)oasouso de lisrmaciones y

acomprensie caso, unesencialpinformaci

rucciones, ts informactilos,permienidosdelaasylosguiolusodete.xtoentodantacincua

utilizarcontamente lamos;dart entre losporcionarocumento)eordenadae

rincipiossigogneaenamente se

entesensuejemplo, u

ociadaalforstas con viyproporcio

indeloscn principioara cubrirnoeldeta

textosoficiciones impoteinformarapgina.onesnoserminosclar

laanchuraandoelusua

ncoherencs comillas;tuloatodos cuadros;metadatosenlaspgine intuitiva

guientes:todoelsitioparadas de

redaccinun infinitivo

Pgina28de

rmato(estiletas o lisonaalusua

contenidosbsico esel 80%delleparatra

ales,etc.) sortantes yrrpidamen

debenutiliros,sencillo

delapantaariocambie

cia la jerarqespecificar

osloscuadrorganizar(datos q

nas;escribiry,porltim

o.el texto pa

ycomenzaro, imperati

80

los,stasario

dellalas

atar

sonlasnte

zarosy

allaeel

uar laros;lasquerelmo,

ara

rnvo,


Pgina29de80

Loscontenidoscomunesparacadatemsecuentanenlaintroduccindelalista.

La separacin de los elementos de la lista se puede hacer de dosmaneras:sincomanipuntoal finaldecada temal finalobien,conunpuntoycomaalfinaldecadatemyunpuntoalfinal.

1.2.6 Laestructuradelaspginas.4El Sitio Web podr organizarse siguiendo una estructura clsica de portal, segnaconsejanlasmejoresprcticasyelusohabitual.Elinterfazgrficodeusuariocontendrdistintas zonas de funcionalidad bien definidas, que se detallan a continuacin. (VerApartado1.1SistemasdeNavegacin).EnaquellosPortalesenlosque,porladiversidadyvolumendeloscontenidosyserviciosincluidosasserequiera,sedistinguiraefectosdeestructuraentreunapginainicialolanzaderaylaspginasdenavegacinyresultados.Lapginade inicioes laquesecorrespondeconeldominioprincipaldelportal.Debedisearsebajoelcriteriodeserelprimerpuntodecontactodelusuarioconelportal,por lo que adems de contener las informaciones (noticias, novedades) que en cadamomento laorganizacindeseatrasladar,debetambinfacilitardeformaordenadaelmayorgradodeinformacintantosobrelaofertadeservicioseinformacindisponiblesenlatotalidaddelportal,comosobrelosaspectosdeusodelmismo(accesibilidad,guadenavegacin,versionesmultilinges,...).

4 Sobre los contenidos de las pginas ver el fascculo Aspectos de Comunicacin de esta Gua deComunicacinDigital.


Pgina30de80

Diagramadeestructurapginadeinicio

Sisetratadeunasedeelectrnicaseharnotarclaramenteeneldiseode lapginaprincipal. (Art. 5 RD 1671/2009 1. Las direcciones electrnicas de la AdministracinGeneraldelEstadoydelosorganismospblicosvinculadosodependientesdelamismaquetenganlacondicindesedeselectrnicasdebernhacerloconstardeformavisibleeinequvoca.)

Ejemplodesedeelectrnica


Pgina31de80

Ejemplodesedeelectrnica

Lacabecera identificaelportaly laorganizacina laquepertenece. Incluye la imageninstitucional de la AdministracinGeneral del Estado y el nombre de la organizacintitularde lawebo ladenominacindeldominio y responde aundiseo grficoquecontribuyeaunificarelaspectodetodaslaspginasdelportal.Lacabeceradelapginadeinicioolanzaderaincluirlossiguienteselementos:

- Elementosgrficosidentificativosdelasbanderaseuropeayespaola.- Logotipodeimageninstitucional.- Mendeopcindeversionesenlenguas.- Accesoabuzndecontacto.- Mapadelweb.- Buscador(enaquellosportalesquedispongandelmismo).

Estructuradelacabecerapginainicio


Pgina32de80

Obligatoriopginainicio Cabecera:Imageninstitucional(VerFascculo2:Imageninstitucional,deesta

Gua de Comunicacin Digital); Multilingismo; Contacto; Mapa web;Buscador

La identificacinde lapginaenelcasodequeseaunasedeelectrnicaenlostrminosdelRD1671/2009.

Mapaweb:es la representacin grficao textualdeun SitioWeb. Esunapginadondese listandemanera jerrquica laspginasquecomponenunsitio, generalmente representadas como enlaces que permiten el accesorpidoalasmismas.

Informacin sobre la accesibilidad del portal (ver ANEXO II) e icono decumplimientodenormativaWAI.

Laspginasdeiniciocontendrnunazonareservadaparalacolocacindeunelementogrficoyladenominacindelportal.Habrunazonareservadapara la insercindebannerso iconosenlazadosconpginasrelativasauntemadeinterstemporalocampaasinstitucionales(puedenserpginasdelpropioportaloexternas).La pgina de inicio tambin tendr una zona en la que se incluyan las noticias onovedadesms relevantes, como por ejemplo titulares y entradillas de noticias, convnculos a los documentos correspondientes, listados de documentos relevantes,informacinsobrenovedadesocambiosenloscontenidosdeunaseccin.Serecogerasmismolaofertadeserviciosycontenidosenunazonaquedebecumpliruna funcin de orientacin al usuario, facilitndole informacin sobre los contenidosquemsprobablementeseandesu inters.En laspginasdeentrada lazonaprincipalde contenidosmostraralusuariouna listacon lasopcionesdenavegacindeprimernivelpermitindoleconoceryelegirentrelosdistintosserviciosycontenidos.Tambinpueden incluirunmencomplementariosituadoal final tantode laspginasde iniciocomode lasdenavegacin,oresultados,enelqueaparecern lassiguientesopciones:

- Guadenavegacin.- Avisolegal(verANEXOI).

GuaAdmASPE


Rec

Laspginunade laopcionesseridntelusuaripgina.La cabecexclusivaportalyenlengu


comendado

Lapgin Bann

Notic

Servi

Aspe

nasdenaveasopcioness)quetieneticaaladeio.A contin

cerade lasamenteenladenominas.

ao

opginainiadeiniciopnersoiconocias,novediciosdelsitiectosdeusoegacinosesofrecidasedisponiblelapginadnuacin se

pginasdeque incluirnacindelm

Estru

ciopodrconteosdeinformadesioosedeo(guadeneccinsonen lapginesenelentderesultadoincluyen lo

enavegacinunelemmismoyqu

ucturadelacab

ener:macionesoc

avegacin,aquellasqunade inicioornodelaos,quepresosdiagrama

nde resulmentogrficeno incluir

becerapginas

campaasi

versionesmue,traslaeo, lepresenprimeraopsentaelresasdeestruc

tados sedcodeconnornelmen

navegacin

nstituciona

multilinges

eleccinportan lasaltepcin.Suessultadofinacturadeam

iferencianotacincondeopcin

Pgina33de

les.

s.relusuarioernativas(sutructurasualbuscadopmbos tipos

de la anternelobjetondeversion

80

deubeleporde

riordelnes


Pgina34de80

Lazonadeopcionesdenavegacinoresultados(pginasdenavegacin/resultados),esunazonareservadaa laaparicinde lassubopcionesdenavegacinsubordinadasa laopcin elegida por el usuario en su navegacin o a la publicacin del documentoresultado(findelanavegacin).Elmen principal de contexto (en pginas de navegacin/resultado), versin 1 de lafiguraanterior,eselrecursodenavegacinprincipaldelportalyestarorganizadoporniveles,enformaderbol,segnlaarquitecturanormalizada.Alpulsarsobreunaopcindeprimernivel,mostrarunsubmencon lasopcionesdesegundonivelcorrespondientesa laseleccinefectuada.Siexistenopcionesde tercernivel, se mostrarn al pulsar la opcin de segundo nivel que las contenga, y assucesivamente.Cuandoelusuario realiceuna seleccindenivel superiorque sirvadeentrada un submen, el navegador mostrar los contenidos correspondientes a laprimerade lasopcionesdelsubmen,obienunapginadeentradaconunresumenolista de sugerencias del contenido incluido dentro del submen, si la cantidad ocomplejidaddelmismolojustifican.Enloscasosenquelaextensindelosnivelesdenavegacinasloaconseje,enarasdeunamejorusabilidad,elmenpasara serde contextoy limitadoa lasopcionesdelentornodenavegacinelegidoporelusuario.Enestoscasos,elmenprincipalpasaraocuparlazonaidentificadacomomenprincipal2,versin2delasfigurasadjuntas.Enaquellosportalesenlosqueresultetcnicamenteposible,yasseavaloradodesdeelpuntodevistadelausabilidad,sepodrnincluirenlazonadeopciones/resultadossubzonasdenoticias/novedades,hotlinksoenlacesdemayorinters.


Pgina35de80

Ejemplodeinclusindezonasdeenlacesyopciones

Diagramadeestructurapginadenavegacin

GuaAdmASPE

1.3


3 Conside

Enestosinternetresolucicapacidanmeromaneraplataform

Hay queutilizanddinmica

Lasconsde los nlenguajes

Re

1.3.1 D

Aunqueque esaWebMdesdecu(capacida

VerelpuInstitucioElectrni8801340


eraciones

ltimosaoy,portanton e interfdesdistintade estos dexponenci

mastecnole disear lao lenguajesashayquetideracionesavegadoress,lasnorma

ecomendad

Usode linterfaz

Disearindepencasode

Dispositivo

laspginaspgina sea

vilse refieualquier lugad,tamaounto1.4Oonal y elica:http://a0016700398

ao

Tcnicasoshanidoao,deaccedfaces difereaspararepdispositivosal en estogicashanidas webs pasestndarytenerencuesms impos, las difereasdedesar

olenguajesedeusuariolaswebscodientesposlosdisposit

osmvileswebpueda

a navegablereaunaWgar, independelapantaPTIMIZAR Lapartado ddministraci8&langPae=

apareciendoderaloscoentes de inresentarp del tipo sos ltimosdoaparecieara que soyhojasdeentalaacceortantesatentes resolurolloylaste

estndar, inparaaccedon lenguajesiblededetivosmvile

anservisuae cmodamWeben laqndientemenalla).LAWEBMdedicado aonelectrones

omultituddntenidosdenteraccinginaswebsmartphonetiempos.

endotambioporten disestilo.Siseesibilidadyenerencuuciones deecnologas.

dependienteralainforesyherramlosnavegaes.

alizadasdesmente desdequeelusuantedeltipo

VILdeesta movilidadica.gob.es/

dedispositielaWeb.Ccon el usydeinteraes, tablets,Asociadosndiferentestintos nave introducelausabilidaentaresidirla pantalla

tesde losmrmacin.mientasdemadores.Este

sdedisposite dicho disriopuedeaodedisposi

te fascculod del Porta?_nfpb=tru

voscapaceCadaunocuuario y, enccionarconetc., esta cada u

esnavegadegadores yen tecnologad.rnen laspa de los dis

mtodosut

maneraqueecriteriopu

tivosmvilespositivo. Eaccedera litivoqueut

o,elFasccual de la Ae&_pageLa

Pgina36de

sdeaccedeuentaconun general,nelusuariocreciendouna de esores.y dispositivasparawe

peculiaridadspositivos,

ilizadospor

esean lomuedevariar

esnosignifl conceptoa informactiliceparae

ulode ImagAdministracabel=P12015

80

eraunade.Elde

stas

vos,ebs

deslos

r la

msen

ficadeinello

genin51


Pgina37de80

En general se deben desarrollar sitios web especficos para dispositivos mviles coninformacin y con servicios yaplicacioneswebespecficas.Eldiseodeun sitiodebecontemplarestetipodeplataformasparacrearunsitioaccesibleyusablequeseadaptedinmicamentea lasnecesidadesdelusuario,a lascapacidadesdeldispositivoya lascondiciones del entorno. Para ello, es necesaria una infraestructura global basada enestndares que permitan la interoperabilidad y aprovechar las capacidades de lamovilidadydelaweb2.0.NosiempreessencillodisearunSitioWebque,ademsdesoportar losnavegadoresestndares de mercado, sea adecuado para visualizarse en un dispositivo mvil. Enalgunasocasionesesmejor,mssencilloymseficientehacerunaaplicacinespecficaparalasplataformasmscomunesdedispositivosmvilesqueintentaradaptarunSitioWebcomplejoparaserutilizadoencualquierdispositivo.

Cuandodiseamosparadispositivosmvilesdebemostenerencuenta:

- Eltamaodelapantalla.- Laslimitacionesdememoria.- Laausenciaderatn,yensu lugarunuso intensivodeteclado,opantallas

tctiles.- Lautilizacindeunaredinalmbricayelcostedelanavegacin.

Por tanto hay que tener en cuenta las diferencias que hay entre las plataformas ytecnologasms frecuentementeempleadaspor losusuariospara acceder a los sitiosWeb:

- Diferentessistemasoperativos(Android35,3%,SymbianOS31%,iOS16,2%,BlackBerryOS14,6%,WindowsPhone3,1%,etc.)

- Diferentes navegadores: Firefox, Chrome, Internet Explorer, Opera, Safari,etc.


Pgina38de80

- Diferentes resoluciones y tamao: Pantallas panormicas, pantallassobremesa,porttiles,tablet,smartphone,etc.

- Diferentesmtodosde interaccine introduccindedatos:tecladoyratn,tecladotelefnico,tecladoenpantallatctil,etc.

Recomendado Desarrollar sitios web especficos para dispositivos mviles: resolucin y

tamao Poner a disposicin la versin Web Mvil para los principales sistemas

operativosynavegadores

1.3.2 NavegadoresLas pginas deben ser desarrolladas y probadas para una visualizacin ptima conindependenciadelaplataforma(Windows,MacoLinux)ydelnavegadorutilizado.Enlaactualidadexistenmuchosnavegadoresdiferentes.Segnlasestadsticas,losmsutilizadosporlosusuariossonInternetExplorer,Firefox,ChromeySafari,locualimplicaquetodaslaspginasdeberanservisiblesencualquieradeellos,ascomo,enlamedidade loposible, enotrosnavegadoresmenos conocidospero tambin conun colectivoimportantedeusuarios.Esto implica comprobar el correcto funcionamiento de las hojas de estilo (CSS) y delcdigoHTMLengeneral.

Penetracinenelmercadodediferentesnavegadores

GuaAdmASPE


EnelcasInternettodos elgarantizaHTML,XH

Re


Penetraci

sodedispoExplorer,Alos), y porar la visuaHTML,CSS,

ecomendad

Los sitiomercadocompatiChrome.hayapla

Aseguradesdeellastable

Obtenersimplific

Esaconsnavegad(CSS).

Para grecomen

ao

nenelmercad

ositivosmvAndroid/Chr ello, la calizacin enRSS,JavaSc

oos debeno:InternetEbles con o.Optimizaranteadospar que el col30%superets).r una verscadayconusejablecomdoresparaa

arantizarndacioness

doespaolded

viles, losnahrome,IOScorrecta vin estos otrcript,etc.

ser compaExploreryMotros naveglosdiseos

araaossucontenido furiordelapa

sin del siunainterfazmprobar lacasegurarel

la accesibobrelainte

diferentesnave

avegadores/Safaricosualizacinros disposi

atibles conMozillaFirefgadores desparaestoscesivos.undamentalantalla(esto

tio web pquefacilitecorrectaviscorrectofu

bilidad seerfazgrfico

egadoresendis

son losmiomonativosen equipotivos que

n los princfoxyestudel mercadosnavegado

l de la portoesnecesa

para los diesuvisualizsualizacinuncionamie

debenodeusuario

spositivosmv

smos (WinsyFirefoxcos fijos musoportan lo

cipales navdiarlaoporto: Safari; Ooresenlosp

tada est orioparaapa

ispositivoszacindepginasntodelash

tener eno.

Pgina39de

viles

dowsPhoncompatibleultiplataforos estnda

vegadorestunidaddeOpera; Gooproyectosq

o es accesiarecerbien

mviles m

endiferenhojasdeest

cuenta

80

e/enmares

delserogleque

bleen

ms

testilo

las

GuaAdmASPE


VenEnelcasmismosibasededatos acincohere

Algunasp

Rec


Losnavede loponavegadJavaScripreservanDelphipdeOperMicrosof

Los navetravs doriginalporejem

Encuantde sectdistinguemsparestecashablade

tanasmltsode los siitiosimultdatos.Laectualizadosenciasalmoprecaucione

comendado

Lamultivmltiple"avanzad

ao

egadoresdeosible, laspdores porpt, Flash, en para los dparaAndroiaSoftware;ft.egadores cde un servdelsitio,enmplo:Operatoa losnavtor hace denporsucrecidaposiboderestituerestitucin

iplesitiosdinmneamente)expiracinden otra

ostrarlasdisesbsicasp

oventananos ventanados"parao

eltipodereginasHTMlo tanto,etc. Los nadispositivosd;Safaripa;NetFrontd

on restitucvidor intermntreestetipaMinideOpvegadoresdifcil hacecapacidaddbleal formaucinfielonaligerada.

icos, lasvepuedeconde la sesinventana, estintasventpuedenmiti

odebeserimas es unobteneruna

estitucinfMLascomosoportanvegadoress de gamaaraIOS;SafdeAccessS

in ligera rmedio resppodenaveperaSoftwaparadisposer recomeneproporcioatode lapencasode

entanasmnduciraladnenunadeetc., son ftanas.igarestosd

mpedidapocomporta

mayorefic

ielintentano loscontenlos estndms avanzalta como

fariMobileystems;Mo

reformateaponsable dgadorespoareoThundsitivosmvndaciones.onarunavipantalladeleofrecerun

ltiples (varidesincronizae lasventafactores qu

desacuerdos

orelsitio.Lmiento nocienciaycom

npreservar,nidosenriqares XHTMzados en epor ejempdeApple; obileIntern

n las pginde aligerarodemoscitaderhawkdeviles,elniveEstos nav

sualizacinordenadornaversins

iasventanaacinentrenas, tenerue pueden

s:

Laaperturaormal demodidad.

Pgina40de

,enlameduecidos.EsML, CSS, Rste campoplo: ChromeOperaMobetExplorer

nas del sitioel conten

arporejemBitstream.eldemaduvegadoresdepginasr.Sehablasimplificada

asabiertaseventanasyencuentadar lugar

deliberadalos usuar

80

idatosRSS,see ybilede

o aidoplo

rezse

s loen

ase

delylalosr a

derios

GuaAdmASPE


PestTodos lotener vamismainEstopue

Rec

Loscasos

FuncLasfuncidistintodLos sitios(especialdenaveg"anteriorusuario pprocediminterrum


Cualquienavegaddurantelos datoaccionesdeerrorupsestdel navusuario.

taasmltios navegadoarios sitiosnstanciadeldeprovoca

comendado

Queels Quesea

datosm

ssontotalm

ciones"antiones"antedeunnavegs que ofrecmentelossgacinesper"y"siguienpueda volvmientosenmpidaporel

ao

era que sedor, se actlasesin.E

os de basesquenosorexplcito(dt totalmenegador pue

plesores actualdiferentesnavegadorrdesincron

oitiopermitaacapazdegsrecientes

menteanlo

terior"y"sierior"y"siggadoraotrocen contensitiosqueoecficoparante"delnaver atrs enlneaen lousodeesto

ea la ventualizar laEneltransc cuando enaplicabledatosnodintedesaconeden bloqu

les ofreceno distintasr.nizacionese

atenerabiegarantizar ls.

ogosalosd

iguiente"guiente"delo,ydebensnidos que rofrecenconnavegarenvegadorden cualquierosque la cuosbotones.

tana, al hapgina co

cursodeunstos no ess,serefresisponibles,nsejadopueuear su ap

la navegas pginas d

entretodas

ertasvariaslasincrona

eventanas

lnavegadorserreservadequieren rentenidosdinntrevariasebenestarsmomento,umplimenta.

acer clic eon los ltimnaentradastn ya discarlapgetc.).Elusoes lasopciopertura y

cin por pde un mism

ellas,ypor

desuspgiaentreellas

mltiples.

rpuedentedasparausoecorridos dnmicos)prsecuenciassiempredis salvo en eacinde lo

en "Actualimos datosdedatosssponibles oinaysedarodeventanonesdepapor tanto,

pestaas, lomo sitio ab

elloesreco

nas.s,actualiz

eneruncomoprivadodde navegaciroporcionardepginasponibles,eel casodeos formular

Pgina41de

zar" (F5)almacenadiserequiero si se lanzrunmensnastipo"poarametrizacconfundir

o que permiertas en u

omendable:

ndosecon

mportamienerefuerzo.in complenunsistes.Losbotonsdecir,quedeterminadiospodra

80

deldosrenzansajeopinal

miteuna

:

los

nto

ejosmaneseeldosser

GuaAdmASPE


Rec

FramUnode ldireccin

Enelcasque la cdificultanimpresi

Rec

1.3.3 R

Otro prodistintasdiferente


comendado

Para gautomt

Como cocaracteranterior(Ctrl+N

mes(marcolosprincipinURL.sodelaspomprensinnlaindexacndedocum

comendado

Larecom

Resolucinoblema tecresoluciones.Lasltim

ao

ogarantizarticamenteyomplementsticas del" (volver)p),etc.

os)osde laW

ginasquecn de la estcindepgmentos,com

omendacinm

dePantalnolgico alesdepanta

masestadst

la accesiyseinformato de la nanavegadorparavolver;

Webesque

contienenftructura deinasporlosmplicanlag

mshabitua

lal que se enalla,existieticasreporta

ibilidad nardelaapavegacin ppara el co;Apertura

cadapgin

rames(marl sitio seasmotoresdrabacinde

alesnousa

nfrenta elendoen laaanlosdatos

o se reerturadenpor el sitio,ontrol de ladenuevas

naest rep

rcos),estarms compldebsquedaefavoritos,

armarcos(f

diseadoractualidadsquesemu

frescarnuevasventa los usuaria interfaz: Bventanasd

resentadap

reglaseromleja.Adema,hacenmetc.

frames).

web vienemultituddeuestranaco

Pgina42de

las pginanas.os utilizanBotn "pgdelnavegad

porunan

mpe,haciens, los framscompleja

dado poreresolucionontinuacin

80

nas

lasginador

nica

ndomesala

lasnesn:

GuaAdmASPE


P

Laapariccada veincremen

Por ellodesplazatotalmenvdeos,eLosdatossernecescroll,sistemas

LabarrabarradesuperareParagaralapresenPorltimpormedhorizontaellonuesquedebe


Porcentajedere

cindemoez se tienntndoseelo, ser nemientohornte legibleetc.sdemuestresariocuaddebiendoadenavegacdedesplazdesplazamentresveceantizarlaacntacin.moydeformiodedisposaloverticastrodiseoeremosusa

ao

esolucionesde

nitorescadnda a vislusoderesecesario corizontalpary que no s

ranquelardrarlaspgasegurar tacinnosevamientoho

mientovertieslaalturaccesibilidad

masimilarasitivosmvalmente,asdebeserflrporcentaj

epantalla(fuen

davezmssualizar loolucionespomprobarraaccederase vea diez

esolucinpinasalammbinqueveanperturorizontaldecalpodrudelapanta,serconv

alcasodelvilesylaposcomopoduido,esdecesenlugar

nte:http://www

potentesys contenidpanormicas

la visibilida la informazmada la e

predominanisma,hacie seaposiblrbadosporeebeevitarseutilizarseenlla.enienteade

osnavegadsibilidadqudercambiarcirqueseadedimensi

w.netmarketsh

demayoredos en resfrentealadad directacinms iesttica de

ntesiguesieendoquenoeel redimeelcambio.esistemticncasonece

emsutiliza

dores,seteeofrecendrentreellasadapteacuionesfijas.

hare.com,ener

esdimensioesolucionesasestndara sin tenimportantela pgina,

endo1024xoseanecesensionamie

camente.Siesarioyas

arunidades

ndrencuedemostrarlsentodomalquierreso

Pgina43de

ro,2012)

oneshaceqs ms alt.er que u,questasttulos, fot

x768yporesarioelusoentoyque

nembargoserposible

relativasp

entaelaccelainformacmomento.Polucin,por

80

quetas,

sarseatos,

ellodelos

,lasin

ara

esoinPorrlo

GuaAdmASPE


Tambinpantallaadaptarsrecomien

Rec


debemosdeunmvise a estendahacerlo

comendado

LaspgidedespdeunapfuncinescalabipresentaCuandosistemaslaventan

Laescalnavegaccomplejobarra deembargonecesari

Para gapresenta

ao

considerariltiendeashecho. Enoverticalme

onasdeberlazamientopginawebdel tamalidadde lasacin de laseadopteesdenavegana.abilidadnoinocupeno ya que lae desplazao la barraio(hastatrearantizar lacin.

r que, a dsermsalalugar de

ente.

Ejemplos

nestaropthorizontal

b se refiereo de laspginasenas pginasestaopcinacinnose

o se recominunreaga jerarquamiento hode despla

esveceslaala accesib

diferencia drgada,pordisponer l

sdelayout

timizadaspaenresoluc

ea sucapacventana dntre800en el casontotaloparveanpertu

iendaparagrandeysitde la inforrizontal deazamientoalturadelailidad util

de una panloqueellalos elemen

arasuvisuacinde102cidaddeadel navegad600y1248 de redimercialmente,rbadospor

los sitioseioscuyocormacin poebe evitarsvertical ppantalla).izar unida

ntalla de sayoutdelntos horizo

alizacinsin4768.Ladaptar loscdor. Es t81024,paensionamiedebeasegrelcambio

enque losontenido inodra resulte sistemtodr utiliza

ades relati

Pgina44de

sobremesa,apginadeontalmente

nusarlabaaescalabilidcontenidosil permitiraraadaptarento de esturarsequedetamao

regmenesformativosar daada.icamente,arse en ca

ivas para

80

laebese

arradadenla

r latas.losde

deseaLasinaso

la

GuaAdmASPE


Elporcen20481lossitiosdedichacriterios:

Rec

ResoParalaswcaracterpantalla.

Lagamaalgunosdde mosttambindiversasSiunsitiaconseja


ntajedeus1536)estaquepuedespantallas,:

comendado

Visibilidaqueutili

Legibilidcolumna

Laesttietc.)debconjuntoventanalaspgin

Parasitienpantaextensibpantallacontenid

olucionespwebsobredsticaspropdeposibledispositivosrar el contlapresenci(teclado,raioofrecealbleoptimiz

ao

suariosde gaumentandevariarsign,esrecome

oaddirecta:zarlabarraad: la inforasenfunciicadelapbeserbueno debe condelnavega

nas.osen losqallasdemubleen laqu.Seacualsdodelasp

paralosdispdispositivospiasde losd

sresolucionsdegamaatenido vertaono,depatn,lpizlgunaspgizarlaspgin

grandespadoconstantificativameendablecom

la informacadedesplazrmacindendelaresoginacuandnaparalosdnservarse yadordeben

ueestdemuyaltaresoueel tamasealaresoluginasocupa

positivosmsmviles,ladispositivos

nesseextiealta,y,adeicalmentependiendodptico,pantnasdedicanasparauna

antallasdetemente.Contedependmprobarpa

cinesencizamientoveebe resultarolucin.domuestradistintostamy los sucn restituir c

mostradoqolucin,esaode laspucindelaarconven

vilesavariedaddscomplica

endedesdems,algunu horizontadelosaparatallatctil,edasespecfaresolucin

alta resoluomo lapresdiendodelaaraaltasre

ialdebeveertical.r legiblean

todossusemaosdepesivos rediconveniente

quenecesitaaconsejableginas seapantallaotientemente

detamaoslaproblem

e128a640osterminaalmente. Hatos,deheretc.)ficamenteande2002

cin (1600sentacineascaracteresoluciones

rsedeuna

te cambios

elementospantalla.Laimensionamemente lad

anpresentaeadoptaruajustea latamaodeeelespacio

sdeinterfazticadepr

0pxeles,olesofrecenay que tenrramientasd

adispositivo250pxeles

Pgina45de

1200haenpantallasticastcnilossiguien

vez sin ten

sdeancho

(ttulos,fotalineacinmientos dedisposicin

arsuspginunaestructuanchuradelaventanadisponible

zjuntoconesentacin

superiores laposibilidner en cuedenavegac

osmviles,.

80

stadecastes

ner

de

tos,del lade

nasurae la,el.

lasen

endadntain

es


Pgina46de80

1.Gamaderesolucionesdisponiblesendispositivosmviles

1.3.4 LenguajesyNormasdeDesarrolloEn este apartado vamos a enumerar los lenguajes de programacinms utilizados yrecomendados para el desarrollo web de los sitios de la Administracin General delEstado,basandonuestras recomendaciones en lasquedescribeelW3C con el findegarantizarlaaccesibilidadweb.Lastecnologasmsutilizadasparacrearsitioswebson:

HTML(HyperTextMarkupLanguage):Sehaconvertidoenelestndarweb.Los navegadores son los encargados de leer este lenguaje y traducir loselementos que representan, mostrndolos directamente en pantalla. Sufuncionamientosebasaenelusodeetiquetasocdigos,quepermitendotardeunasdeterminadascaractersticasypropiedadesalostextosyelementosqueengloban.LaversinactualrecomendadaesHTML5siemprequenoseincumplalanormativadeaccesibilidad.


Pgina47de80

Tambin sedebeevitarelusodeuneditorHTMLautomticoyprohibirelusode lasetiquetaspropietariasde losnavegadores.Paraeldesarrollodepginasespecficamentededicadasa losdispositivosmviles,el lenguajeautilizar ser el XHTMLMobile Profile, (especializacin del lenguaje XHTMLdiseado para incorporar elementos del contexto de uso de dispositivosmviles)yXHTMLBasic.

Ventajas Inconvenientes Sencilloquepermitedescribirhipertex

to. Textopresentadodeformaestructurada

yagradable. Nonecesitadegrandesconocimientos

cuandosecuentaconuneditordepginasweboWYSIWYG.

Archivospequeos. Desplieguerpido. Lenguajedefcilaprendizaje. Loadmitentodoslosexploradores.

Lenguajeesttico. Lainterpretacindecadanavegador

puedeserdiferente. Guardamuchasetiquetasquepue

denconvertirseenbasuraydificultanlacorreccin.

Eldiseoesmslento. Lasetiquetassonmuylimitadas.

XML,versin2(ExtensibleMarkupLanguage):Setratadeun'metalenguaje'

(lenguaje de lenguajes)ms flexible que dota a las pginas de unamayorfuncionalidad. XML se utiliza para definir la estructura del documento ydescribirotros lenguajes,esdecir,sepuedencrearsublenguajes,comoelXHTML (un documento HMTL adaptado a la estructura XML) o el RSS(Lenguaje basado en etiquetas utilizado junto con HTML dando lugar aXHTML).

Ventajas Inconvenientes Lasetiquetasempleadasnosonfijas(sefijanen

elDTDenelXMLschema. Separacompletamentecontenidoypresenta

cin,porloquesehacemssencillomodificarlaspginas.

Susintaxisesformalyprecisa,porloqueesmshomogneamenteinterpretadaporlosdiferentesnavegadores.

Resultamuytilparaelintercambiodeinformacinentreaplicaciones.

SehadedefinirpreviamenteelDTDelXMLschemaparapoderllevaracabolavalidacindelXMLcontral.


Pgina48de80

CSS(CascadingStyleSheets):Para lacreacindehojasdeestilocapacesdeproporcionar fuentes,colores,etc.,aldiseodelSitioWeb.Seutilizanparagarantizar la coherencia en el estilo y mantener la uniformidad grfica yfuncionalentrelaspginasdeunsitio.Estoseaplicatambinaldesarrollodepginas para los dispositivosmviles.Un promedio de 100 KB por pgina(conexclusinde laportada)esactualmenteunestndarparaelpesootamaode lasmismas (HTML, JavaScript,CSS, imgenes y texto). Sedebelograrunequilibrioentrelapresentacinyelpeso,tendiendoafavorecerlahojadeestilosendetrimentode lasetiquetas,manteniendo la legibilidadycomprensindeloscontenidos.

Paragarantizarlaaccesibilidad: ReemplazarloselementosquenoseandetextoconestilosCSS. Crearpginasvlidas. Favorecerelusodehojasdeestilopara lapresentacinfrentealusode

etiquetas. Mantener la legibilidad y la comprensinde los contenidos cuando los

estilosestndesactivados. JSP (Java Server Pages): Tecnologa que permite incluir cdigo Java en

pginasweb.EldenominadocontenedorJSP (queserauncomponentedelservidorweb)eselencargadodetomarlapgina,sustituirelcdigoJavaquecontieneporelresultadodesuejecucin,yenviarlaalcliente.As,sepuedendisear fcilmentepginasconpartes fijasypartesvariables.Elcdigo JSPpuede ser incrustado en cdigoHTMLPara su funcionamiento senecesitatener instalado un servidor Tomcat o algn otro que proporcione soporteJava.

Ventajas Inconvenientes Ejecucinrpidadelservlets. Crearpginasdelladodelservidor. Multiplataforma. Cdigobienestructurado. IntegridadconlosmdulosdeJava. LapartedinmicaestescritaenJava. Permitelautilizacindeservlets Cdigoseparadodelalgicadelprograma. Laspginassoncompiladasenlaprimerapeticin. Permitesepararlapartedinmicadelaestticaenlaspgi

nasweb. Cdigo:sepuedeincrustarcdigoJava. Directivas:permitecontrolarparmetrosdelservlet.

Complejidaddeaprendizaje.


Pgina49de80

Ventajas Inconvenientes Acciones:permitealterarelflujonormaldeejecucinde

unapgina.

PHPHypertextPreprocessor:Esunlenguajedeprogramacininterpretado,diseadooriginalmenteparalacreacindepginaswebdinmicas.Esusadoprincipalmente en interpretacin del lado del servidor (serversidescripting)peroactualmentepuedeserutilizadodesdeunainterfazdelneade comandos o en la creacin de otros tipos de programas incluyendoaplicaciones con interfaz grfica usando las bibliotecas Qt o GTK+, porejemplo.Parasu funcionamientonecesita tener instaladoApacheo IISconlaslibrerasdePHP.

Ventajas Inconvenientes Muyfcildeaprender. Secaracterizaporserunlenguajemuy

rpido. Soportaenciertamedidalaorientacin

aobjeto.Clasesyherencia. Esunlenguajemultiplataforma:Linux,

Windows,entreotros. Capacidaddeconexinconlamayora

delosmanejadoresdebasededatos:MysSQL,PostgreSQL,Oracle,MSSQLServer,entreotras.

Capacidaddeexpandirsupotencialutilizandomdulos.

Poseedocumentacinensupginaoficiallacualincluyedescripcinyejemplosdecadaunadesusfunciones.

Eslibre,porloquesepresentacomounaalternativadefcilaccesoparatodosycumpleconelprincipiodeneutralidadtecnolgicaydeadaptabilidaddelaley11.

Incluyegrancantidaddefunciones. Norequieredefinicindetiposdevaria

blesnimanejodetalladodelbajonivel.

Senecesitainstalarunservidorweb. Todoeltrabajolorealizaelservidory

nodelegaalcliente.Portantopuedesermsineficienteamedidaquelassolicitudesaumentendenmero.

LalegibilidaddelcdigopuedeverseafectadaalmezclarsentenciasHTMLyPHP.

Laprogramacinorientadaaobjetosesanmuydeficienteparaaplicacionesgrandes.

Dificultalamodularizacin. Dificultalaorganizacinporcapasdela

aplicacin.


Pgina50de80

JavaScript:Seutilizaprincipalmenteparacrearpginaswebdinmicasqueincorporan efectos (como texto que aparece y desaparece, animaciones,accionesqueseactivanalpulsarbotonesyventanasconmensajesdeavisoalusuario,etc.).ElproblemadeJavaScriptresideenqueunagranmayoradelos usuarios suelen tener desactivada esta opcin y, por ello, no esconvenientehacerusodeestatecnologaenexcesoynohacerdepender lavisualizacinde la informacinde intersen laejecucinde losmismos.Sifinalmente hay que desarrollar en javascript se debe hacer no intrusivo yaccesible.

Ventajas Inconvenientes Lenguajedescriptingseguroyfiable. Losscripttienencapacidadeslimitadas,

porrazonesdeseguridad. ElcdigoJavaScriptseejecutaenel

cliente.

Cdigovisibleporcualquierusuario. Elcdigodebedescargarsecompleta

mente. Puedeponerenriesgolaseguridaddel

sitio,conelactualproblemallamadoXSS(significaeninglsCrossSiteScriptingrenombradoaXSSporsusimilitudconlashojasdeestiloCSS).

Adems,existen lenguajesdeprogramacinmscomplejosy,porende,mspotentestambinusualesparaeldesarrollodesitios,destacan:

- ASP:nonecesitasercompiladoparaejecutarse.Existenvarioslenguajesquesepuedenutilizarpara crearpginasASP. Losmsutilizados sonVBScript,PerlandJScript.

- ASP.NET:es laevolucindeASP,siendocreadoparaaliviar las limitacionesdeASP.

- PYTHON: lenguajesencilloconsideradomultiparadigmayaqueadmitetodotipodeestilosdeprogramacin.

- RUBY:lenguajemultiparadigmabasadoenPythonyPerl.- OtrastecnologascomoAjax,Java,Flash,Flex,RSSoAtomentreotros.

Para obtener ms informacin acerca de estas tecnologas y lenguajes, consultar elAnexoIIdeestedocumento.


Pgina51de80

1.3.5 Scripts,pluginsyappletsLosScriptseninternetsepuedenclasificarenguionesdelladodelclienteydelladodelservidor. Losdel ladodel servidor yahan sidoexplicadosenprrafos anteriores (JSP,ASP,PHP,CGI,etc.)LosScriptsdelladodelcliente(fundamentalmenteJavaScript,VBScript)debenincluireltag, incluyendoelatributo typeconel tipoMIME,enelcdigoHTML.Tienencomoobjetivo,por logeneral,comunicarseconelservidorWebdemaneraasncrona,enelsentidodequelosdatosadicionalessesolicitanalservidorysecarganensegundoplanosininterferirconlavisualizacinnielcomportamientodelapgina.LosScriptsdelladodelclienteseejecutanenelcliente,esdecir,enelnavegadordelosusuariosmientras semantiene la comunicacin asncrona conel servidoren segundoplano. De esta forma es posible realizar cambios sobre las pginas sin necesidad derecargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en lasaplicaciones.Suelen producir problemas de accesibilidad de los sitios Web y dificultades en laportabilidad debido a las diferentes implementaciones, pudiendo incluso llegar a noestarsuficientementesoportadosporalgunosnavegadores.

Lospluginssonprogramasquehayque instalar juntoalnavegadorparapoder visualizar contenidos determinados. Los ms extendidos son FlashPlayer (SWF Flash), Acrobat Reader (PDF), QuickTime, Windows MediaPlayeryRealPlayer(au

Documents

1-Guia de Comunicacion Digital Para La AGE- Aspectos Generales _14!02!2013_ (1)