*** Importante *** ------------------ El diseño debe ser adaptativo (responsive design). La hoja de estilo que se desarrolle tiene que ser compatible con el mayor número de navegadores (Chrome, Internet Explorer, Firefox, Opera, Safari, Konkeror, etc.), no vale hacer una versión para un navegador concreto. Para ello, se recomienda: - No utilizar lo "último de lo último" de CSS. - No utilizar propiedades y valores de CSS específicos de algunos navegadores, utilizar sólo lo que indica la especificación oficial. - No utilizar propiedades y valores de CSS que tienen un comportamiento diferente según el navegador. - Buscar soluciones alternativas que funcionen en casi todos los navegadores. Se tiene que desarrollar una hoja de estilo CSS para la página web de la asignatura (http://gplsi.dlsi.ua.es/asignaturas/pi/) tal cual, es decir, NO está permitido modificar el HTML de la página web. Se recomienda escribir todos los nombres de los ficheros en minúsculas (por ejemplo, al indicar una imagen) y verificar que en el sistema de archivos el nombre del fichero y la extensión aparecen en minúsculas (en Microsoft Windows se recomienda activar la visualización de la extensión de los ficheros). Cuidado en Microsoft Windows: - Por defecto oculta las extensiones. - Muchos programas ponen las extensiones en mayúsculas. La página web está desarrollada con ISO-8859-1, tal como se puede ver en el de la página: La hoja de estilo se tiene que desarrollar con el mismo juego de caracteres (ISO-8859-1) y NO se tiene que incluir una instrucción @charset para indicar un juego de caracteres distinto. *** Instrucciones de envío *** ------------------------------ 1. La entrega se realizará según las instrucciones concretas (fecha límite, lugar de entrega) que proporcionará el profesor. 2. Todo se tiene que entregar en un único fichero comprimido .tgz o .zip (RAR no es un formato válido). El nombre del fichero tiene que ser el DNI del alumno. Por ejemplo: 11222333.tgz 3. El fichero comprimido debe de contener un único directorio cuyo nombre sea el DNI del alumno. Por ejemplo: 11222333/ 4. El directorio debe contener todos los ficheros necesarios para el estilo (la hoja de estilo y las imágenes que utilice). Los ficheros NO deben estar organizados en directorios. 5. Todos los nombres de los ficheros (incluida la extensión) deben estar escritos en minúsculas y no deben contener espacios en blanco. 6. Sólo debe haber una hoja de estilo llamada estilos.css. Las imágenes pueden tener el nombre que se quiera. 7. El fichero estilos.css debe contener en las primeras líneas un comentario (/* ... */) con el siguiente formato (Línea 1, Línea 2, etc. NO tienen que aparecer escritas en el fichero, solo son una indicación en estas instrucciones): Línea 1: /* Línea 2: Nombre del estilo Línea 3: Nombre del autor del CSS Línea 4: URL para más información sobre el autor o la dirección de correo con el prefijo mailto: Línea 5: */ Por ejemplo: /* Sin CSS Sergio Luján Mora http://www.dlsi.ua.es/~slujan/ */ Otro ejemplo: /* Con CSS Sergio Luján Mora mailto:sergio.lujan@ arroba @ua.es */ Importante: NO se tiene que incluir una instrucción @charset en el fichero, pero el juego de caracteres del fichero tiene que ser ISO-8859-1 (se debe seleccionar en el editor de textos que se utilice para escribir la hoja de estilos). 8. Si se desea evitar que la dirección de correo acabe en alguna lista de spam, utilizar algún método para "ofuscarla", como en el ejemplo anterior que se ha escrito "@ arroba @". 9. Si no se desea indicar una URL o una dirección de correo, cerrar el comentario en la línea 4. Por ejemplo: /* Sin CSS Sergio Luján Mora */ 10. Además, el directorio debe contener dos imágenes especiales, llamadas imagen.png y miniatura.png (ambas en formato PNG). Estas imágenes se emplean en la galería de estilos: https://gplsi.dlsi.ua.es/asignaturas/pi/todos.php 11. imagen.png es una captura de la página tal como se ve en un navegador (cualquiera) con el estilo desarrollado. Se tiene que capturar el contenido del navegador (la página en sí), SIN la barra de menús, la barra de estado y demás elementos de la ventana del navegador. Su anchura tiene que ser de 1000 pixels y la altura la correspondiente para mantener la relación de aspecto correcta. No es necesario realizar la captura con este ancho de la ventana del navegador: la captura se puede realizar en una anchura normal (por ejemplo, Full HD 1920 x 1080) y luego la imagen resultante se escala mediante un programa. Por ejemplo: 1000 x 604 12. miniatura.png es la imagen anterior escalada. Cuando se haga el escalado de la imagen (resize), se debe de elegir un método mejorado para obtener una buena calidad en la imagen. Por ejemplo, en Paint Shop Pro, en "Resample using" elegir "Smart Size" en vez de "Pixel Resize". Su anchura tiene que ser de 400 pixels y la altura la correspondiente para mantener la relación de aspecto correcta. Por ejemplo: 400 x 242