Practicar con CSS

En la clase del pasado miércoles 13/03/2013 concluimos los conceptos básicos de CSS que vamos a ver en clase, puesto que no se trata de hacernos expertos en esta tecnología sino que debemos ver también otras muchas dentro de esta parte del curso.

Comenzamos a ver además los conceptos básicos de Javascript, con los que continuaremos el próximo lunes. El resto del curso continuaremos avanzando tanto en el tratamiento de información en cliente con Javascript, incluyendo el uso de frameworks como jQuery y muchas extensiones útiles, así como en el procesamiento de los datos en servidor con PHP. No obstante, durante el trabajo en esos temas continuaremos afianzando conocimientos de HTML4 y 5 y de CSS 2.1 y 3.

En cualquier caso, es aconsejable ir practicando en casa con los contenidos que vamos viendo, por lo que he dejado varios enlaces nuevos en la sección correspondiente a CSS en la página de Teoría. El curso online de Librosweb que hemos estado viendo está francamente bien explicado y concentrado, pero contiene mucha información. Para aquellos que quieran comenzar desde cero con un conjunto más acotado de información pueden revisar el training de iniciación del W3C. Para sacarle más partido al asunto y hacer pruebas online, resulta especialmente útil el tutorial de CSS de w3schools, con los ejercicios “try it yourself” que contiene, de forma que podamos partir de un ejemplo resuelto e ir introduciendo y probando sobre la marcha las modificaciones que consideremos oportunas.

Clase lunes 04/03/2013

En la clase de ayer planteamos la estructura del trabajo del segundo cuatrimestre:

  1. Definición de requisitos
  2. Diseño de navegación
  3. Prototipado (maquetas o mockups)
  4. Desarrollo
    1. Contenido estático (HTML 4/5)
    2. Presentación de los contenidos (CSS 2/3)
    3. Tratamiento de la información en cliente (JS). {jQuery}
    4. Procesamiento de información en servidor (PHP).
    5. Despliegue de la base de dato en servidor (MySQL) y acceso desde PHP:
      1. Consulta (select simples, agrupadas, etc.)
      2. Actualización (inserción, modificación, eliminación.)
  5. Mejoras (opcional)
    1. Plantillas de presentación (bootstrap, jQuery.dataTables).
    2. Comunicación asíncrona con el servidor (AJAX).
    3. Gráficas (Highcharts, canvas, …).

Se trasladó a los alumnos la conveniencia de solicitar a la Universidad de Sevilla el servicio de alojamiento web en us.es, a través de este enlace. De este modo, se podrá contar con un hosting y subdominio en alumno.us.es/vuestro_usuario_UVUS, desde el que redireccionaremos a un servidor del departamento para realizar tareas que requieran permisos adicionales (PHP, MySQL, etc.)

Además, se estuvo trabajando sobre el ejercicio 1 de desarrollo integral cliente-servidor-bd (basado en este ejemplo de Carlos Alberto García Castaño, pero complementándolo incluyendo acceso a base de datos).

En este ejercicio pudimos hacer un overview de los temas fundamentales a tratar en el curso, y que constituyen un ciclo completo de trabajo en web, desde que recibimos datos del usuario hasta que devolvemos una respuesta (en este caso, haciendo uso de AJAX). El ejercicio hace uso de HTML, CSS, JS, jQuery, AJAX, PHP y MySQL.

En clase revisamos los siguientes pasos:

  1. [index.html] Desarrollamos una página HTML cuyo contenido incluye campos input de text para recibir datos del usuario, junto con un button, inicialmente sin acción asociada, y una sección div con un texto inicial, donde más adelante se deberá mostrar la respuesta del servidor. Como vimos, esta página se representa internamente como un árbol de contenidos, de modo que las etiquetas o textos contenidos dentro de otra etiqueta serían subárboles de su elemento contenedor, hasta llegar al nivel de las hojas (textos o etiquetas no conteniendo ningún hijo). Es lo que se conoce como DOM, y podemos encontrar más información sobre ello en el curso de introducción a AJAX, de librosweb.
  2. [mystyle.css] Para la presentación de la página, aportamos una pequeña hoja de estilo CSS, empleando algunas novedades de CSS3 como border-radius. Lógicamente, se indicó su uso en la página HTML anterior, en este caso por medio de link.
  3. [cliente.js] Para tratar en el cliente (en el navegador) los datos de entrada procedentes de la página HTML, preparar una petición post de tipo AJAX para enviar el servidor, procesar la respuesta html y mostrarla dentro de la página original se empleó JS (Javascript), haciendo uso del framework jQuery. El archivo “cliente.js” incluye la asignación de esta funcionalidad al botón de la página HTML. La página HTML, por su parte, incluye la referencia al código JS mediante etiquetas script, una para el archivo cliente.js y otra para el archivo jquery.min.js, indicando la ruta web completa donde se encuentra este archivo, sin necesidad de descargarlo a nuestro servidor.
  4. [servidor.php] Para procesar la petición del cliente en nuestro servidor, se empleó PHP, recibiendo los datos enviados desde el código javascript anterior tras presionar el botón. A partir de esos datos, se realiza la suma de los datos de entrada, y se incluye un acceso a la tabla de departamentos de nuestra base de datos “facultad” (debe haberse importado en nuestro SGBD MySQL previamente, a partir del archivo [facultad.sql]). Tanto el resultado de la suma como los datos devueltos por la consulta son escritos mediante instrucciones “echo” en la salida HTML, que recibirá el navegador y tratará el código JS para mostrar en la página original.

El segundo ejemplo disponible en la página de práctica es una leve variación del anterior, pero con un cambio de enfoque en la transmisión de la respuesta del servidor al cliente, en este caso a través de un objeto JSON en lugar de emplear html. El tratamiento de este objeto JSON transmitido deberá realizarlo por tanto el cliente, el navegador, a través del código Javascript, para generar la tabla a mostrar en la página HTML a partir del contenido de ese objeto JSON.

Clase miércoles 27/02/2013

La clase del pasado miércoles estuvo dedicada fundamentalmente a realizar una introducción a CSS (Cascade Style Sheets), que viene a dotar a los contenidos etiquetados en los documentos HTML de la descripción de sus características de presentación y estilo. Proporcionamos algunos ejemplos para trabajar, incialmente sin estilo, pasando a incluir el estilo con atributos varios en HTML, opción que descartamos, y posteriormente pasamos al atributo style dentro de las etiquetas, empleando ya CSS pero menos aconsejado. Finalmente, vimos cómo definir el estilo para determinadas etiquetas, clases o elementos individuales, tanto a nivel de página como en un documento separado con extensión css, opción preferida en general para dotar de una apariencia uniforme a nuestros sitios web.

Además, repasamos algunas de las capacidades de mockupbuilder vistas el día anterior, y vimos una página muy útil para elegir opciones de color amigables para aplicar en nuestras hojas de estilo, kuler, de adobe.

Por último, comenzamos a introducir HTML5 y sus novedades, haciendo hincapié en la filosofía subyancente, que trata de reafirmar la naturaleza semántica de la web, con etiquetas como article, section, header, footer, aside, nav, etc., que vienen a paliar la carencia de dicha separación semántica hasta su aparición (esto venía haciéndose son diferentes div, aplicándole estilos correspondientes a cada rol, pero se trataba de una etiqueta sin ese contenido semántico, únicamente de presentación).

En las siguientes clases se profundizará en HTML5 y CSS3, si bien se tratar´de dar una primera visión de los temas siguientes (JavaScript, jQuery, PHP) en lugar de ir cerrando temas, optando así por disponer lo antes posible de una visión global, para posteriormente ir profundizando en cada uno de los aspectos.

Clase lunes 25/02/2013

La clase del pasado lunes estuvo dedicada a afianzar los conocimientos de las clases anteriores, fundamentalmente acerca de tablas y formularios.

Se realizaron los tests correspondientes a los ejercicios 3, sobre tablas, y 4, sobre formularios. Posteriormente se corrigieron los ejercicios, sirviendo para repasar algunos de los conceptos que no habían quedado suficientemente claros.

Además, se estuvieron introduciendo pequeños ejemplos con CSS, y se introdujeron algunos conceptos básicos relacionados con la ingeniería web, como los diagramas de navegación y el diseño de mockups (bocetos) para mostrar la apariencia que tendrá nuestra web. Para ello, se estuvo comenzando a trabajar con mockupbuilder, y se propuso a los alumnos el diseño de una primera interfaz para alguna funcionalidad de su aplicación, en relación con la base de datos diseñada e implementada en el primer cuatrimestre. En este sentido, se recordó la necesidad de contar lo antes posible con la base de datos en MySQL, para aquellos alumnos que la implementaron en Access o que no llegaron a desplegar el diseño de EER extendido en MySQLWorkbench dentro de su SGBD MySQL.

Clase miércoles 20/02/2013

En la clase del pasado miércoles estuvimos avanzando con los contenidos sobre HTML4. Fundamentalmente, dedicamos la clase a afianzar contenidos anteriores, y analizar la sintaxis y la semántica de las distintas etiquetas relacionadas con la visualización de tablas. Un enlace interesante explicando algunos aspectos de las tablas HTML se pueden encontrar en este vídeo de Guzmán Fernández García, formando parte del curso iDESWEB, de la Universidad de Alicante:

[youtube width=”560″ height=”315″]http://www.youtube.com/watch?v=ZFrWfhxpP2U[/youtube]

La segunda parte de la clase estuvo destinada al empleo de formularios en páginas HTML4. Se intercalaron algunas pinceladas de CSS y se introdujeron algunos controles ya propios de HTML5.

La próxima clase continuaremos hablando de formularios, nos adentraremos en las novedades de HTML5 tanto a nivel de formularios como de etiquetas y secciones en general, y avanzaremos simultáneamente con conceptos de CSS.

Clase lunes 18/02/2013

En la clase de esta mañana hemos realizado la sesión de HTML correspondiente a formato de texto y a organización del contenido.

Se ha trabajado con la página creada en una clase anterior, complementándolo con los contenidos que hemos ido viendo sobre cabeceras, líneas horizontales, opciones de fuente, alineación de párrafos e imágenes, listas, enlaces y anclas. Una descripción detallada sobre inclusión de imágenes en HTML y sobre creación de mapas de imagen se puede encontrar en este vídeo de Sergio Luján Mora, dentro del curso iDESWEB de la Universidad de Alicante:

[youtube width=”650″ height=”315″]http://www.youtube.com/watch?v=tnpPJou1EVA[/youtube]

Finalmente, se ha realizado por parte de los alumnos el test de web 2.

El próximo día continuaremos viendo tablas y formularios. A la finalización del análisis de las etiquetas básicas de HTML4 y anteriores, comenzaremos a ver las incorporaciones más interesantes de HTML5, e iremos incorporando progresivamente las hojas de estilo, CSS, de modo que podamos aplicar estilos amigables y uniformes a nuestros sitios web.

Clase miércoles 13/02/2013

En la clase de esta mañana hemos continuado con la introducción a HTML, que empezamos la clase anterior, analizando las generalidades sobre el lenguaje y la motivación de estudiarlo. Como se ha indicado, estas primeras clases trabajaremos sobre la última versión estándar del lenguaje, HTML4. Sin embargo, ya está muy extendida de facto la siguiente versión, HTML5, con muchos cambios interesantes y ya presente en aplicaciones que venimos usando en el día a día. Por este motivo, tras unas primeras clases con HTML4, iremos viendo los cambios introducidos en HTML5 y en las hojas de estilo CSS3, íntimamente relacionadas.

Posteriormente se ha comentado la estructura básica de un documento, se ha explicado y trabajado con direcciones absolutas y relativas a recursos contenidos en nuestro servidor y se han analizado los atributos principales de la etiqueta BODY. Se ha descrito el mecanismo llevado a cabo para la asignación de colores RGB o por nombre a los atributos HTML que los aceptan, y se han introducido nociones sobre los símbolos que nos permiten escribir caracteres especiales de forma que se pueda ver en cualquier navegador de cualquier país compatible 100% con HTML.

Se ha realizado y entregado por parte de los alumnos la hoja 1 de ejercicios web.

El próximo día continuaremos trabajando con etiquetas básicas de HTML.

Clase lunes 11/02/2013

En la clase de hoy hemos visto una introducción a Internet, a la World Wide Web (popularmente, la Web), haciendo un poco de historia, y a conceptos fundamentales como:

  • Direcciones IP (públicas, privadas, estáticas, dinámicas).
  • Dominio de Internet.
  • Sistema de nombres de dominios (DNS)
  • Protocolos.
  • Servidor web.

Además, se ha explicado el funcionamiento básico de la web, desde que introducimos una dirección de Internet en el navegador a través de su nombre hasta que se visualiza la página web de respuesta en el navegador.

De forma simplificada hemos visto que sigue un proceso del tipo:

De forma un poco más detallada, y en este caso para páginas web dinámicas:

Se ha introducido el protocolo HTTP, así como el lenguaje HTML, básicos en el funcionamiento de la web. Finalmente, hemos realizado unos primeros ejercicios a partir del esquema básico de un documento HTML.

Para ello, hemos arrancado nuestro servidor web WAMP Server, que alojará las páginas web que podrán solicitar los clientes. Para la edición de las páginas web se ha hecho uso del software Komodo Edit, que nos permite visualizar el árbol de carpetas de nuestro servidor, el código que estamos escribiendo y un previsualizador/navegador web integrado, que nos permite ver cada modificación sobre el código inmediatamente en el momento de guardar cambios en el documento.

 

Bienvenida al segundo cuatrimestre

Comienza el segundo cuatrimestre, que estará enfocado a la implantación de nuestra base de datos en un servidor, y el desarrollo de aplicaciones web que nos permitan tanto la adquisición como la presentación de datos de nuestra base de datos a través de web.

Desear que continúe la buena marcha del grupo, después del gran trabajo realizado a lo largo del primer cuatrimestre. Enhorabuena!

 

Clase miércoles 09/01/2013

La clase de hoy se ha dedicado a repasar conceptos y contenidos de los temas 0 a 2, a través de la resolución de este ejercicio de repaso.

Se ha realizado el diagrama entidad-relación, y se ha trasladado posteriormente al esquema en modelo relacional.

A partir del modelo en MySQLWorkbench disponible aquí, se ha realizado ingeniería hacia delante (forward engineering), generando la base de datos MySQL correspondiente. Para ello, hemos hecho lo siguiente:

  1. Arrancar nuestro servidor de base de datos (en este caso, arrancando WampServer, que incluye MySQL).
  2. Abrir MySQLWorkbench.
  3. Establecer una conexión con el servidor de base de datos arrancado, haciendo clic en New connection, asignando un nombre cualquiera en ConnectionName y clic en Ok.
  4. Abrir el modelo de MySQL Workbench descargado, mediante Open Existing EER Model, y seleccionando el archivo correspondiente.
  5. Realizar ingeniería hacia delante para generar la base de datos correspondiente, mediante la opción Forward Engineering, y a continuación Next > Next… > Close. Esto generará la base de datos MySQL.

Posteriormente se ha procedido a definir una fuente de datos ODBC en Windows, “apuntando” a la base de datos correspondiente en MySQL. Para ello, hemos tenido que realizar una serie de pasos:

  1.  Instalar un driver ODBC para MySQL. Concretamente, esta versión. Hemos seleccionado e instalado el primer archivo que aparece, con las opciones por defecto.
  2. Abrir el administrador de orígenes de datos ODBC en Windows. Por ejemplo, mediante Inicio > Panel de control > Herramientas administrativas > Orígenes de datos ODBC.
  3. Agregar el nuevo origen de datos, mediante Agregar… > MySQL ODBC 3.51 Driver, asignando un nombre en Data Source Name (el nombre que queramos), poniendo en TCP/IP server localhost, y en user y password nuestro usuario y contraseña en la base de datos (por defecto, el user es root y el password está vacío). En Database debería aparecernos el nombre de la base de datos creada en MySQL, en nuestro caso ejemplorepaso1. Con esto ya tenemos nuestro origen  ODBC creado, accesible para las aplicaciones que quieran acceder.

A continuación hemos procedido a vincular las tablas de MySQL desde Access, a través de la conexión ODBC. Para ello, una vez abierto Access, hemos ido a Datos externos > Base de datos ODBC > Vincular… > Origen de datos de equipo > seleccionar el origen que hemos definido en el paso 3 anterior > Seleccionar todo > aceptar. Ya estarían listas las tablas vinculadas, pendiente de relacionarlas en el visor de relaciones, de la forma habitual en Access.

Finalmente, hemos comenzado a crear una aplicación mediante formularios Access, sobre la base de datos Access con las tablas vinculadas y ya relacionadas, empleando la opción Crear > Formulario, para tablas individuales, o bien Crear > Asistente para formularios, para ir seleccionando datos de distintas tablas relacionadas que queremos que aparezcan en el mismo formulario.

La próxima clase se repasarán los conceptos correspondientes a los temas 3 y 4, quedando los temas 5 y 6 fuera del alcance del próximo control. Es importante que los alumnos lleguen a la próxima clase habiendo repasado los temas de SQL y de normalización, y hayan intentado realizar los ejercicios propuestos de dichos temas.