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

De WikiEducator
Saltar a: navegación, buscar
(Instalación ffmpeg en Ubuntu)
Línea 30: Línea 30:
 
=== Instalación ffmpeg en Ubuntu ===
 
=== Instalación ffmpeg en Ubuntu ===
 
Seguir los pasos de la [https://ffmpeg.org/trac/ffmpeg/wiki/UbuntuCompilationGuide web de ffmpeg.org].
 
Seguir los pasos de la [https://ffmpeg.org/trac/ffmpeg/wiki/UbuntuCompilationGuide web de ffmpeg.org].
<pre>
 
.
 
├── 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]
 
</pre>
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
*Página index.html
+
=== Formatos de Vídeo ===
<source lang="html4strict">
+
*MP4: [http://caniuse.com/#feat=mpeg4 Principalmente para IE y Safari]. También en Google Chrome.
<!DOCTYPE html>
+
*WebM: [http://caniuse.com/#feat=webm Opera, Firefox y Google Chrome]
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+
*Ogg: [http://caniuse.com/#feat=ogv Opera, Firefox y Google Chrome]
<!--[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>
 
</source>
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">

Revisión de 11:08 31 ene 2013

Usuario:Juanda/html5video/nav

Introducción

<!DOCTYPE HTML>
<html>
<body>
 
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
 
</body>
</html>


Instalación ffmpeg en Ubuntu

Seguir los pasos de la web de ffmpeg.org.

Formatos de Vídeo

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 utilice la última versión de su rendering engine (puede tener varias) o Google Chrome Frame si está instalado:

<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. Leer más sobre el viewport

Librería Modernizr

  • Incluye html5 Shiv: útil para navegadores que no entienden las etiquetas semánticas de html5
  • Único javascript que necesita estar en la parte superior del documento: ¡antes de que se empiece a renderizar la página!
  • Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador.

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

  • Viene con unos css por defecto y aquí es donde podríamos poner lo nuestro.
<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: Para los plugin que instalemos (también se pueden incluir en el directorio vendor)
  • main.js: Para nuestro propio javascript
        <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 recomienda ponerla en la parte superior, para contar todas las visitas
  • En la parte inferior, optimizamos el tiempo de carga de nuestra 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>

Personalización