Categoría: Noticias

En el siguiente tutorial crearemos un slider animado con jquery y lo vamos a hacer responsive, es decir que se adapte a cualquier disepositivo que el visitante este utilizando, para esto vamos a trabajar con un plugins que nos facilitara el trabajo, se trata de FlexSlider(http://www.woothemes.com/flexslider/) un plugins de Jquery de código abierto que nos facilitara este trabajo y lo optimiza para los dipositivos moviles. Esto es lo que vamos a conseguir: Ver Demo Hacerlo no sera complicado,, Vamos a comenzar !! El HTML Primero vamos con el contenido del head…

Leer más

En el siguiente tutorial vamos a crear otro menú tipo slider con efectos de transición de css3 (Otros Ejercicios de menú con propiedades de CSS3: menú 1 – menú 2), un ejercicio donde crearemos un hermoso menú que a la vez es muy práctico, muy sencillo y fácil para usar en algunos de nuestros proyectos. Esto es lo que vamos a conseguir, el resultado de nuestro ejercicio de hoy: Para una perfecta Visualización utiliza estos navegadores en sus respectivas versiones: Vamos a comenzar!!. EL HTML 1 2 3 4 5 6 7 8…

Leer más

En este tutorial veremos como podemos hacer una barra de progreso con CSS animada con un poco de Javascript, nos puede ser útil para indicar el estado de una tarea, el tiempo de carga de algo u tiempo que se espera para mostrar algo. No nos tomara mucho trabajo, ya que será un ejercicio muy fácil y practico. Esto es lo que lograremos: Para un buen funcionamiento y visualización utiliza los siguientes navegadores y versiones: Vamos a comenzar!!. El Codigo HTML 1 2 3 4 5 6 7 8 9…

Leer más

En el siguiente tutorial, vamos a ver como hacer un campo de búsqueda para nuestro sitio tomando como referencia el que utiliza Apple en su website. Ellos hacen esto posible gracias a imágenes sprite que cambian de estado, nosotros vamos a utilizar solo CSS y algunas características avanzadas de CSS3, Vamos a lograr esto sin necesidad de utilizar una sola imagen. Asi, que vamos a comenzar. EL HTML 1 2 3 4 5 <div class=»buscador»>    <form method=»get» action=»» id=»buscar»>       <input name=»q» type=»text» size=»50″  />    </form> </div> En el HTML…

Leer más

En este tutorial veremos como hacer unas elegantes cajas informativas tipo menú con HTML y animadas con CSS3, seguimos dando tips para que cada día avancemos y profundicemos mas en el mundo del diseño y desarrollo web, esta vez con algunas técnicas CSS3 para conseguir resultados agradables a la vista. Esto es lo que vamos a lograr: Demo Sin mas, comencemos. EL HTML 1 2 3 4 5 6 7 8 9 <div class=»homeBox»>    <div class=»caja1″>        <div class = «imagen»><img src = «images/1.png»></div>       <h2>PROYECTO-1</h2>       <div class = «descripcion»>Lorem…

Leer más

En este nuevo ejercicio o tutorial vamos a seguir viendo y a seguir practicando el uso de las propiedades de CSS3, la dinámica es ver un poco lo que podemos hacer con el poderosoCSS3. En este ejercicio veremos como mostrar información oculta en un banner animado utilizando CSS3 y algunas de sus propiedades y así simularemos un efecto buen efecto 3D. Esto es lo que vamos a conseguir: Ver Demostración Si vistes el demo te habrás dado cuenta que el efecto es agradable y realista por lo menos en los buenos navegadores…

Leer más

Un elemento que no debe de faltar en el proceso de diseño y desarrollo web es el wireframe, pero ¿Qué es un Wireframe y para que nos sirve?, bueno, hablando en el contexto de diseño y desarrollo de paginas web, un wireframe es esencialmente una guía visual que representa la estructura del sitio, es el esqueleto, el esquema u orden del diseño. Normalmente este se crea antes que el diseño ya que el diseño depende de la estructura que hayamos definido.  Normalmente esta tarea la realiza un arquitecto de información dependiendo de…

Leer más

Las hojas de estilos en cascadas (CSS) son la herramienta  que utilizamos para dar estilos a nuestras estructuras web, sabemos el poder y alcance que tenemos cuando utilizamos esta tecnología, y mas ahora que podemos hacer cosas realmente sorprendentes utilizando css3, pero pasar de lo realmente fácil a lo tedioso y aburridor solo hace falta un paso, no se si has tenido que actualizar estilos a un portal web o a una pagina grande en contenido, cambiar colores, botones, tipografías.. teníamos que buscar los estilos que se estaban aplicando al elemento y…

Leer más

Las hojas de estilos en cascadas (CSS) son la herramienta  que utilizamos para dar estilos a nuestras estructuras web, sabemos el poder y alcance que tenemos cuando utilizamos esta tecnología, y mas ahora que podemos hacer cosas realmente sorprendentes utilizando css3, pero pasar de lo realmente fácil a lo tedioso y aburridor solo hace falta un paso, no se si has tenido que actualizar estilos a un portal web o a una pagina grande en contenido, cambiar colores, botones, tipografías.. teníamos que buscar los estilos que se estaban aplicando al elemento y…

Leer más