Ir a la barra de herramientas

Webquest: Elaboración de Páginas Web para Dispositivos Móviles

rd1

Introducción

Hoy en día son numerosos los dispositivos que se conectan a Internet. Como bien sabemos, los orígenes de Internet se sitúan en la Investigación Militar, pasando por las Universidades y culminando a finales del Siglo XX con la llegada de Internet a nuestras casas y a los centros educativos. Pero en éste timeline hay algo en común: todos los equipos son Ordenadores Personales, Servidores o Estaciones de Trabajo de Escritorio. En lo que llevamos de Siglo XXI han aparecido numerosos dispositivos que ya disponen de conectividad a Internet tales como: electrodomésticos, televisores, equipos de Car-Audio, navegadores y los que más conocemos y están “a la orden” en nuestro día a día: los dispositivos móviles. Con nuestro teléfono móvil o tablet podemos hacer prácticamente todas las actividades cotidianas que requieren el uso de Internet y que normalmente solíamos hacer con un PC doméstico: consultar el correo, ver las noticias, leer libros, pujar en subastas, hacer compras, consultar el saldo de nuestras cuentas bancarias, pagar impuestos y recibos. Todo esto tiene algo en común y es el leitmotiv de éste módulo: son Aplicaciones Web. A pesar de que ya somos capaces de desarrollar aplicaciones Web, tenemos que considerar que dada la peculiaridad de los dispositivos móviles (capacidad de procesamiento, memoria, tamaño y resolución de pantalla y Sistema Operativo, principalmente) resulta indispensables adaptar dichas Aplicaciones a éstos dispositivos, por lo que surge la necesidad del Responsive Design o diseño Responsable/Adaptable, siendo el término anglosajón más utilizado que el castellano.

Tareas

El Responsive Design es fundamental e indispensable en el desarrollo de Aplicaciones Web para Dispositivos Móviles. Para conocerlo mejor, ver sus posibilidades y considerar un uso del mismo en nuestros proyectos futuros se propone este trabajo de investigación, el cuál se elaborará por grupos repartiendo las tareas entre todos los miembros del mismo. La manera más sencilla de coordinar los trabajos es utilizar los documentos de Google, disponibles a través de Google Drive (http://drive.google.com), donde se incluirá toda la información que se vaya encontrando en Internet y que se considere importante. Posteriormente, con esta información, los grupos agregarán comentarios a ésta entrada con enlaces a sus respectivos documentos de Google y finalmente elaborarán un Wiki en el se recogerán todos aquellos aspectos importantes e indispensables en la aplicación de la estrategia de Responsive Design a cualquier proyecto Web y en especial, a los proyectos finales que están desarrollando. Los grupos, al igual que el proyecto final, serán de cuatro personas y serán los mismos que los utilizados para el mismo. Finalmente, se expondrán los blogs en el Aula de Clase a través de una breve presentación oral. Esta exposición va destinada a sus compañeros/as, por lo cuál, los contenidos han de ser claros y directos, así como la indicación de una aplicación eminentemente práctica de los mismos. Para elaborar los blogs utilizaremos WordPress (http://www.wordpress.com).

Proceso

La libertad de los contenidos se deja a vuestra elección. Eso sí, debe contar al menos con los siguientes apartados:

1. Definición y Características del Responsive Design.

2. Sintaxis en CSS3 para aplicación de estilos propios.

3. Código de buenas prácticas en Responsive Design.

4. Herramientas informáticas para la elaboración de Sitios Web para dispositivos móviles y ejemplos de uso de las mismas.

5. Algunos ejemplos.

6. Proyecto de conversión de Aplicación Web de Escritorio a Aplicación Web de Dispositivo Móvil enfocado a nuestro Proyecto Final.

7. Reflexiones de equipo del trabajo desarrollado.

 

Se deben incluir imágenes y/o gráficos aclaratorios en los distintos apartados del trabajo de investigación, así como una reflexión de grupo coherente en aquellos conceptos técnicos detectados.

 

Recursos

A continuación se os dejan algunos recursos con los que partir en el desarrollo de éste trabajo:

http://www.w3schools.com/html/html_responsive.asp

http://www.destacaimagen.com/diseno-y-maquetacion-web-smartphones-y-tablets/

http://googlewebmaster-es.blogspot.com.es/2011/03/como-hacer-que-un-sitio-web-sea-apto.html

http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptable

https://econsultancy.com/blog/64823-the-five-golden-rules-of-responsive-web-design/

 

Evaluación

Los criterios de evaluación de éste trabajo se recogen en el siguiente listado y se ponderarán del 0 al 10 en función de la calidad del criterio correspondiente.

1. Claridad y concisión de los contenidos desarrollados en cada apartado.

2. Presentación y organización de los contenidos.

3. Ortografía

4. Adaptación de los contenidos encontrados al nivel técnico de conocimientos del aula.

5. Elección de los ejemplos.

6. Originalidad y aportaciones personales en los contenidos expuestos.

La evaluación será realizada tanto por el profesor como por los compañeros/as del aula, estableciéndose una ponderación del 50% de la nota por parte del profesor y el 50% restante por el promedio de las evaluaciones realizadas por los compañeros.

 

Conclusión

Una vez finalizada la exposición y evaluación de trabajos realizaremos una puesta en común en el aula sobre los contenidos que se han visto durante el proceso de investigación.

 

Créditos

Profesor: David Taima Hernández

Web: http://www3.gobiernodecanarias.org/medusa/ecoblog/dtaiher

4 comentarios

Ir al formulario de comentarios

    • Grupo Ana-Lourdes-Eduardo en 1 marzo, 2015 a las 5:33 pm
    • Responder

    Ésta es nuestra propuesta:
    (http://drive.google.com/docs/a5632321a12b1212a)
    Lo más interesante que hemos encontrado es una herramienta que se llama Bootstrap Framework y que es gratuita. Con ella puedes generar facilmente las hojas de estilo CSS que van a utilizar tus aplicaciones. En el caso de nuestro proyecto hemos tenido que modificar la mayoría de los formularios ya que los tamaños de los campos no se adaptaban al tamaño de la pantalla.

    • Grupo Ivan-Jesus-Alberto-Patricia en 1 marzo, 2015 a las 5:41 pm
    • Responder

    Aquí ponemos nuestra propuesta:

    http://drive.google.com/docs/b232143adfa23123213

    Nosotros también encontramos Bootstrap pero nos gustó más Gumby Framework. La documentación está mucho más detallada y tiene muchos más componentes. En el documento hemos expuesto nuestra visión personal en cuanto al uso de editores RWD y hemos citados los ejemplos que nos han parecido más prometedores.

    • Grupo Kevin-Susana-Marta-Carlos en 1 marzo, 2015 a las 5:46 pm
    • Responder

    Hola a tod@s.
    Nosotros también lo hemos hecho con Bootstrap y hemos encontrado un montón de recursos muy interesantes. Hemos encontrado una página Web en la que puedes testear tus proyectos de Responsive Design:

    http://ami.responsivedesign.is/

    Está muy bien para comprobar los proyectos y nos ha servido mucho. En nuestro trabajo hemos incluido algunos ejemplos y pruebas con esta herramienta.

    Nuestro trabajo está en:
    http://drive.google.com/docs/121243as21232132

    Saludos.

  1. ¡Hola a tod@s!
    Iré comentando los resultados grupo por grupo:

    Grupo Ana-Lourdes-Eduardo: me ha gustado mucho la manera en la que lo habeis enfocado y me han gustado mucho los diseños que habeis hecho con Bootstrap. Ahora lo que teneis que hacer es crear el blog y volcar el trabajo.

    Grupo Iván-Jesús-Alberto-Patricia:
    Desde mi punto de vista le faltan algunas cosas tales como las pruebas de la versión móvil de vuestro proyecto. Revisad bien los puntos y completadlo.

    Grupo Kevin-Susana-Marta-Carlos:
    Muy interesantes las pruebas de Am I Responsive. Muy buen enfoque, sobre todo en lo de modificar los formularios Web. Vuelquen el resultado a su blog y adjunten el enlace.

Responder a Grupo Ana-Lourdes-Eduardo Cancelar la respuesta

Tu email nunca se publicará.