compartiendo experiencia
Comentaros que existe un plugin en Eclipse para poder dar formato a los archivos de tipo LESS en Eclipse. En mi caso lo he probado en la versión Luna y funciona correctamente.
Podeís ver como instalarlo en la propia página del plugin less para eclipse
No olvidéis cerrar pestañas y reiniciar Eclipse trás su instalación.
Hace poco escribía acerca de Tweenjoy, un website que permite escribir más de 140 caracteres en Twitter. Pues bien, hace poco han anunciado en distintas redes sociales (Facebook, Twitter y Google+) el lanzamiento de la traducción a español de su website.
Dicen que lo bueno, si breve, dos veces bueno. Así que para evitar que pierdas tu tiempo leyendo un extenso artículo tipo comparativa entre Bootstrap y JQuery Mobile con todas sus ventajas e inconvenientes y con el fin de simplicar esa duda que todos hemos tenido al intentar hacer nuestro primer proyecto responsivo te dire que la respuesta a la pregunta es: los dos y ninguno 🙂
Ambas son maravillosas en el desarrollo responsivo y ambas no pueden ser adecuadas para tu tipo de proyecto. Lo que debes hacer es preguntarte QUE tienes en mente hacer:
¿Quieres hacer una web corporativa que se vea visualmente atractiva en escritorio, tablets y móviles? En ese caso yo elegiría Bootstrap. Ojo, este verano lanzaron Bootstrap 3 que cambia el nombre de muchas clases CSS y estructura HTML respecto a Bootstrap 2, así que descarga la versión 3 y asegúrate de que tu búsqueda de tutoriales y ayuda se realice sobre esta versión. Empieza por entender el sistema de grids de Bootstrap 3. Puedes ver un ejemplo de web con Bootstrap 3
¿Quieres hacer una aplicación para móvil, con el aspecto de una aplicación nativa pero usando HTML/CSS? Entonces decídete por JQuery Mobile, sus numerosos componentes prediseñados no diferenciaran visualmente tu aplicación de una nativa. Yo lo veo especialmente útil para mostrar formularios complejos y puedes evitar que el usuario se desplace demasiado con el scroll. Puedes ver un ejemplo de web con JQuery Mobile
Siempre he utilizado algunas herramientas para poder publicar tuits más largos en Twitter, el problema de estas herramientas es que o bien te dividen el tweet en varios (lo cual no me convence) o bien te genera un link que hace referencia a una página externa, cosa que no veo demasiado usable (mandas al lector a otra dirección para leer tu tweet largo). Ayer precisamente, buscando una alternativa, encontré una página que no conocía: www.tweenjoy.com
En Tweenjoy el proceso es distinto, generándote una imagen directamente en Twitter con el texto que quieras, y de manera opcional te permite añadir una introducción en la que poder poner tus referencias a usuarios, hashtags, urls, trending topics, etc…
Lo mejor de todo es que además de poder superar el límite de 140 caracteres, puedes cambiar el tipo de letra de tu tweet, los colores de fondo o tipografía, la alineación de texto y hasta te permite añadir fondos de patrones de imágenes a tu tuit. Perfecto si quieres relacionar tu tweet con alguna temática en especial.
Tienen grupo en Facebook, Google+ y por supuesto en Twitter, donde parece que van anunciando sus mejoras y nuevas funcionalidades para esta potente herramienta.
Supongo que al ser multilenguaje permitirá a otros tuiteros extranjeros resolver las tan famosas preguntas «how to write longer tweets?» o «how to write more than 140 characters?» :).
Promete.
PhpMailer es una clase PHP para facilitar el envíos de correos. Este es un error que me ha costado unas cuantas horas solucionar. Se debe indicar al objeto creado el path de los archivos de lenguaje así como el idioma deseado en cada archivo php donde usemos la clase, de la siguiente forma:
$mailer = new PHPMailer();
$mailer->SetLanguage("en", 'path_phpmailer/language/');
Algunos navegadores como Chrome permiten realizar un ajuste de tamaño de los textarea de nuestros formularios. Aunque esta función es de utilidad para el usuario, puede suponernos problemas de diseño si nuestro formulario se encuentra enmarcado o estamos usando algún background. Para evitar el poder dimensionar nuestros textareas basta con asignar la siguiente propiedad CSS:
textarea {resize: none;}
Si queremos eliminar el redimensionado a determinados textareas aplicaremos la propiedad a alguna clase o identificador.
Uno de los requisitos fundamentales de una aplicación web es la carga rápida de la interfaz. Normalmente tenemos muyltitud de imágenes de iconos para las distintas funcionalidades de la aplicación, además de imágenes de menú, botones… CSS Sprites es una técnica que tiene su tiempo y que permite que la carga se agilice. Esto se realiza añadiendo todas nuestras imágenes en un único archivo y mostrando el fragmento necesario en cada caso mediante CSS con la propiedad background-position de manera que sólo necesitaremos cargar una única imagen de nuestro servidor al mostrar la interfaz.
En mi caso utilicé esta técnica para el desarrollo de un menú. No es muy conveniente usar imágenes en menú desde un punto de vista SEO pero en este caso las palabras de menú no eran muy relevantes.
El primer paso es crear el archivo .png con todas las imágenes necesarias (imagen para mostrar cada opción de menú, imagen para la opción seleccionada e imagen en la activación del evento a:hover). El resultado es el siguiente:
La rejilla o grid que se muestra en la imagen (es un screenshot de Fireworks) nos ayudará a rescatar cada imagen necesaria en cada caso. Cada cuadro de la rejilla tiene unas medidas de 25×25 píxeles, por tanto para la opción de INICIO se que las coordenadas X de cada imagen necesaria empiezan en los 25 pixeles (un cuadro). Las coordenadas Y de las distintas opciones y contando el número de cuadros serán 25, 100 y 175 píxeles.
Vamos con nuestro html, añado un menú (en mi caso una lista):
</pre> <ul id="”menu_sprite”"> <li><a href="”#”">Inicio</a></li> <li><a href="”#”">Servicios</a></li> <li><a href="”#”">Proyectos</a></li> <li><a href="”#”">Contacto</a></li> </ul> <pre>
Nuestro CSS queda de la siguiente manera:
ul#menu_sprite{margin:0px 0px 0px 120px; padding:0; list-style:none; clear:both;}
#menu_sprite li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px; margin-bottom:15px;}
#menu_sprite li a{background:url(‘../images/menu_sprite.png’) no-repeat; width:100%; height:100%; display:block;}
/* OPCION INICIO */
#menu_sprite li.inicio{width:105px; height:55px;}
#menu_sprite li.inicio a{background-position:-25px -175px;}
#menu_sprite li.inicio a:hover{background-position:-25px -25px;}
#menu_sprite li.inicio a.selected{background-position:-25px -100px;}
/* OPCION SERVICIOS */
#menu_sprite li.servicios{width:165px; height:55px;}
#menu_sprite li.servicios a{background-position:-150px -175px;}
#menu_sprite li.servicios a:hover{background-position:-150px -25px;}
#menu_sprite li.servicios a.selected{background-position:-150px -100px;}
/* OPCION PROYECTOS */
#menu_sprite li.proyectos{width:183px; height:55px;}
#menu_sprite li.proyectos a{background-position:-325px -175px;}
#menu_sprite li.proyectos a:hover{background-position:-325px -25px;}
#menu_sprite li.proyectos a.selected{background-position:-325px -100px;}
/* OPCION CONTACTO */
#menu_sprite li.contacto{width:165px; height:55px;}
#menu_sprite li.contacto a{background-position:-525px -175px;}
#menu_sprite li.contacto a:hover{background-position:-525px -25px;}
#menu_sprite li.contacto a.selected{background-position:-525px -100px;}
Como puede verse, asignamos las propiedades a la lista para convertirla en un menú horizontal (esto se hace en las primeras líneas) y hacemos la carga de la imagen diseñada para cada elemento de la lista menú (#menu_sprite li a). Las siguientes cuatro estructuras definen la posición que nos interesa de la imagen en cada opción.
Artículo basado en esta guía de Zach Dunn
En Photoshop Roadmap nos muestran un recopilatorio de los 100 mejores pinceles (a su juicio) a alta resolución para usar en Photoshop. Ideales si queremos desarrollar algún poster, vinilos, cuadros…
Siempre me he considerado por desgracia un diseñador frustado (soy ingeniero informático), pero gracias a bastantes tutoriales de Photoshop he conseguido hacer realidad una de mis mayores aficiones (delante de un ordenador, tengo más apartado de él :P), el diseño gráfico. Sin duda el poder disponer de pinceles, patrones y texturas entre otros recursos, me ha facilitado la tarea de forma considerable.
En CG Textures podemos encontrar muchas texturas para Photoshop y perfectamente clasificadas. Un recurso imprescindible tanto para el que empieza con Photoshop y como para el que no.
En Noupe han preparado un estupendo post con una recopilación de los 50 mejores packs de iconos creados en el año 2008. Sobre gustos no hay nada escrito, pero algún que otro pack ya ha pasado por websenior.
websenior 