Para el final de este curso, para la asignatura de TIC, he tenido que hacer una página web. En principio había que hacerlo con Joomla, pero me dieron permiso para hacerla desde cero.

El resultado final podéis verlo aquí.

Así que me puse manos a la obra. Quería probar cosas nuevas: algo de AJAX, accesibilidad, mucho HTML5 pero sin dejar de lado los navegadores antiguos.

Usé un poquito de PHP para asegurarme de que si se iba a las páginas que se iban a cargar con AJAX (por si no se tenía javascript), se viera todo correctamente. Todas las páginas son prácticamente iguales, sólo que cambiando el contenido. Podéis ver el archivo index.php, o descargar el código entero.

Cosas originales

Las cosas más difíciles/originales que se me ocurrieron hacer fueron:

  • Un gráfico en 3d con CSS3 (y algo de JS para generarlo). Lo más difícil fue coordinar el uso de pseudoelementos y transformaciones para que el resultado en los navegadores antiguos fuera un gráfico normal en 2d.
  • Un slider sensible (sigo sin saber si responsive en español se dice sensible). Cambiad el tamaño de la ventana y lo veréis. El truco está en posicionar absolutamente las slides y darles un ancho de 100%. La altura de la galería, así como la posición, se calcula dinámicamente con Javascript. Para la animación usamos las transiciones de CSS3 si están disponibles. Si no lo están, se usa Javascript.
  • Usar 0 imágenes (excepto el gif mientras carga en base64 y el slider).
  • Usar 0 librerías de Javascript. Éste es el script que he utilizado para conseguir todos los efectos y acciones con javascript. Todo escrito a pelo.
  • Las media queries. Para que el diseño sea sensible, son necesarias. Si cambiáis el tamaño de la pantalla lo veréis.

¿Qué os parece?

Me gustaría que me dierais vuestra opinión sobre el sitio. Finalmente, si hay algo en esa web que queréis implementar en la vuestra, comentad aquí sobre lo que es para hacer un tutorial en profundidad sobre cómo usarlo.

11 pensamientos en “Experimento con AJAX y CSS3

  1. Imagen de Clara el dijo:

    Apoyo a Abraham en lo de que eres sorprendente… Me ha encantado. Está muy chulo… ¡Y yo que me he tirado dos tardes como unas dos horas cada tarde para tener una web malucha…! Oyes, una idea, haz tú de profesor el próximo año, ja, ja, ja. Una parte muy buena es la de "No he aprendido nada este curso". Un aplauso, por favor, que el chaval se lo ha ganado ;) Otra cosa, como sé que tú lo harías por mí, pues te lo digo: se te ha colado un error, pones "disño" en vez de "diseño". Y una última cosa (que me enrollo), muy bueno lo de "Llevo un blog sobre todo aquello que pasa por mi neurona." Tomo nota de la frase, porque me ha encantado ;)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.