Menú jcyl.es

Junta de Castilla y León

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

  • Zona privada
  • Contacto

Idiomas

Redes sociales

  • Facebook
  • Twitter
  • Youtube

Menu jcyl.es

Mi cuenta

usuario2017xxx

usuario@gmail.com

Mi cuenta

Cerrar sesión

Guía de estilos y componentesde la Junta de Castilla y León

Guía de estilos

ESPACIO Y ESPACIADO

El portal está elaborado bajo la premisa de un diseño sencillo, legible, plano identificativo y responsive, tiene como objetivo que el usuario goce de una óptima percepción en la información transmitida, se trata de un formato adaptable a todas las resoluciones de pantalla, desde móvil hasta escritorio, para ello se ha configurado una estructura de sistema de rejillas o Grid que permite una mayor flexibilidad a la hora de adaptar los diferentes tipos de contenidos. Los componentes están distribuidos dentro de una única región que ocupa el 100% de la pantalla hasta un máximo de 1170 píxeles y puede contener de uno a cinco columnas donde se asienten los contenidos, dependiendo del formato y el espacio que requieran.

No hay un espaciado común debido a la amplia variedad de recursos instaurados en los contenidos, pero sería conveniente respetar el espacio mínimo entre ellos, su uso incorrecto puede influir negativamente en la relación e interacción de los usuarios con la web. La distancia mínima entre columnas debe ser de 36.4 píxeles. La distancia específica tanto horizontal como vertical entre contenidos y componentes está registrada en el catálogo de componentes

Sistema de rejillas de jcyl.es

sistema de rejillas o grid

REGIONES

Cabecera, miga de pan y pie de página o footer son regiones cuyas propiedades tanto comunes como particulares están presentes en casi todas las páginas. No son regiones susceptibles de cambios, excepto la imagen de cabecera e items de navegacíón en el menú y en el pie de página que variaran en función del portal.

CABECERA

  • Contiene el escudo, menú superior el cual puede constar de buscador, acceso a cuenta de usuario, contacto, selector de idioma, redes sociales y navegación entre portales. También contiene el menú principal, imagen de cabecera y título principal
  • Cabecera, contenidos y pie de página están enmarcadas en un contendor cuyo ancho máximo es de 1170 píxeles, a excepción de la imagen de cabecera que ocupa mínimo 1500 píxelesd e ancho y algunos fondos de color que ocupan el 100%.
  • El número de items del menú principal de la cebecera puede variar dependiendo del portal. Para poder adoptar un único criterio de adaptación a distintos tamaños de pantalla sin tener que personalizar el menú principal en cada portal e implicando una optimización de recursos, se ha configurado una relación de dependencia entre el número de items que contiene el menú y el ancho de pantalla que se esté visualizando: Cuantos más items tenga el menú, antes aparecerá la hamburguesa a medida que reduzcamos el ancho de pantalla MENÚ VS QUERIES
    • Si el menú contiene 9 items la hamburguesase visualizará hasta los 1100 píxeles de ancho
    • Si el menú contiene 8 items la hamburguesa se visualizará hasta los 990 píxeles de ancho
    • Si el menú contiene 7 items la hamburguesa se visualizará hasta los 800 píxeles de ancho
    • Si el menú contiene 6 items la hamburguesa se visualizará hasta los 720 píxeles de ancho
    • Si el menú contiene 5 items la hamburguesa se visualizará hasta los 600 píxeles de ancho
    • Si el menú contiene 4 items la hamburguesa se visualizará hasta los 550 píxeles de ancho
    • Si el menú contiene 3 items la hamburguesa se visualizará hasta los 425 píxeles de ancho
    • Si el menú contiene 2 items la hamburguesa se visualizará hasta los 360 píxeles de ancho
cabecera de PrehomeCabecera de Prehome. Contiene Escudo y menú principal

Código

														
<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>
							<a href="">[ITEM]</a>
							<a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt=""/></a>
							<div class="submenu">
								<div class="columna">
									<ul>
										<li><a href="[ENLACE]">[ITEM]</a></li>
										[...]
									</ul>
								</div>
								<div class="columna">
									<ul>
										<li><a href="[ENLACE]">[ITEM]</a></li>
										[...]
									</ul>
								</div>
								<div class="columna">
									<ul>
										<li><a href="[ENLACE]">[ITEM]</a></li>
										[...]
									</ul>
								</div>
								<div class="pie">
									<ul>
										<li><a href="[ENLACE]">[ITEM]</a></li>
										[...]
									</ul>
								</div>
							</div>
						</li>
						[...]
					</ul>
				</div>
			</div>
		</div>
		[...]
	</div>
</div>
														
													
cabecera de portalCabecera de portal. Contiene Escudo menú superior, menú principal, imagen de cabecera y título principal

Código

														
<body>
    <div id="contenedor">
        <div class="contenedor">
			<div class="escudo">
				<p><a href="index.html"><img src="img/jcyl.jpg" alt="Junta de Castilla y León"/></a></p>
				<h1 class="elemento-invisible">Catálogo de componentes - Junta de Castilla y León</h1>
			</div>
			<div class="cabecera">
				<ul>
					<li><a href=""><img src="img/zona-privada-r.png" alt="Zona privada"/></a></li>
					<li><a href=""><img src="img/contacto-r.png" alt="Contacto"/></a></li>
				</ul>
				<div class="selector-idiomas">
					<h2 class="elemento-invisible">Idiomas</h2>
					<button class="idioma-actual" aria-haspopup="true" aria-expanded="false">Castellano</button>
					<ul class="idiomas">
						<li><a lang="en" hreflang="en" href="" >English</a></li>
						<li><a lang="fr" hreflang="fr" href="" >Français</a></li>
						<li><a lang="pt" hreflang="pt" href="" >Português</a></li>
					</ul>
				</div>
				<h2 class="elemento-invisible">Redes sociales</h2>
				<ul>
					<li><a href=""><img src="img/enc-facebook-r.png" alt="Facebook"></a></li>
					<li><a href=""><img src="img/enc-twitter-r.png" alt="Twitter"></a></li>
					<li><a href=""><img src="img/enc-youtube-r.png" alt="Youtube"></a></li>
				</ul>
				<h2 class="elemento-invisible">Menu jcyl.es</h2>
				<p id="menu-jcyl"><a href="" aria-haspopup="true" aria-expanded="false"><img src="img/enc-portales-r.png" alt="Abrir menú jcyl.es"></a></p>
				<h2 class="elemento-invisible">Mi cuenta</h2>
				<div id="mi-cuenta">
					<a href="#mi-cuenta-detalle" aria-haspopup="true" aria-expanded="false"><img src="img/mi-cuenta.png" alt="Mi cuenta"></a>
					<div id="mi-cuenta-detalle">
						<p class="usuario">[USUARIO]</p>
						<p>[MAIL]</p>
						<p class="boton"><a href="">Mi cuenta</a></p>
						<p class="cerrar"><a href="">Cerrar sesión</a></p>
					</div>
				</div>
			</div>
        </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>
				<p class="buscar">
					<a href="" aria-haspopup="true" aria-expanded="false">
						<img src="img/buscar-menu.png" alt="Buscador">
					</a>
				</p>
				<div id="sidr">
					<ul id="menu">
						<li>
							<a href="">[ITEM]</a>
							<a href="" class="menu-focus"><img src="img/sidr-mernu-cerrado.png" alt=""/></a>
							<div class="submenu">
								<ul>
									<li><a href="[ENLACE]">[ITEM]</a></li>
									[...]
								</ul>
							</div>
						</li>
						[..]
						<li class="buscar-menu"><a href="" aria-haspopup="true" aria-expanded="false"><img src="img/buscar-menu.png" alt="Buscador"></a></li>
					</ul>
				</div>
			</div>
        </div>
		<div id="encabezado">
			<picture>
				<source media="(min-width:61.25em)" srcset="[IMG]">
				<source media="(min-width:22.5em)" srcset="[IMG_PEQ]">
				<img src="[IMG]" alt=""/>
			</picture>
			<div class="contenedor">
				<p>[PORTAL]<span>de Castilla y León</span></p>
			</div>
		</div>
		[...]
	</div>
</body>
														
													

MIGA DE PAN

La intención ha sido resaltar la presencia de la miga de pan comno recurso importante de navegación, no solo en vista de escritorio, también en tamaños de pantalla correspondientes a dispositivos móviles y tablets

Miga de pan móviles. Diseño de la miga en pantallas a partir de móviles pequeños
Miga de pan escritorio.Diseño de la miga en pantallas a partir de tablet
A pesar de la importancia que desempeña sus funciones, la miga de pan mantiene un aspecto discreto para no interceder en la relevancia del contenido. No sería adecuado modificar sus propiedades, ni suprimir su presencia en las páginas que la contenga

Código

														
<div id="rastro-migas">
	<div class="contenedor">
		<ul>
			<li><a href="[INDEX]">Inicio</a></li>
			<li><a href="[ENLACE]">[ITEM]</a></li>
			[...]
			<li><strong>[PAGINA]</strong></li>
		</ul>
	</div>
</div>
														
													

PIE DE PÁGINA O FOOTER

  • El Footer de la Prehome contiene un sitemap o mapa del sitio y accesos a jcyl TV, directorio y la Guía de navegación. La marca Territorio ocupa el centro y finalmente se ubica un banner de acceso a las Redes Sociales
  • El Footer de los portales presenta los enlaces de navegación relativos al portal
  • En Prehome y portales, el footer también alberga los enlaces a contenidos legales, accesibilidad, contacto, así como el acceso al servicio de validación W3C y otros de ámbito europeo.
  • Al igual que las regiones anteriores, el footer esta sujeto al estilo establecido, no debe ser alterado.
Footer de PrehomeFooter de Prehome Mapa del sitio, enlaces tagenciales y de caracter institucional, legislativos, accesibles y medidas estándar de cumplimiento web

Código

															
<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="">Inmigracion</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=""><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>
</div>
															
														
Footer de portalFooter de portal Mapa de enlaces del portal y el resto igual que en la Prehome excepto por los enlaces tagenciales.

Código

															
<div id="mapa-web">
	<div class="contenedor">
		<div class="fila">
			<h2 class="elemento-invisible">Mapa web</h2>
			<div class="columna">
				<h3><a href="">[ENCABEZADO]</a></h3>
				<ul>
					<li><a href="[ENLACE]">[ITEM]</a></li>
					[...]
				</ul>
				[...]
			</div>
			<div class="columna">
				<h3><a href="">[ENCABEZADO]</a></h3>
				<ul>
					<li><a href="[ENLACE]">[ITEM]</a></li>
					[...]
				</ul>
				[...]
			</div>
			<div class="columna">
				<h3><a href="">[ENCABEZADO]</a></h3>
				<ul>
					<li><a href="[ENLACE]">[ITEM]</a></li>
					[...]
				</ul>
				[...]
			</div>
			<div class="columna">
				<h3><a href="">[ENCABEZADO]</a></h3>
				<ul>
					<li><a href="[ENLACE]">[ITEM]</a></li>
					[...]
				</ul>
				[...]
			</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>
</div>
															
														
  • Ilunion WCAG 2.0 WAI - AA