Congratulations! You’ve completed the Toughest Developer Puzzle!

7 de Julio de 2009 | Etiquetas: , , , , | Categoría: Internet

¡Lo conseguí! ¡Lo he terminado!
Después de día y medio aprovechando los raticos libres para ir pasando pruebas, por fin esta mañana conseguí pasar los 30 niveles que forman el Toughest Developer Puzzle Ever!

Algunos dirán: “¿De qué habla la chalada esta? Ya sé le ha ido la pinza otra vez”
Pues no, no estoy loca del todo aún, simplemente estoy contenta – y un poco acelerada de tanto RedBull – de haberlo conseguido.

Toughest Developer Puzzle Ever es un juego creado para desarrolladores / programadores / frikis, en el momento en el que accedes a la web ya empiezas el juego. Cada página es una prueba, y debes descubrir como avanzar a la siguiente página. El test es complicado, hay que dedicarle un poco de tiempo, pero no es imposible, se puede conseguir incluso si no sabes mucho de programación.

Hay que decir que está en inglés pero hay poco texto, seguro que consigues traducirlo.

Recomiendo encarecidamente realizarlo, ya que es una forma de aprender un poco más.

Y tú, ¿Crees que serás capaz de conseguirlo? :P

Twittea esto Guardalo en Delicious Compartelo en Facebook

Formularios: Enviar Array de un select multiple

15 de Septiembre de 2008 | Etiquetas: , , , | Categoría: Formularios, PHP

Hoy he trabajado con un atributo del campo select que no había utilizado aún, el multiple.
Éste nos permite seleccionar no sólo una, sino varias opciones de una lista desplegable.

Me han solicitado un formulario, para una empresa de traducciones, que contenga un campo con los idiomas que ofrecen y que permita al usuario seleccionar más de un idioma con el que trabajar, así que éste será mi ejemplo de hoy:

08

Nota: doy por hecho que ya sabéis crear un formulario simple y enviarlo por email.

1.- Insertamos el select en nuestro formulario:

<select name="traduccion-meta[]" multiple="multiple" size="4">
<option value="No">Seleccione una opci&oacute;n</option>
<option value="Ingles">Ingl&eacute;s</option>
<option value="Ruso">Ruso</option>
<option value="Chino">Chino</option>
<option value="Frances">Franc&eacute;s</option>
<option value="Rumano">Rumano</option>
<option value="Japones">Japon&eacute;s</option>
</select>

Es importante que en el name pongamos los corchetes [] finales, ya que con esto indicamos que nos va a devolver un Array, si no los pusieramos sólo nos enviaría el último campo seleccionado y no nos valdría de nada tener un select multiple.
El atributo multiple=”multiple” es el que nos permite seleccionar varias opciones.
Y con size=”4″ lo que hago es que se me muestren solamente 4 opciones a primera vista, para ver el resto aparecen las barras de desplazamiento, si no indicara el tamaño me saldría un select demasiado grande para mi gusto.

Una vez tenemos nuestro select, pasamos a enviar los datos a través de la función mail() a nuestra dirección de email.

2.- El código para recoger y enviar el contenido de nuestro select multiple es:

foreach ($_POST['traduccion-meta'] as $idioma){
$msg.= $idioma." - ";
}

Con el foreach recorremos el interior de nuestro Array y en cada vuelta sacamos los idiomas seleccionados y los añadimos al contenido del mensaje del email enviado.
Acordaros que para enviar el contenido de los campos de nuestro formulario lo haciamos así:

$msg.= $_POST['traduccion-meta];

Esta vez no lo podemos hacer así ya si sólo nos devolvería la palabra Array.

Y eso es todo, si no os acordáis de cómo enviar el formulario, echarle un vistazo a mis anteriores artículos sobre este tema.

Espero que os sirva de ayuda, cualquier duda ya sabéis,.. a preguntar ;)

Twittea esto Guardalo en Delicious Compartelo en Facebook

Php: Formulario ‘Recomienda a un amigo’

31 de Julio de 2008 | Etiquetas: , , , | Categoría: Formularios, PHP

Empiezo a creer que lo mío con los formularios es una adicción xD
Después de meditarlo unos 3 minutos he llegado a la conclusión de que sólo hablo de formularios porque no tengo tiempo (y cuando lo tengo, no tengo ganas de ponerme al ordenador) para investigar a fondo el resto de scripts y códigos.. y cómo los formularios los gasto a diario.. pues eso xD

Al lío, hoy explico de forma resumida cómo crear un formulario del tipo ‘Recomienda esta web a un amigo‘.
El usuario tendrá que escribir su nombre, su email, el nombre del amigo al que quiere recomendar la página y el email de éste, también podrá escribirle un comentario si quiere. Cuando clique sobre el botón enviar, éste se enviará automáticamente a la dirección que haya indicado.

El html de nuestro formulario, sería el siguiente:

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
<p>Tu nombre:</p>
<p><input name="nombre1" type="text" id="nombre1" /></p>
<p>Tu e-mail:</p>
<p><input name="email1" type="text" id="email1" /></p>
<p>Nombre de tu amigo/a:</p>
<p><input name="nombre" type="text" id="nombre" /></p>
<p>E-mail de tu amigo/a:</p>
<p><input name="email" type="text" id="email" /></p>
<p>Comentarios:</p>
<p><textarea name="comentarios" cols="30" rows="6"></textarea></p>
<p><input type="reset" value="borrar" />
<input type="submit"  value="enviar"/></p>
</form>

Y usando la maravillosa función mail() mandamos los datos recogidos a la dirección de email que nos indican:

$msg= "Hola ".$_POST['nombre'] ."!";
$msg.= "\n". $_POST['nombre1']." (". $_POST['email1'] .") nos ha pedido que te invitemos a visitar nuestra web,";
$msg.= " y ha querido escribirte el siguiente comentario: \n".$_POST['comentarios'];
$msg.= "\nVisita www.dominio.com y descubre miles de recursos a los que puedes acceder.";

$email = $_POST['email'];

$subject = "Recomendacion enviada desde Dominio.com por: ".$_POST['nombre1'];
mail($email, $subject, $msg, "FROM: Dominio.com<info@dominio.com>\n");

Recuerda cambiar ‘dominio.com’ por el dominio de tu web!

Para los que no les haya quedado muy claro les dejo el ejemplo completo:

<?php if (!isset($_POST['email'])) { ?>

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
<p>Tu nombre:</p>
<p><input name="nombre1" type="text" id="nombre1" /></p>
<p>Tu e-mail:</p>
<p><input name="email1" type="text" id="email1" /></p>
<p>Nombre de tu amigo/a:</p>
<p><input name="nombre" type="text" id="nombre" /></p>
<p>E-mail de tu amigo/a:</p>
<p><input name="email" type="text" id="email" /></p>
<p>Comentarios:</p>
<p><textarea name="comentarios" cols="30" rows="6"></textarea></p>
<p><input type="reset" value="borrar" />
<input type="submit"  value="enviar"/></p>
</form>

<?php }else{

$msg= "Hola ".$_POST['nombre'] ."!";
$msg.= "\n". $_POST['nombre1']." (". $_POST['email1'] .") nos ha pedido que te invitemos a   visitar nuestra web,";
$msg.= " y ha querido escribirte el siguiente comentario: \n".$_POST['comentarios'];
$msg.= "\nVisita www.dominio.com y descubre miles de recursos a los que puedes acceder.";

$email = $_POST['email'];
$subject = "Recomendacion enviada desde Dominio.com por: ".$_POST['nombre1'];
mail($email, $subject, $msg, "FROM: Dominio.com <info@dominio.com >\n");

?>

<p>Mensaje enviado.</p>
<p>Su recomendaci&oacute;n se ha enviado a la siguiente direcci&oacute;n <strong><?php echo   $email; ?></strong> correctamente.</p>
<p>Gracias por confiar en Dominio.com</p>

<?}?>

Todo vuestro! Que disfrutéis del verano!! :D

Twittea esto Guardalo en Delicious Compartelo en Facebook

Web: estándares (w3c) y accesibilidad (taw)

14 de Junio de 2008 | Etiquetas: , , , , , | Categoría: Estandares

Hoy en día hay que tener en cuenta muchas cosas a la hora de comenzar a programar/maquetar una web (nada de abrir el dreamweaver y arrastrar elementos por favor!!), desde seguir unos estándares para validar nuestro código hasta comprobar la accesibilidad de todos los elementos, ya que no queremos que ningún usuario se quede sin poder ver nuestro contenido..

Para que eso no ocurra voy a intentar ayudaros a resolver algunos problemas que aparecen cuando se mide la accesibilidad de una web, recomiendo tener los estándares w3c y el test de accesibilidad taw (o en su caso los complementos para firefox ^^) siempre a mano mientras vas metiendo código, ya que ir resolviendo los conflictos mientras van apareciendo es mejor que tener la web lista, comprobarlo, y que te dé el bajón!

Bueno, voy al lío, cómo solucionar algunos errores de accesibilidad:

(*) No existe el atributo “lang” o “xml:lang”: No se ha indicado el idioma principal de este documento.

Debemos específicar el idioma de nuestra web, para hacerlo simplemente añadimos el atributo correspondiente a la etiqueta <html> quedándonos así:

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

“es” para español, “en” para ingles,.. podéis ver todos en la informacion oficial.

(*) Proporcione un texto equivalente para todo elemento no textual.

Es muuuy importante que todas nuestras imágenes tengan el atributo “alt”, ya que en él debemos especificar lo que representa nuestra imagen, así si no se puede visualizar, el usuario no deja de recibir la información. Si además la imagen tiene información muy importante, podemos añadirle el atributo “longdesc” donde se le especifica una URL con más datos sobre la imagen (sólo puede contener una url, nada de texto).
Una etiqueta de imagen válida y accesible sería:

<img src="imagen.jpg" alt="descripcion de la imagen" longdesc="masinformacion.html" />

Acordaros que la etiqueta img se cierra “ella misma”, tiene que llevar la barra / siempre al final!

(*) No existen teclas de acceso rápido (atributo “accesskey”) para ningún control ni enlace de este documento. Compruebe si son necesarias
(*) Indique el significado de abreviaturas y acrónimos mediante el atributo “title” la primera vez que aparezcan en un documento.

A la hora de insertar enlaces, debemos agregarles el atributo “title” indicando información sobre donde nos llevará, también es conveniente añadir “acceskey”, ya que se podrá acceder a todo el contenido de la web sin necesidad de tener ratón, sólo con el teclado. Un ejemplo de enlace completito sería:

<a href="pagina.html" title="titulo de la pagina" acceskey="x">enlace</a>

Para utilizar la tecla de acceso al enlace en windows debemos hacerlo manteniendo pulsado “alt”, para mac pulsamos “control” (más la letra de acceso claro).

(*) No existe el elemento “noscript” con contenido alternativo para “scripts”. Compruebe si es necesario para no perfer funcionalidad o información.

Siempre que tengamos scripts, debemos tener noscripts, ya que si un navegador no ejecuta el script dispone de una alternativa con esta etiqueta.

<script type="text/javascript">contenido del script</script>
<noscript>alternativa del script</script>

Acordaros de añadir el atributo “type” al script, nada de “language”..!

Y.. basta de accesibilidad por hoy, mientras me vayan surgiendo/me acuerde/me pidan ayuda para solucionarlos iré poniendo más, espero que os sirva para algo :P

Importante: valida tu código mientras lo vas escribiendo, será menos pesado!

Twittea esto Guardalo en Delicious Compartelo en Facebook

3 pages