Bienvenida nuevo curso 2015/2016

Con más demora de lo habitual en mi trayectoria docente, por haberme encontrado de estancia fuera hasta hace pocos días, tengo el placer de escribir este post para dar la bienvenida a los alumnos del curso 2015/2016 en aquellos centros de la Universidad de Sevilla en los que imparto docencia como parte del Departamento de Ciencias de la Computación e Inteligencia Artificial:

 Durante el presente curso imparto durante el primer cuatrimestre las siguientes asignaturas:

Muchos de vosotros me conoceréis ya; y aquellos que no, sabed que podéis escribirme para cualquier cuestión relacionada con las asignaturas que imparto, he impartido o en la que consideráis que puedo seros de alguna ayuda (lvalencia@us.es).

A mis alumnos de la Escuela de Informática y de la Facultad de Matemáticas de años anteriores y a los que este año no vaya a impartir docencia, desearle la mejor suerte en la senda que les quede por recorrer, y para lo que sea ya saben donde encontrarme.

BD201415 – Ejercicios 13/05/2015

Los ejercicios propuestos para hoy tienen la intención de servir de repaso de muchos conceptos trabajados hasta la fecha, así como afianzar el tema de jQuery que hemos estado viendo en la clase de hoy. Para que la realización del mismo sea provechosa, se recomienda encarecidamente ir realizando paso a paso el ejercicio, no limitarnos a ir incorporando código de ejemplos anteriores sin más, sino hacerlo desde cero y, en todo caso, pararnos a repasar los temas de aquello que no nos haya quedado claro o nos deje dudas. Puede disponer de las hojas de referencia entregadas en clase, así como de la información facilitada en los enlaces que aparecen a lo largo de este post.

Se pide lo siguiente:

  • Crear un esqueleto de una página HTML5 con los elementos básicos mínimos necesarios.
  • Hacer que la página enlace al estilo de Bootstrap, de modo que se aplique su estilo y podamos usar sus clases.
  • Incorporar el código html necesario para que podamos usar jQuery.
  • Crear un archivo de estilo, y enlazarlo desde nuestra página.
  • Crear un archivo de código fuente JavaScript, y referenciarlo desde nuestra página.
  • Incorporar en el cuerpo de la página los siguientes elementos usando HTML:
    • Incluir tres pestañas de Bootstrap (recordad, información detallada en la página de la asignatura > Bootstrap > Segundo elemento de lista). Los nombres que se deben ver en las pestañas deben ser General (que será el inicialmente activo), Tabla y Formulario. Incluir en los paneles correspondientes de las pestañas simplemente el texto A, B y C respectivamente, y compruebe que funciona.
    • Sustituir el contenido de la primera pestaña (el texto A) por una serie de elementos básicos de HTML: cabeceras, párrafos, tratamiento de texto (importante, destacado, acrónimos, etc.), saltos de línea, listas ordenadas, desordenadas y de definición, enlaces e imágenes.
    • Sustituir el contenido de la segunda pestaña (el texto B) por una tabla que incluya los elementos fundamentales: tabla, título, secciones de cabecera, cuerpo y pie de tabla, filas, y celdas tanto de cabecera como normales. Introduzca alguna celda que abarque varias filas o varias columnas. Hacer que la tabla sea una tabla de Bootstrap (Bs) con las filas alternas (cebreadas) y que resalten al pasar sobre ellas (dinámicas). Ponga una de las filas como exitosa empleando Bs.
    • Sustituir el contenido de la tercera pestaña (el texto C) por un formulario de Bootstrap horizontal (con la estructura general vista en clase y en el enlace anterior), con campos de entrada de texto, fecha, número, algún área de texto, checkboxes, radiobuttons y alguna lista de selección desplegable con diversas opciones incluidas en grupos de opciones. Incluya algunos de los controles creados dentro de un grupo de campos, incluyendo una leyenda. No olvide definir las etiquetas de los campos de manera que al pinchar en ella se marque el campo correspondiente.
    • Incorpore 4 botones: uno para reinicializar los campos, otro para lanzar el formulario a la acción indicada en el atributo action del formulario y dos de tipo botón genérico para realizar las acciones que le digamos posteriormente (no olvide indicar su atributo id). Usar para ello distintas etiquetas de HTML posibles y aplique varias clases de Bootstrap distintas a los botones.
  • Crear reglas de estilo en el fichero de estilo creado, incluyendo reglas para:
    • Poner el color de fondo que desee a todos los input de tipo texto.
    • Poner a los párrafos y los label letra negrita.
    • Poner letra cursiva a los input descendientes de fieldset.
    • Poner una línea discontinua azul a todos los div que establezcan columnas de Bootstrap.
    • Poner a los elementos de la clase dummy la letra en color blanco y el fondo en color negro.
    • Poner a los elementos hijos directos de dummy cuyo atributo atrib termine con perro un margen superior de 2 veces el tamaño de la letra M.
    • Poner a los elementos hijos directos de dummy que contengan perro dentro de su atributo atrib una separación interior (no margen) de 2 veces el tamaño de la letra x.
  • Incorporar el siguiente código al fichero de código fuente creado, de modo que al ejecutarse se garantice que la página ya ha sido cargada, mediante jQuery, como hemos visto en clase:
    • Hacer que cuando la página se haya cargado emita el mensaje emergente Bienvenido a casa.
    • Crear una función llamada consulta, que no reciba ningún parámetro, y que haga lo siguiente: mostrar en un mensaje emergente el valor de uno de los campos de su formulario que tenga tipo numérico, seleccionado por su id, luego lo eleve al cuadrado, e imprima por la consola JavaScript el nuevo valor.
    • Asigne a uno de sus botones de acción genérica la función consulta cuando haga click sobre él.
    • Asigne al otro botón genérico la siguiente función anónima al hacer click sobre él: asignar la clase dummy al elemento de HTML donde haya colocado el control de área de texto (acceda a través de su id). Pruebe a cambiar esa asignación de clase por lo siguiente: añadir la clase al elemento citado si no tiene la clase, y suprimirla si ya la tiene. Dentro de la misma función anónima, modifique el valor del atributo atrib de todos los hermanos de un option por el valor ‘El perro de San Roque no tiene vergüenza‘, y a continuación muestre por consola dicho valor.
  • Dibujar (a mano o con el programa Dia) el árbol del DOM de una parte de la página que ha creado.

 

BD201415 – Ejercicio 07/05/2015

El ejercicio de hoy continúa con el repaso de MySQL, PHP y PDO, en este caso para recordar un mecanismo básico para tratar distintas acciones de un formulario mediante un mismo archivo PHP. El ejercicio a realizar paso a paso es un subconjunto de lo visto en clase (diapositivas 3 a 6, fundamentalmente). Dados los ficheros incluidos en este zip, realizar lo siguiente:

  1. Importar el archivo facultad.sql a un servidor de bases de datos MySQL
    (siempre que no se disponga ya de una base de datos facultad en el servidor).
  2. En el archivo Ejercicio20150507.html:
    1. Hacer que el formulario se envíe mediante el método POST a la acción procesa.php. Compruebe que al pulsar el botón se muestra una tabla con un listado de departamentos.
    2. Añadir junto al actual botón de Ver departamentos un input de tipo submit para cada operación habitual sobre una tabla: mostrar los datos de un registro,insertar, modificar y eliminar. Compruebe que al pulsar en cualquiera de los botones se desencadena la misma acción de ver departamentos.
    3. Establezca un name para cada uno de los inputs de tipo submit anteriormente creado. Por ejemplo, los names podrían ser mostrar, insertar, modificar y eliminar. Con este simple paso, al tener names los botones, en procesa.php se podrá acceder de la forma habitual a dichos names pasados desde el formulario.
  3. En el archivo procesa.php:
    1. Incorporar detrás de la instrucción $accion = ‘ve’; la lógica siguiente (recuerde las instrucciones selectivas y la función isset, como se explica en las diapositivas): si el parámetro mostrar ha sido pasado mediante el método POST al php, entonces asigne a la variable $accion el valor ‘muestra’. En caso contrario, si el parámetro insertar ha sido pasado, asigne el valor ‘inserta’. Repita el mismo proceso asignando ‘modifica’ y ‘elimina’ (si se nos ha pasado el parámetro ‘modificar’ o ‘eliminar’, respectivamente).
    2. Escriba un nuevo bloque if que, en función del valor de $accion, visualice los departamentos, muestre, inserte, modifique o elimine uno de ellos.

BD201415 – Ejercicio 30/04/2015

El ejercicio de Bases de datos de hoy sirve para experimentar con los conceptos básicos de selectores CSS que vimos en la última clase (miércoles 29/04).

El enunciado del ejercicio se encuentra en forma de comentarios en el propio archivo HTML Ejercicios20150430.html, dentro de este zip (listo para descomprimir, e incluye los archivos de bootstrap y jquery de los que depende).

Puede valerse del material disponible en la página de la asignatura > Segundo cuatrimestre > Teoría > CSS, y para dudas específicas sobre algunos selectores y propiedades puede consultar esta referencia.

 

BD201415 – Ejercicio 17/04/2015

Ejercicio: trabajando con el DOM, primeros pasos

Hasta la clase anterior a la de hoy, para trabajar con los elementos del DOM que tenemos cargados en el navegador en un momento dado, habíamos estado viendo fundamentalmente:

  • Los métodos para acceder por id (getElementById), por clase, por nombre de etiqueta o por nombre.
  • La propiedad innerHTML, para insertar código HTML en el interior de un elemento del DOM (por ejemplo, previamente accedido mediante alguno de las funciones de arriba).

Al final de la clase de hoy, hemos visto tres funciones muy importantes para incorporar elementos al DOM (se puede encontrar una descripción detallada aquí):

  • document.createTextNode(“Mi texto”), que crea un texto a incorporar en HTML. Recordemos que distinguíamos en DOM distintos tipos de nodos: el documento (raíz, de tipo Document), los elementos o etiquetas (de tipo Element), los textos sin más (de tipo Text) y los atributos (de tipo Attr). Pues esta función que se ha indicado crearía un nodo de tipo texto.
  • document.createElement(“etiqueta”), que crea un elemento con la etiqueta indicada (un div, un p, un option, etc.).
  • mielemento.appendChild(mielementohijo), que añade el elemento mielementohijo que queramos a mielemento.

El ejercicio de hoy puede hacerse partiendo del ejemplo de países y ciudades (para ahorrarnos crear la estructura básica de formularios), borrando el código JavaScript que trae por defecto este ejemplo. Nuestro ejercicio consiste en, empleando estas funciones junto con las funciones de acceso vistas anteriormente y los arrays con los que hemos estado trabajando:

  1. Declarar una variable que aloje un array con un mínimo de 10 países (los que considere, si desea puede incluir más, y siendo uno de ellos España).
  2. Definir una función para inicializar los valores del elemento div que tiene como id paises a partir del contenido del array anterior (creando por cada país del array el nodo de texto, el elemento correspondiente, y añadiendo como hijo del elemento el texto, y como hijo del select el elemento).
  3. Llamar a la función desarrollado en respuesta al evento de carga del cuerpo del documento.
  4. Incorporar al final del cuerpo de la página una lista ordenada, e incorporar a la función de inicialización código similar al ya disponible pero para crear elementos de la lista en lugar de elementos de un select.