Contenido

Un preview al HTML5

4 dic

+ 18

Los chicos de A List Apart, nos deleítan con un artículo sobre el nuevo HTML y los cambios que vamos a notar al llegar a nuestros editores de código.

Ya se ha comentado mucho de las diferencias con la versión anterior, y tambien de las polémicas con su principal competidor, pero el HTML5 es una realidad y tendremos que ir haciendonos a la idea.

Ahora (HTML 4/xHTML 1.0)

Estructura DIV

El futuro HTML5 

Estructura HMTL5

Interface móviles para clientes BitTorrent

1 dic

+ 1

Hace ya unas semanas que iEmule nació y la verdad es que me ha ayudado a controlar mis descargas desde cualquier sitio en el que me encontraba. Permitiendome añadir descargas que al llegar a casa no me hubiera acordado, incluso me ha hecho cambiar de planes al ver que ya tenía algo descargado y que podría ir a casa a verlo, y/o escucharlo.

Ahora µTorrent dispone tambien de su propio interface adatado a la tecnología móvil, y como nó para el iPhone/iPod Touch

µTorrent mUI 2.0

La posibilidad de adminitrar tus descargas desde el móvil, puede volver todavía más atractivo este cliente BitTorrent. 

muiutorrent1.jpgmuiutorrent2.jpgmuiutorrent3.jpg

Posibilidades:

  • Ver el estado de los torrents activos
  • Pausar y activar torrents
  • Añadir y Eliminar torrents

[Demo n70][Demo Opera Mini]

µTorrent mUI

iPhone Web para µTorrent

Las nuevas tecnologías tambien están calando fondo a este cliente. 

iphone_utorrent.jpg

Posibilidades:

  • Ver el estado de los torrents activos
  • Pausar, activar torrents.
  • Añadir nuevos torrents añadiendo una URL

iPhone web internet for uTorrent

Buenas prácticas en la implementación de formularios

22 nov

+ 2

Los formularios, detrás de los enlaces son los elementos que hacen posible la web. Gracias a ellos podemos comunicarnos con otras páginas, en las que podemos comentar, subir archivos e interactuar con el servidor desde nuestro navegador. 

Por eso debemos darle una especial importancia a la hora de implementarlos. Para ello seguiremos unas buenas prácticas que nos asegurarán que funcionen de la forma más óptima y correcta.

  1. Formularios de una sola página.
  2. Si hace falta pagina
  3. Minimiza los datos solocitados
  4. Usa ajax para mejorar el formulario, no lo hagas dependiente de él.
  5. No seas muy agresivo con la validación javascript, guía al usuario.
  6. Usa elementos <label />
  7. Si puedes, mejora la estética de los <input type=”file” />

Nace Faz, la revista de diseños de interacción

19 nov

+ 1

Via Yusef (HCNet) y Cadius descubro que la Revista Faz nº1 ha sido publicada. Faz es una nueva revista centrada en el diseño de interacción, un término algo desconocido por la comunidad de webmasters pero realmente interesante y sobretodo importantísimo para conseguir una internet para seres humanos.

revistafaz.JPG

Primer número de Faz

7 reglas de oro para hacer un javascript no obstructivo

14 nov

+ 4

Con la llegada de Ajax, la llegada de la lógica de negocio a las aplicaciones web y sobretodo al cliente han producido un incremento del javascript usado en las mismas. El motivo es la funcionalidad que se puede llegar a conseguir en el cliente aligerando el número de recargas de página en nuestras aplicaciones.

Al incrementarse el javascript, innevitablemente estamos haciendo Javascript dependientes nuestras aplicaciones. Mucha gente me dice que el 96% de los usuarios de Internet tienen Javascript activado en su navegador y tienen razón, pero ¿que pasa con ese 4% restante? ¿nos olvidamos de ellos?

Para evitar tener que hacernos esta comprometida pregunta, ya que no creo que ningún cliente quiera pensar… ¿no han pensado en mi?, podemos salir del paso haciendo un uso inteligente de Javascript y dando siempre un camino alternativo a los usuarios que no disponen de este lenguaje activado en su navegador. Para ello, siguiendo una serie de pautas podremos conseguir que nadie se quede fuera de nuestra aplicación.

Continua —>

Webkit integra tags HTML 5 para controles multimédia

13 nov

+ 13

HTML5 está pensado para enfrentarse a la nueva internet, una internet más cargada de contenido multimedia, por ello tags como <video /> y <audio /> van a coger cierta importancia en el futuro. Por ello, los chicos de WebKit se han puesto manos a la obra para integrarlas lo más pronto posible entre las funcionalidades del navegador

Veamos como nos quedaría el código HTML y javascript para cada uno de los casos, según el estandard:

Video

//HTML
<video src=sample.mov autoplay></video> 

//javascript
<script>
function playPause() {
  var myVideo = document.getElementsByTagName('video')[0];
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
//Controlamos que el video ha terminado
myVideo.addEventListener('ended', function () {
  alert('video playback finished')
} );</script>
<input type=button onclick="playPause()" value="Play/Pause">

Audio

var audio = new Audio("song.mp3");
audio.play();

[Descargar][Via]

El arte de enlazar, aprende como usar los enlaces en tu web

5 nov

+ 7

Los chicos de Coding Horror, han escrito “Don’t Click Here: The art of Hyperlinkng“, un artículo muy interesante que Hector (Armonth) ha traducido al castellano para que no se nos escape ningún punto y podamos enlazar correctamente, o sin molestar en exceso a nuestro usuarios.

El artículo se compone de una serie de puntos que podemos usar a modo de guia: 

  1. Asegurate que los enlaces son lo suficiente grandes para que sea fácil hacer click en ellos.
  2. El primer enlace es el más importante.
  3. No abuses de los enlaces.
  4. No alternes radicalmente el comportamiento de los enlaces.
  5. No titules tu enlace como “Click aquí”.
  6. No enlaces cosas que el usuario puede querer seleccionar y copiar.
  7. No incluyas iconos en cada enlace.
  8. No hagas el contenido dependiente de los enlaces para funcionar.
  9. No ocultes tus enlaces.
  10. No mezcles anuncios y enlaces. 
  11. No ofusques tus URLs.

Para los más amantes del código unos consejos más :D

  1. Usa un texto descriptivo para tu enlace.
  2. Indica el idioma del destino con hreflang=""
  3. Usa rel="" siempre que puedas
  4. Informa el atributo type="" para indicar el tipo de documento que vas a visitar.
  5. Usa charset="" para que se pueda saber el charset del página destino.

Y recuerda,

NUNCA OLVIDAREMOS LA ACCESIBILIDAD. LOS ENLACES ENLAZAN

CORRECTO

 <script type="text/javascript">
    var el = document.getElementById("t"); 
    el.addEventListener("click", FUNCIONALIDAD, false);
</script>
 <a href="http:/...." id="t">Enlace correcto</a>

NO CORRECTO

<a href="#">Enlace NO Correct</a>

Estructura correcta de un HTML

4 nov

+ 7

Muchas veces cuando nos ponemos manos a la obra para desarrollar una aplicación, no entran las ganas de ponernos a picar código y no nos paramos a pensar en la estructura que deberían tener nuestros HTML’s. Una buena solución a esto es tener una chuleta a mano que nos permite hacernos una idea rápida de lo que debemos hacer.

cleancode.jpg

Fundamentos Web 2007 (día 2)

4 oct

+ 1

Despues de un día intenso en Fundamentos Web, Daniel TorresBuriel y José Manuel Pit vuelven a la carga con las pilas puestas (y nunca mejor dicho) con las keynotes del evento, y es que las ponencias de hoy no tienen desperdicio.

  1. TorresBuriel – FW2007. Diseñar para y con la comunidad web. George Oates
  2. Tripix.net – FW – Dia 2 – Ponencia 1: diseñar para y con la comunidad web
  3. TorresBuriel – FW2007. Portabilidad de redes sociales. Tantek Çelik
  4. Tripix.net – FW – Dia 2 – Ponencia 2: portabilidad en las redes sociales
  5. TorresBuriel – FW2007. Widgets de Joost: una Plataforma para la televisión social. Dan Brickley
  6. Tripix.net – Widgets de Joost: una Plataforma para la televisión social
  7. TorresBuriel – FW2007. Mesa redonda y videoconferencia con Tim Berners Lee
  8. Tripix.net – FW – Dia 2: mesa redonda y (no) entrevista a Tim Berners Lee

Iré actualizandolo a lo largo del día.

Enlaces que parecen botones y botones que parecen enlaces

24 sep

+ 2

Olga Carreras, nos pregunta ¿Por qué empeñarnos en hacer enlaces que actúen como botones? ¿Por qué no hacemos botones que parezcan enlaces? Curiosas preguntas que nos ayudarán a submitar nuestros formularios.