wordpress visitor
» Diseño Web | Informática Práctica |

Una web netbook y tablet friendly

Escrito por ffuentes el Wednesday, 23 de May del 2012 a las 8:24

Sí, los netbooks como que pasaron de moda hace un tiempo, puede que los sucesos de Tailandia hayan tenido que ver, pues uno de los factores era el precio pero puede que las tablets y los ultrabooks acabasen totalmente con la popularidad de estos en la prensa.

Pero los netbooks siguen en el mercado, siendo preferidos por mucha gente, entre las cuales, personas que tienen que moverse mucho, personas que necesitan navegar en Internet y hacer tareas de tipo ofimático. Además muchas personas de bajos recursos optan por un netbook incluso por sobre un escritorio, por el factor económico.

Actualmente el mercado de netbooks está dominado por los procesadores atom, y las gráficas Intel aunque hay modelos AMD con algunas mejores en gamas un poco más altas. Sin embargo, hoy en día los netbooks tan pequeños como siempre pueden ofrecer capacidades de hasta 500 GB de disco duro, procesador de doble núcleo, visionado de videos en alta definición e Intel ha prometido incluso netbooks sin ventilador.

La premisa principal, lo que hace que un netbook sea un netbook es la pantalla y me he encontrado con que ciertas áreas de la WWW son hostiles para los usuarios de netbooks. ¿Cómo podría la web ser más atractiva para los usuarios de netbooks (y también de tablets)?

Diseño.

Lo más obvio es el tamaño, durante los últimos años la web se estaba diseñando para pantallas cada vez más grandes, esto es, de más de 1024 líneas horizontales por lo cual para navegar por ciertas páginas en netbooks es necesario hacer un desplazamiento horizontal que no es muy cómodo si es demasiado largo.

Pero he detectado otros, como algo que vi en los blogs de hipertextual que podría ser molesto incluso para otros usuarios sin ratón, que es asignar a las teclas de desplazamiento el pasar de una página a otra. Me encontré que esos blogs (normalmente el diseño de ellos es siempre el mismo para todos) son más grandes que la pantalla del netbook por lo tanto, genera la tentación de desplazarse hacia un costado con las teclas de desplazamiento; lo único que conseguí fue terminar viendo un artículo que no quería ver. Y luego alguien vino a contarme que le pasaba lo mismo.

Otro inconveniente es que una aplicación web tenga un tamaño de letra demasiado pequeño, algo más raro pero que puede pasar como ha ocurrido con el diseño de Grooveshark hace un año atrás. Simplemente no funcionaba bien.

Velocidad de carga

Los netbooks más potentes tienen 1.6 Mhz de procesador y una tarjeta integrada sencilla. Esto también puede aplicarse a notebooks de gama baja.

Pues me ha pasado de navegar en sitios con páginas muy pesadas, por ejemplo, quizás el más común: Los blogs repletos de videos de YouTube. Si los propios servidores de videos en línea no ponen más de un video en una página es porque no debe ser una gran idea.
Lo mismo cuando se trata de poner demasiados elementos en una página web para que se vea más bonito. Keep it simple, stupid. Incluso en equipos de escritorio y notebooks, implica un retardo en el disfrute de la experiencia en esa página web, pero en netbooks y tablets es especialmente doloroso.

La gran cantidad de visitas que crecientemente se inclinan hacia resoluciones de pantalla pequeñas, incluso bajo los 1024 x 640 en el caso de las tabletas hace muy necesario que los desarrolladores web sean más cuidadosos, incluso yo diría que las tabletas requieren más dedicación y cuidado que los netbooks pues sencillamente los dedos son torpes (y más grandes que un puntero).

¿Es mucho pedir?

Categoría: Diseño Web, General | No hay Comentarios »

La (todavía) beta HTML5 de YouTube y el fin del reinado de Flash

Escrito por ffuentes el Tuesday, 22 de November del 2011 a las 8:36

Muchos de los lectores conocen ya que pueden utilizar YouTube para ver videos en HTML5 y no con Flash, para lo cual hay que inscribirse en una beta haciendo clic en una página especial y medio oculta para que todos los videos que cargues utilicen HTML5. Todo esto me ha hecho preguntarme por supuesto, hasta cuándo será beta y cuándo comenzará a ser algo en serio.

Durante los últimos días YouTube ha mejorado el visor de videos HTML5, agregando ciertas funcionalidades como el botón “me gusta” o el botón de compartir y de incrustación (aunque este último no me funciona bien en Firefox) y lo mejor es que quitaron la opción falsa de descargar el video (que enlazaba a un Rickroll, da lo mismo que lo diga porque ya lo han quitado)

¿Pero hay realmente razones para continuar utilizando flash? Más allá de los jueguitos no se me ocurre nada, en el caso del streaming de videos no le veo gran justificación.

Uno de los problemas de Flash que me parece que será lo que lo acabará relegando definitivamente es que es extremadamente propietario, lo cual tiene que ver con que para configurar nuestro Flash tenemos que entrar a una página de Adobe, pero lo más importante y ahora lo es aún más con la irrupción de las tablets, de ARM en todas sus variantes y otras arquitecturas menores, es que si a Adobe no le da la gana desarrollar o incluso continuar manteniendo una arquitectura, no lo hacen y los usuarios salen perjudicados, por ejemplo en el caso de PowerPC que si bien lo asociamos a los viejos macs (que por cierto se siguen usando, sobre todo los G4 y G5, sobre todo en muchos mac minis y demases) también está presente en la XBox 360 y en la PS3 que son productos contemporaneos. Tampoco da soporte a ARM.

Por esa y otras razones, porque además el Flash es un poco cutre, (a mi me parece como las costras, que además cuando te desplazas en una web con el teclado, en Linux al menos estas “costras” me dejan atascado) nace OccupyFlash (aprovechando la contingencia).

Aquí despliegan parte de su motivación:

Flash Player is dead. Its time has passed. It’s buggy. It crashes a lot. It requires constant security updates. It doesn’t work on most mobile devices. It’s a fossil, left over from the era of closed standards and unilateral corporate control of web technology. Websites that rely on Flash present a completely inconsistent (and often unusable) experience for fast-growing percentage of the users who don’t use a desktop browser. It introduces some scary security and privacy issues by way of Flash cookies.

Flash Player está muerto. Su tiempo ha pasado. Tiene un montón de bugs. Se cae a cada rato. Requiere constantes actualizaciones de seguridad. No funciona en muchos dispositivos móviles. Es un fósil abandonado de la era de los estándares cerrados y unilaterales de control de la Web. Un sitio web que funciona bajo Flash presenta una inconsistencia completa (y muchas veces inusable) experiencia para el creciente porcentaje de usuarios que no usan un navegador de escritorio. Introduce algunos problemas de seguridad y privacidad que dan susto por medio de las cookies flash.

La campaña invita a los usuarios a dejar Flash completamente, a desinstalar el plugin y utilizar las alternativas que impliquen el uso de HTML5 en su lugar. Es un poco extremo considerando que la web contemporánea tiene una cierta dependencia de Flash pero es un camino válido. Personalmente las webs que descansan en Flash para mostrar todo su contenido me parecen una ordinariez horrible, por más bonito que se vea por fuera.

Lo único que sé es que espero pronto el momento en que no haga falta tener compatibilidad con Flash para hacer la mayoría de las cosas que hacemos a través de la web. Es algo en lo que creo que tendrán mucho que ver Google y los fabricantes de dispositivos.

Categoría: Diseño Web | No hay Comentarios »

Editar plantillas CSS con WebPutty

Escrito por ffuentes el Friday, 22 de July del 2011 a las 3:54

Hay un asunto que a veces nos complica la vida al diseñar o modificar plantillas CSS, es el de editarlas y saber cómo están quedando. No es el fin del mundo pero sería mejor ver lo que estamos haciendo.

WebPutty al contrario de lo que pudiera pensarse no es un programa que entre en la línea de comandos, sino más bien es capaz de editar la CSS de un sitio en funcionamiento desde su editor web.

Tendremos siempre la imagen de nuestra web a un lado y la CSS al otro, mostrando los cambios automáticamente. Para que funcione necesitamos añadir un pequeño código a nuestro header para que los cambios se puedan ver reflejados en la web y a la vez los cambios hechos en WebPutty aparezcan en nuestro sitio.

WebPutty

Uno podría llegar a pensar que es un riesgo pero el código es exclusivo para cada web. A continuación describo en una lista las características:

- Se usa con una cuenta de Google, no hay que crearse un usuario para empezar.
- Cuando publicas, el cambio realmente se hace efectivo en tu plantilla y en tu hosting.
- Ese cambio se realiza con un código y una CSS almacenada en WebPutty, no hay que dar datos de contraseña o usuario de tu hosting. No FTP. No SSH.
- Puedes integrar a más personas en la edición, siempre que tengan una cuenta de Google.

El servicio, como la mayoría de estas cosas están en pruebas y es gratis, pero seguramente distingan servicios en el futuro para cobrar por ellos. Algo malo de esto es que ellos no tienen plugin para WordPress de momento, por lo que tienes que borrar manualmente tu hoja de estilos o mejor dicho, el enlace desde tu plantilla y reemplazarlo por tu código de WebPutty. El otro inconveniente es que si hipotéticamente el servicio se cae, tu web no se verá con la plantilla (ignoro si esto puede evitarse y usar el css del hosting como respaldo).

A los que necesiten editar plantillas de manera más práctica, sin gastar en software nuevo y confíen en la nube se los recomiendo.

Como muchas aplicaciones web, esto lo vi en Momb.

Categoría: Diseño Web, Nube | No hay Comentarios »

Browser ID, una nueva forma de registrarnos e ingresar a sitios web

Escrito por ffuentes el Friday, 15 de July del 2011 a las 22:24

El asunto de “loguearse” (ingresar) en una web o registrarse en un servicio web o un foro, es un tema al que los desarrolladores le han estado dando vueltas desde hace algún tiempo, por ejemplo, podemos recordar el OpenID que está bastante masificado o la utilización de los datos de Twitter o Facebook para ingresar a determinados sitios web.

Browser ID, desarrollado por Mozilla es una alternativa que pretende que ya no usemos nicks para identificarnos en una web, pero que al mismo tiempo, no sea tan complicado de poner en marcha como un openid.

A diferencia de OpenID, Browser ID es un sistema centralizado, pero en manos de Mozilla y no de una compañia que use software privativo. También, como con OpenID te creas la cuenta una vez y la puedes utilizar siempre (aunque en openid tu dirección es una web y en browser id es un correo electrónico). OpenID lamentablemente falla en ser un protocolo dificil de entender y a ratos incluso unas cuentas obtenidas en un proveedor (o creados en nuestras propias webs) no son compatibles y al final tenemos que usar a un proveedor más conocido.

Browser ID me parece bastante interesante, por la facilidad de uso, por ser de Mozilla, porque parece más sencillo de entender para un desarrollador web que OpenID (yo traté de ponerle un OpenID a mi web para usarla como mi identidad virtual y fue un quebradero de cabeza que jamás funcionó como esperaba).

Abajo les dejo con el video que explica desde el punto de vista del usuario cómo se utiliza Browser ID (que es bastante simple por lo demás):

Categoría: Diseño Web, open source | No hay Comentarios »

Qué es el humans.txt

Escrito por ffuentes el Sunday, 10 de July del 2011 a las 7:10

Así como existe un robots.txt en la raíz de la mayoría de los sitios webs con instrucciones para los bots de los buscadores (para que indexen o no determinadas páginas o toda la web) a alguien se le ocurrió en Barcelona, que si existe un archivo para los bots por qué no puede haberlo para los humanos.

Y así nació el proyecto humans.txt

El planteamiento es muy sencillo, muchas veces queremos saber quién o quienes están detrás de un sitio web, no necesariamente sólo sus dueños sino quienes lo han diseñado o colaborado con él, usar un .txt además de parodiar al de los bots, permite generar un estándar, un orden que es fácil de comprender.


¿Cómo debería ser?
El proyecto humans.txt nos lo explica:

CODE:
  1. /* TEAM */
  2.     Your title: Your name.
  3.     Site: email, link to a contact form, etc.
  4.     Twitter: your Twitter username.
  5.     Location: City, Country.
  6.  
  7.                  
  8.                         [...]
  9.                        
  10.  
  11.     /* THANKS */
  12.     Name: name or url
  13.  
  14.                  
  15.                         [...]
  16.                        
  17.  
  18.     /* SITE */
  19.     Last update: YYYY/MM/DD
  20.     Standards: HTML5, CSS3,..
  21.     Components: Modernizr, jQuery, etc.
  22.     Software: Software used for the development

Me parece una muy buena idea (que hasta Google ha imitado a su manera), si tienes cuidado con algunos aspectos de tu privacidad (como el correo electrónico, por ejemplo).

Categoría: Diseño Web | No hay Comentarios »

Convertir de webs en diseños minimalistas con un clic – MIN

Escrito por ffuentes el Wednesday, 15 de June del 2011 a las 4:49

Vamos a ser breves. Lo que a continuación destaco es un bookmarklet que al pulsarlo estando navegando sobre cualquier página, quita todos los accesorios externos y deja unicamente el texto donde está. La web sigue con las mismas funcionalidades, pero la "limpia" de todo fondo, borde y color.

El bookmarklet se llama MIN.

screenshot_251

Lo de arriba no es que Informática Práctica haya cargado mal, sino que es ese el resultado de usar MIN. Si no fuera por el logo que no se ve, te diría que no se ve mal.

Categoría: Diseño Web | No hay Comentarios »

Crear un sitio web con Dropbox – DropPages

Escrito por ffuentes el Friday, 20 de May del 2011 a las 5:34

Esto lo acabo de ver y necesitaba comentarlo con quienes pasan por aquí.

Se trata de un servicio muy sencillo para crear webs con Dropbox pero de una forma más sencilla que sólo crear archivos HTML puros.

El nombre del servicio es DropPages y para emplearlo tenemos que descargarnos un tema visual desde su web. No hay muchos pero se pueden adquirir más o bien maquillar el nuestro.

Luego de tener nuestra web definida con el "theme" instalado la ponemos en una carpeta con el nombre que queremos que tenga, de esta manera: subdominio.droppages.com y la convertimos en una carpeta compartida con DropPages a través de la dirección de correo que facilitan, lee las instrucciones oficiales.

Para publicar una página, subimos un archivo .txt con marcación markdown (la marcación que emplea Wikipedia) o HTML si queremos.

Si pagas 5 libras al mes vía PayPal, podrás usar tu propio dominio y utilizar hasta 1GB en tu página web (en la carpeta compartida con DropPages).

La ventaja de emplear este servicio es que lo puedes hacer gratis y es mucho más limpio que hacer lo mismo desde tu espacio en solitario y que gozas de las ventajas de no tener que usar un cliente FTP y no estar obligado a usar HTML ni a crear nuestra propia plantilla CSS, nos ahorra trabajo. Imagino que esto también esquiva el problema de dropbox de ser incapaz de listar directorios aunque estos tengan un index.html.
El servicio pagado me parece demasiado caro y preferiría lejos contratar un hosting con alguien más, con el equivalente me alcanza para un alojamiento en muchas empresas del rubro.

Tomado de uno de los ejemplos de Wwwhatsnew

Categoría: Diseño Web | 1 Comentario »

Crear un formulario bonito con HTMLForm

Escrito por ffuentes el Tuesday, 28 de December del 2010 a las 1:36

Crear un formulario es algo que todo bloguero debe tener en cuenta, mucho más los dueños de un sitio web de una empresa u organización, pero eso escapa de los conocimientos de una persona con conocimientos básicos de informática y de HTML.

Existen webs para generar formularios de copiar y pegar, con trozos de javascript, pero es la solución chapucera, adecuada para un blog sin hosting propio o algo así, pero no para un sitio mejor gestionado.

HTMLForm permite crear mediante un asistente muy sencillo un formulario web y solucionar los dos problemas anteriores, el resultado del asistente es un formulario hecho en HTML y AJAX listo para descargar. Luego sólo hace falta subir todo al servidor y ya está.

Lo bueno de HTMLForm es que permite agregar los campos que queramos libremente, por ejemplo, un campo de seleccionar país y ciudad o seleccionar una alternativa e incluso agregar un recaptcha sin tener que ponerlo nosotros mismos. Nada nuestro llega a HTMLForm.

HTMLForm permite trabajar un formulario de contacto pero también una encuesta, por ejemplo. Otra ventaja de la web es que no requiere registro (más que entregar tu e-mail para recibir el archivo).

Adelante, pruébenlo y cuéntenme cómo les ha ido.

Categoría: Diseño Web, JavaScript, Recursos | No hay Comentarios »

Google Font Previewer

Escrito por ffuentes el Friday, 6 de August del 2010 a las 3:01

screenshot_235.jpeg

Un pequeño dato, que quizás no conocen, Google Font Directory, aquellas fuentes que Google nos facilita de forma gratuita a través de sus servidores, gracias a las bondades de CSS 3.

Ahora contamos con una nueva funcionalidad que permite probar todas las fuentes de Google Font Directory, modificar a voluntad y con menúes sencillos cada fuente, lo cual genera un código CSS que se puede pegar directamente o adaptar a nuestro diseño web.

Categoría: CSS, Diseño Web | No hay Comentarios »

Tarjetas de presentación 2.0.

Escrito por ffuentes el Friday, 18 de June del 2010 a las 2:55

screenshot_205.jpeg

De vez en cuando en blogs parecidos a este aparece una web que permite crear una especie de tarjeta de presentación, pero "social web", en vez de teléfonos y una dirección física, presentas tus blogs, tu correo electrónico, tus perfiles en redes sociales, ideales para dejar una pequeña presentación personal donde centralizar todas tus presencias, tener algo que poner en los campos "Página Web" e incluso agregar en tu CV como tarjeta de visita.

La primera web que se hizo conocida por dar pie a esto fue Card.ly que, con el tiempo fue evolucionando y mejorando. En 5 o 6 pasos (si deseas pagar) tienes tu página de presentación personal. La versión Premium permite varias cosas, entre ellas, usar tu propio dominio y tener más plantillas de las que elegir. La URL queda como http://card.ly/usuario

A mi personalmente me gustó más (por el diseño) Flavors.me. La mecánica es parecida, pero cuenta con una usabilidad más cuidada y más redes sociales que elegir, le da más prioridad al contenido. Por ejemplo, en Flavors.me puedes subir tu propio fondo y elegir el esquema, las fuentes del texto. Si pagas el plan Premium podrás, por ejemplo, al igual que en card.ly usar tu propio dominio, pero también contar con estadísticas, formulario de contacto.

OnePage es una web nueva que trata de lo mismo, pero con una mecánica más sencilla aunque más pobre también. Responde más fielmente a lo que es una verdadera tarjeta de visita, con todos los datos necesarios y pocas palabras en tamaño reducido pero suficiente.

Y por último, aunque quizás existan otros servicios que yo no conozca, está nuestro viejo y conocido Gravatar, ahora no sólo es el "hosting" de nuestro avatar para cientos de blogs, sino que también nos permite tener una sencilla tarjeta de presentación, me parece el más simple de todos, llegando, eso sí, a caer en la escasez.

Categoría: Diseño Web, Recursos, web 2.0 | No hay Comentarios »

« Entradas previas