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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
deComunicaciinistracinGenECTOSGENERAL
1.1.1 N
LanaveglasseccioLostipos Nav
sehdeloEsuquieconsalm
Rec
NavLavpara
La fdesp
Elusbarrenlade lrelie
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
O
Rec
Nav
supe
Existenm
Rec
inDigitalparaneraldelEstadoLES
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,
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
deComunicaciinistracinGenECTOSGENERAL
Rec
1.1.3 O
AdemsayudaaWebsee
inDigitalparaneraldelEstadoLES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
deComunicaciinistracinGenECTOSGENERAL
OtroselemapartadoportadaoWeb,Conotra coordpresenteecadapantfotogrficlaspgina
Rec
inDigitalparaneraldelEstadoLES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
deComunicaciinistracinGenECTOSGENERAL
Z
Rec
1.1.5 N
LanavegusuariouEjemplostrmitescumplimporejemExisteunla vez eposibilidestime oprogram
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Rec
1.1.6 N
Para garcontenid
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Rec
(Para amComunic
inDigitalparaneraldelEstadoLES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
deComunicaciinistracinGenECTOSGENERAL
Como notamao,ledosensuaplicasu uso.correspoInstitucio
Rec
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Unestiloatributosminsculjustificac
Latecnoformatosatributosde la legatributospasando
Rec
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
1.2.2 C
Cada eletenerundelconjudiseowLa utilizaaccesibilitransmiticolorno
Rec
inDigitalparaneraldelEstadoLES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
deComunicaciinistracinGenECTOSGENERAL
Todo(sobutiliz
PMS
Azul
HTML
RGB(r,
B)NorC)Nor
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Rec
1.2.3 P
Los iconocomunes
Lospictode maneindependconcepto
Algunaspuedenp
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Losiconolainterfacomoela
Rec
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
1.2.4 T
Laorganrecorrido
Hayqueindeseadmismocoes muyalternativ
ElttulodHTML,el
Rec
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Seconsidconfianzanormalizmuestrenyaquelamotores
Rec
1.2.5 A
Las inforquelose
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Estaclascolores,numeradunavisi
Rec
inDigitalparaneraldelEstadoLES
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,
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
Pgina30de80
Diagramadeestructurapginadeinicio
Sisetratadeunasedeelectrnicaseharnotarclaramenteeneldiseode lapginaprincipal. (Art. 5 RD 1671/2009 1. Las direcciones electrnicas de la AdministracinGeneraldelEstadoydelosorganismospblicosvinculadosodependientesdelamismaquetenganlacondicindesedeselectrnicasdebernhacerloconstardeformavisibleeinequvoca.)
Ejemplodesedeelectrnica
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
deComunicaciinistracinGenECTOSGENERAL
Rec
Laspginunade laopcionesseridntelusuaripgina.La cabecexclusivaportalyenlengu
inDigitalparaneraldelEstadoLES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
Pgina35de80
Ejemplodeinclusindezonasdeenlacesyopciones
Diagramadeestructurapginadenavegacin
GuaAdmASPE
1.3
deComunicaciinistracinGenECTOSGENERAL
3 Conside
Enestosinternetresolucicapacidanmeromaneraplataform
Hay queutilizanddinmica
Lasconsde los nlenguajes
Re
1.3.1 D
Aunqueque esaWebMdesdecu(capacida
VerelpuInstitucioElectrni8801340
inDigitalparaneraldelEstadoLES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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
deComunicaciinistracinGenECTOSGENERAL
EnelcasInternettodos elgarantizaHTML,XH
Re
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
VenEnelcasmismosibasededatos acincohere
Algunasp
Rec
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
PestTodos lotener vamismainEstopue
Rec
Loscasos
FuncLasfuncidistintodLos sitios(especialdenaveg"anteriorusuario pprocediminterrum
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Rec
FramUnode ldireccin
Enelcasque la cdificultanimpresi
Rec
1.3.3 R
Otro prodistintasdiferente
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
P
Laapariccada veincremen
Por ellodesplazatotalmenvdeos,eLosdatossernecescroll,sistemas
LabarrabarradesuperareParagaralapresenPorltimpormedhorizontaellonuesquedebe
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Tambinpantallaadaptarsrecomien
Rec
inDigitalparaneraldelEstadoLES
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
deComunicaciinistracinGenECTOSGENERAL
Elporcen20481lossitiosdedichacriterios:
Rec
ResoParalaswcaracterpantalla.
Lagamaalgunosdde mosttambindiversasSiunsitiaconseja
inDigitalparaneraldelEstadoLES
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
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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.
GuadeComunicacinDigitalparaAdministracinGeneraldelEstadoASPECTOSGENERALES
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