Crea un slider automático con HTML y CSS

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Aprende cómo colocar video como fondo de página web con HTML y CSS

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Banner animado con HTML y CSS

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Menu horizontal responsive con HTML y CSS

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Diseña un botón 3d con efecto Toggle con HTML y CSS

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Diseñando un Sidebar Menu con HTML, CSS y JQuery

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Concurso creativo CREADS con premios Corel

Llegó el verano y es tiempo de relajarse un poco, por eso os informamos del siguiente Concurso organizado por CREADS.

El equipo de CREADS os reta con un concurso libre y muy divertido. “¿Y si los gatos dominaran el mundo?” Dad rienda suelta a toda vuestra imaginación para ponerla en escena para este concurso.

En este periodo estival, Corel se ha asociado por primera vez con Creads para ofrecer los regalos de premio.

EL BRIEF

Imaginad un mundo de LOLcats, un mundo lleno de gatitos monísimos, un mundo en el que los humanos han dejado de ser los reyes. Con Creads todo es posible en cuanto a concursos se refiere!
Tenéis 20 días para imaginar una creación única sobre la temática “Y si los gatos dominaran el mundo”. Todo está permitido: ilustraciones, memes, 3D, fotomontajes… Depende de vosotros!
Las 3 creaciones más originales, divertidas y cualitativas serán recompensadas por el jurado Creads/Corel. Para este concurso también tenéis la posibilidad de votar vuestras creaciones preferidas (con muchíiiiismo fairplay, por supuesto). Los 2 creativos que reciban más votos se verán igualmente recompensados con regalos.
Cuidado con las imágenes utilizadas para el proyecto porque podrían estar sujetas a derechos de autor.
Nota: Las proposiciones que juzguemos insultantes, sexualmente explícitas, fuera de tono… etc, serán susceptibles de ser retiradas de la galería para no ofender a nuestros compañeros de cuatro patas.

DEADLINE

-Fase de creación y votos: del 1 al 20 de julio
-Fase de votos únicamente: de 21 al 23 de julio
-Deliberación del jurado: lunes 27 de julio.

PREMIOS

N°1 : Premio CREADS con el apoyo de COREL
1 CorelDraw Graphics Suite X7
(precio de base : 718.99€)
N°2 et N°3 : Premio CREADS
2 Corel Painter 2015
(precio de base : 424.95€)
N°4 et 5 Votes des Créatifs
2 tablettes Wacom Intuos 4 PTK 440
(precio anunciado : 150€)

Para participar visita la web oficial del concurso en CREADS >>
http://www.creads.es/diseno-concepto-creativo/gatos-dominaran-el-mundo/brief

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Crea un efecto Parallax con CSS

En este vídeo de la serie de CSS3 hablaremos sobre el efecto Parallax, y les mostrare una manera sencilla de crear uno para sus proyectos.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Crea un menú con animación css

En este tutorial veremos como crear u menu sencillo pero a la vez vistoso gracias a la propiedad transition que nos ofrece css3.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Aprende acerca de la etiqueta meta Viewport

Inicialmente creada por Apple para definir diversas directrices sobre cómo el iPhone debe renderizar un documento web, el viewport es una etiqueta META que se ha convertido en un estándar en el momento actual. La mayoría de dispositivos móviles la soportan en la mayor gama de sistemas operativos, lo que la convierte en un integrante imprescindible para cualquier página que esté pensada para verse también en dispositivos en movilidad.

El viewport es uno de esos conceptos que cuesta más de explicar que de entender, o por lo menos a mí me lo parece. Quizás tampoco sea el interlocutor más adecuado para hablar de esta etiqueta META, pero alguien la tiene que tratar con el detalle que se merece en el Manual para el diseño web en móviles. Así que ¡vamos manos a la obra!

Básicamente, sirve para definir qué área de pantalla está disponible al renderizar un documento, cuál es nivel de escalado que puede realizar el usuario, así como si el navegador debe mostrarla con algún zoom inicial. Todo ello se indica a través de varios parámetros en la propia etiqueta META, como veremos en el presente artículo.

Entender el viewport

Comencemos por entender qué es el viewport. Y como veremos, se trata de un concepto bien sencillo, pues corresponde con el área que está disponible en la pantalla del navegador.

Aunque el viewport es algo propio de navegadores para móviles y cobra sentido justamente cuando estemos pensando en estos dispositivos con pantallas reducidas, podemos entenderlo primero en el contexto de un navegador de escritorio.

El viewport en un navegador en cualquier ordenador con sistemas tradicionales es igual al área de la ventana, o mejor dicho, al área disponible para renderizar el documento web (o sea, le restamos toda la interfaz del navegador, como botones, barra de direcciones, barra de menús, barras de desplazamiento, etc.) Dicho de otro modo, es el área útil donde se mostrará la página web.

¿Sencillo? Espero que sí. Pero ahora pensemos en móvil. Quizás sepas que cuando se ven las páginas en una dispositivo a menudo se reducen los contenidos, para conseguir que se ajusten al reducido espacio de la ventana del navegador. Es decir, para mostrar toda la página en el espacio disponible de la pantalla del dispositivo, se hace un escalado de la web, de modo que se ve todo en pequeñito.

Esta es la manera en la que se vería el sitio actual de DesarrolloWeb.com que está optimizado para ordenadores de escritorio y no tiene definida ninguna etiqueta viewport.

Bien, pues el viewport cuando estamos hablando de dispositivos móviles, no corresponde al tamaño real de la pantalla en píxeles, sino al espacio que la pantalla está emulando que tiene. Por ejemplo, en un iPhone, aunque la pantalla en vertical tiene unas dimensiones de 320 píxeles, en realidad el dispositivo está emulando tener 980 píxeles. Esto hace que ciertas páginas web (optimizadas para navegadores de escritorio) quepan en una pantalla de 320 píxeles, porque en realidad el Safari para iOS está emulando tener un espacio de 980 píxeles.

Pues bien, el viewport en estos casos es el espacio que el dispositivo emula tener, no la resolución real en píxeles que tiene la pantalla. Lo interesante en este caso es que los desarrolladores somos capaces de alterar el viewport que viene configurado en el navegador, algo que resulta totalmente necesario si queremos que nuestra página se vea correctamente en dispositivos de movilidad. 

Esta imagen tiene la misma foto que se muestra en la pantalla de un iPhone. Supongamos que la foto mide 320 píxeles de ancho. En la parte de la derecha tendríamos la foto a tamaño real, que es como se vería si tuviéramos un viewport configurado a 320 píxeles de ancho. Pero al verla en un iPhone con un viewport configurado a 980 píxeles de ancho, la imagen se verá bastante más pequeña.

Configurar la etiqueta Viewport

Cuando Safari de iOS renderiza un documento web, hace un escalado de los contenidos para que las páginas diseñadas para sistemas de escritorio se vean más o menos bien en un teléfono móvil. Como pudiste apreciar en la primera imagen de este artículo, al verse el sitio web de DesarrolloWeb.com, los contenidos aparecían muy pequeñitos y ello nos obliga a hacer zoom para poder leerlos. Sin embargo, nosotros podemos configurar el viewport para decirle a Safari, o cualquier otro navegador para móviles, qué debe hacer en este sentido.

Nota: Insistimos en que, cuando hablamos de Safari, en realidad nos referimos a cualquier navegador para móviles, ya sean en dispositivos iOS, Android, Blackberry, etc., ya que la etiqueta viewport es soportada actualmente por la mayor gama de sistemas para móviles. En realidad, decimos Safari solamente porque fue el primero en utilizarla.

Es altamente recomendable que se altere la etiqueta viewport para conseguir que tu navegador se comporte como tú deseas, especialmente en el caso de las páginas que estamos diseñando para verse correctamente en pantallas pequeñas. Para ello disponemos de los siguientes parámetros en la etiqueta META.

Width: anchura virtual (emulada) de la pantalla o anchura del viewport.

Height: altura virtual de la pantalla o anchura del viewport.

Initial-scale: la escala inicial del documento.

Minimum-scale: la escala mínima que se puede poner en el documento.

Maximum-scale: la escala máxima configurable en el documento.

User-scalable: si se permite o no al usuario hacer zoom.

Como puedes ver, en la META viewport no se indica simplemente las dimensiones de la pantalla emulada, sino también el nivel de zoom que se puede estar configurando inicialmente y el nivel de zoom que se permitiría tener.

Nota: recordar que el usuario puede hacer zoom en la página web, con el gesto típico en la pantalla táctil. Al hacer zoom, realmente no estaría cambiando el viewport, sino la escala con la que se visualiza el documento.

En esta tercera imagen tenemos un viewport de 320 píxeles, sin embargo hemos definido un "initial-scale" de 1.5, por eso la imagen que medía realmente 320 píxeles de ancho no cabe en la pantalla del iPhone.

Un ejemplo de etiqueta viewport sería el siguiente:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">

La anchura y la altura del viewport deben quedar más o menos claros, pues se refieren simplemente a las dimensiones fijas del viewport inicial. Sin embargo, esas dos medidas no se suelen indicar, siendo más habitual definir únicamente la anchura con el valor "device-width", que es una medida que hace referencia a la anchura de la pantalla del dispositivo.

Así que con width=device-width conseguimos que el viewport sea igual a la anchura real de la pantalla del dispositivo, de modo que no se tratará de emular una pantalla mayor de lo que realmente es y veremos los píxeles reales.

Con initial-scale=1 conseguimos que no se haga zoom sobre el documento. Es bien simple, el contenido de la web no se transformará, ni se agrandará, ni se hará menor.

Con user-scalable=no conseguimos que el usuario no pueda hacer zoom en la página, con lo que siempre se mantendrán las medidas que nosotros hemos definido al construir la web.

Nota: desactivar el zoom con user-scalable=no nos facilita tener siempre la escala a como nosotros hayamos definido en la etiqueta META viewport, lo que puede simplificarnos la vida a la hora de definir cómo se debe ver una web. Sin embargo, estaremos limitando la posibilidad de que el usuario haga zoom puntualmente para agrandar o empequeñecer alguna cosa. Por todo ello, cabe sopesar bien qué es lo que queremos permitir y si realmente definiendo un maximum-scale y minimum-scale, estamos acotando bien el uso de nuestra web.

Conclusión

El viewport requiere un estudio pormenorizado y algo de práctica para entender bien sus posibilidades y la manera de configurarlo, de modo que se optimice la forma con el que nuestra web se debe de ver en los dispositivos móviles. Como se ha podido comprobar, hay muchas y diversas posibilidades para explorar.

Esperamos que en este artículo te hayamos sacado de dudas, sin embargo posiblemente podríamos estar hablando del viewport durante un largo rato para resolver todas las necesidades de los desarrolladores y las dudas de aquellas personas que están diseñando webs optimizadas para móviles o adaptables a todos los dispositivos (responsive design).

Para mayores referencias, se puede consultar la página web "Configuring Viewport" de la documentación de Apple iOS para desarrolladores.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Medidas estándar de pantallas para tus media queries

Como sabemos, los breakpoints de un diseño Responsive Web Design para crear tusMediaQueries no deben orientarse a tamaños de pantalla estándar, sino debe ser algo específico para tu propio diseño web. Sin embargo, muchas personas quieren saber, al menos a modo orientativo, qué medidas de pantallas habituales se pueden encontrar en los dispositivos.

Lo que no quiero que se piense es que este punto contradice todo lo dicho anteriormente en el Manual de Responsive Web Design. Por eso es bueno insistir que estas medidas son solamente a modo orientativo, para aquellas personas que tienen curiosidad sobre las dimensiones de los dispositivos "estándar".

Recordando que cualquier colección de medidas para media queries está siempre desactualizada e incompleta, porque es imposible albergar todas y cada una de las medidas de pantalla que hay en el mercado de ordenadores y dispositivos y además, cuando se publique o lea este texto, quizás ya hayan aparecido nuevos dispositivos con dimensiones diferentes a las que se mencionan. Así que toma estas medidas de viewport como una referencia únicamente orientativa y sobre todo parcial. Entiende además que no pretendemos que diseñes para ninguna de estas dimensiones, puesto que sería un error.

Nota: Muy importante, lo que se muestra a continuación es el tamaño del Viewport. Las medidas en centímetros o pulgadas de la pantalla no tienen que ver con las medidas que el teléfono tiene en píxeles. Pero además, el móvil puede tener una resolución en píxeles diferente que su viewport, porque muchos móviles usan varios píxeles de pantalla para representar un píxel de imagen, debido a su "device pixel ratio" o el ratio de pixels que el dispositivo usa para mostrar un pixel de computable en medidas de viewport. Por ejemplo, la pantalla del Nexus 5 es Full HD, lo que implica una resolución de 1080 x 1920 pixels. Sin embargo, al mostrar una página web el Nexus 5 tiene un viewport de 360 x 598. Todo esto es un poco de lío, pero es porque las densidades en píxles de las pantallas ahora son mayores y para representar un píxel usan varios puntos.

Medidas de teléfonos móviles

La gama iPhone tiene medidas que son factibles de recopilar, puesto que los modelos que han aparecido en el mercado son limitados. Sin embargo, la gama Android debe tener decenas de miles de tipos de pantallas distintas, por lo que simplemente podemos hacer un resumen de modelos más típicos.

iPhone 4 y 4S: 320 x 480 

iPhone 5 y 5S: 320 x 568 

iPhone 6: 375 x 667 

iPhone 6+: 414 x 736 

Nexus 4: 384 x 598 

Nexus 5: 360 x 598 

Galaxy S3, S4, S5: 360 x 640 

HTC One: 360 x 640

Medidas de tablets

Pasa un poco lo mismo, podemos indicar medidas de viewport para los tablets de Apple, pero es imposible dar todas las medidas que encontrarás en un Android. Recuerda que, así como los móviles, puedes situar la pantalla en vertical u horizontal, así que es un poco lo mismo que digamos que un iPad tiene unas dimensiones de 768 x 1024 o de 1024 x 768.

Además, por la densidad de píxeles de las pantallas, aunque iPad 1, 2, 3 y 4, incluso el iPad Mini, tengan el mismo viewport, los píxeles de resolución de sus pantallas son diferentes, lo que cambia es el pixel aspect ratio. En este caso concreto, los iPad Mini y los iPad 1 y 2 tienen un device-pixel-ratio de 1 mientras que iPad 3 en adelante tiene un device-pixel-ratio de 2.

iPad todos los modelos, así como iPad Mini: 1024 x 768 

Galaxy Tab 2 y 3 (7.0 pulgadas): 600 x 1024 

Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280 

Nexus 7: 603 x 966 

Nexus 10: 800 x 1280 

Microsoft Surface W8 RT: 768 x 1366 

Microsoft Surface W8 Pro: 720 x 1280

Ordenadores de escritorio

En el caso de los ordenadores de escritorio contamos con las resoluciones de pantalla típicas de toda la vida, aunque también entra en juego recientemente la densidad de píxeles que aumenta en ordenadores modernos, como las pantallas Retina en los Mac.

Pantallas pequeñas (usadas por ejemplo en netbooks): 1024 x 600 

Pantallas medianas: 1280 x 720 / 1280 x 800 

Pantallas grandes: ancho superior a 1400 píxeles, ejemplo 1400 x 900 o 1600 x 1200.

Relojes

Aquí ya la cosa se pone complicada, puesto que el viewport es muy reducido, por lo que la experiencia de usuario debe ajustarse mucho, pero eso es otro tema.

Apple Watch: 42mm de anchura de pantalla, viewport de 256px (calculado en relación al tamaño de pantalla del iPhone) 

360 Moto Watch: 218 x 281

Conclusión

De momento eso es todo. No quiero acabar sin volver a insistir en que esta recopilación no pretende ser completa, ya que las Medidas estándar para breakpoints no existen, pues depende del diseño de tu página.

Hay dos referencias que me parecen muy útiles y que he utilizado como documentación para construir este listado. Por una parte el sitio webViewport Sizes, que tiene una estupenda referencia de una cantidad enorme de dispositivos. Por otra parte el artículo Media Queries for Standard Devices de CSS-Tricks, que te viene con un código de los media-queries que deberías usar para definir estilos para un dispositivo, lo que nos parece un poco error por los motivos que ya hemos comentado, pero que podrían ser de utilidad a los interesados (solo por capricho) de aplicar estilos específicos para un modelo particular.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Bootstrap y las Barras de Navegación

En este vídeo hablamos sobre una herramienta muy importante los Navbars o barras de navegación que Bootstrap 3 nos facilita.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información