Elementos UI web y moviles gratuitos en PSD y HTML/CSS

Hoy en día existen muchísimos sitios donde los diseñadores y creativos puedes subir y mostrar su trabajo a la comunidad como Behance, Dribbble o Loviv, la mayoría de los elementos subidos son interfaces de usuario o UI por su siglas en Inglés, estás interfaces solo se encuentran en formato imagen como JPG o PNG y raramente el diseñador sube el archivo fuente en formato PSD, así que si algunos de nosotros desea tener esa interfaz de usuarios, formulario o botón en nuestras aplicaciones podemos maquetar en HTML y CSS el archivo fuente PSD.

Para los que no tenemos tanto conocimiento de maquetación web a continuación les presento una lista de elementos de interfaces de usuario con su archivo PSD y su respectivo código fuente HTML y CSS para descargar gratuitamente y así poder usarlos en tus proyectos web:

12.psd-to-html-css

Classic Web Buttons

27.psd-to-html-css

Login Form

30.psd-to-html-css

Mini Drop-Down Menu: PSD | CSS

32.psd-to-html-css

Profile Tooltip: PSD | CSS

33.psd-to-html-css

Mini Social App: PSD | CSS

34.psd-to-html-css

Vertical Navigation Menu: PSD | CSS

36.psd-to-html-css

Settings Panel: PSD | CSS

Pueden encontrar la lista completa de elementos en DesignBeep

La evolución de la Web

La web como la conocemos hoy en día no ha sido así desde el origen de Internet, ha tenido una larga evolución de más de 20 años, inicialmente las primeras páginas web era únicamente texto plano con un poco de estilo, así fue la primera página web que estuvo disponible en Internet, luego la Web empezó a evolucionar haciéndose un poco más compleja gracias a las tablas <table> que eran la única forma de distribuir elementos en la página.

Para el año 1994 se consolida la W3C, o el Consorcio Internacional de la Web, cuyo objetivo principal es brindar la Web para cualquier persona en el mundo en cualquier dispositivo, a los dos años, en 1996, nacen JavaScript y Flash que hacen la web un poco más interactiva y con más estilo, así como más dinámica, para el año 1998 surge CSS o Hojas de estilo en cascada, convirtiendo la Web en un lugar mucho más colorido y con mucho estilo, dejando de lado el diseño con tablas.

PHP fue lanzado en el mismo año, 1998, brindando la posiblidad de crear sitios web dinámicos desde el lado del servidor, durante 5 años no hubo mayores avances hasta que en el 2003 fue lanzado un borrador de la nueva versión de CSS, dando origen a diversas aplicaciones bajo el nombre de la Web 2.0, así fue hasta el año 2008 donde la web se volcó hacia los dispositivos móviles y por último, solo hace 3 años, en el 2010, surge HTML5, el nuevo estándar de HTML, el lenguaje con que todo empezó.

the-evolution-of-web-design_50aa39c029731

 

jPages – Paginando resultados fácilmente con jQuery

Si estás en busca de una forma fácil y rápida de paginar resultados, este plugin de jQuery te vendrá como anillo al dedo. Se trata de jPages, y lo que permite es lo que describe el título de la entrada. La manera de invocarlo, al igual que todo aquello hecho con jQuery resulta casi que ridículo, de lo sencillo que es:

/* when document is ready */
$(function() {
/* initiate plugin */
$("div.holder").jPages({
containerID: "itemContainer"
});
});

Con este plugin tendrás la posibilidad de paginar no sólo texto, sino además galerías de imágenes, con efecto de aparición incluido.

Documentación: jPages (Descargar)

Visto en: Kabytes

Google nos muestra la evolución de Internet [Infografía interactiva]

Uno de los hijitos (?) de Google cumplió tres años el día de ayer. Se trata nada mas y nada menos que de Chrome, su navegador web, que a decir verdad, ha dejado a todo mundo con un muy buen sabor de boca. Y de paso, gracias a su presencia, ha ayudado a que la evolución de los navegadores avance cada vez más y mejor.

Para celebrarlo Google ha creado una infografía interactiva, donde comenzando desde los años 90’s nos muestra el comienzo del protocolo HTTP, así como el nacimiento del HTML. De ahí en adelante van surgiendo los navegadores, desde Mosaic, hasta los que existen en la actualidad. Y para todos los curiosos, no sólo muestra los dibujos y etiquetas sobre la línea de tiempo, sino que al hacer click en cada uno de estos elementos, nos mostrará una pequeña descripción, a manera de resumen, con la opción de seguir leyendo más sobre el tema, u otras cosas que pueden descubrir.

Así pues, se vuelve una infografía bastante atractiva, ya sea para saciar la curiosidad, o como material de aprendizaje para las nuevas generaciones. Digo, no duden que algún día exista en las escuelas, así como Historia o Biología, una materia sobre Internet :)

Visto en: chrome.blogspot.com

Pequeños errores al iniciarse en CSS

Desde CSS-Tricks nos presentan algunos de los errores más frecuentes que como regla general todo el que inicia en CSS comete, o por lo menos da lugar a dudas. Haya sido o no nuestro caso, vale la pena retomarlos y aclarar el tema.

Tag qualifying

.class {}

p.class {}

¿Cuál es la diferencia entre ambos?

El primero seleccionará todos los elementos que contengan el nombre de esa clase. El segundo seleccionará únicamente los elementos de esa clase que estén dentro de un elemento párrafo.

 El orden de los selectores importa

.class div { color:red }

div.class { color:green }

¿Por qué son diferentes?

En el primer ejemplo tenemos un espacio en blanco entre .class y div, indicando que estamos seleccionando «Cualquier div que sea descendiente de cualquier elemento cuya clase sea class». En el segundo caso se seleccionan los divs que sean de la clase class.

 La verdad detrás del uso de IDs

Al CSS no le importa mucho si utilizas clases o IDs, siempre y cuando les apliques algún estilo. En teoría con los IDs es más rápido, pero en la práctica no notarías la diferencia.

Si trabajas con Javascript, debes asegurarte que no haya IDs repetidos. Aparte  Javascript sí trabaja más rápido con IDs.

Los IDs tienen un mayor valor para CSS, si aplicas un estilo a un elemento que tiene una clase y un ID, lo que se tomará en cuenta será lo especificado por el ID.

Hovers

div:hover div { color:green; }

:hover es un selector que se aplica sólo cuando el mouse pasa por encima de un elemento en particular. Lo extraño es que no necesariamente se debe dar estilo al elemento que está activando el hover. En el ejemplo superior se está dando estilo a los divs descendientes del elemento div que está siendo cubierto por el mouse, pero no a él mismo.

Los espacios en blanco no importan

Esto:

div{color:red}

Es lo mismo que:

div      {

color        :          red;

}

Para lo único que se ocupan espacios es para especificar la descendencia de los selectores, por ejemplo

ulli { } no es lo mismo que ul li { } . Y claro, también se necesitan en caso de que quieras darle cierto orden a tu código CSS.

Sobre la escritura de clases

div { font-size:18px; font-weight:bold;font-size:22px;}

En caso de haber repetido alguna propiedad CSS aplicará como estilo la última listada, en el ejemplo el texto del div sería de 22px.

El orden en CSS importa

Si tienes dos selectores con las mismas especificaciones, como los siguientes:

.red { color:red; }

.green { color:green; }

Y después son aplicados al mismo elemento, el último selector será el que se aplique. El nombre de las clases dentro del llamado que se hizo en HTML no importa.

<div class=»red green»> Será VERDE</div>

<div class=»green red»> Será VERDE</div>

 

Visto en: css-tricks

JsFiddle – Edita, testea y comparte HTML, CSS y Javascript

Muy buena herramienta, así lo definiría en tres palabras. Se trata de un editor en línea que permite no sólo escribir el código, sino también compartirlo, y aún mejor, ver la previsualización de lo que estamos haciendo. Bastante útil creo yo, sobretodo en el ámbito educativo, pues el maestro puede proporcionar a los alumnos cierto código, y luego estos jugar con él e interpretarlo. O bien, pasarles un código que tenga errores, y que ellos los detecten, o etc. Y obviamente, también para los profesionales que quieren compartir el trabajo con otros colaboradores, para pulir aún más el código o lo que se pueda presentar.

En fin, que si andas metido en el desarrollo web Front End te vendrá bastante bien la herramienta, pues como sus creadores la describen es «Un campo de juego para desarrolladores web, una herramienta que puede ser utilizada de diferentes maneras. Uno puede utilizarla como editor en línea para crear snippets de HTML, CSS y JavaScript. El código puede ser compartido con otros, publicado en un blog, etc. Además, los desarrolladores de JavaScript pueden detectar bugs fácilmente»

Web: jsfiddle

Visto en: wwwhatsnew

82 recursos para empezar a diseñar

Para aquellos que ven como una utopía el llegar a ser diseñadores y hasta poder vivir de esto o solo eres diseñador en busca de nuevos recursos o tutoriales para renovar esa inspiración y practica que alguna vez creíste perdida , pues el día de hoy y por cortesía de TheNextWeb te traemos una recopilacion de un total de 82 recursos para ya sea empezar o simplemente afianzar tus conocimientos previos.

En este enlace encontraras una masiva recopilación de recursos que va desde la teoría del diseño hasta las mas conocidas herramientas para tu diseño web.

 

Por cortesía de: TheNextWeb.

Consejos prácticos y rápidos para desarrolladores web noveles

Teclado-Gateway-m6810m

Los siguientes son algunos consejos que me hubiera gustado conocer recién comencé en el mundo de la programación web. Con estos podrás no sólo organizar mejor tu código, sino acelerar la carga de tu sitio. Con lo que le ahorrarás un poco de trabajo al servidor, lo cual con el tiempo se traduce en ahorro de recursos. Así pues, vamos a los consejos:

  • Comenta cada etiqueta div que estás cerrando: Quizá en un principio recuerdes muy bien la estructura de tu sitio, pero conforme vayas agregando más y más divs, se irá perdiendo la sencillez, y aún a pesar de que utilices indentación, te será más fácil si agregas a cada etiqueta div de cierre un comentario, especificando que div se cierra con ella.

comentar-cada-div-cerrado

  • Utiliza un reset de CSS: Ya en una entrada anterior se habló sobre los reset CSS. Su uso es recomendable debido a que los navegadores web no toman los mismos valores por default cuando leen elCSS. Por lo que se podría decir que cada uno interpretará el CSS a su manera. Más cuando utilizamos un reset, nos aseguramos de que lo interpreten todos igual, con los valores por defecto que nosotros indiquemos.

    Leer más

Prueba diferentes Resets CSS

Esta entrada será de utilidad para aquellos que se dedican o que van comenzando con el diseño web. Así como a uno que otro programador cuya tarea sea realizar el maquetado en algún proyecto . Como sabrán, para el aspecto visual de los sitios web se utiliza un lenguaje llamado CSS, el cual a muy grandes rasgos, le dice a cada elemento de HTML, XML, SVG, etc. donde colocarse, y las propiedades visuales que debe adquirir.

css reset

Leer más

Generadores de imágenes para rellenar al maquetar

Durante el desarrollo de un sitio web, dependiendo de su diseño, es común que lleguemos a necesitar imágenes con las cuales rellenar ciertas secciones. Generalmente no son las finales, sino imágenes temporales, sólo para “simular”.

Si bien es cierto que nosotros podemos crearlas en Paint, Photoshop, GIMP, o cualquier programa de edición digital, también lo es que hay sitios que nos pueden evitar el tener que hacerlo nosotros mismos, ahorrándonos algo de tiempo y esfuerzo.

A continuación dos sitios que merece la pena nombrar y tomarlos en cuenta, por su utilidad, sencillez y simpatía:

Leer más