QUÉ ES CSS

CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores…

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.

Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.

EJEMPLO:

<p style="color:green;font-weight:bold">El párrafo saldrá con color verde y en negrita</p>

Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y coma (;). Durante este artículo vamos a conocer muchos atributos de CSS, los dos primeros que hemos visto aquí son:

Color: indica el color del contenido la etiqueta donde estemos utilizándolo, generalmente indica el color del texto.

Font-weight: indica el grosor del texto. Bold sirve para poner en negrita.

COLOR EN LOS ENLACES

Con HTML definimos el color de los enlaces en la etiqueta <body>, con lo atributos link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto, para que tenga otro color que el definido en la etiqueta <body>?

Para hacer esto utilizaremos el atributo style dentro del enlace:

<a href="mienlace.html" style="color:red">

Así saldrá el enlace en color rojo, independientemente de lo definido para todo el documento. Espaciado entre líneas

Con CSS podemos definir el espacio que hay entre cada línea del documento, utilizando el atributo line-height. Por ejemplo, podemos definir que para todo un párrafo el espacio entre cada una de sus líneas sea 25 pixels:

<p style="line-height: 25px;">

Un párrafo normal en el que cada una de las líneas está separada 25 pixels de la otra. Hay que poner suficiente texto como para que se vean 2 líneas, así saldrán separadas

</p>

ESPACIADO ENTRE CARACTERES

Se puede definir también el espacio entre cada carácter. Esto se hace con el atributo de CSS letter-spacing. Veamos un ejemplo:

<p style="letter-spacing:12cm">

Este párrafo tiene las letras espaciadas por 1 centímetro.

</p>

Este atributo, al igual que ocurre con muchos otros de CSS, no está soportado por todos los navegadores. En concreto Netscape, en su versión 4 todavía no lo incluye.

ENLACES SIN SUBRAYADO

Uno de los efectos más significativos y fáciles de realizar con CSS es eliminar el subrayado de los enlaces de una página web. Existe un atributo que sirve para definir la decoración de un texto, si está subrayado, tachado, o si no tiene ninguna de estas “decoraciones”. Es el atributo text-decoration, en este caso indicaremos en un enlace que no queremos decoración:

<a href="mipagina.html" style="text-decoration:none">

INCLUIR ESTILOS PARA TODO UN SITIO WEB

Una de las características más potentes de la programación con hojas de estilo consiste en definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas.

Veamos ahora todo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos

Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es un poco distinta que la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir código HTML en este archivo: etiquetas y demás. Podemos ver un ejemplo a continuación.

P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}

2- Enlazamos la página web con la hoja de estilos

Para ello vamos a colocar la etiqueta <LINK> con los atributos

rel=”STYLESHEET” indicando que el enlace es con una hoja de estilo.

type=”text/css” porque el archivo es de texto, en sintaxis CSS.

href=”estilos.css” indica el nombre del fichero fuente de los estilos.

Veamos una página web entera que enlaza con la declaración de estilos anterior:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
<p>

Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil. </p>

</body>
</html>
Anuncios

PÁGINAS ESTÁTICAS VS. DINÁMICAS

En la web podemos encontrar, o construir, dos tipos de páginas:

  • Las que se presentan sin movimiento y sin funcionalidades más allá de los enlaces
  • Las páginas que tienen efectos especiales y en las que podemos interactuar.

Las primeras páginas son las que denominamos páginas estáticas, se construyen con el lenguaje HTML, que no permite grandes florituras para crear efectos ni funcionalidades más allá de los enlaces.

Estas páginas son muy sencillas de crear, aunque ofrecen pocas ventajas tanto a los desarrolladores como a los visitantes, ya que sólo se pueden presentar textos planos acompañados de imágenes y a lo sumo contenidos multimedia como pueden ser videos o sonidos

El segundo tipo de páginas se denomina página dinámica. Una página es dinámica cuando se incluye cualquier efecto especial o funcionalidad y para ello es necesario utilizar otros lenguajes de programación, aparte del simple HTML.

Mientras que las páginas estáticas todo el mundo se las puede imaginar y no merecen más explicaciones, las páginas dinámicas son más complejas y versátiles. Para aclarar este concepto, veremos con detalle a continuación qué son las páginas dinámicas.

PÁGINAS DINÁMICAS

Como hemos visto, una página es dinámica cuando realiza efectos especiales o implementa alguna funcionalidad o interactividad.

Además, hemos visto que para programar una página dinámica necesitaremos otros lenguajes aparte del HTML. Sin embargo, nunca hay que olvidarse del HTML, ya que éste es la base del desarrollo web: generalmente al escribir una página dinámica el código de los otros lenguajes de programación se incluye embebido dentro del mismo código HTML.

Una razón por la que construiremos una página dinámica es la simple vistosidad que pueden alcanzar los trabajos, ya que podemos hacer presentaciones más entretenidas de las que se consiguen utilizando únicamente HTML. Pero vamos a ver con calma algunas razones menos obvias pero más importantes.

Supongamos que hemos decidido realizar un portal de televisión donde una de las informaciones principales a proveer podría ser la programación semanal. Efectivamente, esta información suele ser dada por las televisiones con meses de antelación y podría ser muy fácilmente almacenada en una base de datos. Si trabajásemos con páginas HTML, tendríamos que construir una página independiente para cada semana en la cual introduciríamos “a mano” cada uno de los programas de cada una de las cadenas. Asimismo, cada semana nos tendríamos que acordar de descolgar la página de la semana pasada y colgar la de la actual. Todo esto podría ser fácilmente resuelto mediante páginas dinámicas. En este caso, lo que haríamos sería crear un programa (solo uno) que se encargaría de recoger de la base de datos de la programación aquellos programas que son retransmitidos en las fechas que nos interesan y de confeccionar una página donde aparecerían ordenados por cadena y por hora de retransmisión. De este modo, podemos automatizar un proceso y desentendernos de un aspecto de la página por unos meses.

Este hecho lo podríamos aplicar a otras situaciones: podemos preparar el horóscopo de todos los días, las promociones de un sitio de e-comerce.

Podemos hacer una clasificación a las páginas dinámicas en función de dónde se lleva a cabo el procesamiento de la página, es decir, el computador que cargará con el peso adicional que supone que la página realice efectos y funcionalidades.

PÁGINAS DINÁMICAS DE CLIENTE

Son las páginas dinámicas que se procesan en el cliente. En estas páginas toda la carga de procesamiento de los efectos y funcionalidades la soporta el navegador.

Usos típicos de las páginas de cliente son efectos especiales para webs como rollovers o control de ventanas, presentaciones en las que se pueden mover objetos por la página, control de formularios, cálculos, etc.

El código necesario para crear los efectos y funcionalidades se incluye dentro del mismo archivo HTML y es llamado SCRIPT. Cuando una página HTML contiene scripts de cliente, el navegador se encarga de interpretarlos y ejecutarlos para realizar los efectos y funcionalidades.

Las páginas dinámicas de cliente se escriben en dos lenguajes de programación principalmente: Javascript y Visual Basic Script (VBScript), que veremos en detalle más adelante. También veremos el concepto de DHTML y conoceremos las CSS.

Las páginas del cliente son muy dependientes del sistema donde se están ejecutando y esa es su principal desventaja, ya que cada navegador tiene sus propias características, incluso cada versión, y lo que puede funcionar en un navegador puede no funcionar en otro.

Como ventaja se puede decir que estas páginas descargan al servidor algunos trabajos, ofrecen respuestas inmediatas a las acciones del usuario y permiten la utilización de algunos recursos de la máquina local.

PÁGINAS DINÁMICAS DE SERVIDOR

Podemos hablar también de páginas dinámicas del servidor, que son reconocidas, interpretadas y ejecutadas por el propio servidor.

Las páginas del servidor son útiles en muchas ocasiones. Con ellas se puede hacer todo tipo de aplicaciones web. Desde agendas a foros, sistemas de documentación, estadísticas, juegos, chats, etc. Son especialmente útiles en trabajos que se tiene que acceder a información centralizada, situada en una base de datos en el servidor, y cuando por razones de seguridad los cálculos no se pueden realizar en el ordenador del usuario.

Es importante destacar que las páginas dinámicas de servidor son necesarias porque para hacer la mayoría de las aplicaciones web se debe tener acceso a muchos recursos externos al ordenador del cliente, principalmente bases de datos alojadas en servidores de Internet. Un caso claro es un banco: no tiene ningún sentido que el cliente tenga acceso a toda la base de datos, sólo a la información que le concierne.

Las páginas dinámicas del servidor se suelen escribir en el mismo archivo HTML, mezclado con el código HTML, al igual que ocurría en las páginas del cliente. Cuando una página es solicitada por parte de un cliente, el servidor ejecuta los scripts y se genera una página resultado, que solamente contiene código HTML. Este resultado final es el que se envía al cliente y puede ser interpretado sin lugar a errores ni incompatibilidades, puesto que sólo contiene HTML

Luego es el servidor el que maneja toda la información de las bases de datos y cualquier otro recurso, como imágenes o servidores de correo y luego envía al cliente una página web con los resultados de todas las operaciones.

Para escribir páginas dinámicas de servidor existen varios lenguajes, que veremos con detenimiento más adelante. Common Gateway Interface (CGI) comúnmente escritos en Perl, Active Server Pages (ASP), Hipertext Preprocesor (PHP), y Java Server Pages (JSP).

Las ventajas de este tipo de programación son que el cliente no puede ver los scripts, ya que se ejecutan y transforman en HTML antes de enviarlos. Además son independientes del navegador del usuario, ya que el código que reciben es HTML fácilmente interpretable.

Como desventajas se puede señalar que será necesario un servidor más potente y con más capacidades que el necesario para las páginas de cliente. Además, estos servidores podrán soportar menos usuarios concurrentes, porque se requerirá más tiempo de procesamiento para cada uno.

CSS3

CSS es un lenguaje de estilo que permite definir de manera eficiente la representación de los documentos HTML en diferentes dispositivos. Actualmente se encuentra en su versión CSS3, la cual incluye características avanzadas tanto para aplicar aspecto avanzado en elementos de una página como para realizar una maquetación más precisa.

Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles.

CSS está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las capas o layouts, los colores y las fuentes. Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .css, y reducir la complejidad y la repetición de código en la estructura del documento.

La separación del formato y el contenido hace posible presentar el mismo documento marcado en diferentes estilos para diferentes métodos de renderizado, como en pantalla, en impresión, en voz. También se puede mostrar una página web de manera diferente dependiendo del tamaño de la pantalla o tipo de dispositivo. Los lectores pueden especificar una hoja de estilos diferente, como una hoja de estilos CSS guardado en su computadora, para sobreescribir la hoja de estilos del diseñador.

La especificación CSS describe un esquema prioritario para determinar que reglas de estilo se aplican si más de una regla coincide para un elemento en particular. Estas reglas, aplicadas con un sistema llamado en cascadas, las prioridades son calculadas y asignadas a las reglas, así que los resultados son predecibles.

Los elementos básicos del CSS son:

Atributos: Son las palabras que se usan para indicar cual estilo queremos modificar, ejemplo “font” si es el tipo de letra, o “background” si es el fondo.

Valores: Son para definir cómo se va a modificar el atributo, o la propiedad que le daremos.

Selectores: Se usan para definir sobre cuales elementos HTML se va a aplicar los estilos o, si se quiere definir un estilo para toda la página.

A continuación, se muestra la estructura básica de un archivo CSS que contiene todos estos elementos.

CSS.png

LIBRO RECOMENDADO: EL GRAN LIBRO DE HTML5 CSS3 Y JAVASCRIPT (JUAN DIEGO GAUCHAT)

Vivimos una revolución. Internet ha dejado de ser sólo un instrumento de comunicación para convertirse en parte de, prácticamente, todos los aspectos de la vida humana. En este contexto, el lenguaje HTML5 ha adquirido una importancia ·nica. Las aplicaciones de Internet a las que accedemos ahora incontables veces en un día, ya sea desde un ordenador de mesa, un teléfono móvil, una PDA o cualquier otro dispositivo, son posibles gracias a HTML5.

Con este manual aprenderá, a través de ejercicios prácticos soportados por sólidos conocimientos teóricos, a crear toda clase de sitios webs y aplicaciones estructuradas en HTML5, con estilos CS3 y programadas con las más importantes y recientes herramientas de Javascript. Estudiará desde los conceptos más básicos y tradicionales de cada uno de los lenguajes hasta los más utilizados por verdaderos profesionales de la programación. En cada capítulo irá desarrollando diversos códigos que irán ganando complejidad a medida que se avanza en la lección y harán mucho más accesibles los conceptos previamente estudiados.

Mediante el uso de los componentes de los tres lenguajes, las nuevas API que ofrece Javascript y librerías externas, aprenderá a escribir sus propios códigos para crear, programar y optimizar formularios, personalizar la forma en la que se reproduce un archivo de vídeo o de audio, insertar una o más pistas de subtítulos en un vídeo, controlar la entrada y salida de cualquier elemento en el modo de pantalla completa, capturar vídeo en streamig, crear gráficos y animaciones de dos y tres dimensiones, programar un vídeo juego, controlar la apariencia y la forma en la que se comporta el ratón en determinadas circunstancias, utilizar la geolocalización, manipular la historia de navegación del usuario, optimizar el funcionamiento fuera de línea de su sitio, crear aplicaciones de mensajería digital y otras formas de comunicación bidireccional, entre muchos otros conocimientos.

https://drive.google.com/open?id=0B4AoAxhlob6VaUY5RmM0Q3NJa3M

9788426717702.jpg