Archivo de notas de
[email protected]
Empieza con html5 puro y duro desde aquí y así:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>lo que sea</title>
</head>
<body>
</body>
</html>
y hasta aquí.
Las carpetas: js y css, contendrán los archivos necesarios para que cualquier web este optimizada para todos los navegadores conocidos y con unas muy pequeñas variaciones que no merecen observación, dado que hasta que la W3C no logre que todos los browsers implementen a su ordenación, siempre tendremos problemas los webmaster que deberemos solventar con imaginación.
los archivos que actualmente he introducido para optimización general son:
en el js: html5shiv.js, flexie.js, cssfx.min.js y cssfx.js. los podeis bajar del sitio que actualmente estoy creando:
www.nasdum-madrid.16mb.com, u os los puedo pasar por e-milio :).
en el css: importante este reset.css:
@charset "utf-8";
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, html, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, keygen, label, legend, li, menu, meter, nav, object, ol, output, p, pre, progress, q, ruby, s, samp, section, small, span, source, strike, strong, sub, summary, sup, table, tbody, td, tdvideo, tfoot, thead, th, tr, tt, u, ul, var {
background: transparent;
border: none 0;
font-size: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: top
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
table, table td {
padding: 0;
border: none;
border-collapse: collapse
}
img {
vertical-align: top
}
embed {
vertical-align: top
}
time, mark, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block
}
body {
line-height: 1
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
y en el allPages.css y literalmente al principio:
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display: block
}
mark, rp, rt, ruby, summary, time {
display: inline
}
sin estas implementaciones tendremos serios problemas de compatibilidad.
a partír de aquí lo que debamos poner para nuestra web (en el css principal).
en el head de las pagis (mejor con plantillas) pondremos los siguiente y respetando el orden que propongo:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<script type="text/javascript" src="js/flexie.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/allPages.css">
<link class="cssfx" rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link class="cssfx" rel="stylesheet" type="text/css" href="css/allPages.css" media="screen" />
<script type="text/javascript" src="js/cssfx.min.js"></script>
Ni que decir tiene, que los css son con nombres particulares, es decir, podemos llamarlos como queramos, pero los js
¡nanai de la cachinbamba!; obvio, no?.
Pos ala, webeando, que es gerundio.
