Prácticas TIC

En este curso vamos a realizar las siguientes prácticas:
  • Diseño de formularios web
  • Hojas de cálculo con CALC de Libre Office
  • Diseño de una página WEB con hojas de estilo CSS y elementos gráficos con GIMP
  • Formularios WEB con PHP.
  • Bases de Datos Relacionales con Libre Office Base y consultas SQL.
  • Bases de Datos Relacionales con MySQL y consultas SQL.
  • Diseño de formularios web para consultar en BD de MySQL (PHP habla con MySQL).
  • Maquetación de la revista del instituto con Scribus

Diseño de Formularios Web

Esta es la última práctica, por ahora, que completa el diseño web en este curso.
Te voy a mostrar cómo crear los formularios que normalmente rellenas cuando te das de alta en algún servicio de internet, o cuando inicias sesión (i.e. facebook, messenger, tu correo web,...). Repasaremos los controles más habituales como cuadros de texto, botones de enviar, cajas de verificación, etc.
También utilizarás algo de PHP, un lenguaje de programación que se usa normalmente en la creación de páginas webs dinámicas, por ejemplo, en las que trabajan con los datos de los formularios.

Te mostramos una captura de un formulario típico que aprenderás a hacer.


ejemplo2_formulario.png
Formulario Web

Puedes bajarte el tutorial desde aquí:

Además te dejo este SIMULACRO de EXAMEN de Formularios WEB actualizado para el curso 2015-16:

CALC

Esta aplicación es una hoja de cálculo que pertenece a la suite ofimática gratuita de libre office. Te dejo el simulacro del curso 2014-15 para que puedas practicar.

Simulacro GIMP

GIMP es una aplicación de retoque de imágenes como PhotoSuop, pero gratuita. Te dejo unas fotos empaquetadas en un archivo ZIP para que puedas hacer el simulacro de examen:



Diseño WEB

Vamos a presentar algunas prácticas para hacer un diseño web sencillo y atractivo. Emplearemos aplicaciones gratuitas como Kompozer para el diseño WEB e Inkscape y Gimp para el diseño gráfico.

Práctica 1. Diseño flotante de 2 columnas

El primer paso que todo diseñador web se debe plantear es la distribución del espacio de su página Web. Las 3 opciones básicas son los diseños de anchura fija, los diseños líquidos (las dimensiones se establecen como porcentajes del ancho de la página) y los elásticos (el ancho de los elementos es relativo al tamaño de la fuente).
De entre las tres opciones el camino más sencillo y recomendable para un diseñador inexperto es trabajar con divisiones de ancho fijo para poder controlar todos los elementos de diseño más fácilmente. Te mostramos cómo diseñar dos y de tres columnas en el área de contenidos de la página web.

navegador_diseno_2_cols_final.pngnavegador_diseno_3_cols_final.png











Puedes bajarte el tutorial desde aquí:


Práctica 2. Cajas de esquinas redondeadas de anchura fija


Las cajas rectangulares que dividen una página web pueden redondear sus esquinas con diseños como los que ves de ejemplo. La gran ventaja es que se expanden verticalmente cuando insertamos más contenido.

navegador_web_caja_esquinas_redond_ancho_fiijo_ejemplo_2.png
Caja gris de esquinas redondeadas
navegador_web_caja_esquinas_redond_ancho_fiijo_final_largo.png
Caja Verde de esquinas redondeadas













Puedes bajar el tutorial desde aquí:



Práctica 3. Sombras con CSS

La imágenes que se muestran en una página Web, pueden aparecer sin bordes que la separen del resto de la página. Sin embargo, se puede crear fácilmente un efecto de profundidad, dándole a la imagen una sombra que la eleve sobre la página. En las capturas siguientes se muestran las diferencias entre ambos estilos.
navegador_imagen_final_sin_sombra.png
Sin Sombra
firefox_caballloz_con_sombra.png













Puedes bajarte el tutorial desde aquí:




Práctica 4. Barra vertical de navegación con botones rollovers


En esta práctica vamos a convertir los típicos vínculos que aparecen subrayados, en unos botones llamados rollovers que modifican su aspecto al pasar sobre ellos con el ratón, hacer click, etc. Trabajaremos con una aplicación de diseño gráfico (GIMP) y un editor de páginas web y de hojas de estilo CSS (Kompozer). El resultado final se muestra en la captura siguiente:
mozilla_barra_navegación_final_hover.png

Puedes bajarte el tutorial desde aquí:

Simulacro de Diseño Web

Ahora te propongo un SIMULACRO de examen de las 4 Prácticas


Para hacerlo necesitas las imágenes que hay en este archivo comprimido ZIP y las hojas con el examen en PDF


Bases de Datos Relacionales y consultas SQL


Como ya sabes las bases de datos (BD) son la mejor forma de almacenar y trabajar con datos que tenemos. Las utilizamos continuamente cuando navegamos por Internet al buscar una página con Google, al conectarnos a nuestra cuenta de correo, al enviar un formulario para darnos de alta en cualquier servicio,...normalmente los datos se almacenan o leen de una BD.
Recuerdas que en una BD podemos tener diferentes objetos como tablas, formularios y consultas entre otros. Todos los datos en una tabla se organizan en campos (columnas) y en registros (filas). Para visualizar los registros de una tabla normalmente se diseñan formularios que permiten también introducir nuevos registros en la BD. Pero, la verdadera importancia de las bases de datos reside en la posibilidad de realizar consultas que nos seleccionan sólo aquellos datos que cumplen alguna condición/es. Todo esto lo venimos aprendiendo en el instituto desde 3º ESO, así que...

¿Que vamos a aprender nuevo?

  • Bases de Datos Relacionales, esto simplificando mucho, implica que existen unas restricciones a la hora de insertar nuevos registros en una tabla, de tal forma que sólo se permiten introducir los datos si cumplen algunos requisitos. Por ejemplo, en una tienda on-line un usuario no dado de alta no puede comprar nada. Tampoco puede un usuario comprar un artículo que no esté dado de alta en la tienda web.

BASE relaciones.jpg
Relaciones entre las tablas de una BD de una tienda en la web

  • Consultas con SQL. El Lenguaje de Consultas Estructurado o SQL es un lenguaje empleado por la mayoría de las BD (MySQL, Oracle, Microsoft SQL Server, posgreSQL, etc).
  • MySQL un gestor de BD con arquitectura cliente-servidor muy empleado junto con los servidores Apache de páginas Web. Trabajaremos con phpMyAdmin, una interfaz gráfica muy completa para manejar MySQL. Básicamente crearemos tablas, diseñaremos relaciones entre ellas y haremos consultas con SQL.
  • Diseño de Páginas Web con PHP y MySQL combinados para presentar tablas, realizar consultas de nuestra BD, añadir y borrar registros.

Vamos a dividir este curso en las siguientes partes...

Práctica
Documento_TUTORIAL
SIMULACRO DE EXAMEN
Bases de Datos con BASE de LibreOffice


MySQL con phpMyadmin



Crear una consulta web a una base de datos MySQL (usamos lenguaje PHP)




Insertar y borrar registros en una BD MySQL mediante una pg web (usamos lenguaje PHP)





Práctica 7. Diseño de una revista escolar con Scribus

Vamos a ser los maquetadores de la revista del instituto. Para empezar a manejar la aplicación de software libre Scribus, te dejo unos apuntes con lo más sencillo justo para inciarte y lanzar tu creatividad.