Programación del lado de servidor

5.1 Introducción al lenguaje

La Programación del lado del servidor es una tecnología que consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web para generar páginas HTML dinámicamente como respuesta.

Todo lo que suceda dentro del servidor es llamado procesamiento del lado del servidor, o server-side processing. Cuando tu aplicación necesita interactuar con el servidor (por ejemplo, para cargar o guardar datos), ésta realiza una petición del lado del cliente (client-side request) desde el navegador, a través de la red usando invocaciones remotas a métodos (remote procedure call, RPC). Mientras se está procesando una llamada RPC, tu servidor está ejecutando código del lado del servidor.

La utilización de las diferentes aplicaciones o servicios de Internet se lleva a cabo respondiendo al llamado modelo cliente-servidor.

Cuando se utiliza un servicio en Internet, como consultar una base de datos, transferir un archivo o participar en un foro de discusión, se establece un proceso en el que entran en juego dos partes. Por un lado, el usuario, quien ejecuta una aplicación en procesador local: el denominado programa cliente. Este programa cliente se encarga de ponerse en contacto con el procesador remoto para solicitar el servicio deseado. El procesador remoto por su parte responderá a lo solicitado mediante un programa que esta ejecutando. Este último se denomina programa servidor. Los términos cliente y servidor se utilizan tanto para referirse a los programas que cumplen estas funciones, como a las computadoras donde son ejecutados esos programas. 

El programa o los programas cliente que el usuario utiliza para acceder a los servicios de Internet realizan dos funciones distintas. Por una parte, se encargan de gestionar la comunicación con el computador servidor, de solicitar un servicio concreto y de recibir los datos enviados por éste; y por otra, es la herramienta que presenta al usuario los datos en pantalla y que le ofrece los comandos necesarios para utilizar las prestaciones que ofrece el servidor.

Cuando nosotros seleccionamos un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (una computadora que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente). 

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él, por ejemplo: ASP, PHP, JSP.

5.2 Elementos de programacion.

CGI

Es el sistema más antiguo que existe para la programación de las páginas dinámicas de servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidor que los ejecuta. 

Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C, C++, Visual Basic o Delphi pueden ser también empleados para construirlos.

Perl

Perl es un lenguaje de programación interpretado, al igual que muchos otros lenguajes de Internet como Javascript o ASP. Esto quiere decir que el código de los scripts en Perl no se compila sino que cada vez que se quiere ejecutar se lee el código y se pone en marcha interpretando lo que hay escrito. Además es extensible a partir de otros lenguajes, ya que desde Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. También desde otros lenguajes podremos ejecutar código Perl.

ASP

La tecnología ASP (Active Server Pages) está estrechamente relacionada con el modelo tecnológico de Microsoft. Intenta ser solución para un modelo de programación rápida ya que programar en ASP es como programar en Visual Basic, por supuesto con muchas limitaciones.

Este modelo tecnológico usa diversos componentes ya desarrollados como algunos controles ActiveX así como componentes del lado del servidor, tales como CDONTS, por ejemplo, que permite la interacción de los scripts con el servidor SMTP que integra IIS.

Se facilita la programación de sitios web mediante varios objetos integrados, como por ejemplo un objeto de sesión basada en cookies, que mantiene las variables mientras se pasa de página a página.

las versiones pre-.NET se denominan actualmente (desde 2002) como ASP clásico.

En ASP 3.0, hay siete objetos integrados disponibles para el programador: Application, ASPError, Request,Response, Server, Session y ObjectContext. Cada objeto tiene un grupo de funcionalidades frecuentemente usadas y útiles para crear páginas web dinámicas.

Desde 2002, el ASP clásico está siendo reemplazado por ASP. NET, que, entre otras cosas, reemplaza los lenguajes interpretados como VBScript o JScript por lenguajes compilados a código intermedio (llamado MSIL oMicrosoft Intermediate Language) como Microsoft Visual Basic, C#, o cualquier otro lenguaje que soporte la plataforma .NET. El código MSIL se compila con posterioridad a código nativo.

PHP

PHP es un lenguaje interpretado de propósito general ampliamente usado y que está diseñado especialmente para desarrollo web y puede ser incrustado dentro de código HTML.

Generalmente se ejecuta en un servidor web, tomando el código en PHP como su entrada y creando páginas web como salida. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno.

Aunque todo en su diseño está orientado a facilitar la creación de página web, es posible crear aplicaciones con una interfaz gráfica para el usuario, utilizando la extensión PHP-Qt o PHP-GTK.

También puede ser usado desde la línea de órdenes, de la misma manera como Perl o Python pueden hacerlo, a esta versión de PHP se la llama PHP CLI (Command Line Interface).

Cuando el cliente hace una petición al servidor para que le envíe una página web, el servidor ejecuta el intérprete de PHP. Éste procesa el script solicitado que generará el contenido de manera dinámica (por ejemplo obteniendo información de una base de datos). El resultado es enviado por el intérprete al servidor, quien a su vez se lo envía al cliente.

Mediante extensiones es también posible la generación de archivos PDF, Flash, así como imágenes en diferentes formatos. Permite la conexión a diferentes tipos de servidores de bases de datos tales como MySQL, Postgres, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite.

PHP también tiene la capacidad de ser ejecutado en la mayoría de los sistemas operativos, tales como UNIX (y de ese tipo, como Linux o Mac OS X) y Windows, y puede interactuar con los servidores de web más populares ya que existe en versión CGI, módulo para Apache, e ISAPI.

JSP

JSP es un acrónimo de Java Server Pages o Páginas de Servidor Java. Es, pues, una tecnología orientada a crear páginas web con programación en Java.

Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de múltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. Por tanto, las JSP podremos escribirlas con nuestro editor HTML/XML habitual.

DHTML

DHTML no es precisamente un lenguaje de programación. Más bien se trata de una nueva capacidad de la que disponen los navegadores modernos, por la cual se puede tener un mayor control sobre la página que antes. 

Cualquier página que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero en este caso nos referimos más a efectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la página, se puede modificar su posición, dimensiones, color, etc. 

DHTML nos da más control sobre la página, gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en páginas web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc.

Para realizar las acciones sobre la página, como modificar la apariencia de una capa, seguimos necesitando un lenguaje de programación del lado del cliente como Javascript o VBScript.

En la actualidad, DHTML también puede englobar la programación en el servidor.

5.3 Aplicación

La Programación del lado del servidor es una tecnología que consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web para generar páginas HTML dinámicamente como respuesta.

Todo lo que suceda dentro del servidor es llamado procesamiento del lado del servidor, o server-side processing. Cuando tu aplicación necesita interactuar con el servidor (por ejemplo, para cargar o guardar datos), ésta realiza una petición del lado del cliente (client-side request) desde el navegador, a través de la red usando invocaciones remotas a métodos (remote procedure call, RPC). Mientras se está procesando una llamada RPC, tu servidor está ejecutando código del lado del servidor.

La utilización de las diferentes aplicaciones o servicios de Internet se lleva a cabo respondiendo al llamado modelo cliente-servidor.

Cuando se utiliza un servicio en Internet, como consultar una base de datos, transferir un archivo o participar en un foro de discusión, se establece un proceso en el que entran en juego dos partes. Por un lado, el usuario, quien ejecuta una aplicación en procesador local: el denominado programacliente. Este programa cliente se encarga de ponerse en contacto con el procesador remoto para solicitar el servicio deseado. El procesador remoto por su parte responderá a lo solicitado mediante un programa que esta ejecutando. Este último se denomina programa servidor. Los términos cliente y servidor se utilizan tanto para referirse a los programas que cumplen estas funciones, como a las computadoras donde son ejecutados esos programas.

El programa o los programas cliente que el usuario utiliza para acceder a los servicios de Internet realizan dos funciones distintas. Por una parte, se encargan de gestionar la comunicación con el computador servidor, de solicitar un servicio concreto y de recibir los datos enviados por éste; y por otra, es la herramienta que presenta al usuario los datos en pantalla y que le ofrece los comandos necesarios para utilizar las prestaciones que ofrece el servidor.

Cuando nosotros seleccionamos un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (una computadora que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).

Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él, por ejemplo: ASP, PHP, JSP.

Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan un pretratamiento.

Cada uno de estos tipos tiene por supuesto sus ventajas y sus inconvenientes. Así, por ejemplo, un lenguaje de lado cliente es totalmente independiente del servidor, lo cual permite que la página pueda ser albergada en cualquier sitio sin necesidad de pagar más ya que, por regla general, los servidores que aceptan páginas con scripts de lado servidor son en su mayoría de pago o sus prestaciones son muy limitadas.

Inversamente, un lenguaje de lado servidor es independiente del cliente por lo que es mucho menos rígido respecto al cambio de un navegador a otro o respecto a las versiones del mismo.

----> Fuente
---->Fuente

[Videos de Muestra(Los videos son tomados de YouTube, no son de mi autoria)]

Video

Video

Video

Programación del lado del cliente

4.1 Introducción a lenguaje

Cuando se programa una página web, en la mayoría de los casos se utiliza los que se conocen como “lenguajes del lado del cliente” (Figura). Es decir, que el servidor no interviene para nada en el proceso de crear la página web solicitada por el usuario.

Los lenguajes utilizados en este caso son el conocido HTML, Java Script o Visual Basic Script (VBScript), si el navegador a utilizar es Microsoft Internet Explorer. Las páginas creadas con estos lenguajes son enviadas al usuario, de forma que el navegador es el encargado de interpretar y mostrarlas por pantalla. Lógicamente, al ser tecnología de tipo cliente, habrá que prestar especial atención  al navegador utilizado, ya que como ocurre en muchas ocasiones, lo que funciona con uno puede no hacerlo con otro, aunque todos dicen estar basados en los estándares del W3C Consortium: Comité de generación de estándares para la Word Wide Web, similar a la ISO, se encarga de generar versiones estándares de HTML, SGML(Standard Generalized Mark-up Lenguaje), XML (Extensible Markup Language), XHTML, las plantillas de estilos CSS (Cascade Style Sheets) etc., pueden ocurrir algunos inconvenientes a la hora de la visualización.

4.2 Elementos de programación

Los elementos de programación los encontramos en todos los lenguajes de programación, por ejemplo en el lenguaje C++ palabras reservadas con las cuales solo ese medio se reconocerá y ejecutara para las aplicaciones que se deseen desarrollar. Cuando hablamos de elementos de programación se debe poner atención en los atributos que se majen, pues si no se conoce el manejo de mayúsculas y minúsculas, lo único que se desarrollara serán errores de sintaxis y orden lógico.

Los lenguajes de lado de cliente se situarán en líneas de código que ha de interpretar el ordenador del usuario, lo cual significa que según el tipo de navegador que tenga podrá ver o no la página que hemos diseñado. Por otro lado como la ejecución la realiza el ordenador del cliente la carga de trabajo recae en él, utilizando menos recursos del servidor.

Un Script del lado del cliente es un programa que acompaña al HTML o que puede estar embebido directamente en él. El programa se ejecuta cuando la máquina del cliente carga el documento o cuando el evento que lo activa sucede. El soporte HTML para Script es independiente del lenguaje de los mismos.

Podemos distinguir dos tipos de Script:

Aquellos que se ejecutan una vez cuando el documento es cargado por el navegador del usuario. Son Scripts que aparecen en el interior de un elemento SCRIPT. Para los navegadores que no puedan o quieran manejar los script, los autores pueden incluir un contenido alternativo con el elemento NOSCRIPT.

Aquellos que pueden ocurrir cada vez que un evento específico suceda. Estos Script pueden ser asignados a distintos elementos a la vez a traves de los eventos intrinsecos de dichos elementos.

4.3 Manipulacion de objetos

La manipulación de objetos cuenta con los mismos principios que los lenguajes de programación que se utilicen. Una de las características de los objetos es la función u objetivo por el cual se crean. Algunos de los objetos que son manipulables son mediante SQL, los que se basan en las bases de datos que se almacenan en los servidores web, las transformaciones que se les realizan son, eliminación, creación, agregar elementos, eliminar elementos, etc.

Los lenguajes de script están diseñados para la manipulación de los eventos y objetos contenidos en una página Web, de forma local y sin necesidad de transmisión alguna por la Red. Son programas incluidos en la página HTML y que son interpretados por el navegador, mejorando la interacción con el usuario. Permiten realizar algunas tareas simples en la parte del cliente:

  

* Algunos cálculos simples 

 

* Validación de los datos de los formularios  

* Mensajes de alerta 

Por lenguaje Script entendemos lenguajes orientados al documento; nunca será posible realizar un programa completo en él, sino que el ámbito de actuación quedará restringido al documento en el que se ejecuta, y donde va inmerso el código script. Ante las acciones realizadas por el usuario, el programa captura el evento relacionado con la acción, y ejecuta el código de atención. Mediante esta técnica, es posible la ejecución de código en muchas acciones comunes en un entorno Web, como pueden ser:

 * apertura de nuevos documentos  

* Pulsación de botones  

* Introducción y envío de datos en formularios ... 

y que son controlados mediante la interceptación de los métodos asociados a cada objeto (pulsación, enfoque, paso por encima, ...). La manipulación de los objetos de la página se realiza de forma directa, es decir, en su definición (en HTML) cada objeto lleva asociado un nombre, que será el que se utilice para acceder a sus propiedades (definidas en la jerarquía de objetos propia de cada lenguaje). De forma resumida, se puede decir que se trata de lenguajes de programación sencillos, con restricciones de acceso a los recursos locales de la máquina (disco duro, memoria), y en los que es posible realizar pequeñas aplicaciones cliente/servidor; aunque el principal ámbito de aplicación es local.

Fuente

[Videos de Muestra(Los videos son tomados de YouTube, no son de mi autoria)]

Video

Video

Video

Video

Lenguaje de Presentación

3.1 Introducción

Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos y que ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un número de reglas sintácticas para poder crear documentos. Uno de los lenguajes mas comunes para presentar información web es HTML.

El lenguaje de presentación es aquel que indica el formato del texto. Este tipo de marcado es útil para maquetar la presentación de un documento para su lectura, pero resulta insuficiente para el procesamiento automático de la información.

El marcado de presentación resulta mas fácil de elaborar, sobre todo para cantidades pequeñas de información. Sin embargo resulta complicado de mantener o modificar, por lo que su uso se ha ido reduciendo en proyectos grandes en favor de otros de marcado mas estructurados. 

3.2 Sintaxis

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del documento, como enlaces, párrafos, imágenes, ect. Así pues, un documento HTML estará constituido por texto y un conjunto de etiquetas para definir la forma con la que se tendrá que presentar el texto, y otros elementos en la página.

La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> y un cierre de tipo </etiqueta>.

Todo lo incluido en el interior de esa etiqueta sufrira las modificaciones que caracterizan a esta etiqueta. Así por ejemplo:

Las etiquetas <b> y </b> difeinen un texto en negrita. Sí en nuestro documento HTML escribimos una frese con el siguiente código:

<b>Esto está en negrita</b>

El resultado Será:

Esto esta en negrita

Las etiquetas <p> y </p> definen un parrafo. Si en nuestro doucmento HTML escribieramos:

<p>Hola, estamos en el parrafo 1</p>

<p>Ahora hemos cambiado de párrafo</>

El resultado sería:

Hola estamos en el parrafo 1

Ahora hemos cambiado de párrafo

Ademas de todo esto, un documento HTML ha de estar deklimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezad, delimitado por <head> y </head> donde colocaremos etiquetas de indole informativo como por ejemplo el titulo de nustra página.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que sera donde colocaremos nuestro texto e imágenes delimitadas a su vez por otras etiquetas como <header> y </header>, así como tambien <footer> y </footer>.

3.3 Selectores

Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio en el capítulo anterior, una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".

La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.

A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un número ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.

El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.

No obstante, la mayoría de páginas de los sitios web se pueden diseñar utilizando solamente los cinco selectores básicos.

Selector Universal

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):

* {
  margin: 0;
  padding: 0;
}

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.

No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacksmuy utilizados, como se verá más adelante.

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

p {
  ...
}

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:

h1 {
  color: red;
}
 
h2 {
  color: blue;
}
 
p {
  color: black;
}

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:

h1 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h2 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:

h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:

h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
 
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:

p span { color: red; }


Si el código HTML de la página es el siguiente:

<p>
  ...
  <span>texto1</span>
  ...
  <a href="">...<span>texto2</span></a>
  ...
</p>


El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendente, un elemento no tiene que ser descendiente directo del otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el que se encuentre.

Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior.

Los selectores descendentes permiten aumentar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los <span> contenidos dentro de un <h1>:

p span  { color: red;  }
h1 span { color: blue; }


Con las reglas CSS anteriores:

Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo.
Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul.
El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.


La sintaxis formal del selector descendente se muestra a continuación:

selector1 selector2 selector3 ... selectorN


Los selectores descendentes siempre están formados por dos o más selectores separados entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.

En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:

p a span em { text-decoration: underline; }


Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.

No debe confundirse el selector descendente con la combinación de selectores:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
 
/* El estilo se aplica solo a los elementos "em" que se
   encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }


Se puede restringir el alcance del selector descendente combinándolo con el selector universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:

p a { color: red; }
 
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>


Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

p * a { color: red; }
 
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>


La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo<p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.

Selector de Clase

Si se considera el siguiente código HTML de ejemplo:

<body>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</body>


¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.

Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:

<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</body>


A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo:

.destacado { color: red; }


El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición.

Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class:

<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>


Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.

A continuación se muestra otro ejemplo de selectores de clase:

.aviso {
  padding: 0.5em;
  border: 1px solid #98be10;
  background: #f6feda;
}
 
.error {
  color: #930;
  font-weight: bold;
}
<span class="error">...</span>
 
<div class="aviso">...</div>


El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas CSS indicadas por el selector .error. Por su parte, el elemento <div> tiene un atributo class="aviso", por lo que su estilo es el que definen las reglas CSS del selector .aviso.

En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el ejemplo anterior:

<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>


¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a destacado? Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho más específico:

p.destacado { color: red }


El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan de un atributo class con valor destacado". De la misma forma, el selector a.destacado solamente selecciona los enlaces cuyo atributo class sea igual a destacado.

De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.

No debe confundirse el selector de clase con los selectores anteriores:

/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
 
/* Todos los elementos con atributo class="aviso" que estén dentro
   de cualquier elemento de tipo "p" */
p .aviso { ... }
 
/* Todos los elementos "p" de la página y todos los elementos con
   atributo class="aviso" de la página */
p, .aviso { ... }


Por último, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en blanco. En el siguiente ejemplo:

<p class="especial destacado error">Párrafo de texto...</p>


Al párrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado y .error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de color rojo, en negrita y con un tamaño de letra de 15 píxel:

.error { color: red; }
.destacado { font-size: 15px; }
.especial  { font-weight: bold; }
 
<p class="especial destacado error">Párrafo de texto...</p>


Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un selector más avanzado:

.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial  { font-weight: bold; }
 
<p class="especial destacado error">Párrafo de texto...</p>


En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es que se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta como "aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y destacado".

Selectores de ID

En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso.

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:

#destacado { color: red; }
 
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>


En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributoid es igual a destacado).

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class.

De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.

Al igual que los selectores de clase, en este caso también se puede restringir el alcance del selector mediante la combinación con otros selectores. El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo <p> que tenga un atributo id igual al indicado:

p#aviso { color: blue; }


A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica sobre muchas páginas HTML diferentes.

En este caso, algunas páginas pueden disponer de elementos con un atributo id igual a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre esos elementos.

No debe confundirse el selector de ID con los selectores anteriores:



/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }
 
/* Todos los elementos con atributo id="aviso" que estén dentro
    de cualquier elemento de tipo "p" */
p #aviso { ... }
 
/* Todos los elementos "p" de la página y todos los elementos con
    atributo id="aviso" de la página */
p, #aviso { ... }


3.4 Tipos de Medios


HTML permite a los autores diseñar documentos que saquen partido de las
características de los medios en los que el documento vaya a ser representado
(p.ej., pantallas gráficas, pantallas de televisión, dispositivos de mano,
navegadores basados en voz, dispositivos táctiles Braille, etc.). Al especificar el
atributo media, los autores permiten a los agentes de usuario cargar y aplicar las
hojas de estilo de manera selectiva.
Las siguientes declaraciones de ejemplo se aplican a elementos H1. Cuando se
proyecten en una reunión de negocios, todos ellos aparecerán en azul. Cuando se
impriman, aparecerán centrados.

<head>
<style type="text/css" media="projection">
h1{color: blue}
</style>
<style type="text/css" media="print">
h1{text-align:center}
</style>
Este ejemplo añade efecto de sonido a los vinculos para su uso en salidas por voz:
<style type="text/css" media="aural" >
A{ cue-before:uri(bell.aiff); cue-after:uri(dong.wav)}
</style>
</head>
El control de medios es particularmente interesante cuando se aplica a hojas de
estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si obtienen
de la red únicamente aquellas hojas de estilo que se apliquen el dispositivo actual.
Por ejemplo, los navegadores basados en voz pueden evitar la descarga de hojas
de estilo diseñadas para la representación visual.


3.5 Modelo de Caja



El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:



Representación tridimensional del box model de CSS



Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
Borde (border): línea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.


El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.

3.6 Aplicación en documento web

La implementación de un lenguaje es la que provee una manera de que se ejecute
un programa para una determinada combinación de software y hardware. Existen
básicamente dos maneras de implementar un lenguaje: Compilación e
interpretación. Compilación es la traducción a un código que pueda utilizar la
máquina. Los programas traductores que pueden realizar esta operación se
llaman compiladores. Éstos, como los programas ensambladores avanzados,
pueden generar muchas líneas de código de máquina por cada proposición del
programa fuente.
Se puede también utilizar una alternativa para traducir lenguajes de alto nivel. En
lugar de traducir el programa fuente y grabar en forma permanente el código
objeto que se produce durante la compilación para utilizarlo en una ejecución
futura, el programador sólo carga el programa fuente en la computadora junto con
los datos que se van a procesar. A continuación, un programa intérprete,
almacenado en el sistema operativo del disco, o incluido de manera permanente
dentro de la máquina, convierte cada proposición del programa fuente en lenguaje de máquina conforme vaya siendo necesario durante el procesamiento de los
datos. El código objeto no se graba para utilizarlo posteriormente.

La siguiente vez que se utilice una instrucción, se la deberá interpretar otra vez y
traducir a lenguaje máquina. Por ejemplo, durante el procesamiento repetitivo de
los pasos de un ciclo o bucle, cada instrucción del bucle tendrá que volver a ser
interpretada en cada ejecución repetida del ciclo, lo cual hace que el programa sea
más lento en tiempo de ejecución (porque se va revisando el código en tiempo de
ejecución) pero más rápido en tiempo de diseño (porque no se tiene que estar
compilando a cada momento el código completo). El intérprete elimina la
necesidad de realizar una compilación después de cada modificación del
programa cuando se quiere agregar funciones o corregir errores; pero es obvio
que un programa objeto compilado con antelación deberá ejecutarse con mucha
mayor rapidez que uno que se debe interpretar a cada paso durante una ejecución
del código.

La mayoría de lenguajes de alto nivel, permiten la programación multipropósito, sin
embargo, muchos de ellos fueron diseñados para permitir programación dedicada,
como lo fue PASCAL con las matemáticas en su comienzo. También, se han
implementado lenguajes educativos infantiles como LOGO que mediante una serie
de simples instrucciones, permitía mover una tortuga entre otras cosas. En el
ámbito de infraestructura de internet, cabe destacar a Perl con un poderoso
sistema de procesamiento de texto y una enorme colección de módulos.


Fuente

Fuente

[Videos de Muestra(Los videos son tomados de YouTube, no son de mi autoria)]
video
Video
Video
Video