Para quienes queremos proteger nuestro trabajo con imágenes de apropiaciones no autorizadas, WaterMark.js puede nos ayudar.
Es una librería en JavaScript, con código abierto, que podemos usar para añadir marcas de agua en fotos publicadas en Internet, sin necesidad de usar programas de edición gráfica.
Es interesante señalar que la implementación de la librería es bastante fácil. Hay que llamar a la librería antes de la etiqueta de cierre del cuerpo y llamar al método wmark.init, siendo muy útil cuando sólo deseamos insertar una imagen sobre otra y definir su posición.
Etiqueta: javascript
Algunas maneras de optimizar un sitio web
Desde que Google anuncio que la velocidad de carga de un sitio web iba a influir positivamente/ negativamente en el posicionamiento web, muchos usuarios nos han ido preguntando cómo pueden optimizar el rendimiento de sus sitios web para optimizar este nuevo punto.
En este artículo comentaremos varias opciones y trucos para mejorar la carga de nuestro sitio web mediante el popular archivo .htaccess y sin él.
Leverage Cache Browser
Empezamos este post con la activación de Leverage Cache Browser. ¿Que quiere decir? Pues bien, Leverage Chache Browser es una pequeña función para Apache que permitirá cachear todos los archivos que especifiquemos de un sitio web en el navegador del usuario. De esta forma, la primera vez que un usuario accede al sitio se descargan desde nuestro servidor, almacenándose en el disco local del usuario, es entonces, cuando el usuario vuelve a entrar en la página, y todas las peticiones a imágenes, CSS, JS… que antes había descargado, ahora las ejecutará desde su disco, de esta forma optimizamos la carga y reducimos las peticiones que recibe el servidor, ahorrando consigo recursos que pueden servirnos para un pico de tráfico, por ejemplo.
Continúa leyendo «Algunas maneras de optimizar un sitio web»
Sobre la información inútil que nos bajamos [Infografía]
Click para ampliar
GTmetrix, la popular plataforma dedicada a la optimización de sitios web ha publicado una interesante infografía sobre el tiempo perdido en la descarga de información inútil que hacemos los usuarios.
A partir del análisis de los 1.000 sitios web top de su ranking, el equipo de GTmetrix determinó la cantidad de información inútil que descargamos al acceder a estos sitios y los resultados no dejan de sorprender.
3.000.000 de GB son descargados mensualmente de información completamente inútil y que lo único que provoca es aumento de la transmisión de datos y disminución, por tanto, del ancho de banda sin ninguna justificación.
Qué se considera como información inútil
Entre estas toneladas de data sin ninguna utilidad encontramos de forma habitual y recurrente que muchos de los sitios no utilizan imágenes optimizadas o escaladas adecuadamente, como las que modifican su tamaño a través del HTML o el CSS, utilizan un formato ineficiente o las exportan con niveles de calidad más propios de la impresión a gran formato.
La solución a esto es utilizar en los sitios web imágenes pre escaladas y herramientas gratuitas como Smush.it, Jpegtran o PNGOUT que nos permiten entregar imágenes de muy buena calidad, pero con un menor tamaño de archivo.
Los archivos HTML, CSS o JavaScript pueden contener datos como whitespace, indentation y/o comentarios, los que añaden peso extra a los archivos y que no son de ninguna utilidad para quienes navegamos por Internet.
Reducir el peso de estos archivos es una acción que se agradece a los Web Masters, así sólo descargamos el código fuente necesario para navegar por el sitio y evitando pérdidas innecesarias de tiempo y de saturación de la red.
Nosotros como usuarios también podemos colaborar para reducir el tiempo y el ancho de banda necesario en nuestras conexiones. Basta que utilicemos un compresor de archivos para nuestros envíos y a la hora de recibir información, preferir la información comprimida.
23.000.000 Gb, mucha, pero mucha información
El tema de la información descargada, pero sin ninguna utilidad, es más crítico de lo que podríamos pensar. Volvamos a los 23 millones de GB de este tipo de datos que generan mensualmente los 1.000 sitios web del top de GTmetrix y hagamos un breve análisis:
Esa enorme cantidad de información equivale a descargar 5.750.000.000 canciones y has leído bien, cinco mil setecientos cincuenta millones de temas musicales, lo que a un usuario común con una conexión ADSL normal le tomaría unos 619 años de descarga.
619 años es un tiempo suficiente para obtener 154 títulos universitarios, viajar alrededor del mundo unas 80.932 veces o escuchar 65.069.280 veces Bille Jean, la famosa canción de Michael Jackson.
Este tiempo trasladado a tiempo de trabajo equivalen a 5.442.440 horas de trabajo, tiempo suficiente como para construir el 77% del Empire State Building, uno de los rascacielos emblemáticos de Nueva York.
Una Internet más rápida depende de todos
Así como todos nos merecemos y necesitamos una Internet rápida y con navegación fluida, también todos debemos comprometernos; usuarios y Web Masters para que la transmisión de información inútil, redundante o no comprimida deje de ser una práctica habitual.
Debemos aprender que la red se satura y que su ancho de banda no es infinito y que al igual que en nuestras ciudades debemos tomar medidas y resguardos para asegurar ”“dentro de lo posible- un tráfico y una circulación expeditos.
Mobilastic – Un constructor de webs para móviles. Sólo programadores.
Al contrario de la enorme cantidad de aplicaciones que prometen crear sitios web para móviles sin necesidad de conocer nada de programación (aquí ya os comenté varios), mobilastic ha sido creado por y para programadores y diseñadores web.
Para probarlo hay que tener conocimientos de HTML, CSS, Javascript, etc. y se requiere experiencia en el desarrollo de sitios web, como se puede comprobar en los vídeotutoriales disponibles.
Disponible en beta cerrada, podéis pedir una invitación en su página principal, por desgracia sólo tengo un código disponible para entregar al primer interesado en los comentarios.
the-m-project – Framework HTML5 para programar para móviles
En the-m-project.net tenemos un nuevoi proyecto que puede facilitar mucho la vida de quienes quieren programar aplicaciones en HTML5.
Con el código libre, y responsable por aplicaciones de gestión de listas, integraciones con twitter y otras que podemos ver en su web como ejemplos, es ideal para que pueda ser usado en el desarrollo de aplicaciones para dispositivos móviles que no sean compatibles con tecnología Flash.
Con una documentación bastante completa, se encuentra en fase alpha, buscando colaboradores que ayuden a transformar el proyecto en una plataforma más completa y útil para todos.
50 aplicaciones gratuitas para diseñadores y programadores web
Excelente el artículo publicado en speckyboy.com donde muestran una lista de aplicaciones de gran utilidad para quien programa y diseña sitios web.
Podemos encontrar procssor.com, para limpiar código CSS, scriptsrc.net, para usar librerías JS, htmlform.com, para crear formularios HTML, spritebox.net, para crear clases CSS, TryRuby, para probar Ruby desde el navegador, plupload.com, para programar uploads de archivos, Favigen para crear favicons, FrameBox, para crear bocetos, css3generator y css3menu, para quien trabaja con CSS3, browize, para ver el resultado de la web en otros tamaños de navegador … decenas de aplicaciones que ya fueron comentadas en algún momento en nuestra categoría de Utilidades para Diseño, aunque siempre es bueno recordarlas de vez en cuando.
Wirify – Transforma cualquier página web en un borrador
Si vais a empezar un proyecto de diseño web y queréis discutirlo con el cliente basando las ideas en la estructura de alguna web ya existente, Wirify os puede ayudar, y mucho.
Se trata de un bookmarklet (un enlace que se puede arrastrar en la barra de favoritos de vuestro navegador) que al pulsarlo transforma la página web que estáis viendo en un diagrama de estructura, mostrando los bloques de texto y los gráficos, para poder facilitar la discusión.
En la captura superior podéis ver un ejemplo de lo que hace, transformando la página de The New York Times en un boceto donde queda clara la estructura del contenido.
Vía webresourcesdepot
DHTMLX Touch – Una librería para programar aplicaciones HTML5 para móviles
DHTMLX Touch es una librería Javascript que hace mucho uso de HTML5 para facilitar el desarrollo de aplicaciones para móviles.
Con este framework podemos crear herramientas fáciles de ejecutar en teléfonos y tablets, siendo compatible con una enorme cantidad de dispositivos como iPad, iPhone y teléfonos Android. También tiene un entorno de programación visual.
La librería es gratuita, con licencia GPL y en estado alpha, con lo que habrá que estar atentos a su evolución.
Zepto.js – Ligero framework Javascript para Smartphones
Los smartphones ya forman parte de nuestra vida cotidiana y por lo tanto es necesario que los programadores seamos consecuentes a la hora de desarrollar nuestras aplicaciones web. Para ello existen frameworks realmente ligeros como Zepto.js (2K) que nos permiten aprovechar muchas de las opciones de estos dispositivos.
De este modo, con estas librerías tendremos la opción de controlar los eventos relacionados con las funciones táctiles, así como obtener información adiciona sobre el dispositivo en el que se está ejecutando la aplicación, para que podamos actuar en consecuencia.
Si os animáis a echarle un vistazo podéis descargarlo desde su web oficial y utilizarlo según los términos de la licencia MIT a la que está sujeto.
Vía | Creativos Online
Artisan JS – Librería para dibujar en el navegador con JavaScript
Hace bastante tiempo que las webs dejaron de ser meras páginas estáticas y pasaron a convertirse en complejos servicios para navegadores, que exigen a los desarrolladores realizar mayores esfuerzos.
Artisan JS es una librería para JavaScript que puede ayudarnos en la difícil tarea de crear aplicaciones de dibujo online.
Para ello pone a disposición del programador una serie de funciones que permiten trabajar desde el canvas con primitivas gráficas, añadir efectos a imágenes e incluso trabajar con capas de una forma bastante sencilla.
La verdad es que la herramienta pese a su sencillez tiene un aspecto bastante bueno y lo mejor es que podremos usarla en nuestros proyectos, aunque teniendo en cuenta que está sujeta a las licencias GPL y MIT.
Vía | Pixelco blog