|
|
| Línea 8: |
Línea 8: |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| | + | ==Logotipos y diseño |
| | *Son un elemento clave para una web bien diseñada | | *Son un elemento clave para una web bien diseñada |
| | :[http://dribbble.com/ Dribble]: recursos diseñadores | | :[http://dribbble.com/ Dribble]: recursos diseñadores |
| Línea 13: |
Línea 14: |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
| − | * Bancos de imágenes | + | * Bancos de foografías |
| | : http://www.shutterstock.com/ | | : http://www.shutterstock.com/ |
| | : http://www.istockphoto.com/ | | : http://www.istockphoto.com/ |
| | : http://www.fotolia.com | | : http://www.fotolia.com |
| | + | </div> |
| | + | <div class="slide"> |
| | + | ==Imágenes en dispositivos== |
| | + | *Útil para dar un aspecto más moderno y tecnológico |
| | + | *Muy usado en programas de software, mostrando por ejemplo una aplicación dentro de un ipad |
| | + | *Desde Ubuntu podremos capturar la pantalla o ventana actual |
| | + | *Hay varios servios que nos ofrecen nuestra imagen en un dispositivo físico: |
| | + | : http://placeit.breezi.com |
| | + | : http://mockuphone.com |
| | + | : http://developer.android.com/distribute/promote/device-art.html |
| | + | : http://aarnis.com/demo.html |
| | + | : http://goo.gl/aLuT6e |
| | </div> | | </div> |
| | <div class="slide"> | | <div class="slide"> |
Revisión de 10:13 14 ene 2014
Usuario:Juanda/html5video/nav
==Logotipos y diseño
- Son un elemento clave para una web bien diseñada
- Dribble: recursos diseñadores
- Behance, portfolios online de diseñadores en la nube de Adobe.
Video en html5
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>
Video responsivo
- Declarar dimensiones "estáticas" no es buena idea:
<video width="400" height="300" ....
- Utilizaremos porcentajes: el vídeo se adaptará a su elemento contendedor.
- En html5 es bueno definir solo la anchura para que el video mantenga su proporción:
video {
width: 100% !important;
height: auto !important;
}
Vídeos de youtube, vimeo
Obtención de código
- Código inserción vídeos youtube:
<iframe width="640" height="480" src="http://www.youtube.com/embed/oDlsOyPKUTM" frameborder="0" allowfullscreen></iframe>
- Código inserción vídeos vimeo:
<iframe src="http://player.vimeo.com/video/57444237" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
- También se puede usar object y embed para insertar código no html. Por ejemplo youtube con Flash:
<object width="640" height="480">
<param name="movie" value="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&version=3" type="application/x-shockwave-flash"
width="640" height="480" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>
Vídeo responsivo por iframe
- Si no se especifica las dimensiones de un elemento tipo iframe, embed, object y canvas, en navegador lo dimensiona como 300x150px
- No se puede utilizar el truco de 100% width, el navegador pondría una altura de 150px que sería normalmente demasiado pequeña.
- Ver solución
