Recargar páginas web automáticamente

Recientemente me asignaron cubrir un evento para el cuál tenía que estar al pendiente del timeline de una cuenta de Twitter.

Para esta tarea me parece que la lectura más cómoda es la versión web de Twitter. El pequeño detalle es que como la actividad de la cuenta era exhaustiva, a cada rato tenía que estar dando clic en el aviso de nuevos tweets.

Sé que existen opciones como Tweetdeck que cargan automáticamente los nuevos tweets pero actualmente no es posible cambiar el ancho de las columnas, haciendo que se desperdicie espacio y los tweets fluyan muy rápido.

En vez de estar buscando soluciones específicas para este problema investigué la solución genérica y me topé con el siguiente complemento para Firefox:

Reload Every

El complemento Reload Every añade una opción al menú contextual (el menú que aparece al hacer clic derecho en la página web que estás viendo actualmente) para recargar la página que estás viendo cada ciertos segundos o minutos.

Visita el sitio de Reload Every.

Continuar leyendo...

Descansa en paz…Steve Jobs

Continuar leyendo...

To float or not to float?

Web developer 1: El contenedor (léase DIV, LI etc.) no adquiere el tamaño de los elementos que contiene.
Web developer 2: Probablemente se deba a que alguno de los elementos hijos está flotando, ¿flotaste algo en su contenido?
Web develper 1: ¡Sí! ¿Qué puedo hacer para solucionar esta desgracia? ¡Los elementos tienen que estar flotando hacia la izquierda! ¡No hay otra forma de obtener el layout especificado en el mockup!
Web developer 2: ¡Sencillo! Haz que el contenedor también flote.
Web developer 1: Pero… si hago eso, entonces tendré el mismo problema con el contenedor de ese contenedor…
Web developr 2: Sencillo ¡Flota todo!

La propiedad float es seductora por naturaleza a pesar de que su razón de existir es muy simple: Ofrecer una manera de crear layouts de imágenes y texto similar al utilizado en diseño editorial, donde el texto fluye y envuelve a las fotografías. Lo anterior se logra debido a que la imagen flotante que acompaña al texto, es retirada del flujo normal de posicionamiento.

Traducción: La imagen (o bien, cualquier otro elemento html forzado a flotar) es practicamente ignorada por el explorador. Es decir que al momento de que el explorador está generando el render de la página en cuestión, este tiene que calcular los tamaños de todos los elementos tomando en cuenta sus contenidos y posicionamiento, así como reglas de estilo (width, height, etc.), sin embargo los elementos flotantes contenidos dentro de los primeros no serán tomados en cuenta porque por naturaleza los elementos flotantes no pertenecen al flujo normal.

Pero, ¿qué es el flujo normal? El flujo normal se refiere a la forma en que el explorador acomodará a los elementos no posicionados (elementos cuya posición sea estática o relativa y que no sean flotantes). Por ejemplo un elemento DIV el cual es de tipo bloque (es decir, su propiedad display por default es block) y cuya posición default es estática, será dibujado con un ancho igual al de su contenedor (o mejor dicho, del área activa de su contenedor) y su altura será dada por su contenido. Sin embargo, si su contenido se compone solamente de un elemento flotante, entonces su altura será igual a 0.

Si has llegado hasta este punto del artículo seguro estarás pensando “Todo eso está muy bien, pero ¿qué hago para que el contenedor no ignore su contenido flotante?”. Bueno, mi recomendación es usar float sólo cuando sea necesario (por ejemplo, en imágenes que requieren ser “envueltas” por el texto que las acompaña). Muchas veces podemos lograr el mísmo efecto utilizando posicionamiento relativo o bien alterando su propiedad display a inline-block o en su defecto, una combinación de ambas. No obstante, estoy conciente de que muchas veces es necesario o bien, es más rápido utilizar float para lograr resultados deseados (sobre todo con deadlines encima) para lo cual es necesario entender por qué la solución de “flotar todo” funciona.

La respuesta es muy sencilla: Float crea un nuevo block formating context. Es decir, que el elemento con propiedad float se hace responsible del acomodo (o layout) de sus elementos hijos es por eso que se llama block formatting context: El contenido es posicionado de acuerdo a un contexto (el cual en este caso se refiere al elemento flotante).

Cuando hablaba al inicio del artículo que los elementos float eran practicamente ignorados por el explorador, no estaba siendo lo suficientemente claro. La respuesta adecuada hubiera sido que los elementos float son ignorados debido a que pertenecen a un block formatting context a diferencia de su contenedor y sus elementos vecinos los cuales no pertenecen a ninguno. Si al contenedor de ese elemento flotante le fuera aplicada la propiedad float en su clase o estilo correspondiente, este generaría un nuevo block formatting context; un block formatting context toma en cuenta otros block formatting context que pudieran encontrarse dentro de él, por lo que en este caso, el contenedor tomará en cuenta a su elemento flotante al momento de determinar su altura. Sin embargo esto crea un efecto dominó ya que el contenedor es ahora ignorado por pertenecer a un block formatting context y su contenedor no. Es por eso que la solución de “flotar todo” tiene éxito: Flotar todos los contenedores los coloca a cada uno de ellos en un block formatting context y por lo tanto toman en cuenta a los distintos block formatting context dentro de ellos.

No obstante existen otras maneras de crear block formatting context sin resultados tan destructivos. La más utilizada es dar al contenedor de los elementos flotantes la regla “overflow: hidden”. Esta regla indica que el contenido que sobrepase los límites especificados para el contenedor, será recortado de acuerdo a estos últimos. Sin embargo, esto aplica solo para los elementos posicionados absolutamente o bien los que deliberadamente han sido posicionados fuera de los límites del contenedor. Los elementos flotantes no entran dentro de las categorías anteriores por lo que serán tomados en cuenta.

“overflow:hidden” muchas veces es la respuesta a dolores de cabeza, sin embargo no es una solución perfecta ya que debido a la naturaleza de un block formatting context y lo que esto conlleva, puede no ser la más adecuada para el layout deseado.

Espero este pequeño artículo haya servido como un pequeño rayo de luz para todos aquellos principiantes que tiemblan y maldicen al encontrarse con la tarea de crear una hoja de estilos. No cubrí todos los aspectos del tema, así que si están interesados en conocer más de este, háganlo saber en los comentarios.

Continuar leyendo...

Voy a tener suerte para WordPress

Buscando plugins para mi sitio Frases de la película me topé con uno que me parece curioso.

I’m Feeling Lucky! es un plugin para WordPress que hace lo siguiente: Si solamente hay un resultado en una búsqueda, te redirige a él en lugar de desplegarlo en la lista de resultados.

Ya está implementado en 7ecnologia.

Busca por ejemplo las palabras que vienen en este dibujo:

Continuar leyendo...

Google Chrome Extensions

Cómo ya muchos sabrán, con las nuevas generaciones de exploradores web, se incrementan las funcionalidades de estos, y es que actualmente ya nos sirven para realizar diversas actividades que solo navegar por internet, esto, gracias a las famosas extensiones.

Pero, alguna vez has pensado: cómo harán las extensiones para Google Chrome?

Yo sí, en más de una ocasión y decidí investigar como desarrollar estás y descubrí que es un proceso muy sencillo, cualquier persona que sepa algo de Html, Css y Javascript puede hacerlo.

Básicamente los pasos a seguir son los siguientes:

1. Creamos nuestra carpeta raíz, en donde almacenaremos nuestros archivos.

2. Creamos nuestras carpetas dependiendo de los tipos de archivos que manejaremos, esto es opcional y es solo para tener organizados nuestros fuentes.

3. Crear nuestro archivo HTML principal, el cual, será la interfaz gráfica de nuestra extensión.

En este caso, yo desarrollé un Html que muestra la últimas 16 fotos de Walkin’ in México, sin embargo, ustedes pueden crear lo que más les guste, ahora si que el límite es su creatividad.

Aquí, debemos de considerar aquellos archivos Css y Javascript ya que con ellos desarrollaremos la apariencia gráfica y las funcionalidades que deseamos.

4. Crear nuestro archivo manifest.json, en este estableceremos la definición de nuestra extensión.

{
“name”: “Walkin’ in Mexico”,
“version”: “2.0″,
“description”: “Walkers…”,   
“permissions”: ["tabs","http://walkin.mx/"],
“browser_action”: {
“default_icon”: “img/Walkin.Mx.24.png”,
“popup”: “html/Walkin.Mx.html”
},
“icons”: {“128″: “img/Walkin.Mx.128.png”,
“48″: “img/Walkin.Mx.48.png”,
“24″: “img/Walkin.Mx.24.png”,
“16″: “img/Walkin.Mx.16.png”}
}

Como pueden ver, en dicho archivo definimos el nombre de la extensión, la versión y la descripción.

Permissions, con esto le indicamos a Google Chrome cuales serán los permisos para nuestra extensión, en este caso le decimos que vamos a poder crear nuevas tabs y acceder a la dirección http://walkin.mx.

Browser_action: con esto, le indicamos que el icono default (el que se vera en la barra de extensiones) es img/Walkin.Mx.24.png. También le indicamos que vamos a hacer uso de una ventana pop up, que es la que diseños previamente.

Icons: con esto, le indicamos los iconos que vamos a manejar dentro de nuestra extensión.

5. Cargar extensión en Google Chrome. Nos vamos al panel de extensiones, seleccionamos la opción cargar extensión, seleccionamos la carpeta root y listo.

Cómo ven? Esta sencillo el proceso, no? Ahora, te toca a ti!

Espero les sea de utilidad este pequeño tutorial. Les dejo la extensión ya empaquetada que desarrollé yo y en la que me base para realizar este post.

Espero sus comentarios…

Continuar leyendo...

jQuery: Mobile Framework

Que tal Lectores, si alguno de ustedes, es desarrollador, diseñador, etc de sitios web, esto les puede interesar.

Últimamente hemos visto que la tendencia de la Web es hacía a los dispositivos móviles, y como no? si cada vez es mayor el número de personas que tiene uno de estos, y también cada día es mayor la oferta que hay de dichos dispositivos. Debido a esto debemos de estar al tanto de que podemos hacer, para que nuestros sitios puedan ser visualizados tanto en computadoras personales como en dispositivos móviles.

Es por eso, que jQuery, nos ofrece desde hace tiempo herramientas para mejorar la experiencia del usuario en los sitios web.

Y, en días pasados, acaba de lanzar un nuevo framework: jQuery Mobile Framework.

Con dicho framework, nos ofrece herramientas para desarrollar sitios que corran sobre los dispositivos móviles más utilizados en todo el mundo.

Entre los dispositivos que soporta se encuentran los siguientes:

Si estas interesado en el desarrollo para sistemas móviles, le deberías dar una revisada.

Continuar leyendo...

Apuéstame… y trabajaré en YouTube

Recientemente hizo su aparición Google Instant, pero, ¿ya probaron YouTube Instant?

Pero no empieces a quitar tus blogs tecnológicos del feed o a tus amigos geeks del twitter por que no te dieron la nueva primicia de Google…dado que no lo hizo el mastodonte de las búsquedas.

La historia comienza así: Feross Aboukhadijeh (estudiante de Stanford) después de haber visto el nuevo y flamante Google Instant, le apostó a su compañero de cuarto que él podía hacer un buscador en tiempo real de YouTube (http://YTInstant.com) en menos de una hora…pero el muy fanfarrón de Feross perdió la apuesta y lo terminó en… tres horas (triste situación) mas unas cuantas más para pulir la interfaz de usuario. Un excelente resultado.

Después de unas cuantas horas de que Feross publicara en Facebook la liga hacia su nuevo bebe, YouTube Instant empezó a hacerse viral, y llegó a los ojos del cofundador y CEO del famoso sitio de videos, Chad Hurley, el cual, después de haber checado la página, le ofreció un empleo por twitter, OSOM!

Feross realizó YouTube Instant usando una combinación de la API de YouTube y hurgando las sugerencias de búsqueda de YouTube.

Como ven, una buena idea y algo de tiempo, a veces, pueden ser un excelente trampolín en este mundo 2.0.

Por cierto, Feross rechazó la oferta de Chad por estar actualmente trabajando en Facebook, así que esperen próximas actualizaciones facebookeros .

Saludos!

Vía: feross

Continuar leyendo...

Apple iOS 4.1

Para todos nuestros lectores con un iPhone, tengo que informarles que este miércoles 8 de Septiembre se espera un update para el iOS, es el Sistema Operativo para los iPhone y iPod Touch.

El Update estará disponible para descargarse desde este miércoles para todos los usuarios de iPhone 4, iPhone 3GS y iPhone 3G. Los usuarios de iPod Touch de segunda y tercera generación también podrán descargar el update y estará instalado en los nuevos iPod Touch.

Esten pendientes en esta página para descargarlo.

Se menciona que el update corrige varios bugs encontrados anteriormente así como mejorar el rendimiento cuando es instalado en iPhone’s 3G.

También se incluyen nuevas características, como por ejemplo:

Mejores fotos, se usa la tecnologa HDR (Alto ajuste dinámico) el cuál al tomar una foto, se toman automaticamente 3 fotos y analiza los mejores elementos de cada una para presentarte la imagen con el mejor contraste posible.

Gamecenter, es una platarfoma de la cual se ha hablado mucho que permite a los usuarios jugar contra otros usuarios o amigos, llevar un historial de tus logros, comparar puntuaciones y muchas cosas más, ademas que los papás tienen la opción de deshabilitar el uso del gamecenter si es que no quieren que su(s) pequeño(s) jueguen contra otros usuarios.

Nuevo iTunes con integración a ping, recientemente se lanzó una nueva red social llamada ping que ahora ya estará disponible en sus moviles. La red social permite a los usuarios seguir a sus artistas favoritos, verificar que canciones han comprado sus amigos ademas de saber qué están escuchando.

No dejen de revisar todas las nuevas características del nuevo iOS 4.1 aquí.

¿Ustedes piensas actualizar su iPhone a la versión 4.1 del iOS?

-Samuel

Continuar leyendo...

Chrome Experiments (by Google)

Hace un tiempo, navegando por ahí, me encontré un sitio llamado Chrome Experiments, y cuando vi lo que había ahí, me he quedado asombrado.

Resulta, que es un sitio en donde existe una galería con aproximadamente 115 ejemplos web que utilizan tecnologías como HTML5 y Javascript.

Dichos ejemplos corren sobre navegadores de última generación, como por ejemplo Google Chrome.

Si a ti te gustan este tipo de tecnologías, deberías de darle un vistazo a todo lo que puedes realizar.

Los ejemplos son muy variados, como videos corriendo en HTML5, aplicaciones para dibujar tipo paint, juegos, animaciones, gráficadoras.

Pero, por qué motivo realizaron esto, aquí les dejo un fragmento del porque:

“We think JavaScript is awesome. We also think browsers are awesome. Indeed, when we talk about them, we say they are the cat’s meow – which is an American expression meaning AWESOME.

In light of these deeply held beliefs, we created this site to showcase cool experiments for both JavaScript and web browsers.

These experiments were created by designers and programmers from around the world using the latest open standards, including HTML5, Canvas, SVG, and more. Their work is making the web faster, more fun, and more open – the same spirit in which we built Google Chrome.”

Por cierto, si tienes algo hecho de este tipo, o estás experimentando con algo similar, puedes enviarselos, y posiblemente lo agreguen a la galería.

Continuar leyendo...

Tutorial de HTML en inglés y español

Si eres nuevo en esto de las páginas web y quieres empezar por conocer lo más básico de programación web te recomiendo estos tutoriales en línea.

 

Uno es el de w3school que te lleva paso por paso a profundizar en el tema en el idioma inglés, desde la explicación hasta ejercicios que podrás ir aplicando.

El otro es el tutorial de desarrolloweb dirijido por el español Rubén Álvarez, que por medio de capítulos, ejemplos y videos tutoriales te explica detalladamente en qué consiste HTML.

Te recomiendo que también te metas a conocer un poco más de XML Y XHTML. No son muy largos y te irá abriendo el campo de conocimiento de este lenguaje básico web.

XML, XHTML en español

XML, XHTML en inglés.

Suerte.

Irina Delgado

Continuar leyendo...

Nueva presentación en Google Images

A partir del 20 de Julio del 2010, en el sitio de Google.com/images hay una nueva presentación al buscar imágenes.

Algunos cambios que ha sufrido el sitio:

- Al mostrar los resultados de la búsqueda ya no muestra el título de la imagen, ahora hay más espacio para mostrar más imágenes, un hover pane al pasar el mouse por una imagen, la vista previa de las imágenes es más grande.

- Te muestra hasta 1000 fotos en la misma página, solo necesitas hacer scroll.

- Al hacer clic en una imagen te manda a una nueva página.

Y también siguen todas las características que ya existían,  búsqueda por color, búsqueda por tamaño, búsqueda por tipo de imagen entre otras.

Por el momento esta nueva presentación de imágenes está solamente disponible para google.com en inglés, esperemos que pronto incorporen estos cambios a google.com.mx. Siempre pasa que los cambios se van adaptando poco a poco, así que no comamos ansias, pronto nos tocará.

A mí en lo personal me ha gustado mucho más está nueva presentación de Google images, es mucho más fácil y rápido encontrar una imagen en específico, me gustó también que te muestre la gran mayoría de las imágenes en una misma página, ¿A ustedes qué le parece está nueva presentación, qué les ha gustado más?

-Samuel S.

Continuar leyendo...

Editores online: Todo va para la web

En el capítulo anterior de Todo va para la web expresé mi opinión acerca del futuro de los sistemas operativos. Según yo todo se podrá hacer en Internet.

¿Qué tal esta actualización?

Editor de video online

Lleva un rato desde que YouTube incorporó a su servicios la posibilidad de editar tus videos desde su página web. Actualmente es un editor básico: recortar el inicio o el final de tus videos, combinarlos con otros, cambiar el audio.

A mi parecer el hecho de que tengamos este editor obligará a la competencia a ponerse al parejo, dígase vimeo, dailymotion, etc. Y al mismo a YouTube a mejorarlo.

Editor de mapa de bits online

“¡No necesitas correr flash para correr cloudcanvas! Nuestro sistema utiliza tecnología html5, la siguiente generación de tecnología web” <– Suena bien para el Ipad ¿no?

Me entero vía ddg de este potente editor gráfico online. Lamentablemente lo intenté probar y te pide registro. Por alguna razón no me dejó concretarlo así que mientras tanto les dejo el video demostrativo:

Otro editor de imágenes online es el que trae incluído WordPress, también básico pero enfocado a los pequeños detalles. Algo que me gusta de él es que puedes recuperar la imagen original. Cosa que me recordó el método no destructivo de editar de Picasa. (¿Ya tendrá editor online?)

¿Qué otros editores online conoces? Existen muchísimos y cada vez son más potentes.

Jos

Continuar leyendo...