diseño web – Instituto FOC | Informática ONLINE | FP Informática ONLINE

Crea una página web. 4- Publicación de la página web

[youtube https://youtu.be/eA4sv-bHt6A&w=560&h=315]

Al finalizar esta sesión serás capaz de:

  • Crear una página web sencilla a partir de un prototipo.
  • Poner en producción una página web

Contenidos de la sesión:

Para poder conseguir los objetivos previstos en la sesión trataremos los siguientes contenidos con un enfoque práctico

  • Creación de una página web sencilla a partir de un prototipo
  • Alojar y publicar una web en un servidor web real

Revisa todos los seminarios pendientes y si lo deseas regístrate en el que sea de tu interés haciendo click aquí.

Crea una página web. 3- Prototipado Web

[youtube https://youtu.be/ypHYhVcMoH0&w=560&h=315]

Al finalizar esta sesión serás capaz de:

  • Obtener un prototipo de una página web a partir de un mockup

Contenidos de la sesión:

Para poder conseguir los objetivos previstos en la sesión trataremos los siguientes contenidos con un enfoque práctico

  • Prototipado web

Revisa todos los seminarios pendientes y si lo deseas regístrate en el que sea de tu interés haciendo click aquí.

Crea una página web. 2- La primera versión (Mockup)

[youtube https://youtu.be/Zoy1erll3fA&w=560&h=315]

Al finalizar esta sesión serás capaz de:

  • Crear un mockup a partir de un wireframe

Contenidos de la sesión:

Para poder conseguir los objetivos previstos en la sesión trataremos los siguientes contenidos con un enfoque práctico

  • Qué es un mockup
  • Creación de un mockup a partir de un wireframe.

Revisa todos los seminarios pendientes y si lo deseas regístrate en el que sea de tu interés haciendo click aquí.

Crea una página web. 1- Borrador web con NinjaMock

[youtube https://youtu.be/qfM-ztGopP0&w=560&h=315]

Al finalizar esta sesión serás capaz de:

  • Diseñar un borrador (wireframe) de una página web sencilla con NinjaMock

Contenidos de la sesión:

Para poder conseguir los objetivos previstos en la sesión trataremos los siguientes contenidos con un enfoque práctico

  • Uso de la herramienta NinjaMock.
  • Diseño de wireframes.

Revisa todos los seminarios pendientes y si lo deseas regístrate en el que sea de tu interés haciendo click aquí.

USABILIDAD WEB

Las páginas web deben diseñarse pensando en la facilidad que deben tener los usuarios para utilizar la web. A este principio lo conocemos como es la usabilidad y principio nos permite crear páginas que sean sencillas de utilizar por parte de los usuarios que las utilizan.

La usabilidad Web está vinculada a la simpleza, la facilidad, la comodidad y la practicidad de uso de una página web. Es decir, que la web sea lo más sencilla de usar por el usuario y que el usuario obtenga el máximo rendimiento de la web.

Es fundamental para conseguir un sitio usable, definir o determinar el objetivo del sitio web. Teniendo identificado para qué se quiere diseñar nuestro sitio web, si es para mostrar información, si requiere que el usuario se registre, si es una web de la administración pública, etc., la forma de diseñar el sitio web será diferente.

Para que una página alcance la usabilidad deseada, hay que conocer los diferentes tipos de usuarios que la van a visitar, que barreras van a poner a la navegación y si les va a resultar fácil o difícil navegar por la página. Una página de acceso público, no tendrá los mismos requerimientos de usabilidad que una página que va a ser accedida, fundamentalmente por usuarios registrados y con un alto nivel de conocimientos técnicos.

Otra de las características que hemos descubierto vitales para la usabilidad, es tener en cuenta la velocidad de conexión de los usuarios, y la necesidad de no realizar páginas “pesadas”. Si prevemos que nuestros usuarios navegan con fibra óptica, nuestros sitios pueden tener gran cantidad de contenido multimedia, con ficheros pesados, etc., pero si nuestra página va a ser utilizada por usuarios que usan móviles o conexiones lentas, tendremos que adaptar nuestro diseño a estos requerimientos.

Existen herramientas, como Selenium IDE o los mapas de calor nos  indican si nuestras páginas van a ser fáciles de utilizar y el tiempo de aprendizaje que deben tener los usuarios de nuestro sitio web.

Mapa de Calor-H Selenium

Programar efectos sencillos en JavaScript, de forma rápida y eficiente.

Con JavaScript podemos conseguir efectos sencillos y muy visuales en nuestras páginas web. Nuestros alumnos de IFCD0210 Desarrollo de Aplicaciones con Tecnologías Web conocen bien como hacer estos efectos rápidamente y de forma sencilla.

Os propongo el siguiente ejercicio, vamos pintar en pantalla una tabla. Para ello nuestra pequeña aplicación haciendo clic sobre un botón llamada tabla, nos pedirá el número de celdas que queremos que tenga la tabla y nuestro programa calculará el lado de la tabla, haciendo la raíz cuadrada del número de celdas que deseamos que tenga nuestra tabla.

Añadiremos un botón limpiar que reiniciará la tabla y limpiará la última tabla pintada.

pantalla-001-06062017

Cada celda tendrá un número y al pulsar sobre el número, la celda cambiará de color.

La idea es la siguiente:

pantalla-002-06-06-17

Con estas sentencias conseguimos el cambio de color

codigo-001-06-06-17

El código completo de este ejercicio lo puedes conseguir aquí.

Este efecto tan llamativo, se consigue con unas cuantas líneas de que código que podrás desarrollar sin dificultad al terminar con éxito nuestro certificado profesionalidad  IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web.

Ejemplo de script para proteger el código fuente de nuestra página web

codigo-pc-llave

Con un sencillo Script podemos proteger nuestro código web y evitar que aquellos que andan con falta de inspiración o con pocas  ganas de “currárselo”, puedan robarnos nuestro código web.

Después de probar muchos métodos puedo deciros que ninguno es seguro, la mayoría se limitan a bloquear el botón derecho del ratón y del teclado. Uno de ellos es el siguiente:

<body oncontextmenu=»return false» onkeydown=»return false»>

Como puedes ver es sencillo y a la vez bastante eficaz. Solo tienes que poner estos atributos en el “body” y el botón derecho del ratón y el teclado quedarán inutilizados.

Evidentemente, este sencillo script solo evita a los fisgones y programadores poco expertos, pero es un buen punto de comienzo.

Este tipo de técnicas de programación web, las estudian nuestros alumnos del certificado de profesionalidad IFCD0210 Desarrollo de Aplicaciones con Tecnologías Web y están muy familiarizados con ellas.