Archivo de la categoría: Diseño Web

Diseño Web – Web Design

CSS3, Diseño Web

Generador de degradados automático (background gradient) para CSS3

gradient ColorzillaEsta mañana se ha actualizado en Firefox el plugin Colorzilla, que permite identificar el código hexadecimal de cualquier color (p.e.: #09cf88) con solo un clics.

Para sorpresa mía, tras finalizar ofrecen un enlace a un generador de código CSS3 para degradados, tal y como ellos dicen, con interfaz visual estilo Photoshop:

De manera intuitiva y visual podremos generar un degradado eligiendo los colores que deseemos, tantos como queramos y en la posición que queramos, además podremos adaptarlos al ancho que ocuparán en nuestra web, etc.

El último paso será copiar el código que nos genera dentro de los atributos del elemento al que queramos dar ese degradado como background en nuestra plantilla CSS. Como podemos ver, la compatibilidad cross-browser está muy cuidada, sin excluir versiones ya obsoletas de navegadores anticuados.

CSS3, Diseño Web, HTML5

Excelente guía CSS3 + HTML en inglés

Esta misma mañana he encontrado en la red una web donde aparecen todos los atributos posibles de CSS3. El manejo es realmente sencillo, tiene un buscador en la columna de la izquierda que, conforme escribes, limita los resultados de dicha columna.

Cuando hacemos clic en cualquiera de los atributos veremos un resumen, la sintaxis, los valores, algunos ejemplos, especificaciones y sobretodo y más importante de esta web, muestra enlaces de ayuda adicional e indica la compatibilidad entre navegadores (cross browsing). Por ejemplo, el text-shadow que utilizan algunos titulares de esta web, no se mostraría en Internet Explorer u Ópera, mientras que en Safari, Chrome y Firefox se ve correctamente,

Además dicha web-guía incluye también un listado de HTML. Ahí dejo el enlace para que lo podáis añadir a vuestros marcadores/favoritos:

Diseño Web, jQuery

¿Cómo solucionar el error: «Uncaught ReferenceError: $ is not defined» al añadir jQuery?

Montando mi portfolio me encontré con este error, y pensé en compartirlo. Puede que al añadir un jQuery que supuestamente funciona, no veamos resultado alguno mientras que la consola de errores muestra lo siguiente: «Uncaught ReferenceError: $ is not defined». No debemos alarmarnos puesto que la cosa puede resultar bastante sencilla.

En el siguiente código vemos dos líneas que deberían ir en el <HEAD>, la primera correspondiente al script del efecto en cuestión y la segunda a jQuery, la cuál siempre debe estar presente.

<script type="text/javascript" src="js/miefecto.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

Puede haber dos posibles soluciones:

1. En este caso el error reside en que la primera línea debería ser siempre la referencia a los scripts de jQuery, después es cuando podremos poner la referencia a nuestro script en particular, sino no nos lo ejecutará. Quedaría de este modo:

<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/miefecto.js"></script>

2. Sin embargo, puede que no nos ejecute por haber cometido algún error escribiendo nuestra línea, como por ejemplo, utilizar una ruta relativa: «js/jquery.min.js», cuando deberíamos utilizar una ruta absoluta: «/js/jquery.js», quedando de la siguiente manera:

<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/miefecto.js"></script>

Hay que recordar que puede que no tengamos los archivos «.js» en la misma ruta. Si el problema persiste deja un comentario y le echaré un ojo. En la red se pueden encontrar bastante respuestas al respecto pero muy poco en castellano, así que si llegas aquí googleando espero haber servido de ayuda.

Diseño Web, HTML5

¿y si buscamos «do a barrel roll» en Google?

Un detalle curioso al que he llegado a través de twitter (cómo no). Si buscamos «do a barrel roll» (sin comillas) en Google sucederá algo inesperado. Haz clic en el enlace para verlo:

Traducido sería algo así como «hacer un tonel», refiriéndose a la maniobra acrobática aérea que consiste en dar un giro de 360º sobre su eje sin cambiar el sentido ni la dirección.

Desvelando el truco

Tras no mucho investigar y siendo breve, se trata de puro HTML5. Posiblemente ya conozcáis una buena lista de posibilidades de dicho lenguaje, que junto con CSS3 están cambiando la mentalidad del diseño web. Para comprobar la compatibilidad cross-browser he intentado ejecutarlo en todos los navegador y tal y como me temía, no funciona en Internet Explorer. En Chrome y Firefox va perfecto, sin embargo en Safari, aunque también da un giro, el efecto es diferente.

¿Cuál sería el cometido de Google? Posiblemente dar avances sobre HTML5 entre todos aquellos que no son desarrolladores, así como dejar en evidencia al torpe navegador de Microsoft.

Diseño Gráfico, Diseño Web

pseudo-photoshop online, funcional, estable y rápido, en la nube

Cuando comenzó esto del denominado «cloud computing», ya gozábamos de algunas de sus posibilidades y los futuros resultados a corto plazo eran más que imaginables, pero me gustaría dejar un ejemplo que personalmente, más que curioso me parece útil. Un ‘pseudo-photoshop’ online.

Como no se trata de la aplicación de Adobe, no puede llamarse Photoshop, aunque a diferencia del mismo, este es completamente gratuito. Es un editor de imagen bastante semejante y muy completo, que nos permite comenzar de cero, abrir una imagen de nuestro equipo o utilizar alguna de la red. Va sorprendentemente fluido, y todo carga desde arriba, con lo cual no consume más recursos en nuestro equipo de los que consume el navegador.

La gran ventaja es el apuro del que nos puede sacar a más de uno. Ahí os dejo un enlace y a disfrutar:

Dominios

El dominio más largo del mundo

Hace unos días, documentándome sobre dominios para un cliente peculiar (básicamente, buscando el número de caracteres máximos, que estaba muy lejos de lo que yo buscaba), encontré lo que parece ser por lo visto el nombre de dominio en castellano más largo del mundo, el cual se encuentra en Chile:

Pertenece a la ciudad de Buin, la cual tiene otra página web a parte. Ocurre que si no fuese por su dominio, su escasa actualización la enterraría dentro de los buscadores. No obstante, le han salido un par de competidores más:

Aunque todos afirman en su ‘title’ que tienen el dominio más largo, todos ellos comparten longitud, 67 caracteres (63 de nombre + 4 del ‘.com’).