Añada vídeos de YouTube escalable en todos los navegadores y dispositivos móviles, las tabletas y también los teléfonos de diseño de respuesta.
Lo primero que necesita es el código de inserción iframe YouTube, podemos obtener desde sus opciones sobre compartir de vídeo desde el sitio YouTube.
Colocar el código iframe tu página, el div contenedor del iframe (div.youtubevideowrap) tiene 2 declaraciones CSS para el ancho, tiene una anchura de 80% y un max-width: 640px .
lo que debemos de realizar es añadir en un contenedor div HTML al iframe de todo el vídeo y declarar la CSS.
<div class="youtube-container"><iframe.......></iframe></div>
.youtube-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube-container iframe, .youtube-container object, .youtube-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Espero haberte servidor este tutorial, No olvides comentar.
Ha habido un aumento imparable en el mundo multi-pantalla (smartphones, tablets, diferentes tamaños de pantalla portátil) en últimos años y la adición a la misma, es las gafas de Google y técnicos portátiles que se están convirtiendo en una parte de todo el medio el consumo de medios digitales . A diferencia de los viejos tiempos, sólo la construcción de un sitio para su escritorio no es suficiente, ya que tienes que tener cuidado de sus lectores que utilizan teléfonos inteligentes y tabletas para leer tu blog.
Diseño web Responsive es una técnica en su sitio se ajustará automáticamente de acuerdo con el lector de pantalla grande. Por ejemplo, si abre una página web que responde (InnovaCusco.com) en un teléfono inteligente o una tableta, te darás cuenta de que el contenido es visible primero y todos los demás elementos como la barra lateral y los widgets se empuja hacia abajo para dar una buena experiencia para el usuario.
Ahora bien, si usted es nuevo en el mundo de la capacidad de respuesta, aquí hay un interesante vídeo que explica lo que es un diseño web de respuesta:
Si quieres llevarlo al siguiente nivel, usted puede tener un sitio móvil para lectores de teléfonos inteligentes o tener una aplicación de teléfono inteligente para tu blog.
Para empezar, primero es necesario comprobar si su sitio es sensible o no. Aquí he enumerado algunas de las mejores herramientas de corrector de respuesta en línea que usted puede utilizar el botón derecho del ahora y comprobar cómo responda su sitio es. Usted puede utilizar estas herramientas para comprobar cómo su sitio web se verá en distintos tamaños de pantalla-y si su sitio no está listo para el mundo multi-pantalla, le sugiero que para inmediatamente el trabajo en hacer que su sitio sensible. Siempre se puede tomar la ayuda de los servicios Innova Cusco para conseguir un diseño sensible para tu pagina web.
Herramientas gratuitas de prueba Web-diseño:
Herramienta fabulosa para simular el entorno de paginas web en plataformas de Apple.
responsinator página web de prueba la capacidad de respuesta
Herramienta que se debe utilizar para comprobar la capacidad de respuesta de su sitio. Se le mostrará cómo su sitio se verá en diferentes dispositivos de Apple (iPhone 5, el iPhone 6, iPad) y junto con eso también se puede ver cómo su sitio web se verá en un teléfono con Android de diversos tamaños. Este sitio muestra tanto en modo horizontal y vertical, por lo que le dará una idea completa de su capacidad de respuesta. No obstante, también puede hacer clic en el enlace de su sitio en cualquier dispositivo y que le llevará a ese enlace. Esta característica es especialmente útil si usted quiere comprobar la capacidad de respuesta de diferentes secciones de sus sitios como página de contacto, solo puesto, página y así sucesivamente.
¿Soy sensible:
Este es un sitio web sencillo donde tiene que añadir cualquier URL sitios web y se puede comprobar la capacidad de respuesta sitio correcto en la pantalla. Mostrará mostrar misma como se ve en la imagen de arriba y se puede colocar el ratón a cualquier tipo de dispositivo y desplácese hacia arriba-abajo, y también hacer clic en el enlace para ver más. La pantalla no era tan clara, pero como una herramienta de comprobación de respuesta libre, hace un trabajo bastante bueno.
comprobador de diseño de respuesta
Lo que me gusta de esta herramienta web gratuito es la interfaz aseado. Usted puede comprobar su capacidad de respuesta del sitio en diferentes tamaños de pantalla que incluye el paisaje y el modo de retrato. Eespecially si es necesario comprobar la capacidad de respuesta en los detalles, se encuentra este sitio más útil que los dos anteriores. Simplemente puede seleccionar cualquier dispositivo como Nexus 7 y navega en el sitio hasta el momento en que haya terminado de comprobar la capacidad de respuesta. Esto es útil para un nuevo sitio que usted acaba de conseguir Diseñado por un desarrollador web, y la necesidad de comprobar la capacidad de respuesta de su sitio. Asegúrese de probar su sitio, tanto en el modo (Paisaje y retrato) de encontrar algún error en el diseño.
prueba sensible
Este sitio es útil, pero necesita una actualización como último modelo iPhone no se añade aquí para comprobar la capacidad de respuesta. Aún así le resultará útil si usted necesita para comprobar cómo responden su sitio está en diferentes teléfonos móviles de la marca o tabletas. Tienen una amplia gama de herramientas como el Kindle de Amazon, la tableta Nexus y muchos más. A pesar de que no ha sido actualizado por mucho tiempo, estoy seguro de rigurosas pruebas es todavía útil. Otra característica útil de este sitio es, siempre se puede estirar la pantalla de vista previa para comprobar su tamaño diferente anchura y con un solo clic se puede rotar entre el retrato y modo de paisaje.
Este es un sitio web que puede utilizar para agregar bookmarklet diseño responsivo . Basta con arrastrar y soltar el bookmarklet en la pestaña de favoritos y cuando cada vez que tienes que probar la capacidad de respuesta de un sitio o una página web, simplemente haz clic en el bookmarklet y se abrirá una pantalla como abajo para mostrar la capacidad de respuesta.
Si usted es un diseñador web usted encontrará screensiz.es página web interesante para encontrar el tamaño de las pantallas de los dispositivos móviles y tabletas.
Muchos desarrollamos con el Framework Bootstrap que nos da la facilidad de realizar páginas web adaptables a móviles, Pero al probar en diferentes navegadores tenemos el problema de compatibilidad y la que más nos da este problema es Internet Explorer 8 que no soporta este framework y al visualizar en ella nuestra web es un desastre.
Pero te doy la solución a ello, encontré estos dos enlaces que hacen la maravilla. Solo debes de añadirlos en el <head></head> de tu página web y listo así de fácil.
<head>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Espero haberte ayudado, no olvides comentar y dar like.
Un Wireframe es el protipo visual de un armazón o esqueleto de una web o aplicación en su inicio de elaboración. En ingles son sinónimos de Wireframe: skeleton, blueprint, outline.
sirve para dar ideas de secciones que conpondran un sitio web como jearquias y esquemas de navegación esto se realiza en blanco y nego no contiene colores ya que son solo estructuras de modelo.
Sencillo en su uso y cuenta con elementos básicos en la librería, existe una versión gratuita que permite guardar un proyecto con hasta 10 páginas y pueden exportarse en PDF.
Web Site: http://bit.ly/1l3YQ1N
Utilizado para hacer diagramas, mapas del sitio y flujos de usuario, también sirve para hacer Wireframes.
Web Site: http://bit.ly/1HxxGNn
Un interfaz con muchas buenas herramientas
Web Site: http://bit.ly/1IRSHRM
Web Site: http://bit.ly/1F0jR3e
Web Site: http://bit.ly/1Ai6PCI
Web Site: http://bit.ly/1dLjWKv
Web Site: http://bit.ly/1F0k06G
Web Site: http://bit.ly/1LhesJJ
Si conocen mas herramientas compartan lo en el campo de comentarios , muchas gracias.