Saltar al contenido

Nueva versión de la web

    Cuando empezamos con el EdAS y vimos que había llegado el momento de darlo a conocer, creamos el portal Análisis Sintáctico desde cero y a contrarreloj.

    La web era simple, pero a pesar de ello presentaba deficiencias en la visualización en dispositivos móviles y tabletas. Aunque el EdAS no funciona para estos dispositivos, el portal ofrece otro tipo de servicios como el repositorio de ejemplos y debe dar una buena bienvenida al usuario que lo invite a volver más tarde a la web. Lejos de conseguirlo, la visualización con un móvil podía ser perfectamente esta:

    Página antigua

    Cabecera cortada y menú descuadrado

     

    Página antigua 2
    Vídeos y texto descolocados

    Viendo esto, y con la nueva versión del EdAS más o menos cerrada, he dedicado tiempo a investigar sobre el responsive design, o lo que es lo mismo, el diseño web adaptativo.

    Ayer publicamos una nueva versión de la web en la que hemos introducido estos conceptos. Aún no es perfecta, pero es una mejora. Entre los cambios introducidos:

    Cabecera y menú flexibles

    Ahora la imagen de cabecera se ajusta al ancho del dispositivo y el menú si no tiene espacio suficiente para aparecer, se encapsula en un botón menú sobre el que al pulsar nos lo muestra en forma de desplegable.

    Menú plegado versión móvil

    Menú plegado versión móvil

    Links sociales

    Hemos incluido una botonera con los enlaces de Twitter, Facebook, Youtube y Feedburner con la esperanza de que el número de seguidores aumente.

    Links sociales

    Links sociales

    Sustitución de las pestañas con vídeos

    En el fondo los 3 vídeos y el texto, aunque diferentes, venían a decir lo mismo, así que se ha dejado solamente uno y se ha extendido.

    Facebook comments y Like button

    Antes del pie de página hemos incluido la opción de añadir comentarios de Facebook o hacer like a la página.

    Facebook Comments y Like

    Facebook Comments y Like

    Esperemos que os guste y esperamos vuestros comentarios.

     

    Análisis sintáctico paso a paso. Manual

    Ayer os comentábamos las mejoras del análisis sintáctico paso a paso. Hoy vamos a explicaros cómo se usa, ya que hay muchos atajos de teclado para facilitar el manejo. Todo esto se incluirá en el manual de usuario una vez se actualice la nueva versión.

    Todas las diapositivas se van a dividir en 3 zonas, una barra superior de título, el contenido y la barra inferior de navegación.

    La barra de título no ofrece ninguna interacción y nos permite saber en qué paso nos encontramos y cuál es el grupo sintáctico nuevo que se ha creado en este paso.

    La zona de contenido es donde se nos mostrará una imagen con el estado del análisis en ese momento.

    La barra inferior nos ofrece una navegación directa. Solo aparece cuando el ratón está situado encima de la barra inferior. En la siguiente imagen podemos ver que hay dos secciones:

    Barra inferior

    Barra inferior

    Las flechas blancas sirven para avanzar o retroceder una diapositiva. El desplegable inferior sirve para acceder directamente a la diapositiva que queramos. Vienen identificadas con el número del paso y el grupo sintáctico para que sean más fácilmente identificables.

    Vamos ahora a hablar del manejo en sí de la presentación:

    Avanzar diapositivas

    • Click con el ratón sobre la barra de título o de contenido
    • Click con el ratón en las flechas >> de la barra inferior
    • Teclas «Derecha», «Abajo», «Av Pág» y «Espacio»

    Retroceder diapositivas

    • Teclas «Izquierda», «Arriba» y «Re Pág»

    Ir al inicio de la presentación

    • Tecla «Inicio»

    Ir al final de la presentación

    • Tecla «Fin»

    Ir a diapositiva concreta

    • Desplegable de la barra inferior
    • Escribir el número de la diapositiva y presionar «Intro»

    Esperemos que os guste, si tenéis alguna sugerencia, por favor, dejádnos un comentario. Os recordamos que estará disponible el 7 de abril. Mañana os mostraremos un vídeo del funcionamiento.

    Análisis Sintáctico paso a paso

      Como ya os anticipábamos en en el post que hablábamos de la generación de una presentación con el análisis sintáctico paso a paso, vamos a ver cómo nos ha quedado.

      Tras analizar una frase, tendremos que darle al nuevo botón de la barra de herramientas, que pone HTML en un fondo azul, que nos permitirá generar la presentación.

      Botón Generar presentación

      Botón «Generar presentación»

      Se nos abrirá una nueva pestaña/ventana en la que nos aparecerá una portada.

      Portada de la presentación

      Portada de la presentación

      Si seguimos avanzando, iremos viendo paso a paso el análisis realizado.

      Análisis paso a paso

      Análisis paso a paso

      Vemos como nos aparece en la cabecera el paso en el que estamos, y cuál es el elemento nuevo que hemos añadido.

      Por último, en la barra inferior, tenemos unos accesos rápidos para avanzar/retroceder y para ir a una diapositiva concreta.

      Barra inferior

      Barra inferior

      Esperemos que os haya gustado. Mañana publicaremos el manual de instrucciones completo.