Automatización de tareas para proyectos en Front-End

Automatización de tareas para proyectos en Front-End Leer

GruntJS es la herramienta de automatización de tareas escrita en JavaScript que más crece actualmente. Es robusta y está activamente siendo mejorada, y sólo requiere NodeJS para funcionar. Su fortaleza está en crear rutinas automatizadas para procesos repetitivos, como por ejemplo: compilar un archivo LESS/SCSS/HAML/Handlebars/Liquid, minificar archivos .css y .js, concatenar librerías .js, comprimir imágenes, [...]

Animaciones CSS3 al fin del ciclo

Animaciones CSS3 al fin del ciclo Leer

Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con animaciones CSS3. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo tanto, la ejecutaremos sólo 1 vez. La escribimos y la aplicamos, como a continuación:

Checkboxes con estilo

Los formularios son una de las razones de porque el mundo corporativo entró a Internet: captura de datos de usuarios. Es la forma más fácil y rápida de obtener ese ansiado contacto, con el cual puedo convertir a ese usuario en mi cliente. Para los fabricantes de browsers, la visualización de los campos de formularios [...]

Auto-prefix en Sass

Utilizar pre-procesadores CSS se ha vuelto una necesidad en la actualidad, ya que sus múltiples ventajas hacen que no exista excusa para seguir escribiendo CSS puro. Lo mejor es que no intervenimos el lenguaje, sólo lo escribimos más eficiente. Ahora les presento un útil mixin para Sass que ayuda a lidiar con los prefijos propietarios [...]

jQuery geoRegionalización

jQuery geoRegionalización Leer

Este sencillo plugin permite generar dependencia entre 2 <select> y entre ellos mostrar la relación region / comuna que conforma la distribución geopolítica de la República de Chile.

Pseudo contenido con CSS

La propiedad CSS content: “”; viene siendo utilizada para entregar más estilos donde no necesitas extra marcado con HTML. Su soporte es amplio (IE8+ y demases browsers modernos). Su uso está atado a los pseudo-elementos :after y :before y permite generar contenido (de tipo texto) en dicho pseudo-elemento. Un ejemplo básico:

CSS3: calc()

CSS3: calc() Leer

Calc() es una propiedad CSS3 que permite realizar operaciones matemáticas simples sustituyendo un valor fijo por una expresión dinámica de medida, por ejemplo, sumando o dividiendo anchos de un contenedor.

Dando estilos a placeholder

Con HTML5 llegaron muchas nuevas etiquetas y atributos, y se nota que en la W3C se esforzaron en la captura de datos. Los formularios tuvieron muchas mejoras y en este artículo mostraré como manipular un útil atributo: placeholder. Placeholder permite integrar un texto predefinido dentro de un campo de texto (<input>). En general este texto [...]

HTML5: el atributo download

HTML 5 trae el nuevo atributo download para enlaces. Cuando utilizado dentro de un <a>, este atributo puede ir definiéndose a sí mismo (lo que causará que se descargue solamente el archivo) ó puede contener el nombre del archivo a ser descargado, sin la ruta asociada la que va como de costumbre dentro del atributo [...]

overflow: scroll en iOS

En desktop, para tener un elemento escroleable basta con que declares un alto fijo y defines overflow: auto | overflow: scroll y si el contenido interior es mayor que el alto aparecerá la barra de scroll automáticamente. En browsers móviles y tablets ocurre lo mismo pero la sensación es muy inferior ya que el touch/drag [...]

Web y especialización

Web y especialización Leer

Oye Jorge, tengo ganas tomar un diplomado. ¿Sabes de alguno que me recomiendes? Hey, voy a hacer un postgrado en XXX de YYY en la Universidad ZZZ, ¿Qué te parece?

Íconos y pantallas iPhone/iPad

Íconos y pantallas iPhone/iPad Leer

Para un proyecto espontáneo que se me ocurrió hacer, utilicé los íconos y pantallas que recomienda Apple para todos los sitios que requieran ser visualizados en sus teléfonos y tabletas. En mis tiempos mozos, cuando comencé a jugar con web móvil sólo existía 1 tamaño y 1 resolución. Años han pasado y a continuación está [...]

IE v/s console

¿Cansado de soportar IE? Te entiendo, pero aún hay clientes que piden que sus proyectos se vean en estos browsers antiguos. Frustraciones aparte, cuando escribes Javascript y usas console.log() para debuggear tu código en la consola del browser, es usual que éstas funcionalidades se quiebren en IE8-.

Giveaway Books

Giveaway Books Leer

Sorteo realizado, los libros fueron enviados por correo. Espero sean aprovechados. Gracias por interesarse, apenas tenga más leídos los vuelvo a distribuir. Pantone Web ColorEdgar Méndez, México The Psychology Of…Pato Mas, Chile No Me Hagas PensarLeticia Chamorro, Paraguay [ES] Tengo unos libros que acumulan polvo y seguro será más útil a otras personas que a [...]

¿Qué no es HTML5?

¿Qué no es HTML5? Leer

Es un acrónimo ya muy utilizado y, la mayoría de las veces, mal denominado. Conocemos lo que es, trabajamos con él a diario, pero hay mucha gente que aún no conoce el real significado y por ende, sus limitaciones y alcances.

Review: CSS Hat

Codear HTML/CSS es una tarea cada vez más requerida, y más exigente debido a lo rápido que avanza la tecnología web (gracias al aporte de muchos contribuidores anónimos, y al silent upgrade de los browsers entre otros factores). Por esto se agradece cuando llega una herramienta que nos facilite la vida y mantenga nuestro trabajo [...]

Reemplazar el texto pero mantener el elemento hermano con jQuery

Reemplazar el texto pero mantener el elemento hermano con jQuery Leer

Problema: WordPress imprime un código HTML con el siguiente formato y necesito modificar sólo el texto, manteniendo el checkbox:

Movimiento del browser al arrastrar en móviles

Movimiento del browser al arrastrar en móviles Leer

Este es un comportamiento por defecto de los browsers para móviles, el cual al hacer algún tipo de arrastre extremo dentro del <body> (me refiero del extremo superior al inferior principalmente, ó si está en landscape de derecha a izquierda y viceversa) éste se mueve levemente con un efecto resorte, lo que eventualmente puede llegar [...]

Review: REWORK

REWORK muestra de los orígenes de 37Signals de palabras de sus mismos fundadores. Esta empresa-notstartup estadounidense se hizo famosa mundialmente por su producto Basecamp utilizada por el 90% de las agencias y empresas orientadas a la web alrededor del mundo y por Rails, el framework favorito de quienes adoran Ruby.

Layout Responsive / Adaptativo / Flexible

Layout Responsive / Adaptativo / Flexible Leer

Nuevos conceptos pero no tan nuevas técnicas. La moda del diseño/desarrollo responsive hace necesaria una aclaración de algunas definiciones. Y qué mejor que hacerlo con un ejemplo utilizando las mismas técnicas descritas, para que puedan bucear por el código fuente.

El evento onPaste

El evento onPaste Leer

Eventualmente podrías tener un <textarea> donde permitas al usuario pegar lo que tiene guardado en su clipboard. Quizás deseas impedir al usuario pegar contenido en un campo de formulario, por ejemplo, en uno de password. Para ambos casos existe un evento denominado onPaste.

Cargando