Category Archives: Recursos
Templates HTML, CSS con fondos abstractos
Ultimamente hemos visto que son muchos los webmasters que se encuentran en busca de templates gratuitos con fondos abstractos. Para cubrir un poco esa necesidad compartimos con nuestros lectores el compilado de presentado por PSDGraphics.
Estos documentos estan creados en XHTML/CSS válido y en caso de que nos guste alguno de los fondos también lo podriamos utilizar como fondo para Twitter o MySpace, de modo que nuestros diseños se unifiquen para lograr una identificación visual con nuestra compañia por parte del usuario final.
Podemos descargar este compilado de 428KB (ZIP) directamente desde este enlace: http://www.psdgraphics.com/file/abstract-web-backgrounds-set.zip
Fuente: http://www.psdgraphics.com/templates/abstract-website-backgrounds-html-and-css-templates/
Archivo PSD de Navegador GPS
Navegando por la web me encontre con un recurso gratuito que puede ser de mucha utilidad para los diseñadores que leen a diario @VitaminaGeek!
Este gráfico representa un navegador GPS (Global Position System), muy similar a los populares Garmin. Por defecto viene sin relleno, pero podemos ingresar el mapa de demostración publicado en http://www.psdgraphics.com/file/gps-icon.jpg o rellenar con nuestra gráfica.
Este archivo PSD pesa sólo 1.57MB y puedes descargarlo gratuitamente de: http://www.psdgraphics.com/file/psd-gps-navigation.psd
Lo lei en: http://www.psdgraphics.com/
Reproductor de video en HTML5
MediaElement.js es un plugin para jQuery que nos permitirá reproductir videos en HTML5 en navegadores que no tengan soporte para este nuevo formato.
Utilizando esta librería podremos insertar videos en nuestros sitios utilizando el tag <video>, el plugin detectará si el navegador tiene soporte para este tag y en caso de que la respuesta sea negativa, insertará el video en un formato que sea aceptado, como podría ser en flash.
De esta forma tendremos la seguridad de que nuestros videos podrán ser vistos por todos los usuarios, sin importar si lo estan haciendo desde Internet Explorer 6 o desde un iPad, por ejemplo.
Ejemplo de uso:
<script src="jquery.js"></script>
<script src="mediaelement.js"></script>
<script src="mediaelementplayer.js"></script>
<link href="mediaelementplayer.css" rel="Stylesheet" />
<!-- Preferred: Use one H.264 file for everyone (with silverlight fallback) -->
<video src="myfile.mp4" type="video/mp4" width="640" height="360"></video>
<!-- OR use multiple codecs, your choice -->
<video width="640" height="360">
<source src="myfile.mp4" type="video/mp4" >
<source src="myfile.ogg" type="video/ogg" >
<source src="myfile.webm" type="video/webm" >
</video>
<script>
jQuery(document).ready(function($) {
$('video').mediaelementplayer();
});
</script>
La utilización de este Plugin nos dará soporte para videos en H.264 (MPEG), como asi también archivos FLV y WMV, en los navegadores con HTML5 como iPhone, iPad, Android, Chrome, Safari e Internet Explorer 9, asi como también en navegadores sin soporte HTML5 pero con la posibilidad de reproducir Silverlight/Flash: Internet Explorer 6,7,8, Firefox y Opera.
Fuente: MediaElement via Web Resources Depot.
Paquetes de Iconos PNG Gratis
Cuando trabajamos en diseño algo que nos puede ser de mucha utilidad es contar con Iconos gratuitos para utilizar en nuestros proyectos.
Para ayudar un poco a cubrir esta necesidad les traigo 4 paquetes de Iconos gratuitos en formato PNG.
Colección de Iconos de 16 x 16
Personalmente los que más utilizo son los de Fam Fam Fam, una colección de iconos pixel de excelente calidad.
Esta colección incluye paquetes de iconos para utilizar en cualquier proyecto ya sea web o de escritorio y banderas de todo el mundo, entre otros. Puedes encontrarla en: http://www.famfamfam.com/lab/icons/
Sin embargo, estos nos son los únicos recursos gratuitos que podrás utilizar. Si buscas iconos que sirvan para, por ejemplo, proyectos exclusivamente de web te recomiendo Boolean.
Boolean es un paquete de iconos gratuito en formato PNG de 16 px x 16 px, más acorde a aplicaciones web que de escritorio. Algunos grupos que valen la pena destacar dentro de este paquete son los orientados a cine, informatica y comunicación.
Puedes descargarlo de: http://prax-08.deviantart.com/art/Boolean-1-1-166457851
Colección de Iconos de 32 x 32
Para los diseñadores que estan en busca de iconografía un poco más grande, podemos invitarlos a visitar paquetes de iconos como WooCons, desarrollado por WooThemes.
Este paquete gratuito cuenta con 170 iconos de excelente calidad en un tamaño de 32×32. Dentro del paquete podremos encontrar temáticas de lo más variadas, sólo tenemos que detenernos unos minutos a observar para ver cuan completo es.
La descarga puedes realizarla desde: http://www.woothemes.com/2010/08/woocons1/
Finalmente traemos Pixelophilia, un paquete de iconos con un estilo un poco más dinámico que los anteriores. Este detalle no quiere decir que sea mejor, sino que es distinto. Cuenta con 110 iconos en formato PNG transparente que podremos utilizar sin costo alguno.
Un punto interesante en Pixelophilia es que los gráficos presentados van más allá de un simple buzon de correo o un icono RSS. Este paquete incluye elementos variados como tiendas, campanas, hamburguesas, vasos, sillones y hasta un libro de Superman.
Sin duda este último es el más original de los cuatro paquetes de iconos gratuitos en formato PNG transparente.
Para descargarlo puedes ingresar a: http://omercetin.deviantart.com/art/PixeloPhilia-32PX-Icon-Set-157612627
Y la segunda parte en: http://omercetin.deviantart.com/art/PixeloPhilia2-166570194
Muchos de los paquetes aquí detallados fueron encontrados gracias a Web Resources Depot
80 Iconos moviles gratis
Mobile Berries es un paquete gratuito de iconos ideales para proyectos y sitios web orientados al mercado móvil que se encuentra en constante crecimiento.
El paquete es libre para proyectos personales, en cuanto a proyectos comerciales también se puede utilizar gratuitamente, aunque sin embargo en estos casos debemos atribuir la autoría al creador.
Los iconos se encuentran en formato PNG transparentes de 64 px por 64 px.
Para descargar el set de iconos moviles puedes visitar la página: http://templay.de/Icon-Sets/7/2/52/Free-Mobile-Berries.html
PSD de camisetas
Presentamos este recurso gratuito ideal para presentación de productos.
Este PSD lo podemos descargar de PSD Graphics gratuitamente.
Las opciones presentadas son camiseta negra o camiseta blanca.
Descargar PSD: http://www.psdgraphics.com/file/psd-blank-white-t-shirt.zip
Aplicaciones Iphone/Ipod touch para Bloggers
Como ya muchos saben, desde hace unos dias soy el feliz poseedor del Ipod Touch Tercera Generación de 8GB, el cual me ha dejado completamente conforme con la inversión que he realizado.
En estos días, como es de costumbre he instalado, desinstalado, bloqueado y desbloqueado el equipo un centenar de veces, y en estos momentos creo que me encuentro en una situación estable como para poder recomendar algunas aplicaciones excelentes para bloggers o developers.
A continuación un listado de las apps que pueden adquirir, en algunos casos gratuitamente y en otros por unos pocos dolares, y que sin duda le facilitaran las tareas diarias:
1- 2DO: Se trata de una aplicación especialmente desarrollada como Task Manager donde podemos ingresar las tareas a realizar y categorizarlos por proyectos y fecha. También nos da la posibilidad de agregar notas, etiquetas y hasta recordatorios para cada actividad. Esta aplicación ha sido el reemplazo oficial de mi agenda, con lo cual me ha facilitado el trabajo ya sea desde la portabilidad como desde la comodidad.
La url: http://www.2doapp.com/en/2Do/overview.html
2- SmartRSS2: Un lector de RSS para Iphone/Ipod Touch bastante útil para estar al día con nuestros sitios favoritos. SmartRSS2 nos permite agregar RSS, leerlos y administrarlos en solo unos pasos, muy recomendable. Url: http://itunes.apple.com/us/app/smartrss-2/id302197639?mt=8
2- Luego de una mala experiencia con SmartRSS2 (se colgaba y dejaba de funcionar al recibir muchas noticias), he migrado a Byline, un excelente lector que nos permite estar al día con todos los sitios que sigues, además de destacar noticias y compartirlas desde tu móvil. Url: http://itunes.apple.com/us/app/byline/id284946773?mt=8
3- WordPress: Bueno, este no necesita mucha explicación, verdad? Es la aplicación oficial de WordPress para Iphone/Ipod Touch, con el podemos ingresar los datos de nuestro blog, ya sea que este se encuentre en WordPress.com o alojado en nuestro server. Nos da todas las posibilidades que tendriamos ingresando a nuestro panel de control normalmente, como puede ser escribir artículos, subir fotos, agregar categorías, etc. Es una aplicación gratuita y la recomiendo para todos los que desean publicar algún artículo de forma rápida desde su Iphone. Url para descargarlo: http://iphone.wordpress.org/
4- Analytics PRO: Esta aplicación para Iphone/Ipod nos permitirá acceder a nuestra cuenta de Google Analytics y observar las estadísticas de nuestros sitios desde nuestro movil. En mi caso lo uso mucho para hacer seguimientos rápidos sin la necesidad de ingresar a una PC u otro tipo de dispositivo. La url oficial es: http://www.blackburninternet.com/analyticspro/index2.php
Finalmente recomiendo la aplicación oficial de Twitter para Iphone/Ipod touch, la cual fue liberada hace sólo unos días y nos permite administrar varias cuentas de Twitter y las ya conocidas apps para Facebook y Skype, que no son especificamente para Bloggers pero que pueden ser de mucha utilidad para ellos.
500 Iconos gratuitos para tus aplicaciones web!
La gente de The Css Awards desarrollo un listado con más de 500 iconos gratuitos listos para poder utilizar en nuestras aplicaciones web.
Podemos encontrar desde iconos de browsers como Firefox, Opera, IExplorer hasta iconos RSS o iconos de tarjetas de credito, banderas o redes sociales entre otros.
Un buen recurso gratuito para tener en cuenta a la hora de comenzar un nuevo proyecto pensando en una estetica 2.0.
Para ver los iconos podemos ingresar a: http://www.thecssawards.com/blog/free-icons-for-your-web-apps.html y seleccionar cual es el recurso grafico que queremos descargar…
Espero que les sea de mucha utilidad grafica!
Como monitorear la actividad de nuestro sitio
Ya hemos visto como detectar el paso de los robots en nuestras webs, ahora vamos a ver como detectar si alguien esta “hablando de nosotros”.
Para esto tambien vamos a usar la magia de GoogleBot, solo que esta vez lo vamos a hacer de la mano de google alerts!
Para obtener informacion sobre quien esta linkeando a nuestra web o quien esta hablando de algun tema en particular, solo tenemos que seguir los siguientes pasos:
1- Ingresa a google alerts: http://www.google.com/alerts (recuerda que debes estar logueado en tu cuenta de google).
2- Ingresa la palabra que quieres seguir en el campo “terminos de busqueda”.
3- Selecciona el tipo de rastreo y la frecuencia…
4- Y donde deseas recibir el mail!
Con esto estariamos teniendo acceso a la informacion que google va indexando medianamente rapido.
Por ejemplo, para este sitio yo tengo un rastreo llamado “ayudando.net” (entre comillas). Cada vez que alguien escribe algo en su blog/web y pone ayudando.net, yo recibo un mail indicandome que alguien ha escrito sobre mi sitio.
Algunos consejos:
Para ciertas palabras conviene mas poner una frecuencia de “una vez al dia”, ya que tienen tanta actividad que nos llenarian la casilla de mails sin que leyeramos alguno…
Por otro lado, asegurate que estas en Google Alert en español o en el idioma que prefieras, ya que de esa manera obtendras resultados en tu idioma. Por ejemplo, yo tenia una alerta de “PSP” en ingles y obtenia decenas de mails de sitios en ingles que habian mensionado psp al dia. Por este motivo es mejor buscar en el idioma que nos corresponda y con una frecuencia diaria para no recibir un mail cada 2 minutos…
Con esto estariamos aprovechando un poco mas los servicios ofrecidos por el Big Brother para tener un mayor control sobre lo que pasa en nuestra web…
Espero que les sirva!
Ver cámaras de seguridad online
Sirven para “protegernos”, pero…¿son seguras?
Resulta ser que nuestros amigos de Google han hecho un robot tan potente, que guarda todo lo que encuentra a su paso, sin identificar lo que es privado y lo que es público.
Un poco de error de los desarrolladores, un poco de desinteres por parte de google, y logramos una curiosidad más a la lista.
Si queremos ver que esta pasando en New York o como trabaja la gente de ToWebs en Argentina tenemos dos opciones para hacerlo:
Busqueda manual de cámaras de seguridad desprotegidas
Utilizando urls de busqueda como las siguientes dentro de google podremos obtener acceso a las cámaras de seguridad que han quedado sin protección y fueron agregadas a los resultados de busqueda por GoogleBot:
http://www.google.com/search?q=inurl:.shtml%20inurl:view%202130r%20ptz
http://www.google.com/search?q=inurl:/view.shtml
http://www.google.com/search?q=intitle%3A%22Live+View+%2F+-+AXIS%22+%7C+inurl%3Aview%2Fview.shtml%5E
http://www.google.com/search?q=inurl%3AViewerFrame%3FMode%3D
http://www.google.com/search?q=inurl%3AViewerFrame%3FMode%3DRefresh
http://www.google.com/search?q=inurl:axis-cgi/jpg
http://www.google.com/search?q=inurl:axis-cgi/mjpg
http://www.google.com/search?q=inurl%3Aview%2FindexFrame.shtml
http://www.google.com/search?q=inurl%3Aview%2Findex.shtml
http://www.google.com/search?q=inurl%3Aview%2Fview.shtml
http://www.google.com/search?q=intitle%3A%22live%20view%22%20intitle%3Aaxis
http://www.google.com/search?q=allintitle:liveapplet
http://www.google.com/search?q=allintitle
%3A%22Network%20Camera%20NetworkCamera%22
http://www.google.com/search?q=intitle%3Aaxis%20intitle%3A%22video%20server%22
http://www.google.com/search?q=intitle%3Aliveapplet+inurl%3ALvAppl
http://www.google.com/search?q=intitle:”EvoCam”+inurl:”webcam.html
http://www.google.com/search?q=intitle:%22Live+NetSnap+Cam-Server+feed%22
Listado Automático de cámaras de seguridad:
La otra opción que tenemos es acceder a sitios como http://www.opentopia.com/hiddencam.php en donde se han tomado la molestia de, utilizando las urls anteriormente expuestas, indexar todas las camaras que se encuentran sin protección en el mundo.
