Guía estándar y Línea gráfica 

Sitios web del Gobierno 
 
Dirección General de Gobierno Electrónico 
 

Resumen 
● Introducción  ○ 1.6.1 Estilos para la 
● Objetivo  incorporación de Redes 
● Ventajas  Sociales 
● Principales actividades a  ○ 1.6.2 Plataformas más 
desarrollar en las plataformas  utilizadas 
● Usabilidad  ● Capítulo 2 - Estructura 
● Capítulo 1 - Estándares web  ○ 2.1 Definición de 
○ 1.1 ¿Qué es un Estándar  estructura del sitio 
Web?  ○ 2.2 Secciones 
○ 1.2 ¿Por qué hay que  ○ 2.3 Nivel 
Seguir los Estándares?  ○ 2.4 Características de los 
○ 1.3 ¿Cuáles son los  Sistemas de Navegación 
Estándares Propuestos  ○ 2.5 Grilla constructiva 
para Sitios Web del  ○ 2.6 Elementos de 
Gobierno?  navegación 
○ 1.4 ¿Cómo se mide y  ● Capítulo 3 - Línea visual 
verifica su cumplimiento?  ○ 3.1 Diseño y línea visual 
○ 1.5.1 Peso de las Páginas  ○ 3.2 Diseño de interfaces 
○ 1.5.2 Normas de  ○ 3.3 Prototipos 
Multimedia 
 
○ 1.5.3 Uso de Enlaces 

   

1 
 

Introducción 
El  gobierno  ha  elaborado  una  guía  de  estilos  que  resume  las  distintas  normas  e 
indica  los  requisitos  a  través  de  los  cuales  se  ofrece  información  teórica  y  práctica 
que  busca  la  optimización  de  los  sitios  web,  estandarizar la estructura de contenido, 
datos  comunes  y  proyectar  la  misma  imagen  a  nivel  visual  y  de  normas  de  diseño 
gráfico,  así  como  una  serie  de  recomendaciones  para  facilitar  el  acceso  a  la 
información  y  cumplir  los  estándares  de  diseño  web,  dirigidos a apoyar eficazmente 
a  los  equipos  y  a  las  personas  del  sector  público  que  tienen  a  cargo  la  planificación, 
construcción  y modificación de los sitios web del Gobierno. También, se desarrolla en 
esta  guía  el  proyecto  de  web  del  Portal  Único  de  Gobierno,  un  proyecto  del  MITIC, 
que  buscar  integrar  en  un  solo  portal  información  del  estado  paraguayo,  sus 
instituciones y los servicios que éstas ofrecen. 

   

 
2 
 

Objetivo 
La  guía  estándar  para  páginas  web  del  gobierno,  resulta  fundamental  para  el 
desarrollo  y  mejoramiento  de  la  accesibilidad  y  organización  de  la  información 
ofrecida en ella. 

Un  sitio  web  basado  en  estándares,  entre  otras  cosas,  facilitará  su  acceso  por  parte 
de  cualquier  usuario,  tendrá  un  mejor  rendimiento  al  contar  con  un  código  más 
limpio,  posibilitará  un  mantenimiento  más  sencillo  y  mejorará  la  búsqueda  de  sus 
contenidos, gracias a un mayor aporte semántico. 

El  objeto  de  la  presente guía, es el de ofrecer a los desarrolladores una visión general 

de  los  principales  estándares  existentes  en  el  entorno  web,  analizando  las 
características,  el  funcionamiento  de  cada  uno  de  ellos  y  las  ventajas que se derivan 
de su aplicación. 

Una  de  las  primeras  metas  que  se  debe  cumplir,  consiste  en  tener  presencia  en 
Internet,  estandarizando  la  estructura  de  contenido  y  datos  comunes  de  los  sitios 
web  de  instituciones  del  Estado,  proyectando  la  misma  imagen  a  nivel  visual  y  de 
normas de diseño gráfico. 

Transmitir  siempre  un  mismo  lenguaje  visual,  siguiendo  estrictamente  las  normas 
que  se  encuentran  en  la  presente  guía,  para  así ofrecer una comunicación clara que 
permita  cumplir  con  la  idea  de  tener  presencia,  a  través  de  una  propuesta  de 
contenido que ofrece un valor agregado a quienes ingresan al sitio. 

A  través  del  Portal  Único  de  Gobierno,  proyecto  correspondiente  del  MITIC  que 
busca 
​integrar  en  un  solo  portal,  Información  del  Estado  paraguayo,  sus  instituciones  y  los 
servicios  que éstas ofrecen, facilitando al ciudadano en sus consultas y dudas, de una 
manera rápida y sencilla. 

   

 
3 
 

Ventajas 
● Código  más  sencillo:  ​Un  código  limpio,  válido,  modular  y 
semánticamente  correcto,  facilita  su  comprensión  y  reutilización por parte de 
cualquier desarrollador, ayudando asimismo a que las aplicaciones puedan ser 
convertidos de forma sencilla a otro formato. 

● Compatibilidad:  ​Los  Estándares  Web  garantizan  la  compatibilidad  del 

código  independientemente  del  navegador  o  plataforma  empleada.  Además, 
se  consigue  una  mayor  estabilidad  del  sitio  web  de  cara  al  futuro  y  a  la 
aparición de nuevas herramientas. 

● Mejora  de  la  accesibilidad:  ​Los  Estándares  Web,  ayudan  a  que  el 
contenido  de  un  sitio  web  sea  accesible  para  el  mayor  número  de  usuarios, 
independientemente  del  idioma,  localización  geográfica,  cultura,  limitación, 
técnica,  física,  psíquica  o  sensorial  de  éstos,  cumpliéndose  las  directrices y sin 
que se sacrifique el aspecto visual o el rendimiento del mismo. 

● Mejor  adaptación  al  dispositivo  final:  ​El  empleo  de  Estándares 

permite  que  la  información  sea  interpretada  por  diferentes  tipos  de 
dispositivo  (navegadores  visuales  y  sólo  textos,  lectores  de  pantalla, 
dispositivos móviles, etc.).   

 
4 
 

Principales actividades a desarrollar en las 

plataformas 
● Presencia:  ​En  esta  fase  se  provee  básicamente  información  del  Servicio  al 
ciudadano. 

● Interacción:  Considera  comunicaciones  simples  entre  el  Servicio  y  el 

ciudadano y la incorporación de esquemas de búsqueda básicos. 

● Transacción:  Incluye  provisión  de  transacciones  electrónicas al ciudadano 

por  parte  del  Servicio,  en  forma  alternativa  a  la  atención  presencial  en  las 
dependencias del órgano. 

● Comunicaciones:  ​Corresponde  al  estado  de  presencia  y  consiste  en que 

el  sitio  ofrezca  la  posibilidad  de  que  los  usuarios  envíen  correos  electrónicos 
desde  formularios  del  sitio,  conectando  los  formularios  con  algún  sistema  de 
gestión, para hacer seguimiento a las respuestas que se envíen a los usuarios. 
Cabe  destacar  una  de  las  principales  intenciones  del  Gobierno  es  impulsar  el 
contacto  directo  con  la  ciudadanía  utilizando  todos  los  canales  de 
comunicación  disponibles,  la  disponibilidad  de  acceso  a  la  información 
pública  mediante  canales  digitales  y  medios  sociales  se  presenta  como  una 
herramienta  prioritaria  para  contribuir  a  fortalecer la transparencia e informar 
a  la  ciudadanía  respecto  de  procedimientos,  contenidos  y  fundamentos  del 
ejercicio de la función pública. 

● Trámites:  Corresponde  al  estado  de  interacción  y  consiste  en  que  el  sitio o 
aplicación  ofrezca  la  posibilidad  de  que  los  usuarios  puedan  obtener 
información y realizar trámites del servicio a través de la plataforma. 
Dado  lo  anterior,  los  Sitios  Web  de  las  instituciones  públicas  deben  tener 
metas  muy  concretas  a  desarrollar  en  sus  planes  de  trabajo  anuales  y  esto 
debe  estar  expresado  en  el  presupuesto  de  la  institución,  de  tal  manera  que 
cuenten  con  los  recursos  necesarios  para  llevarlos  adelante  y  darle 
sustentabilidad a la vida del proyecto. 

   

 
5 
 

Usabilidad 
Uno  de  los  objetivos  más  importantes  que  persigue  todo  sitio  web  y  aplicación  es 
transformarse  en  un  autoservicio  de  información  e  interacción,  que  requiera  de  la 
menor  explicación  posible  para  que  los  usuarios  que  accedan  al  mismo,  puedan 
encontrar  y  obtener  la  información  que  buscan  y  también,  sean  capaces  de 
completar las tareas que se les proponen desde el espacio digital. 

Las pruebas tradicionales de Usabilidad son: 

● Prueba  Inicial​:  ​para  ver  cómo  funciona  la  organización  de  contenidos  y 
elementos iniciales de diseño (botones, interfaces). 

● Prueba  de  Boceto  Web​:  ​para  ver  si  se  entiende  la  navegación,  si  se 
pueden  cumplir  tareas  y  si  el  usuario  entiende  todos  los  elementos  que  se  le 
ofrecen. 
En  dichas  pruebas,  el  objetivo  era  determinar  durante  el  desarrollo  del  Sitio 
Web  o  aplicación  y  en  forma  previa  al  desarrollo  del  mismo,  si  las  interfaces y 
los  elementos  de  las  plataforma  son  comprendidos  por  los usuarios, con el fin 
de  que  se  pudieran  hacer  las  correcciones  que  fueran  necesarias  en  forma 
previa. 
Adicionalmente,  se  puede  consultar  el  "Checklist  de  Usabilidad",  mediante  el 
cual  se  ofrecen  treinta  criterios  para  asegurar  esta  característica  de  los  sitios 
web,  abordando  desde  temas  de  Identidad  Corporativa,  hasta 
Retroalimentación  (Feedback),  para  que  el  administrador  del  proyecto  pueda 
evaluar la calidad de experiencia de uso que ofrece a los visitantes. 

   

 
6 
 

 
 
 
Capítulo 1 
Estándares web 
 

 
 

   

 
7 
 

1.1 ¿Qué es un Estándar Web? 

Un  estándar  puede definirse como un conjunto de reglas normalizadas que incitan a 
cumplir por todo producto, proceso o servicio, con el fin de garantizar la 
compatibilidad entre los distintos elementos que lo utilicen. 

Para  que  este  sistema  funcione,  es  necesario  que  el  computador  que  contiene  la 
información  (servidor)  ofrezca  dichos  contenidos  mediante  tecnologías  conocidas  y 
que  cumplan  con  ciertas  reglas  o  estándares,  para  que  quienes  acceden  a  ellas 
(clientes  o  usuarios)  mediante  diferentes  tipos  de  software,  puedan  entender  los 
elementos de información que se les entregan. 

En  este  sentido,  los  estándares  juegan  un  papel  clave  ya  que  es  la  forma  en  que 
ambas  partes  logren  intercambiar  información  y,  más  importante  aún,  permite  que 
otros  autores  lleguen  a  ofrecer  nuevas  funcionalidades  que  puedan  agregarse  a  las 
anteriores  sin  mayores  dificultades.  Adicionalmente,  los  estándares  facilitan  que  la 
oferta  de  contenidos  y  funcionalidades  pueda  ser  utilizada  desde  diferentes 
plataformas  computacionales  (sistemas  operativos  y  software),  sin  que  se  requiera 
obligatoriamente  que  el  usuario  tenga  una  en  particular  para  acceder  a  dicha 
información. 

1.2 ¿Por qué hay que Seguir los Estándares? 

Uno  de  los  problemas  principales  que existía para el intercambio de documentación 
hasta  antes  de  la  aparición  de  la  web,  era  el  formato  de  los  documentos,  debido  a 
que  las  plataformas  computacionales  (sistemas  operativos,  software)  no  eran 
compatibles entre sí. 

El  HTML  permitió  resolver  ese  problema,  al  crear  un  estándar  que  fue  similar  para 
todas  ellas  y  que  por  lo  tanto,  no  tenía  requerimientos  específicos  para  cada una de 
las  plataformas,  sino  que los mismos para todas ellas. Esta solución habilitada por las 
tecnologías  web,  constituyó  entonces,  uno  de  sus  haberes  principales,  y  por  ello,  es 
que el W3C la incorporó dentro de su propia misión como organización. 

En este sentido, se indicó que su objetivo global es aumentar el potencial de la web y 
para  ello,  realiza  acciones  mediante  las  cuales  se  aseguran  que  las  tecnologías 
relacionadas  a  la  web  sean  compatibles  entre  ellas  y  así  permitir  que  el  hardware  y 

 
8 
 

 
software  usado  para  acceder  a  los  Sitios  Web,  trabaje  en  conjunto.  A  esta 
meta  la  denominan  “interoperabilidad  web”  y  para  conseguirla  es  necesario  que  los 
estándares sean abiertos y públicos. 

Este  mismo objetivo sería incorporado por el Gobierno de Paraguay en su normativa, 
donde  se  estaría  indicando  que  los  sitios  web  “deben  ser  accesibles  por  diferentes 
navegadores”,  en  un  claro  llamado  a  la  compatibilidad  con  las  distintas  plataformas 
computacionales. 

   

 
9 
 

1.3 ¿Cuáles son los Estándares Propuestos para 

Sitios Web del Gobierno? 
De  acuerdo con lo que se ha mencionado, a continuación se presenta una propuesta 
inicial de los estándares más importantes: 

● De la interoperabilidad Web:  
Plantea  la  obligación  de  que  los  documentos  electrónicos  que  se  generen en 
los  órganos  de  la  Administración  del  Estado,  cumplan  con  estándares 
mundiales  que  les  permitan  ser  utilizados  en  diferentes  plataformas.  Utilizar 
XML  para  los  documentos  y  UTF-8  como  conjunto  para  la  codificación  de 
caracteres.  También  está  permitida  la  utilización  de  otros  tipos  de  datos semi 
estructurados  en  formatos  abiertos  basados  en  Open  Data  (archivos  con 
formato CSV). 

● De las páginas Web:  

Deben  cumplir  los  estándares  fijados  en  cuanto  a  su  código  de  despliegue 
que debe ser HTML o XML y validado ante el W3C. Para asegurar que el código 
cumpla  con  los  estándares  señalados,  el  respectivo  órgano  de  la 
Administración  del  Estado  deberá,  por  sí,  o  a  través  de  un  tercero  autorizado 
por  éste,  validar  el  HTML  y  las  hojas  de  estilo  a  través  de  las  herramientas 
provistas por la W3C. 

1.4 ¿Cómo se mide y verifica su cumplimiento? 

Los  estándares  deben  ofrecer  la  capacidad  de  que  su  cumplimiento  pueda  ser 
medido,  con  el  fin  de  que  se  logre  establecer  si  sus  características  han  sido  bien 
utilizadas.  En  el  caso  de  los  estándares  de  Internet,  es  posible  verificar  su 
cumplimiento  a  través  de  aplicaciones  que  funcionan  mediante  tecnología  web,  lo 
que hace mucho más simple la revisión. 

Para  ello,  se  cuenta  con  un  grupo  de  herramientas  que  son  proporcionadas  por  la 
W3C,  las  cuales  permiten  hacer  mediciones  instantáneas  acerca  del  cumplimiento 
de  los  estándares  establecidos  por  el  organismo.  Entre dichas herramientas, las más 
relevantes  y  que  están  disponibles  de  manera  gratuita  a  través  del  web,  son  las 
siguientes: 

 
10 
 

● Disponibilidad  de  Dominio  “.gov.py”  y  “.py”:  ​permite  revisar  si 

el  sitio  web  del  organismo  ha  sido  inscrito  en  el  servidor  de  dominios  de 
Gobierno  (NIC).  Es  importante  considerar  que  para  que  se  pueda  utilizar  esta 
herramienta,  la  consulta  debe  realizarse  desde  un  computador  ubicado 
dentro de la red de Gobierno. 
La  Validación  de  los  dominios  de  Gobierno  se  realiza  en: 
http://www.nic.py/ 

● Verificación  de  HTML:  permite  revisar  el cumplimiento del estándar de 

la  versión  de  HTML  o  XHTML  que  se  haya  elegido.  La  herramienta compara el 
código de la página web, que se revisa contra la norma correspondiente y da a 
conocer  cuáles  son  las  infracciones  que  se  han cometido -en caso de existir- y 
además, ofrece información acerca de cómo resolver el problema. 
La Validación de HTML se realiza en: ​http://validator.w3.org/ 

● Verificación  de  Enlaces  Rotos:  ​permite  revisar  que  no  haya  enlaces 
rotos  o  imágenes  perdidas  en  el  sitio  web,  la  herramienta  entrega  un  listado 
de  los  problemas  detectados  para  que  el  encargado  del  sitio  web  realice  las 
correcciones correspondientes. 
La  Validación  de  enlaces  rotos  se  realiza  en: 
http://validator.w3.org/checklink 

● Verificación  de  CSS:  ​permite  revisar  el  cumplimiento  de  la  norma  que 
indica  que  el  contenido  debe  estar  separado  de  la  presentación.  La 
herramienta  compara  el  código  de  la  hoja  de  estilo  con  la  norma 
correspondiente  y  da  a  conocer  cuáles  de  los  estilos  no  la  cumplen  e  indica 
cómo resolver el problema. 
La Validación de CSS se realiza en: h
​ ttp://jigsaw.w3.org/cssvalidator/ 

   

 
11 
 

Normas técnicas 
1.5.1 Tamaño y velocidad de carga de las Páginas 
Los  Sitios  Web  deben  tener  un  peso  máximo  permitido  por  página  que  no  supere 
una  cantidad  razonable  de  kilobytes  (kb)  que  impidan  su  visualización.  En  este 
sentido,  lo  razonable  dependerá  directamente  del  tipo  de  sitio  que  se  esté 
desarrollando y de la conexión con la que cuente la mayor parte de los usuarios. 

Si  se  trata  de  un  sitio  dedicado  a  usuarios  de  regiones  extremas  que  tienen  una 
conexión  muy  lenta,  50  kb  sera  un  tamaño  considerable  respecto  de  si  se  compara 
eso con usuarios que se conecten en una ciudad del centro del país. 
Es  necesario  preocuparse  de  que  el  tamaño  de  las  páginas  siempre  tienda  a  bajar y 
no a aumentar. 

Las  recomendaciones  internacionales  al  respecto  indican  que  un  usuario  no 
esperará más de: 

● Tres segundos para que aparezca algo visible en la pantalla. 

● Ocho segundos para que aparezca algo legible en la pantalla. 
● Quince  segundos  hasta  hacer  un  click  hacia  otra  parte  del  sitio  o  hacia  otro 
sitio. 

1.5.2 Normas de Multimedia 

Cuando en un Sitio Web se incorporan elementos gráficos y multimediales, se deben 
seguir  normas  muy  concretas  para  evitar  que  su  peso  afecte  el  desempeño  de  la 
página cuando sea solicitada por los usuarios. 

Estas  son  algunas  recomendaciones  tendientes  a  asegurar  la  correcta  inclusión  de 
dichos elementos: 

● Optimizar  el  peso  de  las  imágenes:  se  debe  bajar  al  máximo 
posible  el  peso  de  las  imágenes;  cuando  esto  no  sea  posible  hacerlo  por  su 
tamaño,  se  debe  reducir  el  número  de  colores  disponibles  y  la  resolución  (72 
dpi es la norma). 

 
12 
 

● Elegir  el  formato  adecuado:  ​ante  un  mismo  tamaño  de 

imagen,  el  peso  varía  dependiendo  de  si  son  procesadas  para  desplegarse en 
formato  GIF  respecto del formato JPG. Normalmente, una imagen con colores 
planos (como un icono) tendrá un peso menor si se guarda en GIF respecto de 
si  es  guardada  en  JPG.  Lo  contrario  ocurrirá  con  una  imagen  con  muchos 
colores  diversos  (como  una  foto).  Se recomienda probar ambos formatos para 
determinar el óptimo. 

● Ubicación  de  imágenes:  ​se  recomienda  usar  un  solo  directorio  para 
almacenar  las  imágenes  repetidas,  tales  como  los  iconos  y  otros  elementos 
gráficos  que  son  utilizados  en  diferentes  páginas  del  sitio.  Al  ubicarlos  en  un 
directorio  único,  se  puede  aprovechar  la  función  de  caché  del  programa 
visualizador  para  mejorar  el  rendimiento  de  las  páginas.  Para  efectos  de 
seguridad,  se  recomienda  impedir  que  un programa visualizador pueda ver el 
contenido de dicho directorio o cualquier otro dentro del sitio. 

● Usar  el  atributo  ALT  en  imágenes:  ​en  el código HTML se debe usar 

el  atributo  ALT  (texto  alterno)  en  las  imágenes  para  que  éste  se  despliegue 
antes  que  las  imágenes  y  facilite  de esta forma, la comprensión del contenido 
a los usuarios. 

● Imágenes  con  alto  y  ancho:  ​las  imágenes  (dibujos,  fotos,  iconos, 

botones)  deben  tener  tamaño  para  el  ancho  y  el  alto,  para  que  el  programa 
visualizador  pueda  dejar  reservado  el  espacio  para  dicho  contenido,  antes  de 
que se realice su despliegue visual. 

● Ofrecer  plug-ins:  ​cuando  se  utilizan  archivos  multimediales  que 

requieren  el  uso  de  plugins  (programas  visualizadores  especiales),  para 
revisarlos  se  recomienda  poner  el  programa  para  ser  bajado  u  ofrecer  un 
enlace  a  lugares  donde  obtenerlo.  Esto  es  especialmente  válido  en  sitios  que 
ofrecen  presentaciones  de  portada  en  tecnología  Flash,  las  cuales  deben  ser 
anunciadas  para  que  el  usuario  tenga  la  opción  de  verlas  o  avanzar  directo  al 
sitio. 

● Uso  de  imágenes  de  background:  ​Salvo  casos  que  sean 

estrictamente  necesarios,  esta  práctica  debe  ser  dejada  de  lado,  porque  su 
único  efecto  es el de agregar un paso excesivo a los sitios, afectando el tiempo 
de descarga y acceso a la información. 

 
13 
 

1.5.3 Uso de Enlaces 

Los  enlaces  son  una  de  las  características  esenciales  de  los  Sitios  Web,  ya  que 
permiten  al  usuario  visitar  otros  documentos  del  mismo  o  externos,  sólo  haciendo 
clic  sobre  una  zona  demarcada.  En  este  sentido,  si  bien  el  estándar  indica  que  el 
enlace  debe  ser  subrayado  y  de  color  azul,  los  cambios  tecnológicos  han  permitido 
que existan otras formas de hacerlos evidentes, a continuación algunos aspectos:  

● Deben  ser  diferentes  al  texto:  ​los  enlaces  se  deben  diferenciar  del 
texto  que  los  rodea  para  explicar  visualmente  al  usuario  que  se  ofrece  una 
acción  a  partir  de  su contenido. La forma de diferenciarlo puede variar, pero al 
menos se debe subrayar y resaltarlo con un color diferente. 

● Su  estado  debe  ser  visual:  ​los  enlaces  tienen cuatro estados posibles, 

los que deben visualizarse de manera simple y directa. 

● Enlace  sin  visitar:  ​es  el  color  que  tiene  antes  de  que  se  le  haga  clic 
encima; su color debe ser diferente del texto que lo rodea. 

● Enlace  visitado:  ​es  el  color  que  tiene  el  enlace  cuando  ya  ha  sido 
activado y la página a la que conduce ya ha sido visitada. 

● Enlace  destacado:  ​es  el  color  que  puede  adoptar  cuando  se  le  pasa  el 
mouse sobre el enlace y permite ayudar al usuario a descubrir su existencia. 

● Enlace  activo:  ​es  el  color  que  tiene  cuando  se  le  da  clic  encima; 
normalmente  es  un  color  fuerte  que  permite  notar  que  se  le  ha  activado. 
Enlace  visitado:  es  el  color  que  tiene  el  enlace  cuando  ya  ha  sido activado y la 
página a la que conduce ya ha sido visitada. 

● Su  contenido  debe  ser  explicativo:  ​los  enlaces  deben  contener 

palabras  que  expliquen  hacia  dónde  se  dirige  la  acción,  de  manera  a  evitar 
que  los  enlaces  utilicen  frases  como  "clic  aquí"  y  otras  similares. 
Adicionalmente  y  para  efectos  de  aumentar  su  accesibilidad,  la sintaxis HTML 
de  los  enlaces,  debe  contener  el  modificador  "title"  de  tal  manera  que  se 
despliegue  un  recuadro  explicativo  acerca  del  efecto  que  tendrá  hacer  clic 
sobre el enlace elegido.  

 
14 
 

 
 

Plataformas sociales 
1.6.1 Estilos para la incorporación de Redes 
Sociales 
En  el  ámbito  de  las  redes  sociales,  es  importante que se definan aspectos, como por 
ejemplo  los  temas  que  se  abordarán  a  través  de  la  cuenta,  y  con  qué  frecuencia  se 
harán las publicaciones. 

La  participación  de  las  personas es lo primordial ya que la “conversación” con y entre 

usuarios  es  parte  constitutiva  de  las  redes  sociales,  pudiéndose  así  conocer  las 
inquietudes,  dudas  y  recomendaciones  de  los  ciudadanos  para  el  siempre 
mejoramiento  de  los  servicios.  Teniendo  en  cuenta  estos  últimos  puntos,  es 
necesario considerar: 

● ¿Cuáles serán los pasos a seguir para dar respuesta a los casos o consultas que 
lleguen a través de estas plataformas? 
● ¿Tendrán un seguimiento? 
● ¿Las respuesta se entregará a través de la misma cuenta? 
● ¿Cuál  será  el  protocolo  en  caso  de  recibir  críticas  por  parte  de  algunos 
usuarios 
● ¿La  interacción  será  formal  y  protocolar  o  tendrá  un  carácter  más  cercano  al 
ciudadano? 

Todas  estos  puntos  deben  estar  definidos  antes  de  comenzar  a  implementar  la 
estrategia,  es  vital  poner  a  cargo  una  persona  idónea  que  sepa  desenvolverse  con 
claridad  y  posea  capacidad  para  responder  rápida  y  correctamente  a  todas  las 
consultas  que  surjan  por  parte  del  ciudadano.  También  es  importante  adoptar  la 
“voz”  adecuada,  la  línea  editorial  que  se  emplea  a  través  de  la  redes  sociales,  para lo 
que  se  tiene  en  cuenta la imagen y conceptos que tiene el público al que va dirigido, 
y  establecer  una  coherencia  entre  el  tono  de  estas  plataformas  y  la  imagen  de  la 
institución. 

Algunos  de  los  medios  a  que  se  puede  acceder  para  implementar  prácticas  de 
medios sociales en la comunicación institucional son: 

 
15 
 

● Blogs (ej: Blogger, Wordpress) 

● Microblogs (ej: Twitter) 
● Redes Sociales (ej: Facebook) 
● Canales Sociales de Video (ej: Youtube, Vimeo) 
● Canales Sociales de Fotografía (ej: Flickr, Pinterest, Instagram) 
● Foros de Discusión 
● Encuestas de Opinión 
● Sistemas de Votación 
● Sistemas de Clasificación Social (Etiquetas)  

1.6.2 Plataformas más utilizadas 

● Facebook (​www.facebook.com​) 
La  red  más  popular  del  mundo.  Es  un  canal  gratuito  y  masivo  que  alberga 
variedad  de  público.  La  comunicación  se  da  a  través  de  un  fan page donde el 
objetivo  principal  es  atender  y  resolver  todas  las  dudas  que  surjan  del 
ciudadano. 

● Instagram (​www.instagram.com​) 
Es  una  red  social  para  subir  fotos  y  vídeos.  Sus  usuarios  también  pueden 
aplicar  efectos  fotográficos  como  filtros,  marcos,  similitudes  térmicas,  áreas 
subyacentes  en  las  bases  cóncavas,  colores  retro,  y  posteriormente  compartir 
las fotografías en la red social. 

● Twitter (​www.twitter.com​)  
Esta  red  tiene  como  principal  característica  el  que  sólo  permite  comentarios 
(tweet)  de  140  caracteres.  Es  una  red  de  alta  inmediatez  y  por  lo  mismo  se 
debe  tener  la  capacidad  para  responder  a  las  consultas  del  ciudadano  en  el 
menor tiempo posible. 
El  público  de  Twitter  es  más  segmentado  que  Facebook,  más  crítico  y  con 
mayor  conocimiento  digital,  por  eso es tan importante entregarles respuestas 
correctas y rápidas. 

● Flickr (​www.flickr.com​)  
Es  un  sitio  web  que  permite  almacenar,  ordenar,  buscar  y  compartir 
fotografías o videos en línea, a través de Internet.  
Cuenta  con  una  comunidad  de  usuarios  que  comparten  fotografías  y  videos 

 
16 
 

 
creados  y,  se  rige  por normas de comportamiento y condiciones de 
uso que favorecen la buena gestión de los contenidos. 

● Youtube y Vimeo 
Estas  plataformas  permiten  subir  videos  y  compartirlos  con  los  usuarios  de 
manera  gratuita.  En  los  dos  casos  su  diseño  se  puede  personalizar  con 
gráficas y colores corporativos de la institución.  
Existen  ciertos  procesos  que  son  importantes  de  tomar  en  cuenta  al  ocupar 
estas  plataformas,  dentro  de  ellos  está:  generar títulos claros y concisos, todos 
los  videos  deben llevar una explicación de qué tratan, es importante optimizar 
los  vídeos  que  se  suban,  para  esto  se  debe  saber  usar  las  etiquetas,  de  lo 
contrario  es  probable  que  los  videos  no  aparezcan  en  los  primeros lugares de 
las búsquedas de los usuarios.   

 
17 
 

 
 
 
Capítulo 2 
Estructura 
 

   

 
18 
 

2.1 Definición de estructura del sitio 

En  esta  parte,  identificamos  las  secciones  y  la  forma  que  tendrá  el  Sitio  Web  que se 
está desarrollando. En importante hacer una diferencia entre estructura y diseño. 

● Estructura:  ​se  refiere  a  la  forma  que  tendrá  el  Sitio  Web  en  términos 
generales  con  sus  secciones,  funcionalidades  y  sistemas  de  navegación.  No 
considera ni incluye elementos gráficos (logotipos, viñetas, etc.). 

● Diseño:  se  refiere  a  la  solución  gráfica  que  se  creará  para  el  sitio,  en  la  cual 
aparecen  colores,  logotipos,  viñetas,  y  otros  elementos  de  diseño  que 
permiten identificar visualmente al sitio. 

Creamos  un  árbol  de  contenido  en  el  que  se  muestra,  de  manera  práctica,  cuántas 
secciones tendrá el sitio en desarrollo y cuántos niveles habrá dentro de cada uno. 

 
19 
 

2.2 Secciones 
Se  debe  intentar  que  sean  las  menos  posibles,  con  el  fin  de  concentrar  las  acciones 
del  usuario  en  pocas  áreas;  hay  que  considerar  que  cada  una  de  las  áreas a integrar 
en  el  árbol  requerirá  de  mantenimiento  posterior  en  contenidos,  gráfica  y 
funcionalidad.  Dado  lo  anterior,  se  establece estrictamente un mínimo de cinco y un 
máximo de siete secciones para el menú principal. 

2.3 Nivel 
Se debe intentar que el usuario esté siempre a menos de tres clics del contenido que 
anda  buscando.  Por  ello,  no  se  debería  crear  más  de  tres  niveles  de  acceso;  esto 
significa una Portada, una Portadilla de Sección y los Contenidos propiamente tales. 

Se debe considerar que habrá funcionalidades que estarán presentes en todo el sitio. 
Entre  ellas  se  incluyen  elementos  como  Buscador,  Contacto  y  Menú  Principal.  Se 
recomienda  que  este  tipo  de  elementos  quede  fuera  del  árbol  y  floten  sobre  éste, 
con el fin de indicar que desde todas las páginas habrá enlaces a ellos. 

2.4 Características de los Sistemas de 

Navegación 
Al  generar  el  sistema  de  navegación,  se  deben  tener  en  cuenta  las  siguientes 
características: 

● Consistente:  ​El  sistema  debe  ser  similar en todo el sitio, en lo referido a su 

ubicación  y  disposición  en  las  páginas.  Esto  se  aplica  también  a  aquellas 
instituciones que pueden tener más de un Sitio Web. 
● Uniforme:  El  sistema  debe  utilizar  similares  términos  con  el  fin  de  que  el 
ciudadano  que  lo  vea  en  las  páginas,  confíe  en  que  sus  opciones  llevan 
siempre hacia los mismos lugares dentro del sitio. 
● Visible:  ​El  sistema  debe  distinguirse  claramente  dentro  del  sitio,  con  el  fin 
de  que  el  ciudadano  cuente  con  él,  como  si  se  tratara  de  una  guía 
permanente en el área en que se encuentre del sitio. 

 
20 
 

2.5 Grilla constructiva 

En  esta  etapa,  se  procede  a la diagramación lineal que describe los componentes de 
cada  una  de  las  pantallas  del  sitio,  al que llegamos después del trabajo de definición 
de  estructura  a  través  del árbol funcional. El objetivo es verificar la ubicación de cada 
uno  de  los  elementos.  No  utilizaremos  ningún  elemento  gráfico  o  visual  específico 
(como  logos,  viñetas  o  fotos),  sólo  se  incluyen  líneas  y  bloques  que  representen 
objetos  de  contenido.  En  este  nivel  de  desarrollo  conceptual  de  la  estructura  de 
páginas,  el  uso  de  estos  diagramas nos permite centrarnos sobre cada pantalla en la 
funcionalidad  y  no  en  temas  más  visuales como colores o elementos de diseño en la 
página. 

2.6 Elementos de navegación 

Gracias  a  un  sistema  de  navegación  que  forma  un  conjunto  de  elementos  presente 
en  cada  una  de  las  pantallas,  permite  a  un  usuario  moverse  por  las  diferentes 
secciones del Sitio Web y retornar hasta la portada, sin sentir la sensación de haberse 
perdido en ese camino. 

Para  conseguir  este  objetivo,  el  diseño  web  debe  incluir  al  menos,  un  sistema  de 
navegación que cuente con los siguientes elementos: 

● Menú  Principal:  ​siempre  presente  en  todo  el  sitio,  permite  el  acceso  a 
cada una de las áreas del sitio. 

● Pie de Página: ​indica información relevante de la institución. 

● Botón  Portada:  ​para  ir  a  la  portada. Habitualmente, se asocia este enlace 

al logotipo institucional. 

● Botón  Contacto:  ​enlace  a  un  formulario  para  enviar  un  mensaje  al 
webmaster, a la Oficina de Información, Reclamos y Sugerencias o enlace para 
comunicación vía Redes Sociales 

● Buscador:  ​presente  en  cada  página  si  es  que  la  funcionalidad  existe  en  el 
sitio. 

 
21 
 

 
 
 
Capítulo 3 
Línea visual 
 

   

 
22 
 

3.1 Diseño y línea visual 

La  identidad  gráfica  de  un  sitio  web,  es  fundamental  para establecer el contexto del 
sitio  y  la  naturaleza  de  sus  contenidos.  En  el  caso  de  sitios  web  de  servicios  y 
especialmente  de  gobierno,  se  hace  necesario  establecer  normas  y especificaciones 
visuales  que  ayuden  a  orientar  al usuario y guiarlo de una manera eficiente mientras 
navega.  

Es  importante  recibir  al  usuario  con  toda  la  información  necesaria,  respetando 
colores  corporativos  y  mostrando  siempre  los  emblemas  y  logotipos  oficiales,  para 
que  el  ciudadano  entienda  claramente  en  qué  sitio  se  encuentra  y  cumpla  con  sus 
objetivos de navegación. 

3.2 Diseño de interfaces 

Se  debe  llevar  en  cuenta  también,  la  forma  que  deben  tener  las  pantallas  que  se 
generan  en  los  Sitios  Web  para  cumplir  con  la  tarea  de  hacer  su  contenido  más 
simple de usar para quienes visitan sus páginas. 

La  clave  del  éxito  de  un  Sitio  Web,  está  dada  por  la  forma  en  que  se  presenta  la 
información  a  los  visitantes.  Por  ello,  en  esta  sección  se  abordan  los  elementos 
necesarios  para  que,  durante  la  creación  de  las  interfaces  de  los  Sitios  Web  (las 
pantallas  que  el  usuario  ve  y  utiliza),  se  cumpla  con  dichos  preceptos  y  la 
comunicación fluya más directamente entre el organismo y el usuario final. 

   

 
23 
 

3.3 Prototipos 
De  acuerdo  a  todo  lo  visto  anteriormente  se  presentan  a  continuación  dos 
prototipos  con  sus  respectivas  grillas,  zonificación  y  detalles  de  cada  elemento,  así 
como las versiones para móvil de las mismas. 

3.3.1 Prototipo web Institucional 

Es  muy  importante  a  la  hora  de  diseñar  y  desarrollar  el  sitio  web,  seguir 
estrictamentes  estos  lineamientos  para  que  todos  los  elementos  de  la  página  se 
encuentren en un orden y en una correcta disposición dentro de la pantalla. 

Zonificación 

 
24 
 

Portada - Grilla base 

 
25 
 

Portada 1 

 
26 
 

Portada 1 - Vista previa Notebook 1920 X 1080px 

   

 
27 
 

Portada 2 - Alternativa 

   

 
28 
 

Portada  2  -  Alternativa  Vista  previa  Notebook  1920  X 

1080px 

   

 
29 
 

Nivel 2 - Menú secundario / menú lateral 

3.3.2 Elementos 
La  barra  del  menú  principal,  el  encabezado  y  el  pie  de  página  son  elementos 
estables y aparecen en todas las secciones y niveles de la web. 

3.3.2.1 Encabezado 

 
30 
 

 
Lo  importante,  es  que  el  ciudadano  que  ingrese  al  Sitio  Web  entienda  a 
quién  pertenece  el  Sitio  de  un  solo  vistazo  y  no  tenga  que  estar  adivinando  si  ha 
llegado al lugar que deseaba visitar. 

3.3.2.2 Uso de logotipos 

Para  enfatizar  en  esto,  es  recomendable  que  el  logotipo  de  identificación  (Logo 
principal)  se  ubique  en  la  esquina  superior  izquierda  de  las  páginas  por  tratarse  del 
lugar  que  siempre  se  mira  con  la  mayor  frecuencia  y  que,  por  la  forma  más 
tradicional  de  construcción  del  código  HTML,  aparecerá  como  uno  de  los  primeros 
elementos  de  la  pantalla.  El  ciudadano  debe  recibir  la  información  suficiente  para 
saber  que  está  en  un  Sitio  Web  del  Gobierno  Paraguayo  y  además,  conocer  el 
nombre  de  dicho  servicio.  En  cuanto  al  Logotipo  del  Gobierno  Nacional  lo  dejamos 
ubicado  en  la  esquina  superior  derecha  en  la  misma  dirección  que  el  logo  de 
identificación  de  la  página.  Esta  norma  se  aplica  para  todas  las  páginas  de 
Secretarías y Ministerios. 
Tanto  el  logotipo  principal  como  el  secundario  se  utilizan  en  su  versión  blanco  para 
aplicaciones sobre fondos oscuros. 

3.3.2.3 Menú principal 

Es  una  zona  en  la  que  se  detallan  las  secciones  o  categorías  principales  en  las  que 
está  dividida  la  información  contenida  en  la  Web.  Se  ubica  en la parte superior de la 
página.  Se  debe  intentar  que  contengan  ítems  en  lo  menor  posibles,  con  el  fin  de 
concentrar  las  acciones  del  usuario  en  pocas  áreas.  Se  establece  una 
recomendación,  un  mínimo  de  cinco  y  un  máximo  de  ocho  secciones  para  el menú 
principal. 

 
31 
 

Cada  menú  puede  contener  un  submenú  desplegable,  que  lleva  al  nivel  dos  de  la 
Página.  

3.3.2.4 Menú secundario 

Esta  zona  permite  indicar  al  usuario  final  en  que  sección  se  encuentra  y  mostrar 
consigo  otras  secciones  del  mismo nivel en la que se encuentre. El menú secundario 
está  diseñado  teniendo  en  cuenta  el  crecimiento  del  contenido  de  cada  institución, 
con espacio para la colocación de más secciones.  

A  continuación  se  puede  observar  una  muestra  del  menú  secundario  (Menú 
tonalidad gris de Nivel 2 que corresponde a la sección “Institucional”). 

3.3.2.5 Contenido destacado 

Debajo  del  menú  principal  y  solo  en  la  portada  se  ubica  un  área  destinada  para  las 
noticias/artículos  más  resaltantes  de  la  institución.  Cada  imagen  se  encuentra 
dentro  de  una  tarjeta  donde  se  observa  el  título  de  la  información  con  un 
hipervínculo a la información completa.  

 
32 
 

Grilla de noticias 

Grilla de secciones o apartados 

   

 
33 
 

Carrusel de imágenes / artículos 

3.3.2.6 Área de contenido 

El  área  de  contenido  es  la  zona  en  la 
que  se  entrega  la  información  en 
cada  página  web.  Dentro  de  la  zona 
de  contenido  se  debe  distinguir  las 
zonas  de  título,  resumen,  foto 
referente  e  información en un primer 
nivel. 

Respecto  al  contenido  o  información 

presentada  en  este  primer  nivel,  se 
debe  privilegiar  el  uso  de  textos 
cortos,  separados  por  subtítulos 
significativos  acompañado 
estrictamente  de  la  fecha  de 
publicación,  que  permitan  entregar 
de  manera  concisa  y  clara  la 
información al ciudadano.  

Se  recomienda  cargar  hasta  cuatro 

noticias,  para  no  aumentar  el  largo 
de  la  página.  Dentro  del  espacio  del 
área  de  contenido,  se  debe  respetar  y  otorgar  el  mismo  espacio  a  cada  panel  de 
información. 

 
34 
 

 
 

3.3.2.7 Columna de navegación 

Se  ubica  en  la  parte  lateral  derecha de la portada del 
sitio  web.  Tiene  espacio  para  colocar  hasta  tres 
banners  como recomendación, además se presentan 
panel(es)  del  TL  (Time  Line)  de  las  redes  sociales  de 
Twitter  y/o  Facebook  en  donde  se  observarán  en 
tiempo  real  las  publicaciones  de dichas páginas y así, 
la  posibilidad  de  que  el  ciudadano  que  se  encuentre 
en la página, pueda acceder rápidamente y hacer sus 
propios comentarios. 

   

 
35 
 

3.3.2.8 Pie de página 

Aunque  regularmente  no  se  le  concede  importancia  en  términos  de  navegación,  se 
entiende  que  la  zona  inferior  de  cada  pantalla  cumple  el  relevante  papel  de 
completar  la  información  que  se  ofrece  en  las  zonas  superiores  de  navegación,  al 
entregar  datos  relativos  a  la  organización  (nombre,  direcciones,  teléfonos)  y 
proporcionar  enlaces  que  se  no  se  han  entregado  en  la  zona  superior,  como  otros 
sitios de interés etc. 

   

 
36 
 

3.3.2  Prototipo  web  Institucional  -  versión  móvil 

(responsive) 
El  diseño,  la  usabilidad  y  la  eficacia  son  factores  imprescindibles  que  determinan  el 
éxito de un sitio web. 
La  nueva  tendencia  es  El  RWD  (la  técnica del “Responsive Web Design”). A través de 
esta  herramienta,  el  usuario  podrá acceder al contenido sin preocuparse si está en el 
móvil,  tablet  o  PC  y  lo  visualizará  de  la  mejor  forma  posible,  no  solo  estamos 
adaptando  el  contenido  al  dispositivo,  estamos  adaptando  el  contenido  al  usuario  y 
su contexto de uso. 

 
37 
 

 
38