Diferencia entre revisiones de «Usuario:Juanda/html5/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(Estructura básica)
(Hacks en CSS)
Línea 102: Línea 102:
 
</source>
 
</source>
 
Para indicar a IExplorer que versión de su navegador tiene que utilizar para renderizar la página:
 
Para indicar a IExplorer que versión de su navegador tiene que utilizar para renderizar la página:
<source lang="html4strict>
+
<source lang="html4strict">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
</source>
 
</source>
 
</div>
 
</div>
 
<div source="html4strict">
 
<div source="html4strict">
 +
 
===viewport===
 
===viewport===
 
<source lang="html4strict">
 
<source lang="html4strict">

Revisión de 10:23 28 ene 2013

Usuario:Juanda/html5/nav

Introducción

Pasos para crear un sitio web

  • Establecer la estructura básica del sitio web.
  • Añadir contenidos, estilo y funcionalidad
  • Probarla de forma local
  • Opcionalmente ejecutar un script para automatizar la optimización de la web: ant build script o node build script.
  • Desplegar el sitio web


Estructura básica

Esta es la estructura básica sugerida por HTML5 Boilerplate:

.
├── css
│   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
├── .htaccess
├── 404.html
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
└── [apple-touch-icons]
  • Página index.html
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
 
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
 
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
 
        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>
 
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
 
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
</html>

Hacks en CSS

  • Comentarios condicionales

Creados por Microsoft para su navegador. Cualquier otro navegador asumirá que es un comentario el código html intermedio:

<!--[if CONDICION]> Código HTML <![endif]–>

Ejemplo:

<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->

Para indicar a IExplorer que versión de su navegador tiene que utilizar para renderizar la página:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

viewport

<meta name="viewport" content="width=device-width">

Establecemos el viewport de nuestra web igual al viewport que tiene por defecto el dispositivo. Así la web se verá "a pantalla completa" pero con un zoom. Otra opción sería:

@viewport {

 width: 980px;
 min-zoom: 0.25;
 max-zoom: 5;

}

Esto no encajaría en todos los user agent!! Por ejemplo con un mínimo zoom de 0.25 para un display de 240px de anchura, nos quedarían 20px sin poder ver.

Librería normalice

  • Librería que hace que los diferentes elementos renderizados por el navegador se comporten según estándares.
  • Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador.
<link rel="stylesheet" href="css/normalize.css">

Librería normalice

  • Librería que hace que los diferentes elementos renderizados por el navegador se comporten según estándares.
  • Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador.
<link rel="stylesheet" href="css/normalize.css">


Librería main.css

  • Librería main.css ....
<link rel="stylesheet" href="css/main.css">

Librería modernizr.js

  • Librería modernizr ....
<script src="js/vendor/modernizr-2.6.1.min.js"></script>

jQuery: ¿CDN o local?

  • Si window.jQuery es undefined habrá habido algún problema al obtenerlo del CDN.
  • En este caso, procederemos a insertar en nuestra página la versión local de jQuery.
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>

plugins.js y main.js

  • plugin.js:
  • main.js:
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

Google Analytics

  • Herramienta de análisis de las visitas a un sitio web.
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>

</div>