Catálogo de componentes - Junta de Castilla y León

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Catálogo de componentes - Junta de Castilla y León</title> <link href="css/normalize.css" rel="stylesheet"> <link href="css/fonts.css" rel="stylesheet"> <link href="css/home.css" rel="stylesheet"> <link href="css/jquery.sidr.light.css" rel="stylesheet"> <link href="css/owl.carousel.css" rel="stylesheet"> <link href="css/owl.theme.css" rel="stylesheet"> <link href="css/prism.css" rel="stylesheet"> <link href="css/catalogo.css" rel="stylesheet"> <script src="js/jquery-1.12.4.min.js"></script> </head> <body class="home"> <div id="contenedor"> <div class="contenedor"> <h1><a href="index.html"><img src="img/jcyl.jpg" alt="Junta de Castilla y León"/></a></h1> </div> <div id="main-menu"> <div class="contenedor"> <h2 class="elemento-invisible">Menú principal</h2> <button class="hamburger hamburger--spin" type="button" ara-label="Menú" aria-controls="menu" aria-haspopup="true" aria-expanded="false"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> <span class="hamburger-text">Menú</span> </button> <div id="sidr"> <ul id="menu"> <li> <span>Guía de estilos</span> <a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt="Guía de estilos"/></a> <div class="submenu"> <div class="columna"> <ul> <li><a href="guia-estilos.html">Guía de estilos</a></li> <li><a href="guia-estilos-imagenes.html">Imágenes</a></li> <li><a href="prehome.html">Prehome</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="guia-estilos-iconos.html">Iconos</a></li> <li><a href="guia-estilos-rejilla.html">Rejilla</a></li> <li><a href="historico-cambios.html">Histórico de cambios</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="guia-estilos-tablas.html">Tablas</a></li> <li><a href="guia-estilos-librerias.html">Librerías</a></li> </ul> </div> <div class="pie"> </div> </div> </li> <li> <span>Generales</span> <a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt="Generales"/></a> <div class="submenu"> <div class="columna"> <ul> <li><a href="componente-texto.html">Componente texto</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="calendario.html">Calendario</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="direccion.html">Dirección</a></li> </ul> </div> <div class="pie"> </div> </div> </li> <li> <span>Enlaces</span> <a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt="Enlaces"/></a> <div class="submenu"> <div class="columna"> <ul> <li><a href="slider-home.html">Slider home</a></li> <li><a href="slider-opciones.html">Slider opciones</a></li> <li><a href="slider-enlaces.html">Carrusel de enlaces</a></li> <li><a href="solo-imagen.html">Solo imagen</a></li> <li><a href="navegacion-texto.html">Navegación texto</a></li> <li><a href="enlaces-imagen-titulo.html">Enlaces imagen título</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="imagen-horizontal.html">Imagen horizontal</a></li> <li><a href="enlaces-con-imagen.html">Enlaces con imagen</a></li> <li><a href="enlaces-interes.html">Enlaces de interés</a></li> <li><a href="enlaces-portales.html">Enlaces a portales</a></li> <li><a href="navegacion-texto-descripcion.html">Navegación texto descripción</a></li> <li><a href="navegacion-matriz.html">Navegación matriz</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="enlaces-submenu.html">Enlaces submenú</a></li> <li><a href="videoenlaces.html">Videoenlaces</a></li> <li><a href="temas-gobierno.html">Temas gobierno</a></li> <li><a href="temas-gobierno-enlace-abajo.html">Temas gobierno enlace abajo</a></li> <li><a href="enlaces-sin-imagen.html">Enlaces sin imagen</a></li> <li><a href="navegacion-texto-imagen-descripcion.html">Navegación texto imagen descripción</a></li> </ul> </div> <div class="pie"> </div> </div> </li> <li> <span>Para destacar contenidos</span> <a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt="Para destacar contenidos"/></a> <div class="submenu"> <div class="columna"> <ul> <li><a href="contenidos-destacados.html">Contenidos destacados</a></li> <li><a href="listado-noticias-rss.html">Contenidos portada (Listado de noticias y RSS)</a></li> <li><a href="organigrama.html">Organigrama</a></li> <li><a href="avisos-alertas.html">Avisos y alertas</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="tabs.html">Pestañas</a></li> <li><a href="componente-redes-sociales.html">Pestaña redes sociales (Twitter, Facebook)</a></li> <li><a href="destacados-prehome.html">Destacados prehome</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="incidentes.html">Incidentes</a></li> <li><a href="colorbox.html">Colorbox</a></li> <li><a href="preguntas-respuestas.html">Preguntas y respuestas</a></li> </ul> </div> <div class="pie"> </div> </div> </li> <li> <span>Listados</span> <a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt="Listados"/></a> <div class="submenu"> <div class="columna"> <ul> <li><a href="listado-general.html">Listado general</a></li> <li><a href="listado-sin-imagenes.html">Listado sin imágenes</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="listado-mapa-area.html">Listado mapa área</a></li> <li><a href="galeria.html">Galería de imágenes</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="galeria-texto.html">Galería de imágenes con texto</a></li> <li><a href="videoteca.html">Galería de vídeos</a></li> </ul> </div> <div class="pie"> </div> </div> </li> <li> <span>Buscadores y formularios</span> <a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt="Buscadores y formularios"/></a> <div class="submenu"> <div class="columna"> <ul> <li><a href="buscador-simple.html">Buscador (simple)</a></li> <li><a href="buscador-avanzado.html">Buscador (avanzado)</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="buscador-tramites.html">Buscador trámites</a></li> <li><a href="buscador-prehome.html">Buscador prehome</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="formulario-login.html">Formulario login</a></li> <li><a href="formulario.html">Formulario</a></li> </ul> </div> </div> </li> <li> <span>No corporativos</span> <a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt="No corporativos"/></a> <div class="submenu"> <div class="columna"> <ul> <li><a href="slider-prehome.html">Slider prehome</a></li> <li><a href="contenidos-destacados-prensa.html">Contenidos destacados prensa</a></li> <li><a href="enlaces-iconos.html">Enlaces iconos</a></li> <li><a href="rss-blog.html">RSS Blog</a></li> <li><a href="listado-sindicacion-rss.html">Listado sindicación RSS (sin esqueleto)</a></li> <li><a href="listado-cursos-eclap.html">Listado cursos ECLAP</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="listado-previsiones.html">Listado previsiones informativas</a></li> <li><a href="listado-fondos-documentales.html">Listado fondos documentales</a></li> <li><a href="listado-conjunto-datos.html">Conjunto de datos</a></li> <li><a href="listado-redes-sociales.html">Listado de redes sociales</a></li> </ul> </div> <div class="columna"> <ul> <li><a href="foros.html">Foros de participación</a></li> <li><a href="listado-agenda-cultural.html">Listado agenda cultural</a></li> <li><a href="formulario-registro-aplicaciones.html">Formulario registro aplicaciones</a></li> <li><a href="bibliobus.html">Bibliobus</a></li> </ul> </div> </div> </li> </ul> </div> </div> </div> <div id="buscador"> <form action="" method="post"> <label for="q" class="elemento-invisible">Texto a buscar</label> <input type="text" name="q" id="q" value="" placeholder="Buscar..." /> <input type="image" src="img/buscar.png" alt="Buscar" /> </form> </div> <div id="carrusel">  <ul class="owl-carousel" aria-hidden="true"> <li> <span> <img src="img/carrusel.jpg" alt=""/> <a href=""> <span> <strong>Frías</strong> <em>Burgos</em> </span> </a> </span> </li> <li> <span> <img src="img/carrusel.jpg" alt=""/> <a href=""> <span> <strong>Frías</strong> <em>Burgos</em> </span> </a> </span> </li> <li> <span> <img src="img/carrusel.jpg" alt=""/> <a href=""> <span> <strong>Frías</strong> <em>Burgos</em> </span> </a> </span> </li> </ul>  <p class="elemento-invisible"><a href="">Portal de Turismo de Castilla y León</a></p> </div> <div id="presentacion"> <div class="contenedor"> <p>La Web es la puerta de entrada a la Junta de Castilla y León desde Internet y está destinada a ser la <strong>principal vía de comunicación con los ciudadanos, por su agilidad, sencillez e inmediatez</strong>.</p> <p>La Dirección General de Análisis y Planificación ha renovado el portal web JCYL.es con un <strong>diseño creativo moderno, accesible, usable y adaptado para su visualización en todos los dispositivos</strong>.</p> <p>Este diseño lo utilizan los <strong>más de 50 portales alojados en la plataforma web corporativa</strong> entre los que se encuentran los de Empleo, Sede Electrónica, Medio Ambiente, Empresas, Tributos,  Empleo Público, 112, Juventud, Vivienda, Bibliotecas, Contratación…</p> <p>El <strong>objetivo</strong> de la presente Guía es el de <strong>normalizar la estructura y diseño de los portales web JCYL.es adoptando un diseño más moderno y claro</strong>. Para ello se han establecido pautas para el desarrollo coherente y comprensible, basándose en tres principios básicos: <strong>accesibilidad, usabilidad y diseño adaptado a cada dispositivo (responsive)</strong>.</p> <p>La guía se ha publicado en un <strong>formato de consulta rápida</strong> que permita identificar y reutilizar fácilmente cualquier elemento del portal, apoyándose en ejemplos prácticos de uso, y en una lista de componentes que cubre la mayoría de las necesidades web. De la misma manera, dentro de ella se pueden descargar todos los recursos necesarios para poder ser reutilizados en cualquier proyecto.</p> <p>Además con dicha reutilización asegura la consecución de un trabajo con <strong>una imagen corporativa homogénea, atractiva y fácilmente identificable</strong>, a la vez que optimiza la eficacia de sus comunicaciones.</p> <p>Sin embargo, la mayoría de pautas aquí reflejadas son fácilmente reutilizables para la generación de cualquier proyecto web. Por ello, dentro del objetivo de tener un <strong>Gobierno Abierto</strong>, la información de esta guía se publica bajo una "<a href="http://creativecommons.org/licenses/by/3.0/es">licencia de <span lang="en">Creative Commons</span> Reconocimiento 3.0</a>" por lo que <strong>cualquier administración, ciudadano o empresa puede usar su contenido para generar su propia guía de estilo</strong>.</p> </div> </div> <div id="mapa-web"> <div class="contenedor"> <div class="fila"> <h2 class="elemento-invisible">Mapa web</h2> <div class="columna-s"> <div class="columna"> <h3><a href="">Gobierno y administración</a></h3> <ul> <li><a href="">Organización</a></li> <li><a href="">Gobierno abierto</a></li> <li><a href="">Hacienda y finanzas públicas</a></li> <li><a href="">Acción exterior y Europa</a></li> <li><a href="">Empleados públicos</a></li> <li><a href="">Estadística</a></li> <li><a href="">Comunicación</a></li> </ul> </div> <div class="columna"> <h3>Ciudadanos</h3> <ul> <li><a href="">Medio ambiente</a></li> <li><a href="">Vivienda y urbanismo</a></li> <li><a href="">Educación</a></li> <li><a href="">Salud</a></li> <li><a href="">Carreteras y transportes</a></li> <li><a href="">Servicios sociales</a></li> <li><a href="">Juventud</a></li> <li><a href="">Familia y mujer</a></li> <li><a href="">Inmigración</a></li> </ul> </div> <div class="columna"> <h3>Empleo y empresa</h3> <ul> <li><a href="">Conoce Castilla y León</a></li> <li><a href="">Patrimonio cultural</a></li> <li><a href="">Cultura</a></li> <li><a href="">Deporte</a></li> <li><a href="">Turismo</a></li> </ul> </div> </div> <div class="columna-s"> <div class="columna"> <h3>Turismo y cultura</h3> <ul> <li><a href="">Conoce Castilla y León</a></li> <li><a href="">Patrimonio cultural</a></li> <li><a href="">Cultura</a></li> <li><a href="">Deporte</a></li> <li><a href="">Turismo</a></li> </ul> </div> <div class="columna"> <h3>Trámites electrónicos</h3> <ul> <li><a href="">Sede electrónica</a></li> <li><a href="">Contratación administrativa</a></li> <li><a href="">Boletín oficial</a></li> <li><a href="">Tu Jcyl.es</a></li> <li><a href="">Atención al ciudadano</a></li> <li><a href="">Tributos</a></li> </ul> </div> </div> <div class="columna-redes-sociales"> <h3 class="elemento-invisible">Redes sociales</h3> <ul class="retransmison-contactos"> <li><a href=""><img src="img/tv.png" alt=""/> Televisión</a></li> <li><a href=""><img src="img/tfno.png" alt=""/> Direcciones y telefonos</a></li> </ul> <p><a href="" class="banner-redes-sociales"><span>Redes sociales</span><img src="img/banner-redes-sociales.png" alt="Redes sociales de la Junta de Castilla y León" /></a></p> <p class="castilla-y-leon"><img src="img/castilla-y-leon.png" alt="Castilla y León"></p> </div> </div> </div> </div> <div id="menu-pie"> <div class="contenedor"> <h2 class="elemento-invisible">Menú secundario</h2> <ul> <li><a href="">Atención al ciudadano</a></li> <li><a href="">Aviso legal</a></li> <li><a href="">Privacidad</a></li> <li><a href="">Accesibilidad</a></li> <li><a href="">Contacto</a></li> </ul> </div> </div> <div id="logos"> <div class="contenedor"> <ul> <li><a href=""><img src="img/logos/css.jpg" alt=""/></a></li> <li><a href=""><img src="img/logos/xhtml.jpg" alt=""/></a></li> <li><a href=""><img src="img/logos/ilunion.jpg" alt="Ilunion WCAG 2.0 WAI - AA"/></a></li> <li><a href=""><img src="img/logos/europa.jpg" alt=""/></a></li> <li><a href=""><img src="img/logos/union-europea.jpg" alt=""/></a></li> <li><a href=""><img src="img/logos/mobile-ok.jpg" alt=""/></a></li> </ul> </div> <script defer="defer" type="text/javascript"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2896541-1', 'auto'); ga('set', 'anonymizeIp', true); ga('send', 'pageview'); </script> </div> </div> <script src="js/menu.js"></script> <script src="js/jquery.sidr.min.js"></script> <script src="js/home.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/jquery.sticky.js"></script> <script src="js/prism.js"></script> </body> </html>

CINXE.COM

Catálogo de componentes - Junta de Castilla y León