UNIDAD 5 Programación del lado del 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.

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.

5.2 Elementos de Programación

PHP (acrónimo de “PHP: Hypertext Preprocessor”) es un lenguaje interpretado de alto nivel embebido en páginas HTML y ejecutado en el servidor.

Para ejemplificar como se estructura un programa en PHP, checaremos el siguiente código para probar nuestro primer programa. El cual, muestra el himno del Tecnológico de Veracruz.

Los programas en PHP inician con ‘<!–?php ‘ y terminan con el tag ‘?>‘. En el código la instrucción echo imprime en pantalla la cadena encerrada entre pares de ‘. Note que entre las líneas encontramos el tag html ‘

‘ lo cual regresa un retorno de línea.

Las variables en PHP no necesitan, a diferencia de otros lenguajes de programación ser declaradas específicamente dado que cuando a una variable se le asigna un valor esta se inicializa en forma automá;tica determinando la cantidad de memoria necesaria para dicha variable.

Los nombres de las variables van precedidas del signo ‘$‘. Los nombres de las variables son sensibles al uso de las mayúsculas y minúsculas. De tal forma que la sintaxis correcta es:

$nombreVariable = valor;

El nombre de una variable también se conoce como identificador y debe cumplir las siguientes normas:

Sólo puede estar formada por letras y números y los símbolos ($ dólar y _ guión bajo).

El primer cará;cter del nombre del identificador o varible debe ser estrictamente el signo de dólar.

Tipos de datos

PHP soporta los siguientes tipos y son definidos en tiempo de ejecución

integer. Son datos de tipo numérico entero

double. Datos numéricos en coma flotante ( manejo de decimales)

string. Cadenas alfanuméricas.

boolean. Valores de tipo Verdadero o Falso como resultado de evaluar una condición, estado de una variable, etc.

array. Matrices

object. Estructuras complejas de datos.

class. Moldes mediante los cuales se crean los objetos

unknown type. Tipo desconocido

NULL.Es el tipo de una variable a la que aún no se le asigna valor alguno.

Para forzar una variable a un tipo concreto use la función settype()

Dado que las variables no se declaran, el tipo se adquiere en tiempo de ejecución al tipo que usted quiera. Dependiendo de la información que contenga, una variable puede ser considerada de uno u otro tipo.

Las cadenas (string) de caracteres se especifican entre uno de dos tipos de delimitadores (‘ o ‘). Encerrada entre doble comillas ‘es posible emplear los siguientes caracteres especiales.

Caracteres especiales o protegidos

Son caracteres de impresión que nos permiten dar formato a un texto.

Nuevamente, si intenta escapar cualquier otro cará;cter, la barra invertida será; impresa también! Antes de PHP 5.1.1, la barra invertida en \{$var} no venía imprimiéndose.

Variables predefinidas

PHP dispone de una gran cantidad de variables que ya está;n definidas, y que tenemos a disposición para usarlas dentro de nuestros script. Para ver todas las variables que tenemos disponibles en nuestro servidor y versión de PHP, es necesario hacer un llamado a la función predefinida phpinfo().

Para obtener las variables predifinidas usaremos. $_SERVER. El cual es un array que contiene información, tales como cabeceras, rutas y localizaciones del código. Las entradas en este array son creadas por el servidor web. No existe garantía que cada servidor web proporcione todas estas entradas, ya que existen servidores que pueden omitir algunas o proporcionar otras que no se encuentran recogidas aquí. Un gran número de estas variables se encuentran recogidas en » especificación CGI 1.1, así que al menos debe esperar encontrar estas entradas. continuación se presentan algunas de las variables predefinidas. El resto de las variables las puede obtener de la pá;gina resultado del programa anterior.

Con los índices de la variable $_SERVER se pueden hacer cosas interesantes, como por ejemplo pedir laHTTP_ACCEPT_LANGUAGE y dependiendo de su contenido, enviar a los usuarios a sitios en su idioma. 

5.3 Aplicación

Con los índices de la variable $_SERVER se pueden hacer cosas interesantes, como por ejemplo pedir laHTTP_ACCEPT_LANGUAGE y dependiendo de su contenido, enviar a los usuarios a sitios en su idioma.

<head>

<meta charset='utf-8'/>

<title>Combox Dependientes</title>

<link href='../../../css/estilo.css' rel='stylesheet' />

<script src='js/jquery-1.10.1.min.js'></script>

<script src='js/js.js'></script>

</head>

<body>

<p><label>Estado</label>

<select class='styled-select' id='estado'></select></p>

<p><label>Municipio</label>

<select class='styled-select' id='municipio'></select></p>

<div id='colonias'>

</div>

</body>

</html>

conexion.php

<?php 

$ruta = 'localhost';

$usuario = 'Usuario';

$key = 'Password';

$db = 'Tu base de datos';

$conexion = mysql_connect( $ruta, $usuario, $key) or die(mysql_error());

mysql_select_db( $db, $conexion ) or die(mysql_error()); 

mysql_query("SET NAMES 'utf8'");

?>

comboEstado.php

<?php

$query = 'SELECT idEstado, estado 

FROM estado ORDER BY estado';

include('conexion.php');

$estados = mysql_query($query, $conexion) 

or die(mysql_error()); 

mysql_close($conexion);

$html = '';

while ($estado = mysql_fetch_assoc($estados)) {

$html.= '<option value="'.$estado['idEstado'].'">';

$html.= $estado['estado'].'</option>'; 

}

echo $html; 

?>

• 
  

UNIDAD 4 Programación del lado del cliente

4.1 Introducción al Lenguaje


JavaScript es un lenguaje de programación usado principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones activadas al pulsar botones y ventanas con mensajes de aviso al usuario.


Técnicamente, JavaScript es un lenguaje de programación interpretado, y no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.


A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems. Su nombre es exclusivamente por marketing, ya que Java era la palabra de moda en el mundo informático y de Internet de la época de desarrollo.


Cómo incluir JavaScript en documentos XHTML


La integración de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript en las páginas web en esta sección solo se presentaran dos de ellas.


Incluir JavaScript en el mismo documento XHTML


El código JavaScript se encierra entre etiquetas <script></script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda definir el código JavaScript dentro de la cabecera del documento (dentro de la etiquetas <head></head>):


Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web.


El principal inconveniente es que si se quiere hacer una modificación en el bloque de código, es necesario modificar todas las páginas que incluyen ese mismo bloque de código JavaScript.


Definir JavaScript en un archivo externo.


Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos XHTML enlazan mediante las etiquetas <script></script> . Colocadas entre las etiquetas <head></head>.


Se pueden crear todos los archivos JavaScript (*.js) que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript como necesite.


Este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar.


Los archivos de tipo JavaScript son simples documentos de texto con la extensión js que se pueden crear con cualquier editor de texto como Notepad, Wordpad, UltraEdit, Vi, etc.


La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código XHTML de la página, además de la capacidad de reutilizar el mismo código JavaScript en páginas del sitio web y que cualquier modificación realizada en el archivo JavaScript se refleja inmediatamente en todas las páginas XHTML que lo enlazan





4.2 Elementos de Programación


Variables


Las variables o identificadores se utilizan para almacenar valores en un programa; cada variable tiene un nombre que permite referenciarla, nombre que se da en base a unas reglas. En JavaScript un nombre o identificador debe comenzar siempre con una letra o un subrayado; los siguientes caracteres pueden ser dígitos o letras; y nunca se puede usar una palabra reservada como identificador (por ejemplo: true, false, null y undefined).


Una variable se puede declarar en JavaScript, de dos formas:


Forma explícita: var nombre_Variable;
Forma implícita: var nombre_Variable = valor;
En el último caso no es imprescindible escribir var, pero es necesario por razones de compatibilidad entre navegadores.


Tipos de variables
Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere almacenar (números, textos, etc.).


Variables numéricas


Almacenan valores numéricos enteros (integer en inglés) o decimales (float en inglés). En este caso, el valor se asigna indicando directamente el número entero o decimal. Los números decimales usan el carácter ( . punto) en vez de ( , coma) para separar la parte entera y la parte decimal:


JavaScript define 3 valores especiales muy útiles cuando se trabaja con números. En primer lugar se definen los valores ±Infinity para representar números demasiado grandes (positivos y negativos) y con los que JavaScript no puede trabajar.


El otro valor especial definido por JavaScript es NaN, cuyo nombre viene de “Not a Number”. De esta forma, si se realizan funciones matemáticas con variables no numéricas, el resultado será de tipo NaN.


Cadenas de texto


Almacenan caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final:


Algunos caracteres especiales son difíciles de incluir en una variable de texto (tabulador, ENTER, etc.) Por otra parte, como las comillas se utilizan para definir el contenido de la variable, no es posible incluir comillas dentro de la propia cadena de texto.


Variables de tipo boolean


Son un tipo de variables que solo pueden tomar uno entre dos valores especiales que representan el valor 'verdadero' y el valor'falso'.


JavaScript convierte automáticamente el resto de variables a sus valores boolean si es necesario. En el caso de los números, el 0 se convierte en false y cualquier otro número distinto de 0 se convierte en true.


Conversión entre tipos de variables


JavaScript incluye un método llamado toString() que permite convertir variables de cualquier tipo a variables de cadena de texto.


JavaScript también incluye métodos para convertir los valores de las variables en valores numéricos. Los métodos definidos son parseInt() y parseFloat(). Cada uno de ellos convierte la variable que se le indica en un número entero o un número decimal. La conversión numérica de una cadena se realiza carácter a carácter empezando por el de la primera posición. Si ese carácter no es un número, la función devuelve el valor NaN.


Si el primer carácter es un número, se continúa con los siguientes caracteres mientras estos sean números.


En el caso de parseFloat(), el comportamiento es el mismo salvo que también se consideran válidos los caracteres que indican la parte decimal del número.


Palabras reservadas
Son palabras especiales que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse como identificadores.




Constantes
Se definen con la palabra clave const. La sintaxis de un identificador de constante es la misma que la de un identificador de variable: debe empezar con una letra o un guión bajo '_' [underscore] y puede contener caracteres alfanuméricos y/o guiones bajos.


const x = 48;


Una constante es asignada en el momento de la declaración y no puede cambiar el valor mediante una asignación o ser re-declarada mientras el script está en ejecución.


Las reglas de ámbito [scope] para constantes son las mismas que para las variables, excepto que la palabra clave const es siempre requerida, incluso para constantes globales. Si la palabra clave es omitida, se asume que el identificador representa a una variable.


No se puede declarar una constante con el mismo nombre de una función o de una variable en el mismo ámbito [scope].


Existen tres constantes predefinidas: true, false y undefined.


Expresiones
Una expresión es cualquier conjunto válido de literales, variables, operadores y expresiones que se evalúan como un único valor; el valor puede ser un número, una cadena o un valor lógico (booleano).


Conceptualmente, hay dos tipos de expresiones: las que asignan un valor a una variable y las que simplemente tienen un valor.


Por ejemplo, la expresión x = 7 es una expresión que asigna a x el valor 7. Esta expresión se evalúa como siete. Dicha expresión usa un operador de asignación.


Por otra parte, la expresión 3 + 4 simplemente se evalúa como siete; no se realiza ninguna asignación. Los operadores usados en dichas expresiones se les llaman simplemente operadores.


JavaScript tiene los siguientes tipos de expresiones:


Aritméticas: se evalúan como un número, por ejemplo 3.14159. (Generalmente usan operadores aritméticos.)
De cadena: se evalúan como una cadena de caracteres, por ejemplo, 'Sofía' o '234'. (Generalmente usan operadores de cadena de caracteres (string).)
Lógicas: se evalúan como verdadero o falso. (A menudo emplean operadores lógicos.)
De objeto: se evalúan como un objeto.
Operadores
Símbolo matemático que denota un conjunto de operaciones que han de realizarse. En JavaScript los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas o de manejo de texto con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.


Operador de asignación.


Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho. El operador básico de asignación es el igual (=), el cual asigna el valor de su operador derecho a su operador izquierdo. Esto es, x = y asigna el valor de y a x.


Operadores de comparación


Un operador de comparación compara sus operandos y devuelve un valor lógico en función de si la comparación es verdadera.


Los operandos pueden ser valores numéricos, de cadena de caracteres, lógicos u objetos. Las cadenas se comparan basándose en el orden lexicográfico estándar, usando los valores Unicode.


Si dos operandos no son del mismo tipo, JavaScript intentará convertir los operandos a un tipo apropiado para la comparación, excepto para los operandos === y !==. Esto acostumbra a resultar en una comparación numérica.


Operadores aritméticos


Los operadores aritméticos toman valores numéricos (tanto literales como variables) como operandos y devuelven un único valor numérico. Los operadores aritméticos estándar son el de suma (+), el de resta (-), el de multiplicación (*) y el de división (/). Estos operadores trabajan igual que en la mayoría de lenguajes de programación, excepto el operador / que devuelve la división real (de coma flotante), no la división entera como sucede en C o en Java.


Operadores lógicos


Los operadores lógicos son generalmente empleados con valores lógicos (booleanos); estos operadores devuelven un valor booleano. Sin embargo, los operadores && y || realmente devuelven el valor de uno de sus operandos, por esto si se emplean con valores no booleanos, podrían devolver un valor no booleano.


Operadores de cadena de caracteres (String)


Además de los operadores de comparación, los cuales pueden ser empleados con los valores de cadena, el operador de concatenación (+) genera otra cadena que es la unión de los dos operandos de tipo cadena. Por ejemplo, 'mi ' + 'cadena' retorna la cadena 'mi cadena'.


El operador abreviado de asignación += también puede usarse para concatenar cadenas. Por ejemplo, si la variable micadena tiene el valor 'Vera', la expresión micadena += 'cruz' se evalúa como 'Veracruz' y asigna este valor a micadena.


Sentencias condicionales
En JavaScript, como en muchos lenguajes, la sentencia para verificar si una condición se cumple y realizar una acción u otra es if.


switch


Esta expresión se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia.


Ciclos
Los ciclos son sentencias esenciales en cualquier lenguaje de programación. JavaScript cuenta con tres: while, do while y for. Hay cuatro partes en todos los bucles. Inicialización, cuerpo, iteración y condición.


while: Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una condición de terminación.


do..while: Como mínimo siempre se ejecutará el cuerpo del bucle una vez, en el bucle while es posible que no se ejecute ni una sola vez el contenido de este.


for:Es el ciclo más común, en el una variable se fija a un valor inicial, que se actualiza con cada ciclo, y cuando el valor cumple una determinada condición, el ciclo se termina.


Hay dos formatos más de ciclos for, aunque no todas se aplican en todos los navegadores y se expondrán en incisos posteriores.


break: La sentencia break se puede colocar dentro de un ciclo o ciclos anidados. Cuando se ejecuta la sentencia break se abandona el ciclo más interno. A todos los efectos la sentencia breakactúa como un salto a la instrucción siguiente al ciclo en el que se ejecuta.


continue: La sentencia continue, no abandona el ciclo si no hace que se ejecute la siguiente iteración. En el ciclo whilela ejecución del continue hace que el flujo del programa salte a la condición. En el bucle for la ejecución del continue ejecuta la expresión de incremento (decremento), para después continuar normalmente con la condición. Es decir, la ejecución del continue evita que se ejecute durante una interacción el resto del cuerpo del ciclo.


Funciones
Una función es un bloque de código con un nombre. Cada vez que se usa el nombre, se llama a la función y el código de la función es ejecutado. Las funciones pueden llamarse con valores, conocidos como parámetros, que se usan como variables.


Las funciones tienen dos objetivos: organización del programa (archivo o documento) y ejecución del código de la función.


El nombre de una función se escribe inmediatamente después del comando function. Todos los nombres de funciones deben ser únicos y diferentes de los nombres de los comandos que usa JavaScript. No puede haber dos funciones con el mismo nombre.


La lista de parámetros (argumentos) de una función se separa por comas. La función usa esos parámetros en las sentencias de su cuerpo que la configuran.


Los argumentos que se le pasan a una función no pueden ser cambiados en su interior pues se pasan por valor.


Hay tres enfoques principales para la creación de funciones en JavaScript: declarativo/estático, dinámico/anónima, y literal.


Muchas tareas de programación que se puede lograr con el enfoque declarativo. Sin embargo es importante comprender el impacto de cada tipo de declaración antes de usarlas.


Los parámetros de una función se pasan por valor, los arrays se pasan por referencia.


Nota:Las funciones pueden regresar más de un valor en la versión 1.7. Sin embargo Internet Explorer no acepta completamente esta especificación.


Javascript tiene por característica no tipificar sus variables y cuando de operaciones matemáticas en particular en la suma dicha característica podría producirnos errores inesperados





4.3 Manipulación de Objetos


El Modelo de Objetos de Documento (DOM - Document Object Model -) describe cómo todos los elementos en una página HTML, tales como campos de entrada, imágenes, etc, se relacionan con la estructura más alta: el propio documento. Llamando al elemento por su nombre correcto DOM, podemos influir en él mediante un lenguaje de programación, e,g. Javascript, Java, etc.


JavaScript por si solo tiene muchas limitaciones pero se han desarrollado muchas y excelentes librerias que le han dado realmente contenido dinámico al desarrollo web. jQuery es uno de los complementos más esenciales para el desarrollo web, usado en millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas del lado del cliente, en Javascript, compatibles con todos los navegadores.


jQuery no es un lenguaje, sino una serie de funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que podemos usar opcionalmente si queremos facilitar nuestra vida cuando programamos en Javascript. A veces nos podemos referir a jQuery como framework o incluso como un API de funciones, útiles en la mayoría de proyectos web.


write
Permite escribir texto html desde Javascript. El texto se escribe directamente el body del html.


Es la forma más fácil de escribir HTML desde Javascript, lo cual no quiere decir que es la mejor manera de escribir código HTML desde Javascript o incluso que va a trabajar en todas las situaciones. De hecho, el método document.write es muy limitado en lo que puedes hacer con él.


El lector debe considerar que document.write sólo funciona con las página que el navegador procesa como HTML.


innerHTML


Sirve para obtener o modificar el HTML del documento HTML. Se utiliza la propiedad InnerHtml para modificar mediante programación el contenido interno entre las etiquetas de apertura y cierre de un control de servidor HTML.


La propiedad InnerHtml no codifica automáticamente los caracteres especiales en entidades HTML, es el programador el responsable de hacerlo.


Crear y accesar elementos


Para crear etiquetas "tag" html debemos usar el método createElement(). Cuya sintaxis es la siguiente:


createElement( tag )


Donde tag es una etiqueta valida en html.


Si necesitamos agregar un nodo es necesario usar el método appendChild(). El cual agrega un nodo al final del arbol. La sintaxis es


appendChild( tag )


El método insertBefore tiene un comportamiento similar al de appendChield, solo que el nodo agregado es puesto antes del padre. La sintaxis es


insertBefore( nuevo tag, referencia )


Ejemplo: Agregar elementos a un documento


HTML


Los elementos son agregados mediante el evento onclick (Línea 7)
La línea 8 declara un elemento div vacio cuya función es servir de contenedor
Javascript


En la línea 5 se crea un objeto de tipo div
El objeto nuevoElemento hereda todas las características de div, por ejemplo innerHTML, color, fontSize.
Se crea una instancia del contenedor
Para agregar los elementos al contenedor usamos appenChild

UNIDAD 3

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 más 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 más 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 tipos de marcado más estructurados.

Se puede tratar de averiguar la estructura de un documento de esta clase buscando pistas en el texto. Por ejemplo, el título puede ir precedido de varios saltos de línea, y estar ubicado centrado en la página. Varios programas pueden deducir la estructura del texto basándose en esta clase de datos, aunque el resultado suele ser bastante imperfecto.

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, etc. 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> Un cierre de tipo </etiqueta>

3.3 Selectores

Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas usadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que permiten un juego muy amplio de selecciones dentro de la página.

El conocimiento en profundidad de los distintos selectores es uno de los aspectos más complejos del lenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo provecho de las CSS.

Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos programas son sólo los más elementales.

La complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ahí donde los diseñadores deberán apelar a sus propios recursos. En esta sección se explican los llamados selectores simples

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 efectos de sonido a los vínculos 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. Hay dos maneras de especificar las hojas de estilos dependientes de los medios: 

· Desde una hoja de estilo con las reglas: 

@import o @media @import url("archivo.css" ) tipo de medio; @media tipo de medio{/* la hoja de estilo para el tipo de medio va aquí */}

 · Especificando el medio de destino dentro del lenguaje del documento <html> <head> <title>Vínculo a un tipo de medio</title> <link rel="stylesheet" type="text/css" media= "tipo_medio1, tipo_medio2" href="archivo.css"> </head> <body> <p>Texto, texto, texto</p> </body> </html> 

Los posibles valores para tipos de medios: 

all | brille | embossed | handheld | print | projection | screen | speech | tty | tv Una regla @media especifica los tipos de medios. Veamos unos ejemplos del uso de la regla @media:  · @media print{body { font-size: 10pt }}  · @media screen{body { font-size: 12px }}

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:

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. La siguiente imagen muestra las cajas que forman la página web de http://www.alistapart.com/ después de forzar a que todas las cajas muestren su borde

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.

avance de curso de asistente web

Uso de los principales formatos básicos de Internet

Se muestra el uso y conversión de los formatos de archivo más utilizados en Internet para integrar documentos, imágenes, audio y vídeo a una página Web.