Supuesto práctico - CSS

Con el siguiente ejercicio quisiera poner un caso ficticio que se podría dar en la realidad..erll coomo???.

Para resolverlo hay que tener conocimientos (básicos) en HTML y CSS.

Los objetivos que planteo con este ejercicio son:

1. En primer lugar se pretende una organización y comprensión del código fuente.
   
2. En segundo lugar se pretende la modificación del código fuente de las hojas de estilos en cascada.
   
3. En tercer lugar se pretende elaborar un portal web con la plantilla re-diseñada.
   

Supongamos que una empresa nos contrata para elaborar su web. El gerente nos propone realizar un portal web. Del conjunto de plantillas gratuitas que disponemos en la red, elige la que más le gusta: “Dark Ritual” por la distribución de las columnas y el formato de sus elementos. Esta plantilla fue diseñada por un tal Arcsin (le hago propaganda).

El código HTML del que disponemos está muy confuso ya que no está bien tabulado y apenas se aprecia la distribución de las capas y de los elementos en el código.

En este enlace tenéis los archivos necesarios: plantilla

• En primer lugar deberás organizar el código HTML de la plantilla (ya que es un poco caótico -lo he caotizado yo-) para poder comprender mejor la estructura de capas que se ha diseñado. Haz uso de la tabulación e inserta comentarios para explicar la distribución de las mismas.
  



• Una vez comprendido la distribución, echa un vistazo al código CSS para comprender mejor la posición y los estilos de cada capa. Elimina el código sobrante (no utilizado) de la hoja de estilos.
  
• El gerente nos comunica en primer lugar que la columna que se muestra a la derecha, no le gusta que ocupe la parte superior, sino que empiece al igual que las otras columnas (la del menú y central), justo debajo del título.
  



• Además el gerente nos informa que la imagen que forma el título del portal debe ser cambiada y que debe ocupar el ancho del portal.
  
• Crea varias páginas de ejemplos, de manera que estén enlazadas en el menú lateral y modifica la página de estilos de manera dicha opción aparezca resaltada de otro color cuando se está visualizando la página a la que enlaza.

Ejercicio creado por: Pepe Lluyot

Ejercicio con Hojas de Estilos en Cascada

Un ejercicio fácil de elaborar que permite paso a paso el contruir un portal web haciendo uso de CSS es el siguiente que acabo de elaborar:

Partiendo de la anterior página HTML, donde se han puesto una serie de clases, pretendemos llegar a este resultado final:

Podéis descargaros la página html Inicial y las imágenes desde este enlace.

Antes de comenzar debes echar un vistazo a la estructura de la página inicial. Está comentada y es muy sencilla.

Crea una hoja de estillos llamada default.css y sigue los siguientes pasos:

1. El espacio y el margen de todo el documento por defecto sera 0px (margin, padding)
2. Poner en el body la imágen de fondo bg.gif (alineada en la parte superior y centrada), el color del texto #333, color de fondo #5F8000 y las fuentes Lucida Sanz Unicode, con un tamaño predeterminado del 62.5%.
3. Todos los enlaces de la página serán de color #682 y al pasar por encima de ellos de color: #9A6
4. Los párrafos y listas de todo el documento tendrán un tamaño de 1.2em y una separación por abajo de 1.2em; Además las listas tendrán un margen izquierdo de 1.2em y una imágen por cada elemento de la lista (li.gif)
5. la etiqueta blockquote (tabulación) tendrá un fondo blanco, un tamaño de fuente 0.9em, serán de color #333 y un borde sólido superior e inferior de tamaño 1px y de color #EEE. Los párrafos contenidos dentro de la etiqueta blockquote tendrán una serparación de 3px arriba y abajo y de 0px a la izq y dch.
6. Los título de cabecera h1 tendrá un tamaño de 1.4em. h2,h3 y h4 tendrán el color #654
7. Definir la estructura de la página para la clase container: anchura (702px),  imágen de fondo: (bgcontainer.gif) y centrada en la ventana del navegador.
8. La capa correspondiente al título del portal (clase top), tendrá el fondo de color #567300, será de anchura 630px y altura 60px. Su tipo de letra será Verdana de tamaño 2.4em. Los enlaces  de esta clase serán blancos sin subrayar y ocuparán el 100% de la anchura de la capa. Al pasar el ratón por encima de los enlaces cambiar al color #688B00; Ajustar el espaciado para que tenga un aspecto similar al resultado final.
9. La capa header mostrará la imágen de fondo: header.jpg centrada y con un tamaño de 630x180px.

Bueno vamos a dejarlo por ahora aquí (me duelen los dedos).... continuará

Si has llegado hasta aquí deberíamos ver lo siguiente

...continuará....

Aplicaciones Portables (Portable Apps)

Seguramente habréis oido alguna vez sobre las aplicaciones portables,... pero en realidad...¿Qué es una aplicación portable?

Una aplicación portable es aquella que no necesita de una instalación previa para poderla utilizar y que podemos hacer uno de ella en algún dispositivo de almacenamiento externo,....... es decir imagínate que vas a casa de un amigo y por ejemplo... quieres usar su PC para escuchar música o ver un documento de texto o retocar una foto en su ordenador, o quieres pasarle un antivirus, o mostrarle la base de datos que has montado con Mysql o conectarte via ssh al servidor de tu prima...... Ahora resulta que este amigo no tiene instalado ni un reproductor de música, ningún programa de ofimática o un programa de retoque fotográfico, ni nada de nada,,,,,que ocurriría???.. sería un proceso medianamente lento... buscar el softwarem ....bajarselo de internet (si es que tiene.....que lo tendrá), instalarlo, etc... Una solución sería disponer de un conjunto de herramientas, por ejemplo en tu pen-drive, de manera que al insertarlo podamos contar con el software más exencial sin necesidad de búsqueda,  instalación... pues a ese cada una de esas aplicaciones las podemos denominar "aplicaciones portables".

Existe una amplia gama de aplicaciones portables y gratuitas.

En la web PortableApps tenéis una buena colección de las mismas.

Os cito las que más suelo usar:

- Notepad++ portable: Editor sencillo de texto para programación.

- Putty portable: Para conectarte a través de Telnet o SSH,...

- xampp: con un conjunto de herramientas, contiene el servidor web Apache2, mysql, un servidor ftp (filezilla) entre otras. Es muyyy útil para aquellos desarrolladores que quieran probar por ejemplo sus páginas PHP en cualquier máquina sin necesidad de instar nada. Es muy útil también para llevar tu servidor ftp en el bolsillo.

- Claimwin portabla: Antivirus

- Nvu Portable: editorHTML... WYSIWYG

Además de:

- SumatraPDF portable: Visor de PDFs

- OpenOffice portable: Procesador de texto, presentaciones, hoja de cálculo, ....

- Filezilla client portable: Cliente FTP

- Thunderbird portable: Gestor de correos

- Firefox portable. Navegador web

- CoolPlayer portable: Reproductor de música.

- The Gimp portable: retoque fotográfico

...etc....etc....no sigo ...míralo mejor en la web..

Merece la pena usarlo.

Haciendo uso de CSS

CSS o lo que es lo mismo Cascading Style Sheets (Hoja de estilos en cascada), es utilizado por los desarrolladores para separar la estructura de un documento HTML de su aspecto visual. En estos días estamos trabajando en clase el uso de estilos en los documentos html que hemos desarrollado. Cuelgo un ejemplo del uso de estilos con CSS que he elaborado.

(se incluyen identificadores, clases, mezcla de clases y pseudo-clases).

Si pinchas en este enlace verás un ejemplo de código html generado sin tener aplicado ningún formato ni estilo.

En el siguiente enlace se muestra el mismo documento html con una hoja de estilos personalizada.

(incluso sin usar javascript, podemos simular botones)

Probado con mozilla.

Este ejemplo puede servir de ejercicio para los alumnos:

En el documento html he incluido determinados identificadores y clases tanto a capas como a etiquetas, de manera que se propone sin tocar el código del html original, crear una hoja de estilos que pueda personalizar dicha estructura.

PD: eso del rosa me ha sido inspirado por mi futura nena.
http://www.lluyot.com/drupal/content/ejercicio-html-css-modificaci%C3%B3n-en-la-hoja-de-estilos

Recuperar contraseña Mysql - Ubuntu

Seguro que te ha pasado más de alguna vez que no recuerdas la contraseña que le pusistes al root de mysql. A mí me ha pasado lo mismo, y rebuscando encontré la forma de recuperarla. La idea es la siguiente:
1 - Matar el proceso mysqld
2 - Entrar en modo seguro.
3 - usar la base de datos mysql
4 - Hacer un update para cambiar la passwd.
5 - reiniciar mysql.

Veamoslo paso a paso (yo uso la distr. ubuntu 8.10)- supondremos que lo hacemos como superusuario (sudo -i)
1 - matamos el proceso mysqld:
$ ps -A | grep mysqld
buscamos el id del proceso y lo matamos
$ kill 12345

2 - ejecutamos mysqld_safe
$ /usr/bin/mysqld_safe --skip-grant-tables

3 - entramos en mysql y usamos la bd mysql
$ mysql
mysql -> use mysql;

4 - hacemos un update en la tabla user para el ususario root para cambiarle la passwd

mysql -> update user set password=password('nuevopasswd') where user='root';

mysql->flush privileges;

mysql->quit;

5 - reiniciamos mysql

$ /etc/init.d/mysql restart

HTML con tablas.

Aprovechando que en estos días estoy trantando en clases el uso de las tablas en HTML, voy a colgar en la red un ejemplo en el que he incluido comentarios a las líneas del código para una mejor comprensión del uso de las tablas.

Hay que decir que no me he esmerado en el diseño de la misma, sino más bien en el contenido.

Está elaborada en HTML 4.01, sin incluir ningún frame ni hojas de estilos ni formularios ni nada por el estilo... nada de capas....

La página en sí la he colgado aquí

Es conveniente tener instalado un editor de HTML para que resalten las etiquetas del código fuente, podéis usar el que actualmente usamos en clase (Notepad++).

He validado el código con W3C.