SdeBatman/dabblet.css

## dabblet.css
/**
 * Comienza el css
 */
body{color: black;
background:#CC99FF;
}
h2 {color: blue}
p {font-family:"Times New Roman";
font-size:15px;}

header {
background: #C0C0C0;
text-align:center;
min-height: 98%;
border:2px solid;
border-radius:25px;
}

nav{
background:purple;
min-height: 100%;}
/**
 * Aún no hay barra de navegación, está definida para que se añada posteriormente
 */

section {
background:#585858;
float: left;
width: 70%;
min-height:70%;}

article {
background:#D0D0D0 ;
width:98%;
text-align: center;
float:right;}

aside{
background: #F0F0F0;
border:2px solid;
text-align:center;
float:right;
width:18%;}

footer {
width:23%;
background-colour:#333;
border:2px solid;
text-align:center;
background:#FFFFFF;
float:left;
}
header, section, footer, aside, article, nav
{margin:1%;}

## dabblet.html
<!DOCTYPE html>

<!-- Inicia el <head> -->
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
</head>
<!-- Cierra el <head> y se abre el <body> -->
<body>
    <header>
       <h1>Prueba HTML5 y CSS</h1>
       <h2>Fonaments en Edició Electrònica </h2>
       </header>
 	<aside>
       <h3>Imágen</h3>
       <!-- Se introduce imágen -->
           <p><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" widht="200" height="200">
      		</p>
    </aside>
    <section>

       <article>
           <h2>Html 5</h2>
           <p>HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
		Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas.
		Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.
		El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.</p>
       </article>
       <article>
         <h2>Novedades</h2>
		<p> Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-4 AVC).
		Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. </br>
		Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente. </br>
		Mejoras en los formularios.</br>
		Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.</br>
		Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). </br>
		En general se deja abierto a poder interpretar otros lenguajes XML.</br>
		Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.</P>
       </article>
      </section>
      <section>
       <article>
           <h2>Fuente</h2>
           <p>
           	<ol>
				<li><a href="http://es.wikipedia.org/wiki/HTML5" title="HTML"> HTML5 (HyperText Markup Language) </li> </a>
			</ol>
		    </p>
       </article>
    </section>
    <aside>
       <h3>Prueba</h3>
           <p>Àrea de Coneixement de Biblioteconomia i Documentació </br>
			Universitat Pompeu Fabra </br>
			mari.vallez@upf.edu </br> </p>
    </aside>

    <footer>
        Creado por Laura Ortiz, 2013.
    </footer>
</body>
</html>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Comienza el css
	*/
	body{color: black;
	background:#CC99FF;
	}
	h2 {color: blue}
	p {font-family:"Times New Roman";
	font-size:15px;}

	header {
	background: #C0C0C0;
	text-align:center;
	min-height: 98%;
	border:2px solid;
	border-radius:25px;
	}

	nav{
	background:purple;
	min-height: 100%;}
	/**
	* Aún no hay barra de navegación, está definida para que se añada posteriormente
	*/

	section {
	background:#585858;
	float: left;
	width: 70%;
	min-height:70%;}

	article {
	background:#D0D0D0 ;
	width:98%;
	text-align: center;
	float:right;}

	aside{
	background: #F0F0F0;
	border:2px solid;
	text-align:center;
	float:right;
	width:18%;}

	footer {
	width:23%;
	background-colour:#333;
	border:2px solid;
	text-align:center;
	background:#FFFFFF;
	float:left;
	}
	header, section, footer, aside, article, nav
	{margin:1%;}
	<!DOCTYPE html>

	<!-- Inicia el <head> -->
	<head>
	<title>Titulo de la web</title>
	<meta charset="utf-8" />
	</head>
	<!-- Cierra el <head> y se abre el <body> -->
	<body>
	<header>
	<h1>Prueba HTML5 y CSS</h1>
	<h2>Fonaments en Edició Electrònica </h2>
	</header>
	<aside>
	<h3>Imágen</h3>
	<!-- Se introduce imágen -->
	<p><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" widht="200" height="200">
	</p>
	</aside>
	<section>

	<article>
	<h2>Html 5</h2>
	<p>HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
	Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas.
	Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.
	El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.</p>
	</article>
	<article>
	<h2>Novedades</h2>
	<p> Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres (WebM + VP8) o privados (H.264/MPEG-4 AVC).
	Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command. </br>
	Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente. </br>
	Mejoras en los formularios.</br>
	Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.</br>
	Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). </br>
	En general se deja abierto a poder interpretar otros lenguajes XML.</br>
	Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.</P>
	</article>
	</section>
	<section>
	<article>
	<h2>Fuente</h2>
	<p>
	<ol>
	<li><a href="http://es.wikipedia.org/wiki/HTML5" title="HTML"> HTML5 (HyperText Markup Language) </li> </a>
	</ol>
	</p>
	</article>
	</section>
	<aside>
	<h3>Prueba</h3>
	<p>Àrea de Coneixement de Biblioteconomia i Documentació </br>
	Universitat Pompeu Fabra </br>
	mari.vallez@upf.edu </br> </p>
	</aside>

	<footer>
	Creado por Laura Ortiz, 2013.
	</footer>
	</body>
	</html>