Hola, buenos dias.
Me gustaría hacer en mi web un Widget Browser como el de esta página: apple.com/downloads/dashboard/
Y no se cómo empezar. Me he leído el libro de JavaScript pero no encuentro la manera. Si me podéis ayudar os lo agradecería.
Respuestas
El buscador de la página que enlazas es bastante fácil de hacer si utilizas AJAX. Básicamente el ejemplo se compone de tres listas HTML de tipo <ul>. Al principio solamente la primera lista tiene elementos <li>. Al pinchar sobre uno de ellos, gracias a los eventos de JavaScript, se realiza con AJAX una petición al servidor y la respuesta obtenida se utiliza para crear los elementos <li> de la segunda lista <ul>.
Si utilizas las Developer Tools de Google Chrome o la extensión Firebug de Firefox, podrás ver las peticiones que se realizan y las respuestas que se obtienen. En mi caso por ejemplo, al pinchar sobre el elemento "Email & Messaging" de la primera lista, el navegador realiza la siguiente petición con AJAX:
http://www.apple.com/downloads/dashboard/xml2/email_messaging.xml?timestamp=1384714217260
Y la respuesta que le devuelve el servidor es un documento XML que el navegador procesa con ayuda de JavaScript para crear los elementos <li> de la segunda lista. Este es un fragmento de la respuesta devuelta por el servidor:
<?xml version="1.0" encoding="utf-8"?> <records> <download id="6954" name="AdiumList"/> <download id="7450" name="AIM Fight Score"/> <download id="24213" name="Airmailr"/> ... <download id="9688" name="WebSMS Widget"/> </records>
Esta técnica suele denominarse "listas desplegables dependientes o encadenadas". Existen muchas formas diferentes de hacerlas en función de tus necesidades, pero en el capítulo 8 del libro de AJAX tienes un ejemplo completo que puedes utilizar como base.
@javiereguiluz
uff mas o menos lo entiendo, pero me cuesta. Me he descargado el ZIP del ejercicio que me has dicho, y tambien he creado el html con la solucion, pero cuando lo abro no aparecen las opciones.
¿Es porque tengo que cambiar algo?
Gracias!
@_SergioRodenas