Manual de Estilo web (MDPDF)Version 1.0
Exportar PDF

Este documento constituye una guía a la hora de maquetar cualquier contenido web cuyo destino final sea una impresión en PDF mediante la librería MDPF.
Se intentan recoger la mayoría de los casos no obstante, dada la naturaleza dinámica del contenido, se recomienda consultar con IMAGEN cualquier supuesto que no aparezca contemplado.

Publicado: 15 Enero 2019
Actualizado: 15 Enero 2019
Departamento: Imagen Corporativa
Contacto: Marcos Pereira
Email: marper@televes.com
Ext: 162

Cabecera

						
						<div class="cabecera">
						<img class ="logo-televes" src="../public/img/logo-televes.png"/>
						</div>

Contenido

La clase container debe abrirse justo después del <body> y cerrarse antes del mismo.

						
						<body>
						<div class="container"> 
						
						</div>
						</body>

Maquetación Grid

Siguiendo la estructura de Boostrap simplificada, la maqueta consta de filas row y columnas col-sm-*

Fila: La fila se emplea para acotar el contenido horizontalmente. Cada bloque de código debe ir delimitado por una fila .row
Columnas: Las columnas estructuran el contenido verticalmente y debe estar contenidas dentro de una fila.

Cuando el contenido vaya en 1 columna, es decir, en un único bloque, se emplea la clase col-sm-12

Ejemplo de contenido en 1 columna

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Código Html

								
								<div class="row">
								<div class="col-sm-12">	
								<p class="text-1"> 
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
								</p>
								</div>
								</div>

Cuando el contenido vaya en 2 columnas se emplea la clase col-sm-6 en el <div> de cada columna.

Ejemplo de contenido en 2 columnas

Código Html

								
								<div class="row">	
								<div class="col-sm-6">	
								<p class="text-1"> 
								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
								</p>
								</div>
								</div>
								<div class="row">	
								<div class="col-sm-6">	
								<p class="text-1"> 
								It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
								</p>
								</div>
								</div>

Estilos CSS

Títulos

<h1>Titulo 1:<\h1>
<h2>Titulo 2:<\h2>

Titulos <h2> con separador inferior:

En función del contenido, si los títulos llevan border delimitador, se empleará la clase subrayado .

Ejemplo de contenido en 1 columna

Info om felet från ATG och Televes

Fuentes

Se emplean 2 familias:

CSS Classes:
.font-open-sans Fuerza Open Sans Font
.font-raleway Fuerza Raleway Font

Colores

Colores de Texto:

Color	CSS	Descripción
#333333	`.text-333`	Color por defecto
#f6a400	`.text-orange`	Texto en naranja Televés
#ffffff	`.text-white`	Texto en color Blanco
#cccccc	`.text-g8`	Texto en gris, empleado para bordes etc..
#666666	`.text-g6`	Gris oscuro, empleado en segundos niveles etc..
#2ECC40	`.text-green`	Texto en color verde
#FF4136	`.text-red`	Texto en color rojo

Colores de relleno (background):

Color	CSS	Descripción
#333333	`.color-g1`	Color gris oscuro corporativo
#494949	`.color-g2`	Color gris oscuro corporativo
#5F5F5F	`.color-g3`	Color gris oscuro corporativo
#757575	`.color-g4`	Color gris oscuro corporativo
#8b8b8b	`.color-g5`	Color gris oscuro corporativo
#A0A0A0	`.color-g6`	Color gris oscuro corporativo
#B6B6B6	`.color-g7`	Color gris oscuro corporativo
#CCCCCC	`.color-g8`	Color gris oscuro corporativo
#E2E2E2	`.color-g9`	Color gris oscuro corporativo
#F8F8F8	`.color-g10`	Color gris claro empleado para fondos de botones, cajas etc..
#F6a400	`.color-bg-orange`	Color naranja corporativo
#212121	`.color-bg-black`	Color negro

Tablas

Tablas de formulario:

Estas son las tablas empleadas para representar los campos de un formulario. Se utiliza la clase clean

Ejemplo de tabla formulario

Objektnummer:	740246
Objektnamn:	SPELKIOSKEN
Kontaktperson:	ANNIKA CHRISTIANSEN
Adress:	PRÄSTGATAN 2A 742 31 ÖSTHAMMAR
Telefon:	0173-100 68
Mail:	holmskog1@hotmail.com

Código Html

						
							<table class="clean">
						
							<tr>
								<td><span class="campo">Objektnummer:</span></td>
								<td><span class="valor"> 740246</span></td>
							</tr>
							<tr>
								<td><span class="campo">Objektnamn:</span></td>
								<td><span class="valor"> SPELKIOSKEN</span></td>
							</tr>
							<tr>
								<td><span class="campo">Kontaktperson:</span></td>
								<td><span class="valor"> ANNIKA CHRISTIANSEN</span></td>
							</tr>
							<tr>
								<td><span class="campo">Adress:</span></td><
								td><span class="valor"> PRÄSTGATAN 2A 742 31 ÖSTHAMMAR</span></td>
							</tr>
							<tr>
								<td><span class="campo">Telefon:</span></td>
								<td><span class="valor"> 0173-100 68</span></td>
							</tr>
							<tr>
								<td><span class="campo">Mail:</span></td>
								<td><span class="valor">holmskog1@hotmail.com</span></td>
							</tr>
						</table>

Tablas de Datos: Estas tablas llevan la clase .tabla_televes

Ejemplo de Datos

Columna 1	Columna 2	Columna 3	Columna 4
valor 1	Valor 2	valor 3	Valor 4
valor 1	Valor 2	valor 3	Valor 4
valor 1	Valor 2	valor 3	Valor 4

Código Html

						
						<table class="tabla-televes">
						<thead> 
						<tr>
						<th>Columna 1 </th> 
						<th>Columna 2 </th> 
						<th>Columna 3 </th> 
						<th>Columna 4 </th>
						</tr>
						</thead>
						<tbody> 
						<tr>
						<td>Valor 1 </td> 
						<td>Valor 2 </td> 
						<td>Valor 3 </td> 
						<td>Valor 4 </td>
						</tr>
						<tr>
						<td>Valor 1 </td> 
						<td>Valor 2 </td> 
						<td>Valor 3 </td> 
						<td>Valor 4 </td>
						</tr>
						<tr>
						<td>Valor 1 </td> 
						<td>Valor 2 </td> 
						<td>Valor 3 </td> 
						<td>Valor 4 </td>
						</tr>
						<tr>
						<td>Valor 1 </td> 
						<td>Valor 2 </td> 
						<td>Valor 3 </td> 
						<td>Valor 4 </td>
						</tr>
						</tbody>
						</table>

Tablas de caracteristicas: Estas tablas llevan la clase .tabla_caracteristicas

Banda de trabajo	MHz	470 - 790 (C.21 - C.60)
Modo BOSS		OFF (pasivo)	ON (activo)
Ganancia	dBi	17	45 máx.*
Nivel de salida		--	Auto*
Figura de ruido	dB	--	1,2 (typ)
Nivel de señal de uso (recomendado)	dBµV	>75	<75
Tensión de alimentación	V	0	12-24
Consumo	mA	--	40 máx.
Ancho de haz	º	30
Relación D/A	dB	>24
Carga al viento	N	120 (@ 130 Km/h) 165 (@ 150 Km/h)
Diámetro del mástil	mm	20...50

Código Html

						
						<table class="tabla_caracteristicas">
						<tbody>
						<tr>
						<td class="titulo1"> Banda de trabajo</td>
						<td class="unidadDeMedida">MHz</td>
						<td colspan="2" class="contenido"> 470 - 790 (C.21 - C.60)</td>
						</tr>
						<tr>
						<td class="titulo1" colspan="2"> Modo BOSS</td>
						<td class="contenido"> OFF<br>	(pasivo)</td>
						<td class="contenido">ON<br>(activo)</td>
						</tr>
						<tr>
						<td class="titulo1"> Ganancia</td>	
						<td class="unidadDeMedida"> dBi</td>
						<td class="contenido">17</td>
						<td class="contenido">45 máx.*</td>
						</tr>
						<tr>
						<td class="titulo1"> Nivel de salida</td>
						<td class="unidadDeMedida"> </td>
						<td class="contenido">--</td>
						<td class="contenido">Auto*</td>
						</tr>
						<tr>
						<td class="titulo1"> Figura de ruido</td>
						<td class="unidadDeMedida"> dB</td>
						<td class="contenido">--</td>
						<td class="contenido">1,2 (typ)</td>
						</tr>
						<tr>
						<td class="titulo1"> Nivel de señal de uso (recomendado)</td>
						<td class="unidadDeMedida"> dBµV</td>
						<td class="contenido">>75</td>
						<td class="contenido"><75</td>
						</tr>
						<tr>
						<td class="titulo1"> Tensión de alimentación</td>
						<td class="unidadDeMedida"> V</td>
						<td class="contenido">0</td>
						<td class="contenido">12-24</td>
						</tr>
						<tr>
						<td class="titulo1"> Consumo</td>
						<td class="unidadDeMedida"> mA</td>
						<td class="contenido">--</td>
						<td class="contenido">40 máx.</td>
						</tr>
						<tr>
						<td class="titulo1"> Ancho de haz</td>
						<td class="unidadDeMedida"> º</td>
						<td colspan="2" class="contenido">30</td>
						</tr>
						<tr>
						<td class="titulo1"> Relación D/A</td>
						<td class="unidadDeMedida"> dB</td>
						<td colspan="2" class="contenido">>24</td>
						</tr>
						<tr>
						<td class="titulo1"> Carga al viento</td>
						<td class="unidadDeMedida"> N</td>
						<td colspan="2" class="contenido">120 (@ 130 Km/h)<br>165 (@ 150 Km/h)</td>
						</tr>
						<tr>
						<td class="titulo1"> Diámetro del mástil</td>
						<td class="unidadDeMedida"> mm</td>
						<td colspan="2" class="contenido">20...50</td>
						</tr>
						</tbody>
						</table>

Separador de columnas

Cuando el contenido va a dos columnas, en función del diseño, debe emplearse un separador añadiendo al div de la columna de la derecha la clase col-separador

Ejemplo de tabla formulario

INFO OBJEKT

Objektnummer:	740246
Objektnamn:	SPELKIOSKEN
Kontaktperson:	ANNIKA CHRISTIANSEN
Adress:	PRÄSTGATAN 2A 742 31 ÖSTHAMMAR
Telefon:	0173-100 68
Mail:	holmskog1@hotmail.com

INFO INSTALLATÖR

Leverantörnr:	24000166
Leverantör namn:	SANDAHLS RADIO & TV
Kontaktperson:	ANNIKA CHRISTIANSEN
Adress:	Box 2120 Skolgatan 33 750 02 UPPSALA
Telefon:	018-141550
Mail:	henrik.sandahl@euronics.se

Código Html

						
							<table class="clean">
						
							<div class="row">
							<div class="col-sm-6">
								<h2>INFO OBJEKT</h2>
							
								<table class="clean">
									<tr>
										<td><span class="campo">Objektnummer:</span></td><td><span class="valor"> 740246</span></td>
									</tr>
									<tr>
										<td><span class="campo">Objektnamn:</span></td><td><span class="valor"> SPELKIOSKEN</span></td>
									</tr>
									<tr>
										<td><span class="campo">Kontaktperson:</span></td><td><span class="valor"> ANNIKA CHRISTIANSEN</span></td>
									</tr>
									<tr>
										<td><span class="campo">Adress:</span></td><td><span class="valor"> PRÄSTGATAN 2A 742 31 ÖSTHAMMAR</span></td>
									</tr>
									<tr>
										<td><span class="campo">Telefon:</span></td><td><span class="valor"> 0173-100 68</span></td>
									</tr>
									<tr>
										<td><span class="campo">Mail:</span></td><td><span class="valor">holmskog1@hotmail.com</span></td>
									</tr>
								</table>
							
							</div>
							 
							<div class="col-sm-6 col-separador">
								<h2>INFO INSTALLATÖR</h2>
									<table class="clean">
										<tr>
										<td><span class="campo">Leverantörnr: </span></td><td><span class="valor"> 24000166</span></td>
									</tr>
									<tr>
										<td><span class="campo">Leverantör namn:</span></td><td><span class="valor"> SANDAHLS RADIO & TV</span></td>
									</tr>
									<tr>
										<td><span class="campo">Kontaktperson:</span></td><td><span class="valor"> ANNIKA CHRISTIANSEN</span></td>
									</tr>
									<tr>
										<td><span class="campo">Adress:</span></td><td><span class="valor"> Box 2120 Skolgatan 33 750 02 UPPSALA</span></td>
									</tr>
									<tr>
										<td><span class="campo">Telefon:</span></td><td><span class="valor"> 018-141550</span></td>
									</tr>
									<tr>
										<td><span class="campo">Mail:</span></td><td><span class="valor">henrik.sandahl@euronics.se</span></td>
									</tr>
								</table>
							
							</div>
						</div>

Classes CSS

Recopilatorio de classes empleadas en el CSS

Class	Description	Class	Description
`.campo`	Para la etiqueta de un formulario	`.valor`	Para el valor del campo de un formulario
`.text-center`	Fuerza el centrado del texto	`.nomargin`	Fuerza el no margins
`.nopadding-left`	Fuerza el no padding left	`.nomargin-left`	Fuerza el no nomargin left
`.nopadding-right`	Fuerza el no padding right	`.nomargin-left`	Fuerza el no nomargin left
`.nopadding-top`	Fuerza el no padding top	`.nomargin-left`	Fuerza el no nomargin left
`.nopadding-bottom`	Fuerza el no padding bottom	`.nomargin-left`	Fuerza el no nomargin left
`.noborder`	Fuerza el no border	`.lowercase`	Fuerza el text a lowercase
`.noradius`	Fuerza el a radius 0	`.uppercase`	Fuerza el text a uppercase

Class	Descripción	Class	Descripción
`.margin-top-0`	Fuerza el margin top a 0px	`.margin-bottom-0`	Fuerza el margin bottom a 0px
`.margin-top-3`	Fuerza el margin top a 3px	`.margin-bottom-3`	Fuerza el margin bottom a 3px
`.margin-top-6`	Fuerza el margin top a 6px	`.margin-bottom-6`	Fuerza el margin bottom a 6px
`.margin-top-8`	Fuerza el margin top a 8px	`.margin-bottom-8`	Fuerza el margin bottom a 8px
`.margin-top-10`	Fuerza el margin top a 10px	`.margin-bottom-10`	Fuerza el margin bottom a 10px
`.margin-top-20`	Fuerza el margin top a 20px	`.margin-bottom-20`	Fuerza el margin bottom a 20px
`.margin-top-30`	Fuerza el margin top a 30px	`.margin-bottom-30`	Fuerza el margin bottom a 30px
`.margin-top-40`	Fuerza el margin top a 40px	`.margin-bottom-40`	Fuerza el margin bottom a 40px
`.margin-top-50`	Fuerza el margin top a 50px	`.margin-bottom-50`	Fuerza el margin bottom a 50px
`.margin-top-60`	Fuerza el margin top a 60px	`.margin-bottom-60`	Fuerza el margin bottom a 60px
`.margin-top-80`	Fuerza el margin top a 80px	`.margin-bottom-80`	Fuerza el margin bottom a 80px
`.margin-top-100`	Fuerza el margin top a 100px	`.margin-bottom-100`	Fuerza el margin bottom a 100px
`.margin-top-130`	Fuerza el margin top a 130px	`.margin-bottom-130`	Fuerza el margin bottom a 130px
`.margin-top-150`	Fuerza el margin top a 150px	`.margin-bottom-150`	Fuerza el margin bottom a 150px
`.margin-top-180`	Fuerza el margin top a 180px	`.margin-bottom-180`	Fuerza el margin bottom a 180px
`.margin-top-200`	Fuerza el margin top a 200px	`.margin-bottom-200`	Fuerza el margin bottom a 200px
`.margin-left-0`	Fuerza el margin left a 0px	`.margin-right-0`	Fuerza el margin right a 0px
`.margin-left-3`	Fuerza el margin left a 3px	`.margin-right-3`	Fuerza el margin right a 3px
`.margin-left-6`	Fuerza el margin left a 6px	`.margin-right-6`	Fuerza el margin right a 6px
`.margin-left-8`	Fuerza el margin left a 8px	`.margin-right-8`	Fuerza el margin right a 8px
`.margin-left-10`	Fuerza el margin left a 10px	`.margin-right-10`	Fuerza el margin right a 10px
`.margin-left-20`	Fuerza el margin left a 20px	`.margin-right-20`	Fuerza el margin right a 20px
`.margin-left-30`	Fuerza el margin left a 30px	`.margin-right-30`	Fuerza el margin right a 30px
`.margin-left-40`	Fuerza el margin left a 40px	`.margin-right-40`	Fuerza el margin right a 40px
`.margin-left-50`	Fuerza el margin left a 50px	`.margin-right-50`	Fuerza el margin right a 50px
`.margin-left-60`	Fuerza el margin left a 60px	`.margin-right-60`	Fuerza el margin right a 60px
`.margin-left-80`	Fuerza el margin left a 80px	`.margin-right-80`	Fuerza el margin right a 80px
`.margin-left-100`	Fuerza el margin left a 100px	`.margin-right-100`	Fuerza el margin right a 100px

Class	Description	Class	Description
`.nopadding`	Fuerza el no paddings	`.nomargin`	Fuerza el no margins
`.nopadding-left`	Fuerza el no padding left	`.nomargin-left`	Fuerza el no nomargin left
`.nopadding-right`	Fuerza el no padding right	`.nomargin-left`	Fuerza el no nomargin left
`.nopadding-top`	Fuerza el no padding top	`.nomargin-left`	Fuerza el no nomargin left
`.nopadding-bottom`	Fuerza el no padding bottom	`.nomargin-left`	Fuerza el no nomargin left
`.noborder`	Fuerza el no border	`.lowercase`	Fuerza el text a lowercase
`.noradius`	Fuerza el a radius 0	`.uppercase`	Fuerza el text a uppercase

Manual de Estilo web (MDPDF)Version 1.0
Exportar PDF

Cabecera

Contenido

Maquetación Grid

Estilos CSS

Títulos

`<h1>`Titulo 1:`<\h1>`

`<h2>`Titulo 2:`<\h2>`

Info om felet från ATG och Televes

Fuentes

Colores

Colores de Texto:

Colores de relleno (background):

Tablas

Separador de columnas

INFO OBJEKT

INFO INSTALLATÖR

Classes CSS

Manual de Estilo web (MDPDF)Version 1.0 Exportar PDF

Cabecera

Contenido

Maquetación Grid

Estilos CSS

Títulos

<h1>Titulo 1:<\h1>

<h2>Titulo 2:<\h2>

Info om felet från ATG och Televes

Fuentes

Colores

Colores de Texto:

Colores de relleno (background):

Tablas

Separador de columnas

INFO OBJEKT

INFO INSTALLATÖR

Classes CSS

Manual de Estilo web (MDPDF)Version 1.0
Exportar PDF

`<h1>`Titulo 1:`<\h1>`

`<h2>`Titulo 2:`<\h2>`