martes, 20 de diciembre de 2011

Las mejores 20 extensiones para Firefox y Chrome de 2011

Las mejores 20 extensiones para Firefox y Chrome de 2011:
Chrome-Firefox.jpgPor Randal 

Bitelia 



Mozilla Firefox y Google Chrome son a día de hoy los navegadores más populares de la red, y prueba de ello es que ya suponen una amenaza real para un Internet Explorer que parece que pronto perderá su liderazgo.
Esto mismo le pasó al navegador de Mozilla con el segundo puesto hace unas semanas. El navegador más nuevo, la propuesta de Google, consigue hacerse con un, en mi opinión, merecido puesto que hace aun si cabe más emocionante la competencia entre los dos favoritos del público.

Mozilla Firefox cuenta de base con una galería de extensiones que no sólo potencia sino que en muchos casos reinventa un navegador ya consolidado, y poco a poco los de Mountain View van también ganando posiciones. Cada año se lanzan nuevos complementos y también nuevas versiones de extensiones ya existentes, y llegando a las fechas navideñas no quería dejar de crear una lista con 20 extensiones que a mi juicio han sido las 20 más interesantes del año. ¿Qué opináis?

 HTTPS Everywhere

Exactamente eso. Con HTTPS Everywhere forzaremos que nuestras comunicaciones siempre sean mediante servicios SSL, cifrándola y evitando que nuestros datos puedan caer en manos no deseadas. Se trata de un proyecto antiguo cuya extensión para Firefox ha visto la versión estable este año. Imprescindible para los amantes de la privacidad.

Mozilla Firefox

 Prospector - OneLiner

Esta curiosa extensión nos da la posibilidad de cambiar la posición de la barra de navegación haciendo que ocupe un menor espacio y transformando el aspecto de Mozilla Firefox en algo más parecido a Google Chrome. Ahora tanto barra de direcciones / navegación como barra de pestañas estarán en la misma línea. El complemento viene de la mano de Mozilla Labs, y esta especialmente indicado para gente que disponga de un escritorio con una gran resolución, ya que hay que tener en cuenta que al compartir línea el ancho se de ambos espacios se reducirá a la mitad. Otra de esas extensiones que una vez que pruebas es muy probable que eches de menos.

Mozilla Firefox

StayFocused

Ideal para aumentar nuestra productividad. StayFocused nos permitirá mantenernos concentrados en nuestras tareas no dejándonos entrar en determinados sitios, dependiendo del temporizador que hayamos programado. A veces las soluciones más simples son las más efectivas.

Google Chrome

Chrome Toolbox

Lanzada el año pasado, esta importantísima extensión que viene de la mano de la propia Google no ha hecho más que aumentar sus características según pasaban los meses. Ésta caja de herramientas añade muchas opciones que muchos creemos imprescindibles y que aunque se quedaran fuera de Google Chrome los de Mountain View han querido dar y hacer disponibles a los más exigentes. Una completa personalización del comportamiento de pestañas, múltiples atajos nuevos o tecla “el jefe” son algunas de las cosas que encontraremos en la caja de herramientas.

Google Chrome

Web Developer For Chrome

Poco hay que decir que no hayamos dicho ya sobre Web Developer. Se trata de una extensión imprescindible para todos aquellos que trabajen con páginas y proyectos web, un complemento que ayudará a ahorrar horas y horas de trabajo poniendo a nuestra disposición una amplia gama de herramientas para cacharrear con los formularios, estilos CSS o incluso con la maquetación general de cualquier sitio web.

Google Chrome

Firebug

La equivalente a Web Developer en Firefox, o, mejor dicho, una de las extensiones más famosas para el navegador de Mozilla y muy posiblemente en la que esté basada Web Developer para Chrome. Firebug es una herramienta todoterreno en lo que a páginas web se refiere, y nos permite ver prácticamente cualquier aspecto de las mismas, ayudándonos con un sinfín de atributos y haciendo la vida del programador web mucho más facil. Además ahora también esta en Chrome, aunque me temo que la de Firefox sigue siendo la mejor

Mozilla Firefox
Google Chrome

 Yoono

Yoono es una extensión casi imprescindible para los adictos a las redes sociales. Se trata de un complemento que nos permite mostrar en una sola página los feeds principales de Twitter, Facebook o LinkedIn, y lo hace de una forma muy similar a TweetDeck, así que los que estéis familiarizados con el no tendréis problemas en desenvolveros por la interfaz.

Google Chrome

ProxTube y ProxyTube

Pues si, otra extensión relacionada con YouTube. En esta ocasión el complemento trata de solucionar un problema muy típico con el que nos encontramos de vez en cuando. ¿Alguna vez habéis intentado reproducir un vídeo y habéis descubierto que no estaba disponible en vuestro país? La solución es sencilla aunque la forma de llegar a ella puede no serlo tanto. La mayoría responderéis que visitar el vídeo desde un proxy que salga por un país válido sería lo correcto, ¿verdad? Pues efectivamente, de eso se trata ProxTube. Todo de manera automática y sin apenas hacer nada. Una extensión imprescindible que ahora también esta disponible en Chrome gracias a ProxyTube, su hermana gemela.

Mozilla Firefox
Google Chrome

Autopager

Disponible en ambos navegadores, Autopager nos da la posibilidad de cargar automáticamente la siguiente página de un sitio. Me explico. En muchas ocasiones los artículos de un sitio web pueden estar páginados, especialmente si se trata de un informe o reseña extensa. Autopager se encarga de cargar todo el contenido de golpe, mostrando página tras página verticalmente para que evitemos el tener que ir desplazándonos por las diferentes hojas.

Google Chrome
Mozilla Firefox

BugMeNot Lite

BugMeNot es una extensión para Chrome que nos ayuda a acceder a contenidos por los que normalmente necesitaríamos una cuenta. Por ejemplo, foros o sitios de descargas que necesitan que nos registremos y entremos si quermos acceder a los contenidos. Esta extensión se encarga de logarnos automáticamente en un buen puñado de sitios para evitarnos pasar por tal suplicio.

Google Chrome

Awesome Screenshot

Tal vez la mejor extensión para capturar pantallazos directamente desde el navegador. Awesome Screenshot nos permite tomar capturas de la parte visible de la web que estamos visitando, de la ventana o de la página completa, no salvándola antes de permitirnos editarla y dejarla a nuestro gusto. Trabajar con esta extensión es un placer debido a su sencillez y buen funcionamiento. Muy recomendable.

Google Chrome
Mozilla Firefox

Picnik

Otra extensión dedicada a la fotografía. Picnic nos da una serie de herramientas con las que capturar fotografías –o tomar pantallazos– y tratarlas posteriormente con el objetivo de utilizarlas sin salir del navegador. Con esta extensión es muy fácil y toma muy pocos segundos, por ejemplo, realizar una captura de esa página que estamos diseñando y subirla directamente a nuestra cuenta de Flickr o Picasa. Se trata de un complemento muy potente e imprescindible para todos los que trabajen habitualmente con imágenes en la red.

Google Chrome
Mozilla Firefox

 AddThis

Añade ésto. Se trata de un complemento que nos permite compartir contenido con más de 300 servicios entre los que por supuesto se incluyen los más populares. Facebook, Twitter, Gmail, Tumblr, MySpace, Stumbleupon, Delicious, Blogger… además, cuenta con versiones en Mozilla Firefox y en Google Chrome. ¿A que estás esperando?

Google Chrome
Mozilla Firefox

WiseStamp

WiseStamp es una herramienta que nos permite supervitaminar nuestra cuenta de correo de Gmail y añadir una serie de firmas personalizadas dependiendo del tipo de correo que vayamos a mandar o de los destinatarios. No solamente funciona con Gmail y también es posible añadirla para vitaminar a su hermana corporativa Google Apps. Una vez que uses las firmas dinámicas, no querras volver atrás.

Google Chrome

Extended Share for Google+

No podían faltar las extensiones para uno de los lanzamientos del año, Google+. Ésta concretamente nos permite ampliar los lugares donde podemos compartir nuestras publicaciones de Google+, mandándolos fácilmente a Facebook, Twitter, Tumblr y otro amplio abanico de sitios y redes sociales.

Google Chrome

More for Google+

Sencillamente se dedica a cargar más contenido en nuestra página de Google+, con el fin de que no tengamos que estar pulsando el botón para visualizar más contenido. Se trata de una extensión imprescindible para los que usen a menudo esta nueva red social. Lo malo es que una vez que la utilizas, ya no puedes volver atrás.

Google Chrome

Antisocial

¿Cansado de tanta red social? Este curioso complemento nos permite eliminar los a veces molestos botones y widgets de las diferentes redes sociales en los sitios. Básicamente bloquea la carga de los mismos, así que si estas harto de ese botón de Twitter o no soportas ver el thumbs up de Facebook en tu blog favorito, Antisocial te ayudará a deshacerte de ellos.

Google Chrome

All In One Sidebar


La barra de herramientas del todo en uno. Esta extensión añade –por supuesto– una barra lateral en nuestro navegador desde la cual podemos lanzar páginas web, ya sea de nuestros marcadores o de nuestro historial de navegación, ejecutar directamente los archivos descargados, ver el código fuente de la página que estamos visitando, y un sinfín de cosas más. Todo desde el mismo sitio. Una muy buena idea que se convertirá en imprescindible si le dais una oportunidad.

Mozilla Firefox

FastestFox y FastestChrome

Un clásico en Mozilla Firefox, esta extensión para aumentar la productividad también tiene versión en Google Chrome. Ambos complementos nos permiten hacer una pre-carga del contenido con el fin de que las siguientes páginas que visitemos estén disponibles de manera instantánea. Todo depende de la conexión, por supuesto, y si disponemos de una línea de baja latencia notaremos que ahora nuestro navegador parece cargar más rápido porque habrá precargado el contenido mientras leíamos. Además, con el paso del tiempo se han añadido otras funcionalidades secundarias que agilizan nuestra navegación y dan ese pequeño boost a nuestra productividad.

Google Chrome
Mozilla Firefox

Integrated Gmail

Esta extensión es exclusiva para Mozilla Firefox, o al menos por más que he buscado no he podido encontrarla en Chrome, y mira que me gustaría. Básicamente nos permite integrar Gmail y el resto de servicios Google, como pueden ser Calendar o Docs, en la misma ventana. Con un único clic de ratón seremos capaces de tener a mano nuestra bandeja de correo o nuestras hojas de cálculo, por ejemplo, algo que sin duda hará que aumente nuestra productividad.

Mozilla Firefox

Randal

15 de diciembre, 2011, 12:14


Leyendo Facebook, twitter y Linkedin desde Google Plus

Leyendo Facebook, twitter y Linkedin desde Google Plus:

Igual podemos ser de esas personas que deseamos integrar una serie de herramientas en un mismo lugar, para no ir variando entre pestañas de nuestro navegador web habitual. Gooce+ es una extensión para Google Chrome que nos posibilita tener dentro de Google+ las publicaciones de Twitter, Facebook y LinkedIn, donde además de ver los contenidos de aquellos a los que seguimos, podemos publicar nuestros propios mensajes.


Por contra sobre esta extensión, tan sólo tendremos las funciones elementales de cada una de las plataformas, con lo que nos vemos limitados a marcar como favoritos o retuitear en caso de Twitter por ejemplo, aunque eso sí, de esta más completa las funcionalidades, sería una alternativa a la propia interfaz de Twitter si todavía no nos hubiéramos acostumbrados a ella.


El acceso a cada una de las herramientas sociales las tenemos en la parte superior, cada una de ellas con su botón de manera independiente, y que nos conectaremos usando el protocolo OAuth2, como ya es habitual.


Os dejamos con el vídeo de presentación:




Enlace: Gooce+





Patrocinan WWWhatsnew: Vuelos Baratos y Wix – Crea páginas de Fan en Facebook.


Hospedado en RedCoruna




La nueva forma de mostrar fotos en Google Plus

La nueva forma de mostrar fotos en Google Plus:

La tercera de las mejoras anunciadas en Google Plus hace referencia a su forma de mostrar fotos y galerías.


Después de las páginas con varios administradores y del sistema para marcar diferentes niveles de importancia para cada círculo, muestran cómo es más sencillo identificar personas en fotografías, navegar por los comentarios o ver imágenes en pantalla completa.


En el vídeo inferior podéis ver un ejemplo de navegación en una de las galerías, transformando la experiencia para dar destaque especial a los miles de profesionales de fotografía existentes en dicha red.



Fotos en pantalla completa, modo de presentación, nuevas etiquetas de identificación, comentarios en la parte inferior durante la secuencia, motivos navideños en su editor integrado… dando más argumentos a los que ven a Google Plus como la competencia de Flickr.



Sigue las noticias por twitter.com/wwwhatsnew, Facebook.com/wwwhatsnew o Google Plus.




Crear menú HTML a partir de un .txt y Php

Crear menú HTML a partir de un .txt y Php: Hola a todos!
Aquí vengo con un aporte que espero que les sirva. Sé que hay muchas formas distintas de generar menús hoy en día, ya sea con o sin javascript, usando o no frameworks pero espero que lo que les traigo a continuación le sea de mucha utilidad a más de alguno.

Un día me vi en la necesidad de tener que generar varios menús para distintos tipos de usuario, cada usuario con una categoría diferente, entonces decidí que lo haría a partir de un archivo de texto tabulado según el nivel del menú.

La clase que genera el menú funciona en PHP y necesita de un parámetro para recibir el nombre del archivo .txt del cual se generara el menú. También agregué la posibilidad que se "cachee" para no generarlo cada vez, a continuación les presento el formato del archivo de texto de cual se genera...



  • El archivo acepta comentarios que comiencen con (#)
  • Cada nivel debe ir en una línea diferente
  • Según la cantidad de tabulaciones al comienzo de la línea así será la profundidad
  • El nombre de la opción, el link, y el target debe separarse por una tabulación (\t)


[nota:a8f2b4f87a]Nótese en este ejemplo a continuación que las tabulaciones se convierten en cuatro espacios, así que solo servirá para visualizar nada mas... [/url] [/nota:a8f2b4f87a]

Código :



# Según el nivel de tabulación será el nivel del menú (para tabular se puede usar tanto tabulaciones como espacios simples)
# Los que no tienen tabulación serán los títulos del menú
# una tabulación separa el texto que mostrará en el menú y su respectivo link


Menu
   submenu
      sub-submenu 1
      sub-submenu 2
      sub-submenu 3
      sub-submenu 4
      sub-submenu 5
      sub-submenu 6
      sub-submenu 7
      sub-submenu 8
   A
      AAA
   B
      BBB
   C
      CCC
   ASDF
      a
      A
         s
         S
            d
            D
               f
               F
Links Externos (Se abren en una nueva pestaña)
   DuckDuckGO   http://www.ddg.gg/   _blank
   Facebook   http://www.facebook.com/
   Twitter   http://www.twitter.com/
Otros
   javascript   javascript:alert("Hola"); return false;
Salir   javascript:alert("Adios");





Luego en el index solo necesitaría llamarlo de esta forma (incluyendo el require del php y el link al manejador en javascript y los estilos en css)


Código :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Generado</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8"/>
<script type="text/javascript" src="hMenu.js"></script>
<style type="text/css">
body{font-family: sans-serif; font-size:12px; margin: 0px; padding 0px; background: #fff}
</style>
<link rel="stylesheet" type="text/css" href="hMenu.css" />

</head>
<body onload="hMenu.init('menu1')">

<?php
   require_once("hMenu.php");
   $hMenuHandler = new hMenu("menu1.txt", true);
   echo $hMenuHandler->getMenu("menu1");
?>

</body>
</html>


Aquí explico los parámetros:

Código :



$hMenuHandler = new hMenu("menu1.txt", true);



  • El primero es el nombre del archivo de texto
  • el segundo es si desean cachearlo o no
  • pueden enviar un parámetro adicional para indicar el directorio donde se creará el menú para cachearlo...




(Si quieren cachearlo recuerden que deben tener permisos de escritura en el directorio donde está el archivo)


Espero haberles sido útiles :P

Enviar comentario



viernes, 16 de diciembre de 2011

Google+ incrementa las posibilidades de la videoconferencia

Google+ incrementa las posibilidades de la videoconferencia:

google+La opción de Google+ Hangouts está constituyéndose como un universo de comunicación propio dentro de la red social. La compañía ha introducido novedades en este servicio de videoconferencia para facilitar la conexión entre los usuarios. La herramienta On Air, para emitir por streaming abiertamente, sigue progresando en su desarrollo.


Desde su aparición Google+ no ha parado de lanzar actualizaciones de la plataforma. En este caso le toca a Hangouts, una de las principales apuestas y también uno de los elementos diferenciadores más significativos con Facebook.


Ahora un usuario, en un post o una imagen puede enviar una solicitud para establecer una videoconferencia, de la misma forma en que escribe un comentario. Quienes visiten esa publicación leerán el aviso, pudiendo mantener aceptar la propuesta con un solo clic.


Una de las opciones de Hangouts que actualmente están en construcción es On Air. Ofrece la posibilidad a un usuario de emitir su imagen en streaming para quien lo quiera ver, lo que sería una especie de videoblog en directo. Algunos grupos de música como Black Eyed Peas ya lo han utilizado para difundir sus actuaciones. Incluso el Dalai Lama ha usado esta herramienta para sus mensajes de paz.


videoconferencia googl+


De momento Google ha presentado algunas novedades que estarán presentes en este desarrollo cuando se abra a todos los usuarios. Una de las decisiones que ha tomado la compañía es activar el servicio para un número mucho mayor de personajes públicos, famosos y perfiles con muchos seguidores en la red social.


La compañía tiene previsto además integrar Hangouts On Air con YouTube. Cuando el usuario finalice el streaming, una copia completa del vídeo, de carácter privado, se subirá a su cuenta.


Google+ Hangouts está dando lugar a un universo de comunicación en sí mismo. También incluye Google Voice para llamar a teléfonos. Conectar con un número de Estados Unidos es gratis. Para el resto de países existen tarifas reducidas que varían en función del estado.


Crear un fondo de líneas diagonales sin imágenes con CSS3

Crear un fondo de líneas diagonales sin imágenes con CSS3: El día de hoy les traigo un pequeño truco para hacer un fondo con líneas diagonales, sin usar imágenes hecho en CSS3.

El código es el siguiente:

Código :


body {
background: -moz-repeating-linear-gradient(45deg, #005588, #00aacc 30px, #eee 30px, #eee 71px);
background: -webkit-repeating-linear-gradient(45deg, #005588, #00aacc 30px, #eee 30px, #eee 71px);
background-size: 100px 100px;
}


Listo. Con esto vas a tener el fondo de tu website como si fuera una textura de líneas diagonales. Explico el código:

Para crear estas líneas diagonales de manera repetitiva empiezo haciéndolo con “repeating-linear-gradient” en la propiedad “background”.

Luego, debo definir los valores que llevará el degradado.

  • Lo primero que me pide es la inclinación (o rotación) en ángulos, que para el ejemplo le he asignado 45 grados (deg); esto significa que las líneas que están en constante repetición estarán ubicadas de manera diagonal.

  • El siguiente valor es la posición de cada línea.


Por último, se asigna una nueva propiedad “background-size” indicando que el ancho y alto de la pantalla debe medir lo máximo posible.

[nota:51506897cf]Este ejemplo funciona en Firefox desde la versión 3.6, y en Chrome y Safari desde las versiones 5.1.[/nota:51506897cf]

Ver ejemplo aquí

Enviar comentario



El Facebook que muestra la biografía de los usuarios ya está disponible en todo el mundo

El Facebook que muestra la biografía de los usuarios ya está disponible en todo el mundo:

EFE

  • La línea temporal del nuevo perfil comienza en la fecha de nacimiento del usuario.
  • Los usuarios de Facebook recibirán un aviso del cambio y tendrán un periodo de siete días para organizarlo antes de que sus contactos lo vean.
  • Sigue a '20minutos.es' en las redes: Facebook, Google+, Twitter y Tuenti.

Facebook

Los usuarios de Facebook de todo el mundo ya pueden comprobar qué tal les sienta a sus cuentas de la red social el diseño del nuevo timeline, que a partir de este jueves ya está disponible.

Con el timeline o biografía, el muro se convierte en una serie de publicaciones a dos columnas con distintos tamaños según la importancia, la página va encabezada por una "foto de portada" seleccionada por el usuario y la posibilidad de personalizar lo que se comparte -y con quién se comparte- está más presente que nunca.

Pero el cambio va más allá y llega incluso al pasado: la línea temporal del nuevo perfil comienza en la fecha de nacimiento del usuario, que puede llenar los "espacios en blanco" sobre su vida hasta el momento en que se registró en Facebook con fotos, vídeos y actualizaciones de estado.

La compañía ha indicado en un comunicado que los usuarios de Facebook recibirán una notificación en su perfil para implantar el nuevo timeline y dispondrán de un periodo de siete días para organizarlo antes de que sus contactos lo vean.

"El timeline te ofrece una forma sencilla de redescubrir las cosas que has compartido y reunir tus momentos más importantes. También te permite compartir nuevas experiencias, como la música que escuchas o las millas que corres", ha indicado la compañía.

Este timeline reemplazará al perfil actual de actividad del usuario, aunque Facebook asegura que su introducción no conllevará la desaparición de ningún tipo de contenido.

En la nueva biografía se puede elegir qué imágenes y acontecimientos se destacan o bien se esconden o eliminan.



miércoles, 14 de diciembre de 2011

Comparte en Google+ los posts de tu blog en Blogger apenas los publiques

Comparte en Google+ los posts de tu blog en Blogger apenas los publiques:

Comparte en Google+ los posts de tu blog en Blogger apenas los publiques
Como ya sabemos, no va a haber servicio de Google que se escape de ser integrado con su red social. En el caso de Blogger, los primeros pasos ya fueron dados permitiendo integrar el perfil del popular servicio de blogs con el de Google+. Ahora, y avisando que tan sólo es la primera de muchas, han presentado la posibilidad de compartir en Google+ más fácilmente los post que publiques.

Para aquellos que habéis hecho la integración de perfiles, a partir de ahora cuando publiquéis o un nuevo post o actualicéis uno ya publicado, os aparecerá automáticamente la ventanita para compartirlo en Google+. Por suerte, esto es configurable, por lo que si no os gusta, podéis desactivarlo en Configuración > Entradas y comentarios.

También se ha añadido un enlace de “Compartir” en cada uno de los posts ya publicados que aparecen listados en la sección de “Entradas”, de manera que sea más sencillo revivir y difundir antiguas publicaciones, atrayendo nuevo público proveniente de Google+. Puestos a pedir, hubiese estado bien que esa facilidad se hubiera extendido también hacia otros servicios (Twitter, por ejemplo), pero vamos, que ya sabemos lo que persiguen con esto.

A mi parecer, la táctica que están siguiendo con Google+ en algunos de sus servicios resulta un poco agresiva. Sí, claro que se puede cambiar la configuración para que no te aparezca la dichosa ventanita al publicar, pero sólo por cortesía no hubiera estado mal que estuviera desactivada por defecto, por mucho que a aquellos que ya dispongan de ella les pueda interesar.

Vía | Blogger Buzz

jueves, 8 de diciembre de 2011

search-ebooks.eu – Un nuevo buscador de libros electrónicos, con más de 50 millones de documentos

search-ebooks.eu – Un nuevo buscador de libros electrónicos, con más de 50 millones de documentos:


Nos presentan ahora Search-ebooks.eu, un nuevo buscador que nos permite encontrar documentos en varios formatos (pdf,doc,ppt,rtf y xls incluidos) rastreando en diversas fuentes, como blogs, foros, BBS, etc.

La base de datos de información, que ya incluye más de 50 millones de referencias, es verificada regularmente para eliminar no que no sea de buena calidad, incluyendo 200.000 archivos adicionales cada día.

ebooks, tutoriales, plantillas, trabajos, tesis… una buena forma de tener a mano lo que buscamos, existiendo la opción de visualizar el contenido vía web o hacer download del mismo.


CloudShot – Envía las capturas de pantalla a Dropbox de forma automática

CloudShot – Envía las capturas de pantalla a Dropbox de forma automática:

Si estáis haciendo un tutorial, soporte remoto, preparando un artículo en la web o cualquier otra actividad que requiera hacer capturas de pantalla, seguramenteos interesará conocer CloudShot.

Se trata de una aplicación que, presentada en Lifehacker, nos permite capturar cualquier parte de la pantalla, seleccionando si queremos menús, barras de herramientas, pantalla completa y otras variables disponibles en su sección de configuración.

La diferencia de CloudShot es que el resultado de la captura es enviado automáticamente a nuestra cuenta de Dropbox, con lo que están disponibles en Internet sin necesidad de que hagamos ningún procedimiento extra.

Por desgracia solo está disponible para Windows en cloudshot.codeplex.com, los demás usuarios tendremos que continuar con nuestras opciones habituales.



Patrocinan WWWhatsnew: Vuelos Baratos y Wix – Crea páginas de Fan en Facebook.


Hospedado en RedCoruna




Mostrar imagen de día, tarde o noche con PHP

Mostrar imagen de día, tarde o noche con PHP: Quiero compartir un codigo que desarrollé para que lo usen en sus páginas webs: mediante PHP una imagen de día, tarde o noche se mostrará de acuerdo al horario que corresponda.
Código :
<?php
$date = date ("H");
echo "<html><body>";
if ($date < 12) echo "Buenos dias! "."<img src='http://jclurita@www.jrclurita.com/web_movil/img/dia.jpg' title='dia'/>";
else if ($date < 18) echo "Buenas tardes! "."<img src='http://jclurita@www.jrclurita.com/web_movil/img/tarde.jpg' title='tarde'/>";
else echo "Buenas noches! "."<img src='http://jclurita@www.jrclurita.com/web_movil/img/noche.jpg' title='noche'/>";
echo "</body></html>";
?>
Explico un poco:

Código :

if ($date < 12)
echo "Buenos dias! "."<img src='http://jclurita@www.jrclurita.com/web_movil/img/dia.jpg' title='dia'/>";
(--> Si la variable $date es menor que 12hrs, entonces que imprima la imagen de dia)

El resto es similar, sólo que va a cambiar la imagen.

Las imágenes que cambian son:
  • dia.jpg
  • tarde.jpg
  • noche.jpg
Como sabemos, la hora de PHP se basa en la hora de nuestros hosting o servidor. A mí me marca la hora así:

  • a las 12pm --> imagen de dia(dia.jpg)
  • a las 6pm --> imagen de tarde(noche.jpg)
  • a las 12an --> imagen de mañana(mañan.jpg)

[nota:e6dd342047]Necesitarán 3 imágenes.[/nota:e6dd342047]

Espero les haya gustado

Enviar comentario



10 secretos de CSS3 que tal vez no conocías

10 secretos de CSS3 que tal vez no conocías: Lea Verou (@LeaVerou) es una popular desarrolladora web con varios años de experiencia. En su conferencia "10 cosas de CSS3 que tal vez no conocías" nos explica el uso de algunas propiedades, efectos, transiciones y animaciones en CSS3, así como también un moderado uso de javascript y su respectiva compatibilidad en diferentes navegadores.

Esta conferencia la dió en Pathé Tuschinski en Amsterdam el 7 de Octubre 2011 la cual me he encargado de recopilar y traducir.





Bouncing transitions


Seguramente conocerás diversas maneras de realizar animaciones con la propiedad transition de CSS3. La manera regular de hacerlo es utilizando ease-out, ease-in, etc. Pero ¿Qué tan bien conoces cubic-bezier?

Cubic-Bezier es, por así decirlo, la propiedad madre de los efectos de transición de los estilos antes mencionados. Es totalmente personalizable y se es capaz de marcar tiempos para la animación que queramos.

Se utiliza de la siguiente manera:

Código :

transition Ts cubic-bezier(x, y, z, w)
transition 1.5s cubic-bezier(.17, .87, .50, 1.2)

Lea Verou es tan cool que nos regala un sistema de modificación de este tipo de animación de manera gráfica con un excelente diseño y tiene el mejor dominio: Cubic-Bezier.com

La compatibilidad que tiene es la siguiente:

  • Firefox
  • IE10
  • Opera
  • Webkit

Flexible ellipses

La manera en la que generalmente hacemos un border-radius es con medidas fijas, pero ¿Qué pasa si nuestro es contenido dinámico? Se distorsiona.
Código :
border-radius: 150px / 300px;

Para que esto no suceda se recomienda utilizar porcentajes para realizar el mismo efecto pero sin llegar a una distorción.
Código :

border-radius: 50%;

Con esto siempre se mantendrá la forma de un elipse.

La compatibilidad que tiene es la siguiente:

  • Firefox a partir de v4
  • IE9
  • Opera a partir de 11.50
  • Webkit con algunos bugs


Multiple outlines

Existen maneras complicadas de realizar el efecto de tener varios bordes en un contenedor, pero existe una manera mucho más fácil.
Código :
box-shadow: 0 0 0 5px black, 0 0 0 10px red;


Los primeros 3 ceros dentro de las propiedades de nuestro box-shadow indican que no tendrá ningún tipo de posición en x o y, igualmente ningún blur. El cuarto elemento define el spread o el ancho de nuestro box-shadow, esto nos ayudará a generar el efecto.

Código :

box-shadow: x y blur spread color;

Con esto, simplemente vamos haciendo un borde más grande que otro dándonos el efecto de múltiples bordes.

La compatibilidad que tiene es la siguiente:

  • Firefox
  • IE10
  • Opera
  • Webkit

Bonus: One Side Shadow

Siguiendo las reglas de box-shadow es bastante fácil realizar una sombra de un sólo lado de algún elemento.
Código :
box-shadow: 0 11px 5px -5px black;

Make pointer events pass through

Si tenemos un elemento encima de otro modificado con z-index y queremos realizar un clic en el elemento que está debajo, esta acción nos resulta imposible. Para poder habilitar un "click through" o un "clic a través" es necesario agregar la siguiente propiedad a nuestro elemento superior.
Código :
pointer-events: none;

Esto igual es util para hacer select-menus personalizados.

La compatibilidad que tiene es la siguiente:

  • Firefox a partir de v3.6
  • IE
  • Opera
  • Webkit

Detección

Está es la manera recomendada de detectar si existe la propiedad pointer-events.
Código :

var supportsPointerEvents = (function(){
var dummy = document.createElement('_');
if(!('pointerEvents' in dummy.style)) return false;
dummy.style.pointerEvents = 'auto';
dummy.style.pointerEvents = 'x';
document.body.appendChild(dummy);
var r = getComputedStyle(dummy).pointerEvents === 'auto';
document.body.removeChild(dummy);
return r;
})();

Y un workaround en javascript es el siguiente.
Código :

function noPointerEvents (element) {
$(element).bind('click mouseover', function (evt) {
this.style.display = 'none';
var x = evt.pageX, y = evt.pageY,
under = document.elementFromPoint(x, y);
this.style.display = '';
evt.stopPropagation();
evt.preventDefault();
$(under).trigger(evt.type);
});
}

Adjusting tab size


Si quieres modificar el tamaño de la sangría o el tamaño del tab en un texto, la propiedad tab-size te ayudará bastante.
Código :

tab-size: 4;
La compatibilidad que tiene es la siguiente:

  • Firefox
  • IE
  • Opera
  • Webkit

Styling based on sibling count

Eso de estar seleccionando cada elemento de un menú, de una lista, de una galería, etc, para asignarle una propiedad diferente es una lata. Resulta que existen unas propiedades llamadas first-child, only-child, nth-child y nth-last-child, que nos ayudarán bastante para realizar una serie de efectos interesantes.

First-child

Se selecciona unicamente el primer elemento dentro de un parent (ya se del body, algún contenedor o de una lista).

Código :

#elemento:first-child {
propiedad: unica;
}

Only-child

Se selecciona únicamente un elementro que esté sólo dentro de un parent.

Código :

#elemento:only-child {
propiedad: unica;
}

nth-child

Esta es la que más me gusta. Con esta propiedad podremos seleccionar varios elementos cada determinado numero de elementos.

Código :

#elemento:nth-child(3n+1) {
propiedad: unica;
}

Con esto se seleccionarán el primer elemento y a partir de ahí, cada tres elementos se le aplicará nuestra propiedad.
nth-last-child

Si queremos hacerlo al revés, es decir, contar desde el último al primero lo podemos hacer con esta propiedad.
Código :

#elemento:nth-last-child(3n+1) {
propiedad: unica;
}

Bonus

Lea Verou nos regala las siguientes propiedades para facilitarnos la vida.

Código :

:first-child:nth-last-child(2)

Se selecciona el primer elemento si sólo son 2 en total.

Código :

:first-child:nth-last-child(2), :first-child:nth-last-child(2) ~ b

Se seleccionan todos los elementos si son solo 2 en total.

Código :

:first-child:nth-last-child(n+5), :first-child:nth-last-child(n+5) ~ b

Se seleccionan todos los elementos a partir de 5 en total.

La compatibilidad que tiene es la siguiente:

  • Firefox
  • IE9
  • Opera
  • Webkit

Custom checkboxes & radio buttons

La idea principal es atribuída a Ryan Seddon, con esto podremos tener checkboxes y radio buttons personalizados.

Primero escondemos nuestro elemento.
Código :

:root input#custom-checkbox {
position:absolute; clip: rect(0,0,0,0);
}

Después personalizamos nuestro nuevo elemento, agregándole contenido personalizado:
Código :

: root input#custom-checkbox + label:before {
content: '\20E0';
padding-right: .3em; color: red;
}

Y por último personalizamos y retocamos el efecto de nuestro elemento:
Código :

:root input#custom-checkbox:focus + label:before {
color: white;
}
:root input#custom-checkbox:checked + label:before {
color: red;
}
La compatibilidad que tiene es la siguiente:

  • Firefox
  • IE8
  • Opera
  • Webkit

More cursors for better UX

Seguramente sabes que con CSS2 se pueden asignar diferentes cursores, aquí una lista de nuestras opciones nuevas en CSS3.

  • none
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • col-resize
  • raw-resize
  • all-scroll
  • zoom-in
  • zoom-out

Se utiliza de la siguiente manera:
Código :

cursor: opcion;

La compatibilidad que tiene es la siguiente:

  • Firefox: "no-drop" es igual a "not-allowed".
  • IE: No soporta none, context-menu, cell, alias, copy y zoominout.
  • Opera: Solo soporta col-resize, row-resize, all-scroll y zoom-in/out en Windows.
  • Webkit: Todos.

Background patterns with pure CSS

Si quieres ser original y realizar tus propios patrones en CSS3, puedes comenzar por aprender como funciona el sistema de linear-gradient.

Código :

background: linear-gradient(70deg, black 20%, gray 80%)
Nuestro fondo de pantalla tendrá un degradado con un ángulo de 70°, 20% negro y 80% gris. Fácil ¿no?
Algo que probablemente no sabías es que se pueden incluir varias opciones dentro del linear-gradient, para realizar un patrón inclinado podemos utilizar lo siguiente:
Código :

background: linear-gradient(45deg,
silver 25%, gray 25%, gray 50%,
silver 50%, silver 75%, gray 75%, gray);
background-size: 200px 200px;

Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.

Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.
Código :

background: repeating-linear-gradient(45deg,
silver, silver 30px, gray 30px, gray 60px);
La compatibilidad que tiene es la siguiente:

  • Firefox
  • IE10
  • Opera: Habilitado el soporte de radial-gradientes desde la versión 12.
  • Webkit

Background positioning tricks

¿Cuántas veces has querido darle padding a un background dentro de un contenedor en una locación específica? Como sabrás lo siguiente no funciona.
Código :

padding:40px;
background: url(imagen.png) no-repeat;
background-position: bottom right;
Para poder lograr el padding se puede utilizar la siguiente forma:
Código :

background-position: bottom 100px right 100px;
La compatibilidad que tiene es la siguiente:

  • Firefox
  • IE
  • Opera
  • Webkit

Workaround para Firefox y Webkit

Para realizar el efecto, que increíblemente únicamente funciona en IE (si, IE) y Opera, podemos utilizar lo siguiente:

Código :

padding: 100px;
backgroun-position: bottom right;
background-origin: content-box;
La propiedad background-origin es compatible en todos los navegadores.

Y con esto finaliza la genial presentación de Lea Verou.

En lo personal aprendí bastante, pero sobretodo, aprendí que hay que innovar, pensar out of the box afuera de la caja y sacarle el mayor provecho a las tecnologías actuales. No hay que ser perezosos.

Video de la presentación | Slides de la presentación | Framework de Lea Verou para hacer la presentación

Enviar comentario



25 Slideshows de Javascript (ejemplos)

25 Slideshows de Javascript (ejemplos):

02 joystiq home banner 25 Slideshows de Javascript (ejemplos)

Los slideshows son geniales cuando tenemos que mostrar muchas fotos y o mucho contenido en poco espacio, así que saber implementar alguno de los muchos que hay por la red es algo que considero casi básico.

En esta entrada tenéis veinticinco ejemplos de slideshows usados en páginas web que han quedado a las mil maravillas y que vosotros por supuesto podéis tomar como inspiración.

Todas las imágenes tras el salto.

Fuente | Designm.ag


Molanphy Design

01 molanphy design 25 Slideshows de Javascript (ejemplos)

Joystiq

02 joystiq home banner 25 Slideshows de Javascript (ejemplos)

Osmond Interactive

03 osmand interactive 25 Slideshows de Javascript (ejemplos)

Rodania

04 rodania 25 Slideshows de Javascript (ejemplos)

Mathieu Clauss

05 mathieu clauss 25 Slideshows de Javascript (ejemplos)

Charlie Gentle

06 charlie gentle 25 Slideshows de Javascript (ejemplos)

Red Ice Radio

07 red ice radio 25 Slideshows de Javascript (ejemplos)

These Are Things

08 these are things 25 Slideshows de Javascript (ejemplos)

Oink

09 oink image gallery 25 Slideshows de Javascript (ejemplos)

Hello Themes

10 hello themes 25 Slideshows de Javascript (ejemplos)

Hyperx Media

11 hyperx design 25 Slideshows de Javascript (ejemplos)

Icon Designer

12 icon designer 25 Slideshows de Javascript (ejemplos)

Digital Convulsions

13 digital convulsions 25 Slideshows de Javascript (ejemplos)

ODS Network

14 open source design network 25 Slideshows de Javascript (ejemplos)

Veritas Radio

15 veritas radio 25 Slideshows de Javascript (ejemplos)

Quality Laundry Professionals

16 quality laundry 25 Slideshows de Javascript (ejemplos)

The Daily

17 the daily 25 Slideshows de Javascript (ejemplos)

Radium Labs

18 radium labs 25 Slideshows de Javascript (ejemplos)

Digital Clarity

19 digital clarity 25 Slideshows de Javascript (ejemplos)

Slidedeck

20 slidedeck 25 Slideshows de Javascript (ejemplos)

Elless Design

21 elless design 25 Slideshows de Javascript (ejemplos)

Gimme Money I Can Do It!

22 gimme money 25 Slideshows de Javascript (ejemplos)

Ecoforms

23 ecoforms 25 Slideshows de Javascript (ejemplos)

McKinney

24 mckinney 25 Slideshows de Javascript (ejemplos)

Print Mor NYC

25 print mor 25 Slideshows de Javascript (ejemplos)