Laboratorio 03

Parte 1: Control de versiones

1. Un sitio web, como cualquier otra aplicación de software, debe idealmente crearse bajo control de versiones, en especial si es un esfuerzo colaborativo. En su cuenta de cursoweb.ecci.ucr.ac.cr cree un repositorio vacío de Git para alojar su sitio web personal, futuros laboratorios y el proyecto del curso. Establezca una sesión SSH y apóyese con los siguientes comandos para crear su repositorio de Git.

   El comando git init crea un repositorio vacío de Git. La opción --bare indica que el repositorio no será usado para trabajar directamente, sino que será empleado nada más para hacer clones (a partir de él) en otras máquinas. Hay varias formas de acceder a un repositorio de Git. La más popular es a través del protocolo SSH con la notación:

   ssh://user@server:/path/to/repo.git

   Dado que si no se especifica un protocolo Git asume que es SSH, se puede omitir el esquema ssh://. La ruta hacia el repositorio puede ser absoluta o relativa a la carpeta personal (home directory) del usuario.

2. En su máquina local cree un clon del nuevo repositorio para trabajar, lo cual puede hacerse con comandos o con programas gráficos como TortoiseGit. En este enunciado se utilizarán comandos de Unix por ser más sencillos de ilustrar, pero el estudiante puede utilizar clientes gráficos si lo prefiere.

3. Agregue el currículo de vida que desarrolló en el Laboratorio 02 a su repositorio de control de versiones, y envíelo a su repositorio remoto. Note que debe copiar el documento XHTML5 y sus dependencias: la foto pasaporte y la línea de tiempo. Es aconsejable mantener juntos estos archivos, por lo que resulta mejor copiar la carpeta que contiene su currículo en el directorio de trabajo de Git:

4. Publique su sitio web en cursoweb.ecci.ucr.ac.cr. Para transferir un sitio web de la máquina de desarrollo al servidor o servidores web, típicamente los servicios de alojamiento web (web hosting) ofrecen FTP. Sin embargo mediante este mecanismo es difícil mantener el rastro en el tiempo de cuáles archivos han sido actualizados o no en el servidor. Ambientes de desarrollo como Adobe Dreamweaver proveen funcionalidades automatizadas para ayudar con estas dificultades.

   Sin embargo, al tener acceso por SSH al servidor web y el sitio bajo control de versiones, el trabajo de publicación es prácticamente trivial. Basta con crear una copia del repositorio en el servidor web. Incluso el control de versiones, además de permitir a varios profesionales de diferente naturaleza trabajar simultáneamente con los mismos archivos del sitio web, ofrece otras posibilidades valiosas, como el tener al menos dos branches, uno con el sitio web en producción (release) el cual está publicado en el servidor web disponible al mundo; y otro branch donde los desarrolladores hacen cambios diariamente (debug), el cual puede estar publicado en un servidor web privado, con acceso exclusivo para los empleados de la empresa para realizar pruebas antes de publicarlas en el sitio oficial.

   El servidor web del curso, cursoweb.ecci.ucr.ac.cr está configurado para utilizar la notación de directorio de usuarios de Apache, la cual establece que cualquier usuario puede publicar un sitio web personal en la carpeta public_html ubicada en su directorio de inicio (home directory). Cree esta carpeta y en ella un clon del repositorio de Git que almacena su sitio web:

5. Visite su página web. Con un navegador vaya a la dirección http://cursoweb.ecci.ucr.ac.cr/~<carne>, o bien, utilice el enlace con su nombre que se encuentra publicado en la parte final de la página del curso. Deberá ver en el navegador el contenido de su carpeta public_html y al menos la subcarpeta con su currículo, el cual podrá accionar y visualizar. ¿Por qué no aparece en el navegador la subcarpeta .git con el repositorio de Git? Experimente intentando listar el contenido de la subcarpeta .git escribiéndola manualmente en la barra de direcciones. ¿Qué comportamiento ocurre y explique porqué?

6. El servidor web de cursoweb.ecci.ucr.ac.cr está configurado para mostrar los archivos index.xhtml, index.html o index.php, cuando se solicita una carpeta. Si su documento XHTML5 con el currículo se llama diferente a index.xhtml, renómbrelo en su repositorio local, envíe el cambio al repositorio remoto:

    index.xhtml
     #
   
   $ git commit -a -m "Renombrado el currículo para ser el índice de la carpeta en el servidor web"
     [master 77e7974] Renombrado el currículo para ser el índice de la carpeta en el servidor web
     1 files changed, 0 insertions(+), 0 deletions(-)
     rename curriculo/{curriculo.xhtml => index.xhtml} (100%)
   
   $ git push --all
     a54321@cursoweb.ecci.ucr.ac.cr password:
   
   # Actualizar el sitio publicado en el servidor web.
   # Conectarse al servidor virtual, si no lo está ya
   $ ssh a54321@cursoweb.ecci.ucr.ac.cr
      password: ********
   
   # Ir al repositorio con el sitio publicado, el rabo de chancho es sinónimo de su home directory
   $ cd ~/public_html
   
   # Actualizar el repositorio publicado con el repositorio "oficial"
   $ git pull
   ]]>

   Con el navegador vuelva a visitar su sitio personal. ¿Qué ocurre esta vez al presionar el nombre de la carpeta curriculo? Además del archivo index.xhtml ¿puede saber un visitante cuáles otros archivos hay en la carpeta curriculo?

7. En este momento usted tiene en el servidor cursoweb.ecci.ucr.ac.cr dos repositorios de Git: el repositorio original (creado con git init --bare en la carpeta git, repos o algún similar), y el repositorio publicado en su public_html (creado como un clon del anterior). ¿Se puede tener en cursoweb.ecci.ucr.ac.cr un único repositorio que cumpla las dos funciones? Si la respuesta es afirmativa, señale cuáles son las ventajas y desventajas del esquema con dos repositorios y del esquema con uno solo. ¿Se puede hacer esto mismo con Subversion?

Parte 2: Página principal (estructura de página)

Actualmente su sitio web personal carece de una página principal. Cuando un visitante accede a http://cursoweb.ecci.ucr.ac.cr/~<carne> ve una página web autogenerada por el servidor web, construida a partir del contenido de su carpeta public_html. En esta segunda parte del laboratorio, usted va a crear una página principal para su sitio web personal.

La mayoría de sitios web modernos presentan al visitante una estructura que le ayuda a comprender el sitio, haciendo su experiencia más natural. Esta estructura consiste en hacer que todas las páginas web que conforman el sitio, están compuestas de las mismas partes: un encabezado del sitio, un pie de página, un menú de navegación, etc., más el contenido propio de la página. De igual forma la presentación y el comportamiento debe ser uniforme para todas las páginas del sitio, esto es, las hojas de estilo y los programas de JavaScript son reutilizados a lo largo del sitio. La siguiente ilustración muestra una misma estructura de página formateada en dos distribuciones distintas.

En este laboratorio usted se ocupará de la estructura de las páginas que componen su sitio web personal, aunque no de la apariencia. Su página principal deberá tener las cuatro partes mencionadas y resaltadas en verde en la figura anterior: encabezado de página, pie de página, menú de navegación y el contenido.

1. Cree un archivo de texto index.xhtml en la raíz de su working directory local, en Unicode, y escriba en él un documento XHTML5 mínimo. Dele un título apropiado. En este laboratorio se le hará referencia a la carpeta raíz de su sitio web como /, y por ende su página principal será /index.xhtml.
2. Es común que los sitios web tengan una pequeña imagen que los identifique en la barra de direcciones, marcadores y otros lugares, al cual se le llama favicon. Indague en el material de apoyo del curso y cree una de estas imágenes. Asóciela a su página principal.
3. En el cuerpo de su documento, cree un encabezado del sitio con el elemento header. En él agregue una imagen que identifique su sitio. Puede ser algo a lo que es muy aficionado/a, una fotografía suya, o una ilustración vectorial. Las compañías suelen usar el logotipo de la empresa en este lugar. Guarde esta imagen en una subcarpeta /img. Provoque que al hacer clic sobre la imagen, el navegador vaya a la página principal de su sitio web. Después de la imagen escriba su nombre completo, en un título 1. Finalmente, incluya un lema; puede ser una frase célebre suya o el texto "Página personal".
4. Cree el menú de navegación dentro de un elemento nav, el cual se compone de: un título 1 opcional indicando que se trata del menú; y una lista no ordenada de enlaces hacia las secciones que componen su sitio web: Inicio (hacia la página principal misma: /), Computación (hacia una subcarpeta homónima aún no creada, por ejemplo: /computacion/), y Autor (hacia la carpeta que contiene su currículo de vida, por ejemplo /curriculo/).
5. Cree el contenido de la página principal dentro de un elemento article. Escriba en él un texto dándole la bienvenida al visitante, presentándose a usted mismo, y darle un vistazo rápido de las secciones que componen su sitio web como se explica a continuación. Para cada sección de su sitio web (Computación y Autor), cree una entrada en su página principal compuesta de una imagen, un título y un párrafo explicativo. Las imágenes pueden ser fotografías o ilustraciones, pero deben mantener la uniformidad (apariencia, tamaño, origen) y estar almacenadas en la subcarpeta /img/. Sugerencia: capture fotografías con una cámara digital y edítelas para que ocupen el menor ancho de banda pero sin verse mal, o bien haga ilustraciones vectoriales. Las imágenes deben ser además enlaces hacia la sección correspondiente. El texto de la entrada explica rápidamente la intención de la sección y lo que el visitante encontrará ahí. Finalmente toda la entrada debe estar contenida en un elemento section de clase entrada (véase el atributo class en el material de apoyo del curso).
6. Finalmente cree un pie de página del sitio web con el elemento footer. En él escriba un párrafo dentro del elemento small, con el símbolo de derecho de autor (©), el año, su nombre y algún otro texto que quiera que esté presente en todas las páginas de su sitio.
7. Asegúrese de que su página principal sea válida. Haga un commit con ella. Envíela al repositorio remoto y actualice el sitio publicado. Compruebe que al acceder a http://cursoweb.ecci.ucr.ac.cr/~<carne> aparezca ahora su página principal y no la página autogenerada por el servidor web.

Parte 3: Páginas secundarias (control de redundancia)

Actualmente su sitio web consta sólo de dos páginas. En esta sección usted completará su sitio con una sección más sobre cursos de computación.

Evaluación

Por propósitos administrativos suba una copia comprimida del repositorio local de Git que contiene su sitio web personal a la plataforma educativa (Moodle) de la ECCI en la asignación con nombre Laboratorio 03. Se evaluará lo siguiente.

1. [10%] Su sitio publicado en cursoweb.ecci.ucr.ac.cr está bajo control de versiones de Git.
2. [15%] Contiene una página principal y en subcarpetas las secciones de computación y autor. La sección de Computación tiene subcarpetas para cada curso.
3. [15%] Todas las páginas del sitio tienen el mismo encabezado dentro de un elemento header; compuesto de una imagen, la cual actúa como enlace a la página principal; su nombre completo en un título de nivel 1; y un lema.
4. [15%] Todas las páginas del sitio comparten el mismo menú de navegación, descrito dentro de un elemento nav. Contiene una lista no ordenada de enlaces, los cuales son válidos (no están rotos) a lo largo del sitio. La sección de "Computación" está subdividida por curso.
5. [15%] El contenido de cada página se encuentra dentro de un elemento article. Cada entrada dentro de un elemento section. Cada entrada tiene imagen (que es además enlace), título y un párrafo. Las imágenes son uniformes.
6. [5%] Todas las páginas del sitio tienen el mismo pie de página, en un elemento footer.
7. [15%] Evita la redundancia de código empleando server side includes en todas sus páginas, las cuales funcionan correctamente (por ejemplo, no tienen enlaces rotos).
8. [5%] Mantiene un icono de favoritos (favicon) en todo su sitio web.
9. [5%] Documentos son XHTML5 válidos en Unicode.