guía web de elementos gráficos y estructura del sitio web ... · 1.1 introducción 3 2 contenidos...

www.poderjudicial.gob.do República Dominicana 1

Guía web de elementos gráficos y estructura

del Sitio Web del Poder Judicial

El objetivo de esta breve guía técnica es describir aspectos importantes

relacionados con la estructura general del Sitio Web del Poder Judicial

Dominicano, en los aspectos de Diseño Web, estilos y temas relacionados.

Los contenidos presentes en esta guía están sujetos a las actualizaciones que

se implementen en el Sitio Web.

http://www.poderjudicial.gob.do/


ÍNDICE

1 Descripción General 3

1.1 Introducción 3

2 Contenidos y estructura del Sitio Web 4

2.1 Opciones del menú principal 4

2.2 Contenido destacado de portada 4

2.3 Opciones generales del sitio web 4

2.4 Términos de uso y Políticas de privacidad

3 Cuenta de correo electrónico 5

4 Redes Sociales del Poder Judicial 5

5 Secciones especiales del Sitio Web 6

5.1 Cendijd 6

5.2 Transparencia 6

6 Diseño WEB 7

6.1 Palabras claves 7

6.2 Imágenes 7

6.3 Estilo general del Sitio Web 8,9

6.4 Estilo general botones del formulario 10

6.5 Estilo general de lista 10

6.6 Estilo de alertas 11

6.7 Marco en imágenes 11

7 Estructura general del Sitio Web 12

8 Compatibilidad con navegadores 13

9 Adaptación a dispositivos móviles 13

10 Accesibilidad y Usabilidad 14

11 Términos web de interés 15



1. Descripción General del Sitio Web

1.1 Introducción

El Sitio Web del Poder Judicial brinda informaciones relevantes a sus

usuarios en el ámbito de la justicia, sirviendo de mecanismo de consulta para

un público amplio de lectores, nacionales e internacionales.

Podemos acceder al sitio web a través de la siguiente dirección.

http://www.poderjudicial.gob.do


http://www.poder/


2. Contenidos y estructura del sitio web

2.1 Opciones principales del Menú Principal

Poder Judicial

Consejo del Poder Judicial

Suprema Corte de Justicia

Cendijd

Transparencia

Servicio

Sala de Prensa

Glosario

2.2 Contenido destacado de la portada:

Galería de imágenes y Noticias

Consulta sobre Casos

Novedades

Avisos

Accesos mediante banners publicitarios a secciones especiales.

2.3 Opciones generales del sitio web

Mapa del Sitio

Ayuda

Teclas de acceso

Contacto

2.4 Términos de uso y Políticas de privacidad

Términos de uso

Política de privacidad

Preguntas frecuentes



3. Cuenta de correo

La siguiente dirección de correo electrónico, permite mantener a los usuarios

en contacto con la institución para orientarse y recibir informaciones de su

interés. [email protected]

4. Redes Sociales del Poder Judicial

Twiiter: https://twitter.com/poderjudicialrd

Facebook: https://www.facebook.com/PoderJudicialRD

Youtube: https://www.youtube.com/user/poderjudicialrd

Google Plus: https://plus.google.com/102664725998194485543


mailto:[email protected]

https://twitter.com/poderjudicialrd

https://www.facebook.com/PoderJudicialRD

https://www.youtube.com/user/poderjudicialrd

https://plus.google.com/102664725998194485543


5. Secciones especiales del Sitio Web

5.1 Cendijd

La sección del Centro de Documentación e Información Judicial Dominicano

(CENDIJD), que se muestra desde el menú principal del sitio web, presenta

cuatro secciones de gran interés para sus visitantes.

Las secciones son las siguientes:

Jurisprudencia y Legislación

Bibliotecas Judiciales

Distribución y Ventas de Publicaciones

Centro de Información y Orientación Ciudadana

5.2 Transparencia

La sección de “Transparencia, se muestra desde el menú principal del sitio

web, contiene informaciones sobre las políticas públicas, brindando al

ciudadano la oportunidad de ver como se administran los recursos en los

diferentes programas y proyectos, recursos humanos, entre otros temas.

Las secciones más destacadas de Transparencia son:

Compras y Contrataciones

Finanzas

Presupuesto

Recursos Humanos

Publicaciones Oficiales

Programas y Proyectos

Estadísticas

OAIP (Oficina de Acceso a la Información Pública)



6. Diseño Web

6.1 Palabras claves

Entre las palabras claves utilizadas se encuentran:

Poder Judicial, Sentencias, Leyes, Reglamentos, Resoluciones, Fallos,

Jurisprudencias, colocadas en la etiqueta “title” y la etiqueta “content”, con

el objetivo de incrementar los resultados de búsquedas en los buscadores.

6.2 Imágenes

Las imágenes han sido optimizadas para permitir una descarga adecuada, y

las mismas tienen la etiqueta ALT, para permitir mejor accesibilidad web.

Las imágenes de noticias y los apartados especiales han ameritado tamaños

más grandes para poder ilustrar mejor dichas secciones.



6.3 Estilo general del Sitio Web

Área de la página Web

Ancho: 90%;

margen: 0 auto;

padding: 0;

posicion:relativa;

Encabezados

Tipografía/Encabezados

h1, h2, h3, h4, h5, h6

Tipos fuentes:'Open Sans', Arial,

sans-serif;

Peso de la fuente:700;

Alto de la linea:1.1em;

color: #333;

Margen inferior: 10px;

Alineación de texto:izquierda;

Enlaces visitados color:

#4C0B5F;

decoración de texto: ninguna

Tamaño de la fuente: 1.1em;

Enlaces efecto hover: color: #ccc

h1,.h1 {

font-size: 1.2em}

h2,.h2 {

font-size:1.1em}

h3,.h3 {

font-size: 1em}

h4,.h4 {

font-size: 0.90em;

}



Párrafos

Escudo

Tamaño de la fuente: 1.2em;

Alto de la linea: 1.25em;

Margen: 1.2em 0;

Alienación de texto: left;

Famlia de la fuente: Verdana,

Trebuchet,Arial;

color: #050709;

Ancho:284px;

Alto:90px;

Margenes:40px 0px -45px 0px;

Enlaces del menú principal

Título de las noticias

Tamaño de la letra: 1.2em

Border: 0px;

Peso de la fuente: 700

Color: #000;

Margen: 0 auto;

Tamaño del fondo:1.2em;

Familia de la fuente: arial;

Peso de la fuente: bold;

Margen superior: -5px;

Alto de la línea: normal;

Alienación de texto:centro;



6.4 Estilo general de los botones de formularios

btnform {

text-align: center;

background: #318CCA;

color: #fff;

border-radius: 0;

padding: 6px 10px;

width: 200px;

float: left;

margin-top: 20px;

}

6.5 Estilo general de listas

Estructura de la lista

<ol class="mylist">

<li>Opcion 1 de la

lista;</li>

<li> Opcion 2 de la lista

</li>

<li> Opcion 3 de la lista

</li>

<li> Opcion 4 de la

lista</li>

</ol>

Clases

.mylist {

counter-reset:

mycounter 0;

margin-left: -30px;

}

ol {

font-weight: normal;

font-size: 1.2em;

color: #333;

}



6.6 Estilo de alertas

Los mensajes de alerta indican al usuario el estado o resultado de su consulta.

Estos mensajes están definidos en la hoja de estilo de la siguiente forma:

.alerta {

font-size: 1.2em;

color: #FF0000;

}

6.7 Marco en imágenes

.box-area {

border: 1px solid #ddd;

text-align: left;

background-color: #fff;

position: relative;

margin-bottom: 20px;

width: 100%;

}



7. Estructura general del Sitio Web

<div id="contenedor">

<header>Encabezado y Título de la página</header>

</div>

<div id=" Area-central-Sitio ">

<div id="Menu-izquierdo">

<ul>

<li><a href="#">Enlaces</a>

<li><a href="#"> Enlaces </a>




<li><a href="#"> Enlaceso</a>

</ul>

</div>

<div id="Contenido principal">

</div>

</div>

<footer>

<div id="Container-foot">

© Poder Judicial.gob.do

</div>

</footer>

</div>



8. Compatibilidad con navegadores

El Sitio Web está optimizado para trabajar con diferentes navegadores, en

diferentes versiones, tales como:

Chrome 69.68, 67

Firefox 62, 61, 60

Opera 55, 54, 53

Safari 5.1 y 5.0

Internet Explorer 11

Se recomienda a los visitantes tener actualizados sus navegadores para que

puedan obtener mejor experiencia en las consultas de los contenidos web y su

visualización.

9. Adaptación a dispositivos

El sitio web es responsivo, es decir que se adapta a una amplia gama de

dispositivos, como latpos, tables, móviles, desktop.

Ha sido analizado mediante la herramienta Quiktool en los siguientes móviles.

Motorola RazR V3 y V8, Blackberry 8300, Apple Iphone 3/4, Samsung

Galaxy S2/S3 Lg G3-5.



10. Accesibilidad y Usabilidad

En el sitio web se ha tomado en cuenta mejorar la accesibilidad y usabilidad

de los usuarios en relación a los contenidos.

Los contenidos han sido estructurados de manera que las opciones estén

agrupadas por categorías y la información se encuentre mejor ordenada.

Se sigue un orden lógico de los contenidos y las secciones mantienen con un

diseño consistente, existen algunas excepciones en formato de contenido por

tratarse de apartados especiales que ameriten un diseño particular para poder

presentar de manera más idónea las informaciones.

En cuanto a la accesibilidad, se han tomado en cuenta el uso de algunas

etiquetas HTML, que ayudan a las personas con discapacidad en el acceso a

los contenidos, además de opciones incluidas en el desarrollo del portal para

facilitar la visualización y el manejo de la información.

El Sitio Web, también cuenta con una herramienta que permite leer en español

todo el contenido del sitio web, así como también, imprimir, cambiar de

contraste, agrandar el texto, resaltar enlaces, uso de teclado, desaturación,

fuentes legibles y gran cursor.



11. Términos web de interés

H1, h2…. Etiquetas de

encabezado Div Definir un

bloque de

contenido o

sección de la

página,

Fuente Tipo de letra

utilizado, estilo de

un grupo de

caracteres.

Li Declara un

elemento de

lista

Márgenes Establece la anchura

de los márgenes del

elemento

Footer Define el pie

de la página

Padding Establece la anchura

de las zonas de

relleno de los

elementos

Header Define el

encabezado

de la página

Pixel Elemento más

pequeño de una

imagen gráfica

Menú Define las

opciones de

navegación

Backrground Establece el color de

Fondo Width Define el

Ancho


guía web de elementos gráficos y estructura del sitio web ... · 1.1 introducción 3 2 contenidos...

Documents