Para los que no lo conocen Markdown es un lenguaje de marcado de texto ligero y rápido desarrollado por John Gruber y publicado en el 2004. Markdown está enfocado en hacer la escritura la textos, especialmente web, fácil de leer y especialmente, fácil de escribir, el te permite escribir textos con una sintaxis sencilla y fácil de recordar que luego puede ser convertido a HTML completamente válido sin problemas.

Aunque el lenguaje este año cumple 10 años, no es hasta hace 2 años que empezó a ganar adeptos, especialmente gracias a que está haciendo utilizado por millones de desarrolladores para publicar documentación de sus proyectos, en el último año plataformas y herramientas reconocidas han optado por soportarlo en sus sistemas, aumentando significativamente su número de seguidores.

En el 2013 se vio el surgimiento de decenas de editores web creados específicamente para escribir en Markdown, unos más sencillos que otros, incluso algunos con sincronización con Google Drive y Dropbox.

Para los que no les he suficiente un editor en línea existe excelentes alternativos como aplicaciones de escritorio, en este caso les presento LightPaper, un aplicación gratuita exclusiva de Mac pero con una alternativa de pago para Android. (combinación extraña si me lo preguntan).

LightPaper se concentra en ofrecerte una interfaz increíblemente limpia y ligera, permitiéndote concentrarte 110% en lo que estás escribiendo, característica fundamental en estos tiempos de ruido y notificaciones, la aplicación soporta Pestañas, navegador de carpetas incorporado, vista previa en vivo de tu documento y por supuesto exportar tus textos como HTML.

Si necesitas personalización respecto a la combinación de colores del editor o la fuente del texto, puedes personalizarlas sin problemas e incluso crear tus propias combinaciones.

LightPaper

La entrada LightPaper: Excelente editor de Markdown para Mac se publicó primero en Punto Geek.

Te cuento que ya no es necesario una aplicación de escritorio ni un editor de código ni un lento y pesado, pero robusto IDE para editar código, ahora ya existen aplicaciones y herramientas online para ejecutar cualquier código que necesites y ver los cambios en vivo a medida que escribes el código.

A continuación les dejo una lista de editores de código en vivo y en la web, todos absolutamente gratuitos y sin nada que envidiarle a un editor de código como aplicación de escritorio:

CodePen

CodePen te permite incluir tu HTML, CSS y JavaScript en los panales destinadas para cada tecnología web y ver en vivo como cambia la forma final de tu código mientras lo editas. Permite guardar todos tus códigos, compartirlos, incrustarlos en otros sitios web e incluso ejecutarlos en los smartphones.

JSFiddle

JSFiddle es uno de los más populares porque es uno de los más completos, te permite agregar cualquier librería de JavaScript o CSS, pero lo mejor es que ya tiene un listado con docenas de las librerías más populares como jQuery, Mootools, YUI, e incluso frameworks JavaScript como AngularJS o EmberJS, permite además hacer peticiones AJAX dentro del editor, limpiar el código JavaScript y guardar varias versiones de tu edición.

Mozilla Thimble

Mozilla Thimble es uno de los últimos esfuerzos por la empresa Mozilla, quien esta detrás del popular navegador Firefox, de llevar a más personas las hermosas capacidades de las tecnologías web, aunque no tiene muchas opciones, es uno de los más rápidos, como punto a favor te muestra errores en tu HTML rápidamente y subrayado de etiquetas, puedes incluir CSS y JavaScript en el documento sin problemas, pero no tiene guardado de código, así que ten cuidado con cerrar la pestaña del navegador.

dabblet

dabblet es un editor enfocado al CSS y HTML, tiene dos vistas principales, el HTML y el resultado o el CSS y el resultado, como lo pueden notar esta enfocado al CSS de la página, puedes escribir cualquier CSS que se te ocurra y funcionará directamente en la previsualización, la forma final de tu código se puede compartir o ver a pantalla completa, también guarda todos las versiones que hagas del código.

CSSDeck

CSSDeck, como su nombre lo indica está completamente enfocado al CSS, te muestra un panel pequeño para el HTML, uno más grande para el CSS y por último el panel con el resultado de tu código, como punto a favor de CSSDeck, puedes cambiar el fondo de la página de resultados y crear enlaces únicos que puedes compartir para que cualquiera vea tu nueva creación, por último puedes descargar el resultado en un archivo .html.

JSBin

Lo mejor para el final, JSBin es una completa joya en cuanto a editores de código online se refiere, puedes incluir CSS, JS y HTML, agregar una o varias de las más de 50 librerías que tiene disponibles para importar, por supuesto puedes compartir el código final, incrustarlo en sitios web seleccionando que paneles deseas mostrar en el resultado final, exportar el código a un Gist de Github, guardarlo como plantilla y navegar desde la misma ventana a través de todos tus Bins.

La entrada Herramientas online para probar código en vivo se publicó primero en Punto Geek.

Gracias a que es CSS3 pueden ver el código completo y empezar a jugar con el para aprender como fue logrado tal efecto para un solo elemento HTML.

Reactor Arc de Iron Man

Green Lantern

Spiderman

Captain America’s Shield

Si jugaron un poco con el código se darán cuenta de que el truco  es utilizar las nuevo pseudoelementos :after y :before, los cuales pueden tener cualquier cosa adentro, como degradados, fondos o letras.

Vía: Google+

La entrada Símbolos de superheroes creados solo con CSS3 se publicó primero en Punto Geek.

¿Para qué imágenes, programas de edición como Photoshop o Illustrator si puedes hacer lo que quieras con CSS?

Una de las cosas que se pueden hacer solo con CSS y un elemento HTML son figuras geométricas, desde simples cuadros, círculos, triángulos hasta formas más complicadas como un Jinjiang o una estrella. Por hoy aprenderán como crear un simple triángulo, esta no es una explicación donde copias y pegas, realmente te explica el truco y como funciona para crear un triángulo solo con CSS:

¿Cómo se crea un triángulo con CSS? (Quería insertar la animación acá pero WordPress no lo permite)

Original creado por CSS-Tricks

La entrada Aprende como se crea un triángulo con CSS se publicó primero en Punto Geek.

Hoy me encuentro con un recurso que me hubiese servido muchísimo en semanas anteriores, se trata de extractCSS, un procesador de documentos HTML, en cualquiera de sus versiones, que extrae los ID, las clases y los estilos en línea o inline styles del documento en cuestión.

Posee algunas configuraciones, se puede seleccionar el tipo de información que se desea extraer del documento, el número de espacios de indentación y el estilo de las llaves de apertura en el CSS, cuando tengas todo listo solo debes copiar el HTML al que deseas extraer la estructura CSS y darle click al botón Extrac! verde, obtendrás al lado derecho la estructura de los estilos y si es el caso el estilo en línea de los elementos HTML que lo tengan.

extractCSS

La entrada extractCSS: Obtén la estructura, id’s, clases y estilos en línea de cualquier HTML se publicó primero en Punto Geek.

Al desarrollar aplicaciones o sitios web repetidamente nos encontramos con la situación que necesitamos algún componente de interfaz de usuario para cumplir con algún requerimiento, un componente de interfaz de usuario es un menú de navegación, un calendario, un seleccionador de fecha o Datepicker, también puede ser un Dialogo Modal, una barra de progreso o un seleccionador de color, elementos rutinarios que ya existen en Internet y son relativamente fácil de incorporarlos en nuestro proyecto o si necesitas algo más específico puedes también hacerlo tu mismo.

UIBox es una página web que funciona a modo de librería o recopilatorio de todos estos componentes, tratando de solucionar una de las mayores fortalezas y debilidades de Internet: su tamaño, a pesar que exista de todo, es tan grande que es difícil encontrarlo, el autor de la página web se encarga de recolectar los elementos manualmente, comprobar que tengan un Demo funcional, excelente documentación, y el soporte de varios navegadores, al encontrar un componente con estas características lo agrega a la librería haciéndolo más fácil de encontrar y posteriormente integrar en nuestros proyectos.

Así que la próxima vez que necesites algún componente rápido para tu proyecto solo entra a UIBox y lo tendrás funcionando en minutos.

La entrada UIBox: Colección de elementos de interfaz de usuarios se publicó primero en Punto Geek.

Siempre es bueno recomendar este tipo de cursos gratis, y en este caso les quiero dejar uno titulado «Maquetando el monstruo web», un curso con el cual aprenderán a armar una web HTML y CSS desde cero sin tener ningún tipo de conocimientos previos.

Acerca del curso

Ayuda al Dr. Frankestein en su afán de construir y darle vida al monstruo web, y aprende conjuntamente a él a dar los primeros pasos en la creación de sitios web con HTML y CSS de forma dinámica y divertida, con vídeos, exámenes y desafíos.

Este es un curso introductorio para aquellos que están arrancando desde cero a crear para la web. HTML y CSS son los dos componentes básicos de cualquier sitio web o aplicación, y debes aprenderlos para poder estructurar y presentar correctamente tus proyectos. Una vez completado el curso, contarás con los conocimientos necesarios para poder armar tu propio sitio web.

Pueden acceder al curso desde Acamica completamente gratis, solo tienen que registrarse en el sitio y esperar a que comience, ya que la fecha de inicio está programada para el 1 de septiembre. Igualmente, si están leyendo esto luego de la fecha de inicio no se preocupen porque pueden hacerlo igual.

La entrada Curso gratis de HTML y CSS para crear tu web desde cero se publicó primero en Punto Geek.

Cuando estamos programando algún proyecto siempre necesitamos a la mano la documentación del lenguaje de programación, librería o utilidad que estemos empleando para su implementación, porque no sabemos como hacer algo o saber si lo que necesitamos hacer es posible hacerlo con dicho lenguaje o librería.

Cada una de estas herramientas tiene sus sitios oficiales y su documentación oficial para ser consultada, pero como buen geeks que somos es mejor tener toda esta información reunida en un solo lugar para que sea mucho más rápido la consulta y no perder tanto tiempo buscando entre varias página la forma de hacer algo.

El desarrollador web Thibaut Courouble se dio cuenta de esto y decidió crear DevDocs, un sitio que recopila la documentación de los tres principales lenguajes de programación web, HTML, CSS y jQuery cuenta con una sección para cada lenguaje donde se encuentran organizadas por orden alfabético las etiquetas, atributos y utilidades de cada uno de los lenguajes, cada una con ejemplos, documentación clara y precisa sobre su correcto uso y la forma correcta de utilizarlas.

DevDocs

La entrada Documentación de HTML, CSS y jQuery en un solo lugar se publicó primero en Punto Geek.

Seguramente este recurso le va a ser de muchísima ayuda a los que recién están empezando en esto.

Curso de HTML

Curso de PHP

Enlaces: Curso HTML Go! – Curso de PHP

La entrada Cursos en video de HTML y PHP gratis se publicó primero en Punto Geek.

jQuery es una librería gratuita de JavaScript que facilita muchísimo el trabajo al momento de trabajar con el HTML de páginas web y la más popular en el mundo JavaScript, su slogan es «Escribe menos, haz más» y lo cumple al pie de la letra, tiene métodos, funciones y una sintaxis que mejora el rendimiento del trabajo cuando trabajar con HTML se trate, permite crear animaciones, manejar eventos, crear plugins para la librería y especialmente, crear aplicaciones AJAX.

Aunque la librería y los métodos son expresivos, fáciles de usar y con una documentación completa y extensa nunca está de más tener a mano un buen tutorial práctico para comprender mejor su uso, para ello existe tryjQuery, un sitio web creado por CodeSchool y jQuery para ayudarte paso a paso y de una manera muy práctica conocer jQuery a través de vídeos, una consola interactiva en la cual puedes escribir código jQuery directamente en el navegador.

Se empieza por supuesto desde lo más básico, como seleccionar elementos del DOM y progresivamente aumenta el nivel de dificulta al manejo de eventos y cambios en el estilo del HTML, está pensado lanzar la versión número 2 del curso/tutorial con temas más avanzados en algunas semanas.

Aprende jQuery: tryjQuery

La entrada Aprende jQuery paso a paso con tryjQuery se publicó primero en Punto Geek.

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:

Classic Web Buttons

Mini Drop-Down Menu: PSD | CSS

Profile Tooltip: PSD | CSS

Mini Social App: PSD | CSS

Vertical Navigation Menu: PSD | CSS

Settings Panel: PSD | CSS

Pueden encontrar la lista completa de elementos en DesignBeep

La entrada Elementos UI web y moviles gratuitos en PSD y HTML/CSS se publicó primero en Punto Geek.

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ó.

La entrada La evolución de la Web se publicó primero en Punto Geek.

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

La entrada jPages – Paginando resultados fácilmente con jQuery se publicó primero en Punto Geek.

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

La entrada Google nos muestra la evolución de Internet [Infografía interactiva] se publicó primero en Punto Geek.

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

La entrada Pequeños errores al iniciarse en CSS se publicó primero en Punto Geek.

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

La entrada JsFiddle – Edita, testea y comparte HTML, CSS y Javascript se publicó primero en Punto Geek.

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.

La entrada 82 recursos para empezar a diseñar se publicó primero en Punto Geek.

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.

• 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.
• Si tu sitio tiene mucho tráfico, no uses @import: Los CSS se pueden llamar a través de @import, y funciona, pero consume más tiempo, por lo que no conviene utilizarlo si tu sitio tiene mucho tráfico, ya que simplemente gastarías el tiempo de tus visitantes. Lo mejor es usar:

• No subas cualquier imagen: Y no me refiero a imágenes donde salgas de fiesta y no quieres que la gente no vea, sino que, si vas a subir una imagen a tu sitio, antes tienes que optimizarla para la web. Es decir, no subas imágenes de 4 MB, eso haría tu sitio muy lento, y a tu servidor sufrir de más. Antes de cargas las imágenes reduce su tamaño y la calidad. Con ello ganas que pesen mucho menos, y que los visitantes no se desesperen esperando a que se cargue por completo la página.
• No mezcles CSS con HTML: Cuando CSS aún no entraba en vigor, se le daba forma al HTML con atributos propios de HTML. Más ahora contamos con CSS, y a menos que sea muy necesario, será mejor  que no mezcles tu HTML con CSS. Y no es un capricho, la razón es que cuando insertas CSS en las líneas de HTML, el código se vuelve “sucio”, y por ende más complicado de leer.
• No mezcles Javascript con HTML: Al igual que con el CSS, mezclar Javascript con HTML es una mala práctica. Se vuelve confuso y quizá al final le perdamos la pista a lo que hemos agregado.

Javascript dentro de enlace HTML:

Lo adecuado sería, mandar llamar la función aparte, en este caso utilizando jQuery (Se ve más complicado, pero cuando te acostumbras resulta mejor):

• Coloca el llamado al archivo de Javascript al final: Si bien muchas veces nos acostumbramos a ponerlo en el <head>, se sugiere colocarlo al final, antes del cierre de la etiqueta <body>. Colocándolo de esta manera nos aseguramos de que Javascript se ejecutará ya que el contenido de la página esté cargado completamente, y no al revés.
• Escribe el código HTML de manera semántica: Como tal HTML no es un lenguaje de programación, sino más bien uno de maquetación con el que podemos crear documentos estructurados. Por ello, debemos conservar el orden en nuestro código, y respetar la jerarquía de cada elemento, por ejemplo:

• Comprueba que tu sitio se vea bien en varios navegadores a la par que vas desarrollándolo: Si haces esto, te aseguro que te evitarás varios dolores de cabeza. Ya que si te esperas hasta el final para tratar de corregir las diferencias entre un navegador y otro, te será más difícil lograrlo. En cambio, si lo haces al vuelo, mientras vas agregando nuevos elementos, podrás detectar donde radica el problema con más facilidad, y proceder a corregirlo.

Visto en: Catswhocode

La entrada Consejos prácticos y rápidos para desarrolladores web noveles se publicó primero en Punto Geek.

Así pues, sin entrar a discusiones mayores, les comento que en muchas ocasiones se recomienda utilizar hojas de CSS cuya única función es resetear los valores por defecto que trae cada navegador. Y con ello me refiero a que por ejemplo, en un navegador la etiqueta <h1> se muestra con un tamaño de 18 pixeles, y quizá en otro navegador esa misma etiqueta tenga un valor por defecto de 16 pixeles. Por lo que como podemos imaginar, en cada navegador se verá un poco distinto.

He ahí la utilidad de los reset, ya que nos ayudarán a que independientemente del navegador que se utilice, el contenido se vea lo más parecido posible a lo que realmente planeamos, según como lo hayamos establecido en nuestro CSS. Y para facilitarnos eso de encontrar el reset adecuado, les de recomiendo cssresetr, un sitio desde donde podrán no sólo probar como se verían los distintos tipos de reset que ofrece en la comparativa, sino que si se van al link de la parte derecha que dice CSS: Reset Library, podrán escoger el que los haya convencido y les mostrará su código. El cual pueden copiar y utilizar sin preocupaciones en sus proyecto.

Web: http://cssresetr.com/

La entrada Prueba diferentes Resets CSS se publicó primero en Punto Geek.

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:

Lorempixum

Podemos utilizarlo a través de una URL, por ejemplo, si queremos una imagen de 400 x 200 sobre deportes y en escala de grises, tendríamos que utilizar un link como este:

http://lorempixum.com/g/400/200/sports

O bien, utilizar el generador directamente desde su página web para crear imágenes más personalizadas.

Placekitten

Al igual que el anterior, basta con una URL para obtener imágenes de relleno. Pero estas cuentan con la particularidad de ser fotos únicamente de gatitos, por lo que si te gustan estos animales, creo debe ser esta tu opción.

Para obtener una imagen de 400 x 200 pixeles en escalas de grises tendríamos que usar el siguiente link:

http://placekitten.com/g/400/200

Pues listo, ya sabes donde y como conseguir imágenes rápidamente y sin mayor esfuerzo que escribir un link.

Visto en: Genbeta

La entrada Generadores de imágenes para rellenar al maquetar se publicó primero en Punto Geek.

Visto en Chistes Geeks

La entrada Humor Geek: El cuerpo humano expresado en HTML y PHP se publicó primero en Punto Geek.

Mucho se esta hablando hoy en día de todas las bondades que trae HTML5 en diversos frentes. No solo se trata de una implementación que intentará desterrar para siempre al reproductor Adobe Flash de la Web; hay cientos de mejoras que servirán para que Internet sea un lugar mucho mas amigable.

Pero  no hay que negar la disputa que trajo consigo. ¿Que códec se debe usar para poder ver los videos en cualquier navegador? Hoy en día, la cosa esta complicada. Por un lado, tenemos a H.264, un códec privativo y pago. Por el otro, tenemos a Ogg Theora Vorbis, un códec libre y gratuito. Pero ahora hay otro tercero en discordia: el códec privativo VP8 que adquirió Google hace un tiempo atrás. Según cuentan las malas lenguas, es bastante mejor que los otros dos y encima todo apunta a que el mega monopolio buscador lo libere en su próxima conferencia.

Partamos de la idea  de que la Web debe ser libre y neutral. Por esta razón es que muchos estamos muy en contra de Internet Explorer y Microsoft: sus políticas de imponer como se debe ver la Web no nos interesa en lo mas mínimo, es por eso que cuando apareció Firefox muchos usuarios hicimos el gran salto. Y es por eso mismo que Microsoft decidió darle mas atención a su navegador.

Entonces, ¿por que es importante la elección de un códec libre para la etiqueta video de HTML5? Si YouTube decide utilizar H.264, dejara de lado a los usuarios de Firefox y Opera que optan por una alternativa libre (en este caso, Ogg Theora Vorbis). Si, nos deja de lado ya que H.264 requiere pagar patentes anuales que ni Mozilla ni Opera Software están interesados en pagar. Ademas, todos sabemos que las licencias suelen cambiar conforme se les antoje a las empresas y no seria muy descabellado imaginar que quieran cobrar luego a los usuarios o empresas particulares que utilicen el códec, como ya paso una vez (en el podcast de Mozilla Hispano desarrollan mas este tema)

En el peor de los casos, Google no liberaría VP8 y Ogg Theora Vorbis no seria elegido para YouTube y otros portales de video. Esto significaría dejar de lado a un montón de usuarios (Firefox tiene mas de un 25% de cuota de mercado, no hay que olvidarse de eso) que apuestan por una web libre y neutral. Si, recalquemos esa palabra que a tantos les gusta enarbolar. Una cosa es hablar de la neutralidad de la Web y otra cosa es apostar por una Web neutral. Si H.264 llegara a imponerse y la gente lo acepta, claramente estaríamos contradiciéndonos con ese concepto.

Pero en el mejor de los casos, Google liberaría VP8 y lo adoptaría para su portal de YouTube. Esto seguramente seria copiado por el resto de los portales de video, favoreciendo a todos los internautas. Un códec libre y gratuito significa una web neutral y perfectible.

Como se dan cuenta, la decisión esta prácticamente en manos de Google. ¿Neutralidad de la Web? Lo dudo muchísimo. Esperemos que por lo menos, se utilice un códec libre, es lo mínimo que pueden hacer.

Imagen: Pillate un linux

La entrada La importancia de elegir un códec libre para HTML5 se publicó primero en Punto Geek.

Lo único que tienen que hacer es descargarlo del sitio oficial, subirlo al servidor, y renombrar el archivo srt-resume.html a index.html. Obviamente tienen que tomarse el trabajo de editar la plantilla con sus datos, pero lo principal ya está listo, y si se animan hasta con tocar un poco el CSS pueden dejarlo perfecto.

Como les dije, el autor de la plantilla no pide enlace a cambio, es totalmente libre para poder editar a gusto, cambiarle el diseño, los colores, igualmente nunca viene mal un enlace como agradecimiento, pero no es obligatorio.

Visto en Web Resources Depot

La entrada Plantilla en HTML para crear un resumen de tu CV se publicó primero en Punto Geek.

La idea es muy simple: ropa interior con distintos mensajes HTTP, que podemos ir combinando según el estado de ánimo y las ganas.

Ya sea para darle un toque divertido a la vida en pareja (o para reírnos solas frente al espejo), por USD$7,99 podemos llevarnos cualquiera de estos modelos (traducidos):

411 – Largo requerido (sin comentarios).

413 – Entidad Solicitante muy grande (ya quisieran, ¿no?).

403 – Prohibido (para “esos días”).

200 – OK (para cuando el estado de ánimo invita).

Ver producto en ThinkGeek.

La entrada Bombachas HTTP se publicó primero en Punto Geek.

WebToMail busca solucionar eso y resulta una buena opción para leer artículos o post a los que no se pueden ingresar. Este servicio te manda páginas web por mail, fácil y rápido.

Envías un correo electrónico a send@webtomail.co.cc y en el asunto ponés la URL del sitio que quieras ver. Unos minutos después, llega un mail con la página en formato HTML. Así de simple.

El sitio de WebToMail sólo sirve para explicar el funcionamiento del servicio y una vez que tenemos la dirección guardada, ya podemos utilizarlo sin necesidad de dejar el mail.

La entrada WebToMail envía páginas en HTML por mail se publicó primero en Punto Geek.