Etiqueta ‘Desarrollo web’
Automatización de tareas con Gulp.js
Fecha de publicación: 2016/02/18
Excelente artículo acerca de la automatización de tareas con Gulp.js, un sencillo modo de aprender Gulp y mejorar la productividad en el día a día del desarrollo front-end.
Datos del artículo:
- Etiquetas: Desarrollo web, gulp.js, javascript, node js
- Publicado en categorías: Desarrollo web
- Comentarios desactivados en Automatización de tareas con Gulp.js
Mixin SCSS para dar estilos a campos con atributo placeholder
Fecha de publicación: 2013/02/03
Un sencillo mixin SCSS para darle color al texto del placeholder, distinto del que lleve el campo de formulario:
@mixin input-placeholder($color) {
&.placeholder {color: $color;} /* if not supported, Javascript should add class */
&:-moz-placeholder {color: $color;} /* Mozilla Firefox 4 to 18 */
&::-moz-placeholder {color: $color;} /* Mozilla Firefox 19+ */
&::-webkit-input-placeholder {color: $color;} /* WebKit browsers */
&:-ms-input-placeholder {color:$color;} /* Internet Explorer 10+ */
/* browsers with full support for placeholder styling */
&::input-placeholder {color: $color;}
&:input-placeholder {color: $color;}
&::placeholder {color: $color;}
&:placeholder {color: $color;}
}Datos del artículo:
- Etiquetas: Atributo placeholder, Atributos HTML, CSS, CSS3, Desarrollo web, Mixins, SCSS, Selectores CSS
- Publicado en categorías: CSS, Desarrollo web, HTML 5
- Comentarios desactivados en Mixin SCSS para dar estilos a campos con atributo placeholder
Calendario accesible con Javascript (Jquery)
Fecha de publicación: 2011/12/18
Llevaba tiempo queriendo montarme un calendario con Javascript, y dejar de depender de calendarios de terceros (que no siempre se ajustaban a lo que necesitaba), y por fin lo he hecho. Así que, lo publico por si a alguien le resulta útil.
El calendario tiene las siguientes características:
- Posibilidad de insertarlo en línea (el comportamiento al clicar una fecha no va definido, habrá que crearlo según sea necesario)
- Detección de soporte de calendario para los campos de fecha en HTML5
- Accesible si obviamos el requerimiento de soporte Javascript: no es dependiente de dispositivo.
- Posibilidad de limitación de fechas seleccionables.
- Facilidad de traducción a otros idiomas.
- Inicio de semana (domingo o lunes) configurable.
Datos del artículo:
- Etiquetas: Calendario, Campos de tipo fecha, Desarrollo web, HTML, javascript, Jquery, Plugins Jquery
- Publicado en categorías: Desarrollo web, HTML 5, Javascript
- Hay 4 comentarios
Listas ordenadas: cambiar estilos de la numeración
Fecha de publicación: 2011/10/04
A los elementos de lista se les pueden añadir por CSS bullets, números, letras, etc. que les precedan cuando son visualizados en el navegador, mediante la propiedad ‘list-style’, o bien asignarles una imagen de fondo mediante la propiedad ‘background’.
Cuando se trata de listas ordenadas lo habitual es utilizar números:
ol li {list-style:decimal;}Los números de la lista ordenada llevarán el mismo estilo que el elemento LI. Pero puede ocurrir que se quiera que los números tengan un estilo distinto, por ejemplo que, a diferencia del texto, vayan en negrita:
Datos del artículo:
- Etiquetas: CSS, Desarrollo web, Elemento LI, Elemento OL, Elementos de lista, HTML, Pseudo-elemento before, Pseudo-elementos CSS
- Publicado en categorías: CSS, Desarrollo web
- Comentarios desactivados en Listas ordenadas: cambiar estilos de la numeración
CSS: Rollover de elemento de imagen
Fecha de publicación: 2011/09/01
Es muy común la necesidad de que una imagen dentro de un enlace esté como elemento de imagen (IMG) y que al mismo tiempo deba tener un rollover:
<p>
<a href="#"><img src="imagen_estado_normal" alt="Imagen de ejemplo" /></a>
</p>La solución habitual pasa por utilizar Javascript para hacer el cambio de imagen en el estado ‘sobre’.
Pero quizá sea más sencillo hacerlo mediante CSS. Para ello había que asignar una imagen de fondo al elemento de enlace, y que posición y dimensiones de dicha imagen de fondo coincida exactamente con las del elemento IMG. Una vez asignado el fondo, en el estado ‘sobre’ del enlace habrá que hacer que el elemento de imagen quede invisible mediante la propiedad visibility:
a {background:url(imagen_estado_sobre) no-repeat 0 0;}
a:hover img {visibility:hidden;}Datos del artículo:
- Etiquetas: CSS, Desarrollo web, hover, Propiedad visibility, Propiedades CSS, Pseudo-clase hover, Rollover
- Publicado en categorías: CSS, Desarrollo web
- Comentarios desactivados en CSS: Rollover de elemento de imagen
MySQL: reemplazar cadenas de texto de modo masivo
Fecha de publicación: 2011/06/06
Basta una consulta muy sencilla:
UPDATE tabla_de_la_bbdd SET campo_de_la_tabla = replace(campo_de_la_tabla,"texto-antiguo","texto-nuevo")Saber más: REPLACE Syntax (enlace externo, en inglés)
Datos del artículo:
- Etiquetas: Consultas SQL, Desarrollo web, MySQL
- Publicado en categorías: Desarrollo web
- Comentarios desactivados en MySQL: reemplazar cadenas de texto de modo masivo
Javascript: equivalencia de método ‘appendTo’ de Jquery en Prototype
Fecha de publicación: 2011/05/09
En Prototype no hay equivalencia al método appendTo() de Jquery (enlace externo, en inglés), pero se puede suplir creando un método para Prototype.
Datos del artículo:
- Etiquetas: appendTo, Desarrollo web, Framework Javascript, Funcionalidades de Jquery en Prototype, javascript, Jquery, Prototype
- Publicado en categorías: Desarrollo web, Javascript
- Comentarios desactivados en Javascript: equivalencia de método ‘appendTo’ de Jquery en Prototype
Jquery: Plantilla base para construir un plugin
Fecha de publicación: 2011/02/17
He aquí el código:
(function($){
$.fn.XXXX = function(options){
var defaults = { // Opciones por defecto
opcion1: ''
,opcion2: ''
}
var op = $.extend(defaults, options);
return this.each(function(){
$(this).XXXX();
});
}
})(jQuery);Datos del artículo:
- Etiquetas: Desarrollo web, javascript, Jquery, Librerías Javascript, Plugins Jquery
- Publicado en categorías: Desarrollo web, Javascript
- Comentarios desactivados en Jquery: Plantilla base para construir un plugin
Mini-guía de introducción a HTML 5
Fecha de publicación: 2011/01/29
Tras aproximadamente una década de HTML 4.01 y XHTML 1.0, el W3C está a punto de sacar una nueva versión del estándar con unos cambios muy interesantes.
Por ello, para introducirse en los cambios más notorios, estoy preparando una pequeña guía de los mismos. No está terminada, pero creo que los conceptos más importantes ya quedan claros.
Datos del artículo:
- Etiquetas: Aprendizaje, Desarrollo web, Guías, HTML, HTML 5, HTML5, W3C
- Publicado en categorías: Desarrollo web, HTML 5
- Comentarios desactivados en Mini-guía de introducción a HTML 5
Javascript: equivalencia de método ‘appendTo’ de Jquery en Prototype
Fecha de publicación: 2010/12/30
En Prototype no hay equivalencia al método appendTo() de Jquery (enlace externo, en inglés), pero hay un modo de suplirlo.
Datos del artículo:
- Etiquetas: appendTo, Desarrollo web, Framework Javascript, insert, javascript, Jquery, Prototype
- Publicado en categorías: Desarrollo web, Javascript
- Comentarios desactivados en Javascript: equivalencia de método ‘appendTo’ de Jquery en Prototype