Unidad 4

Programacion Del lado Del
cliente
Tecnologa WEB
Programacin en el lado del cliente
3 Programacin en el lado del cliente
3.1 Introduccin
Uno de los principales problemas de la ejecucin de aplicaciones distribuidas a travs de
Internet se refiere a la velocidad de transmisin, y ms en concreto, a la cantidad de informacin que
circula por la Red. Esa velocidad se traduce en lentitud de respuesta a los comandos introducidos por
el cliente en los mltiples interfaces de datos que se presentan en los documentos HTML, como son
los formularios, enlaces, imgenes etc.
Para reducir los dos problemas que se plantean (saturacin y lentitud), se plantean soluciones
en el entorno del cliente Web, capaces de manejar los objetos contenidos en las pginas HTML, as
como atender a las acciones realizadas por el cliente, sin necesidad alguna de transmisin hacia el
servidor (que, en estos casos, sera incapaz de ofrecer respuesta a los comandos tratados a nivel local).
La rpida respuesta ofrecida por el programa local permite dar una sensacin ms realista
dentro del navegador, dejando al protocolo nicamente los aspectos relacionados con el envo de
informacin. Se permite as mejorar el aspecto de presentacin de la aplicacin, adems de gestionar
de forma rpida y sencilla algunos aspectos hasta ahora centralizados en el servidor (con el aumento
de demoras que ello provoca).
Tecnologa Web
3-2
Figura 3-1 : Programacin en el navegador
Las tecnologas tpicas que permiten la codificacin de pequeas aplicaciones a ejecutar en el
entorno local del navegador son:
Lenguajes de Script
Applets Java
3.2 Lenguajes de Script
Los lenguajes de script estn diseados para la manipulacin de los eventos y objetos
contenidos en una pgina Web, de forma local y sin necesidad de transmisin alguna por la Red. Son
programas incluidos en la pgina HTML y que son interpretados por el navegador, mejorando la
interaccin con el usuario. Permiten realizar algunas tareas simples en la parte del cliente:
Algunos clculos simples
Validacin 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 actuacin quedar restringido al documento en el
que se ejecuta, y donde va inmerso el cdigo script.
Ante las acciones realizadas por el usuario, el programa captura el evento relacionado con la
accin, y ejecuta el cdigo de atencin. Mediante esta tcnica, es posible la ejecucin de cdigo en
muchas acciones comunes en un entorno Web, como pueden ser:
3-3
apertura de nuevos documentos
Pulsacin de botones
Introduccin y envo de datos en formularios ...
y que son controlados mediante la interceptacin de los mtodos asociados a cada objeto
(pulsacin, enfoque, paso por encima, ...).
La manipulacin de los objetos de la pgina se realiza de forma directa, es decir, en su
definicin (en HTML) cada objeto lleva asociado un nombre, que ser el que se utilice para acceder a
sus propiedades (definidas en la jerarqua de objetos propia de cada lenguaje).
De forma resumida, se puede decir que se trata de lenguajes de programacin sencillos, con
restricciones de acceso a los recursos locales de la mquina (disco duro, memoria), y en los que es
posible realizar pequeas aplicaciones cliente/servidor; aunque el principal mbito de aplicacin es
local.
3.2.1 Lenguajes orientados a objetos

Los lenguajes de Script usados en entorno WEB estn diseados para la manipulacin de los
objetos contenidos en un documento HTML (visualizado a travs del navegador). Dichos objetos se
definen dentro de una jerarqua de objetos, propia de cada navegador (cada uno define la suya propia,
aunque muy parecida entre ellos). Esto causa algunos problemas, por ejemplo el mismo cdigo ser
valido un navegador y producir errores de ejecucin en otro. Una accin inicial muy tpica es detectar
el tipo de navegador usado y actuar en consecuencia.
3.2.2 Insercin en HTML

Se utilizar la etiqueta <script> de la forma siguiente:
<SCRIPTLANGUAJE="VBScript">
<!
<instrucciones>
>
</SCRIPT>
donde se puede ver como se utilizan los comentarios de HTML (), para aquellos
navegadores que no sean capaces de interpretarlo.
Los lenguajes ms comunes son:
JavaScript: Desarrollado por Netscape para su navegador Mozilla. Microsoft Internet
Explorer soporta una versin propia muy parecida denominada JScript.
VBScript: Desarrollado por Microsoft y soportado por Internet Explorer.
Tecnologa Web
3-4
3.2.3 JavaScript
En las lneas siguientes se har un pequeo repaso de la sintaxis de JavaScript. En primer
lugar hay que destacar que este lenguaje no tiene nada que ver con Java, aparte del nombre y la
sintaxis. El mbito de utilizacin, la ejecucin y los objetivos de ambos lenguajes son totalmente
distintos.
Al igual que sucede en C/C++ las sentencias terminan con un punto y coma y se forman
sentencias compuestas mediante llaves; Los operadores son similares, por no decir los mismos, a los
ya conocidos en C/C++: + (que sirve tambin para concatenar cadenas), -, *, /, %, ++, --, =, ==,
!=,<,>,<=>,>=, &&, ||, etc.
Los comentarios se escriben usando la doble barra ( // ) que indica que el resto de la lnea no
se interpreta.
3.2.3.1 Variables
En JavaScript se usa la palabra reservada var para declarar variables. A diferencia de un
lenguaje compilado, no es necesario indicar el tipo de la variable. Esto se deduce del contexto, al usar
la variable el interprete ya sabr de que tipo es.
Ejemplo:
varvariable;
variable=37;//lausocomosifueradetipoentero
variable=hola;//lausocomounacadenadecaracteres
Los arrays se construyen en tiempo de ejecucin, no siendo necesario especificar su tamao.

vararrayDeCadenas=newArray();
arrayDeCadenas[1]="Primeracadena";
arrayDeCadenas[2]="Segundacadena";
//Loselementosdelarraypuedenserdecualquiertipo
3.2.3.2 Estructuras de control

En JavaScript disponemos de las estructuras de control tpicas de C/C++ y adems con la
misma sintaxis. Como se suponen ya conocidas por el lector se har un breve repaso de las mismas.
Estructura if...else
if(numero==0)
{
numero+=10;
}
else
{
numero;
}
3-5
Estructura for
for(contador=1;contador<=10;contador++){
//Sentenciasdelbucle
}
Estructura for ..in

Esta estructura no existe en C y sirve para recorrer todos los elementos de un array.
vartabla=newArray();
for(contadorintabla){
}
Estructuras while y do..while

varnumero=0;
while(numero==1){
}
do{
}while(numero==0);
3.2.3.3 Control de eventos

Un evento es una indicacin de que algo ha sucedido en el entorno del programa. Tpicamente
los eventos los provoca la pulsacin de una tecla, el movimiento del ratn, la carga de una pgina, etc.
Al programador se le ofrece un mecanismo para capturar esos eventos y ejecutar una funcin cuando
estos se produzcan. Este mecanismo evita estar esperando de forma activa a que algo suceda. Los
controladores de evento se asocian al elemento HTML que se desee, indicando cual es el evento a
capturar.
Ejemplo:
<head>
<scriptlanguaje="JavaScript">
functionbienvenida(){
//sentenciasdelafuncion
}
</script>
</head>
<!
Cadavezquesecarguelapginaseejecutalafuncin
bienvenida.
>
<bodyonLoad="bienvenida()">
La lista de eventos disponible es bastante amplia, en la tabla siguiente se muestran algunos de

ellos.
Tecnologa Web
3-6
Evento Accin
OnLoad Terminar de cargarse una pgina
OnUnLoad Salir de una pgina (descargarla)
OnMouseOver Pasar el ratn por encima
OnMouseOut Que el ratn deje de estar encima
OnSubmit Enviar un formulario
OnClick Pulsar un elemento
OnBlur Perder el cursor
OnChange Cambiar contenido o perder el cursor
OnFocus Conseguir el cursor
OnSelect Seleccionar texto
3.2.3.4 Objetos predefinidos

En el lenguaje existen una serie de objetos predefinidos que representan distintos elementos,
tanto del navegador como de la pgina que se est presentando actualmente. Cada uno de estos objetos
puede tener propiedades que pueden ser a su vez otros objetos. Por ejemplo el objeto window que
representa una ventana tiene una propiedad llamada document que representa el documento HTML
que se est presentando y este a su vez contiene un objeto form que contiene todos los formularios de
esa pgina. A continuacin se har una pequea descripcin de los objetos ms tpicos y se remite al
lector a la gua de referencia para una completa descripcin de todos los objetos disponibles y sus
propiedades y mtodos.
Window: Representa la ventana sobre la que estamos actuando.
. open:Permiteabrirunanuevaventana
. close:Cierralaventana
. alert:Abreunaventanaconunmensaje
Document: Representa el documento html
. write:Escribeenlapgina
. form:arrayconlosformulariosdelapgina
History: Pginas visitadas anteriormente.
. back:Retrocedeenlalistadepginasvisitadas
. forward:Avanzaenlalistadepginasvisitadas
Otros objetos:
. Date:Fechaactual
. Navigator:Tipodenavegador
. Screen:Propiedadesdelapantalla
3-7
3.2.3.5 Ejemplos completos

El ejemplo siguiente muestra un script que crea una tabla con los nombres de los das de la
semana, crea un objeto que representa la fecha actual e imprime en la pgina HTML la fecha actual.
<HTML>
<BODY>
<!Comienzodelcuerpodelapgina>
<P>Hoyes:
<SCRIPT>
//arrayconlosnombresdelosdias
varnombreDias=newArray();
nombreDias[0]="Domingo";
nombreDias[1]="Lunes";
nombreDias[2]="Martes";
nombreDias[3]="Miercoles";
nombreDias[4]="Jueves";
nombreDias[5]="Viernes";
nombreDias[6]="Sabado";
//Creamoselobjetofecha
varfecha=newDate();
//Escrituraeneldocumentoactual
//ElmtodogetDayretornaeldadelasemana
//yelmtodogetDateretornaeldadelmes
document.write(nombreDias[fecha.getDay()]);
document.write("y"+fecha.getDate());
</SCRIPT>
</P>
</BODY>
</HTML>
Y la apariencia del cdigo en el navegador es la siguiente:

Figura 3-2 : Fecha actual
Hay que dejar claro que el texto que se muestra depender del da que se ejecute el script y el
ejemplo que se muestra es solamente ilustrativo de la apariencia que tendra la pgina.
Tecnologa Web
3-8
El siguiente ejemplo muestra la creacin de distintas ventanas de alerta, confirmacin y
peticin de datos en funciones que se ejecutan como respuesta a un evento, en este caso la pulsacin
de un botn.
<html><head>
<scriptLANGUAGE="JavaScript">
functionaviso(){
alert("Hedichoquenomepinches");
}
functionconfirmacion(){
varresp=confirm("Estasseguro?");
if(resp==true)
alert("HasrespondidoACEPTAR");
else
alert("HasrespondidoCANCELAR");
}
functionpregunta(){
varresp=prompt("Dimealgo",
"Valorpordefecto");
alert("Hasrespondido"+resp);
}
</script>
<title>Mensajedealerta</title>
</head><body>
<form>
<inputTYPE="button"NAME="Boton"VALUE="Nomepinches"
onClick="aviso()">
<inputTYPE="button"NAME="Boton"VALUE="Confirmacion"
onClick="confirmacion()">
<inputTYPE="button"NAME="Boton"VALUE="Pregunta"
onClick="pregunta()">
</form></body></html>

Figura 3-3 : Mensajes de alerta, confirmacin, ...
3-9
Al pulsar el primer botn se abrir una ventana de alerta:
Al pulsar el botn de confirmacin se abrir la siguiente ventana:
El resultado de la pulsacin se puede recoger en una variable tal y como se muestra en el
ejemplo. Con el ltimo botn se abre una ventana donde el usuario puede realizar una entrada de
datos. En la llamada se especifica el texto a presentar en la ventana y el valor por defecto que debe
presentar la entrada.
En este otro ejemplo, se ejecuta una funcin en respuesta a la pulsacin de un botn que crea
una nueva ventana y escribe en ella una pequea pgina HTML.
<HTML><HEAD>
<SCRIPTLANGUAGE="JavaScript">
//rutinadeatencinalevento
functionNuevaVentana(){
MiVentana=open("","MiPropiaVentana",
"toolbar=no,menubar=no,resizable=yes,status=yes");
MiVentana.document.write("<HEAD><TITLE>Unanueva
ventana</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>Aqupuedes
ponerloquequieras</B></H1></CENTER>");
}
</SCRIPT>
</HEAD><BODY><FORM>
<INPUTTYPE="buttonNAME="Boton"VALUE="Pincha
onClick=NuevaVentana()">
</FORM>
</BODY>
</HTML>
Tecnologa Web
3-10
Figura 3-4 : Apertura de una nueva ventana
Otros ejemplos:
<!Cambialalneadeestadopordefectoenlacarga.>
<BODYonLoad="defaultStatus=Bienvenido';returntrue">
<!Cambialalneadeestadoalpasarelratnencima.>
<AHREF=miPagina.html"
onMouseOver="window.status='Visitamipgina';returntrue">
<!Enlacealapginavisitadaanteriormente.>
<AHREF=javascript:window.history.back()>Atrs</A>
3.2.3.6 Validacin de formularios

Una de las tareas tpicas que se realizan en JavaScript es la validacin de formularios antes del
envo de la informacin a la aplicacin que ha procesarla. Si el usuario no ha rellenado todos los
campos, o al menos aquellos que se consideren imprescindibles, para que se va a enviar esa
informacin incompleta al servidor que lo nico que provocar es el envo de un mensaje de error por
parte de este, con el consiguiente incremento del trfico en la red. ( sin olvidar la carga computacional
que supone para el servidor el recibir mensajes con informacin insuficiente, procesarlos para darse
cuenta de esta circunstancia y responder con una pgina de error )
3-11
El array document.forms contiene todos los formularios de un documento HTML Tambin se
puede acceder a travs del nombre que se le haya dado en la declaracin.
<FORMNAME=miFormulario>
Cada formulario tiene un array elements con los campos del formulario. Tambin puede
accederse a estos campos a travs del nombre que se le haya dado en la pgina HTML. De cada campo
podemos saber su tipo ( type ) y su valor ( value ). Adems de los checkbox y radio buttons podemos
saber si estn marcados ( checked ) y de las listas de seleccin si estn seleccionadas ( selected ).
Ejemplos:
//seaccedealprimercampodelprimerformulariodela
//pginaparasabersiesunbotonysiestseleccionado
if((document.forms[0].elements[0].type==radio)&&
(document.forms[0].elements[0].checked))
//seaccedealcampoasignaturasdelformularionotasdela
//pginaparasabersilaprimeraopcionestseleccionada
if(document.notas.asignatura.options[0].selected)
3.2.3.7 Ejemplos de validacin de formularios

A continuacin se muestra un pequeo formulario que solicita al usuario su DNI. Si el usuario
pulsa el botn de envo sin rellenar el campo correspondiente se le informa y no se enva el formulario.
<HTML>
<HEAD>
<TITLE>Ejemplodeformularios</TITLE>
<SCRIPTLANGUAGE="JavaScript">
functionvalidar(){
if(document.notas.dni.value.length!=0)
returntrue;
else{
alert('Debesdarmetudni');
returnfalse;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORMNAME="notas"
METHOD="POST"
ACTION="cgi_bin/notas.exe"
onSubmit="returnvalidar()">
DNI:<INPUTNAME="dni"TYPE="text">
<HR><INPUTTYPE="submit"VALUE="consulta">
</FORM>
</BODY>
</HTML>
Tecnologa Web
3-12
Siendo la siguiente la apariencia de la pgina en un navegador:
Figura 3-4 : Validacin formularios

En el siguiente ejemplo se muestra un pequeo examen tipo test construido en forma de
formulario. Cuando el usuario desee saber el resultado pulsar al botn y se le informar del nmero
de respuestas correctas.
<html>
<head>
<title>Pginanueva1</title>
<scriptlanguaje="JavaScript">
functionaveriguarNota(examen){
varresultado=0;
//Serecorrentodosloselementosdelformulario
//comprobandosiestanseleccionadosysoncorrectos
for(i=0;i<examen.elements.length;i++)
if((examen.elements[i].type=="radio")&&
(examen.elements[i].value=="bien")&&
(examen.elements[i].checked))
resultado++;
alert("Hasacertado"+resultado+"preguntas.");
returnfalse;
}
</script>
</head>
<body>
3-13
<formNAME="examen"onSubmit="returnaveriguarNota(this);">
<p>LoslenguajesdeScript:<br>
<inputTYPE="radio"NAME="Respuesta1"VALUE="mal">
soncompilados<br>
seejecutansiempreenelservidor<br>
<inputTYPE="radio"NAME="Respuesta1"VALUE="bien">
vanincrustadosenlaspginasHTML<br>
<br>
Elatributo<tt>window.status</tt>contiene:<br>
elvalordelabarradeestado<br>
elvalorpordefectodelabarradeestado<br>
ciertascaractersticasdelaventana<br>
<br>
elmtodo<tt>alert</tt>sirvepara:<br>
hacersonarunpitidodealarma<br>
lanzarunaventanaconinformacin<br>
avisaralnavegadordequehayunproblema<br>
<br>
<inputTYPE="submit"VALUE="Quierosaberminota"></p>
</form></body>
</html>
Figura 3-5 : Examen

Tecnologa Web
3-14
3.2.4 VBScript
Podemos definir VBScript como un subconjunto de instrucciones de Visual Basic, pensado
para escribir scripts y/o pequeas funciones. Al igual que el resto de lenguajes de script, VBScript
trabaja con los objetos que podemos encontrar en la jerarqua de un navegador Web (en este caso, la
jerarqua definida por Microsoft para su plataforma Internet Explorer); para trabajar con dichos
objetos, utiliza los mtodos, propiedades y eventos de que dispone cada uno de ellos.
<HTML>
<HEAD>
<TITLE>EjemplodeformulariosconVisualBasic</TITLE>
<scriptlanguage="VBScript">
functionnotas_OnSubmit
ifdocument.notas.dni.value=""then
msgbox("Debesdarmetudni!")
notas_OnSubmit=false
else
notas_OnSubmit=true
endif
endfunction
</script>
</HEAD>
<BODY>
<FORMNAME="notas"
METHOD="POST"
ACTION="/cgi_bin/notas.exe">
DNI:<INPUTNAME="dni"TYPE="text">
<BR><HR><INPUTTYPE="submit"VALUE="consulta">
</FORM>
</BODY>
</HTML>
En el ejemplo que se muestra puede verse el cdigo necesario para validar un formulario
similar al usado en el ejemplo de JavaScript. En ambos casos tenemos un formulario con un campo de
texto donde el usuario debe teclear su DNI para que sea enviado al servidor. Si el campo est vaco se
presenta un mensaje indicando al usuario que debe dar su DNI.
En VBScript existen varios mtodos para asociar a un evento generado por un control una
funcin que lo procese. En el ejemplo se ha optado por uno de ellos que consiste en seguir unas reglas
de nombrado de las funciones con el siguiente patrn: <nombre control>_<nombre evento>. En el
ejemplo la funcin se llama notas_OnSubmit de forma que se ejecutar cuando el control notas
genere el evento OnSubmit, evento que se genera al pulsar el botn correspondiente. Si la funcin
retorna TRUE los datos del formulario se enviarn al servidor, en caso contrario no se envan. Al
formulario se le da nombre con el atributo NAME.
3-15
3.3 Java. Plataforma y lenguaje

3.3.1 Introduccin
Java es un lenguaje de programacin, desarrollado por Sun Microsystems en 1995, que ha
venido a revolucionar el mercado de los lenguajes de programacin gracias a sus caractersticas.
Quizs, la mejor definicin que se puede hacer de Java es la realizada por la propia Sun Microsystems:
"Javaesunlenguajesimple,orientadoaobjetos,robusto,seguro,portable,
dealtorendimiento,dearquitecturaneutral,interpretado,multihiloydinmico"
Destacan especialmente los Applets, pequeas aplicaciones que se ejecutan en entornos web y
que permite ejecutar programas obtenidos de la red en el propio ordenador de forma totalmente segura.
Los elementos principales de la plataforma de ejecucin Java son:
El lenguaje Java: un lenguaje de programacin.
La Java Platform API: Una librera de clases para la programacin de aplicaciones.
La Mquina Virtual Java: Una CPU virtual con su propio repertorio de instrucciones.
3.3.2 La plataforma de ejecucin Java
Estrictamente hablado, Java es un lenguaje compilado, pero en realidad Java es a la vez

compilado e interpretado. Este es el factor ms importante para hacer de Java un lenguaje seguro y
portable, esto es, que puede ejecutarse en mltiples plataformas ya que la mquina donde se va a
ejecutar la aplicacin se encarga de traducir el cdigo Java a cdigo nativo que puede entender el
microprocesador. La filosofa que sigue Java es que un programador compila su cdigo fuente
utilizando un compilador de Java y obtiene un bytecode (cdigo binario) que es independiente de la
plataforma donde se compil. Este cdigo ser ms tarde interpretado en un entorno de ejecucin que,
este s, debe ser especfico de cada plataforma. Este intrprete es conocido como la Mquina Virtual
Java. Una vez que estos bytecodes son interpretados, se ejecuta la aplicacin.
Esta caracterstica multi plataforma ha supuesto una revolucin en el mundo de la
programacin, y una excelente noticia para los programadores. Todo esto implica que el cdigo es
cdigo Java sea cual sea la plataforma bajo la que se desarrolla la aplicacin o donde sta se ejecuta.
Se puede compilar cdigo fuente en una estacin Unix, y ejecutar la aplicacin en tres mquinas
completamente diferentes Utilizar Java permite que solamente necesite ser mantenido un nico cdigo,
con la certeza de que funcionar en cualquier plataforma, con el consiguiente ahorro de los costes de
desarrollo y mantenimiento que esto supone.
Tecnologa Web
3-16
Figura 3-6 : Entorno de ejecucin Java
En el grfico puede verse como el fichero class con los bytecodes es interpretado por la
Mquina Virtual Java ( JVM ). Esta puede estar construida de diversas formas: en forma de interprete
o en forma de compilador Just In Time (JIT) que realiza la traduccin de los bytecode a cdigo nativo
en tiempo de ejecucin.
3.3.3 Tipos de aplicaciones

Stand - Alone: aplicaciones normales, semejantes a las realizadas con cualquier otro
lenguaje y que residen en algn sistema de ficheros accesible por el usuario.
Applets: cdigo Java empotrado en pginas HTML descargado desde la red y que se
ejecuta en el entorno de un navegador Web. El navegador provee en este caso la JVM.
Figura 3-7 : Tipos de aplicaciones
3-17
3.3.3.1 ASPECTOS DE SEGURIDAD

Las aplicaciones no tienen restricciones en su ejecucin, sin embargo los applets tienen sus
privilegios de ejecucin muy restringidos. Parece lgico no fiarse de un cdigo descargado de la red y
que no estamos seguros de lo que puede hacer.
Un applet normal NO1 puede:
. Accederalsistemadeficheroslocal.
. Lanzarotrasaplicaciones.
. Realizarconexionesaotrasmquinasdistintasdelacual
fuedescargado.
. Apropiarsedeformaexclusivadeunrecursolocal.
Figura 3-8 : Gestin de seguridad

Como se aprecia en la figura, un cdigo local no tiene ningn tipo de restriccin al igual que
cualquier otro tipo de aplicacin. Un cdigo remoto, por ejemplo un applet, cuyo origen es
desconocido o no fiable es sometido a una serie de restricciones. Mediante la firma digital es posible
dar al applet acceso total a los recursos del sistema.
Figura 3-9 : Firma digital
1 Este
NO tan rotundo hay que tomarlo con reservas. Las JVM son programas a menudo con errores de forma
que es posible en algunos casos saltarse esas protecciones.
Tecnologa Web
3-18
3.3.4 Caractersticas del lenguaje

3.3.4.1 Java es un lenguaje orientado a objetos
Figura 3-10 : Metodos y propiedades
El nucleo de la programacin en Java es la clase. Como en otros lenguajes orientados a objeto,
la clase encapsula una serie de propiedades y los mtodos que permiten manipularlas. Dichas
propiedades y mtodos pueden ser publicos, siendo estos accesibles desde otras clases, o privados,
cuando solo son accesibles desde el interior de la clase. Algo importante a tener en cuenta es que en
Java solo se permite una clase publica por fichero, adems el nombre del fichero y de la clase deben
ser el mismo.
publicclassmiClaseextendsclaseBase
{
privateintdatoPrivado;
publicchardatoPublico;
voidmiClase(){//Codigoconstructor}
privateintunMetodoPrivado(floatarg)
{
//Codigo
return1;
}
publicstaticvoidmain(String[]arg){
//Metodomain
}
}
Como se aprecia en el ejemplo, la sintaxis, as como los tipos bsicos existentes son similares
a C/C++. La clase miClase hereda de las propiedades y mtodos de claseBase y debe residir en un
fichero llamado miClase.java. En java no se permite la herencia mltiple.
3-19
3.3.4.1.1 Mtodos especiales

Constructores: Se invocan cuando se crea una instancia del objeto mediante el operador
new. Tienen el mismo nombre que la clase.
Finalizadores: Se invocan cuando se libera la memoria usada por el objeto. Su prototipo
es: protected void finalize() { ... }
3.3.4.1.2 Reciclado de memoria

En java los objetos tienen un ciclo de vida definido: se crean, se usan y se destruyen. En java
un objeto no existe hasta que no se crea una instancia con el operador new. De esta forma la JVM tiene
constancia de cuantos objetos existen en cada momento y de si estn siendo usados o no. Java usa un
gestor de memoria dinmica conocido como recolector de basura ( garbage collector ) que se ocupa de
la liberacin automtica de la memoria ocupada por los objetos que ya no son referenciados, liberando
de esta tarea al programador que habitualmente comente errores produciendo fugas de memoria.
Objetoobj1=newObjeto();
Objetosobj2=newObjeto();
obj1=obj2;
3.3.4.1.3 Bloques
Package: La palabra clave package permite agrupar clases e interfaces. Estas clases
podrn ser importadas ms tarde para ser usadas en otros programas.
Import: Los paquetes de clases se cargan con la palabra clave import,

importjava.util.Date;
importjava.awt.*;
obj1 objeto1
obj2 objeto2
obj1 objeto2obj2 objeto1
objeto que ser

automaticamente liberado
Tecnologa Web
3-20
Ejemplo:
packageTecnologiaWeb.Pilas;
classCPila{
protected
intelementos[];
intcima;
publicCPila(inttam){
elementos=newint[tam];
cima=0;
}
publicvoidMeterEnPila(intdato){
elementos[cima]=dato;
cima++;
};
}
importTecnologiaWeb.Pilas.*;
publicclassEjemplo{
publicstaticvoidmain(Stringargv[]){
CPilapila;
for(inti=0;i<argv.length;i++)
System.out.println(i+:+argv[i]);
pila=newCPila(100);
pila.MeterEnPila(33);
}
}
En el ejemplo se define un paquete llamado tecnologiaWeb.Pilas con una clase llamada CPila
que se usa en otra clase llamada Ejemplo. Esto significa:
los ficheros fuente se llamadan CPila.java y Ejemplo.java y estarn situados en un
directorio de trabajo actual, por ejemplo I:\prueba.
Al compilar el fichero CPila.java se crear el fichero CPila.class, pero situado en el
directorio TecnologiaWeb\Pilas a partir del directorio actual. Esto es:
I:\prueba\TecnologiaWeb\Pilas\CPila.class
Al compilar al fichero Ejemplo.java se crear el fichero Ejemplo.class en el directorio
actual.
Las clases necesarias para el Ejemplo se importan desde el directorio indicado en la
llamada import. En este caso <raiz>/TecnologiaWeb/Pilas
La variable de entorno CLASSPATH debe contener los path de busqueda a partir de los
cuales se buscan las clases. En este caso I:\prueba
3-21
3.3.4.2 Multithread
En java podemos crear flujos o hilos de ejecucin independientes dentro de un programa
Figura 3-11 Procesos y Threads
Para ello es suficiente con heredar de la clase Thread.
classMotorextendsThread{
publicvoidrun(){
for(;;){
//Tareasarealizar
//porelthread
}
}
voidMotor(){};
}
Motorp1=newMotor();//Secreaunhilodeejecucion
Motorp2=newMotor();//Secreaotrohilo
p1.start();//Searrancalaejecuciondelprimero
p2.start();//Searrancaelsegundo
:::::::::::::::
p1.stop();
p2.stop();
3.3.4.3 Robusto: excepciones

Cuando se dice que Java es robusto se tiende a pensar que no se pueden cometer errores al
programar y esto es errneo. Ciertamente se cometen menos errores que en otros lenguajes, por
ejemplo al dejar en manos del sistema (JVM) la liberacin automtica de la memoria no usada, pero
hay ms circunstancias a contemplar.
Programa Java hilo de ejecucin
thread
Contador
de programa
Tecnologa Web
3-22
Las excepciones no son un mecanismo para prevenir errores, son un mecanismo para que
cuando estos se produzcan dar una respuesta o tratamiento correctos a ese error. De hecho hay
excepciones que el compilador obliga a tratar y si el programador se ha olvidado o ha intentado hacer
la vista gorda no se compilar el programa y se indicar en un mensaje de error cual es la excepcin
que hay que tratar. Es como si en C el compilador nos obligar a comprobar todos los cdigos de
retorno que nos dan las funciones y que ha menudo se ignoran.
Ejemplo:
try{
numeros[i]=dividendo/divisor;
}
catch(ArithmeticExcepctionexc){
System.out.println(Hasdividoentre0);
System.exit(0);
}
catch(ArrayIndexOutOfBoundsExcepctionexc){
System.out.println(Estasfueradelarray);
System.exit(1);
}
En el ejemplo se observa la sintaxis a seguir en el tratamiento de excepciones. Hay una

clusula try { } inicial donde va el cdigo susceptible de generar alguna excepcin. En este caso se
trata de una divisin cuyo resultado se pretende guardar en una posicin de un array. Las dos posibles
excepciones son: divisin entre 0 e ndice fuera del array. Cada una de las clusulas catch captura una
excepcin y da el tratamiento correspondiente, que en este caso es sacar un mensaje y abortar el
programa. Hay que resaltar que todo el mecanismo de excepciones no sirve para nada si una vez
producido el error no se le da el tratamiento adecuado.
3-23
3.3.5 Insercin en HTML de Applets Java

La etiqueta HTML que permite insertar un applet es la siguiente:
<APPLETCODE=WIDTH=HEIGTH=[CODEBASE=][ALT=][NAME=]
[ALIGN=][VSPACE=][HSPACE=]><PARAMNAME=VALUE=></APPLET>
CODE : Indica el fichero de clase ejecutable. No se permite un URL absoluto, aunque s

puede ser relativo al atributo opcional CODEBASE.
WIDTH : Indica la anchura inicial que el navegador debe reservar para el applet en
pixels.
HEIGHT : Indica la altura inicial en pixels.
CODEBASE : Se emplea para utilizar el URL base del applet. En caso de no
especificarse, se utilizar el mismo que tiene el documento.
ALT : Muestra un texto alternativo en caso de no poder presentar el applet.
NAME : Otorga un nombre simblico a esta instancia del applet.
ALIGN : Se emplea para alinear el applet permitiendo al texto fluir a su alrededor.
VSPACE : Indica el espaciado vertical entre el applet y el texto.
HSPACE : Funciona igual que el anterior pero indicando espaciamiento horizontal, en
pixels.
3.3.6 Codificacin de applets Java

La clase base de la que deben heredar los applets es Applet. Un ejemplo de cdigo es el
siguiente:
importjava.applet.*;
importjava.awt.Graphics;
publicclassHolaextendsApplet{
Stringmens;
publicvoidinit()
{
mens=getParameter(mensaje);
}//init
publicvoidpaint(Graphicsgc){
gc.drawString(mens,15,10);
}//paint
}//Clase
Tecnologa Web
3-24
Y la etiqueta HTML que permite incluirla en una pgina podra ser:
<APPLETCODE=Hola.classCODEBASE=/applets
<PARAMNAME=mensajeVALUE=Comoestnustedes>
</APPLET>
En el ejemplo aparecen una serie de mtodos que es interesante conocer. A continuacin se

hace una descripcin de estos y de otros mtodos importantes a la hora de codificar un applet.
void init( ) : Este es el punto de arranque del applet. La JVM del navegador llama este
mtodo para inicializar el applet.
void start() : El navegador llama a este mtodo despus de init para comenzar la ejecucin
del applet.
void stop() : El navegador llama a este mtodo para parar la ejecucin del applet, por
ejemplo si se sale del rea de visualizacin.
void destroy () : El navegador llama este mtodo cuando va a descargar el cdigo del
applet. Para que vuelva a ejecutarse debe cargarlo de nuevo y llamar a init.
void paint(graphics gc ) : El navegador llama este mtodo cada vez que debe repintar el
applet. Nunca ser llamado directamente por el programador.
void repaint() : Forma indirecta de llamar a paint. Cuando se llame a este mtodo el
navegador llamar a paint.
String getParameter( String nombre ) : Retorna el valor del parmetro en HTML cuyo
nombre se pasa, null si el parmetro no existe.

void showDocument( URL pagina ) : Sustituye la pgina actual por la pgina que se pasa
como parmetro.
void showDocument( URLpagina, String marco ) : Sustituye la pgina del marco
indicado por la pgina que se pasa como parmetro.
void showStatus( String mensaje ) : Muestra el mensaje en la lnea de estado del
navegador.
URL getDocumentBase() : Retorna la URL de la pgina que contiene el applet.
URL getCodeBase() : Retorna la URL del applet.
3-25
3.3.7 Ejemplo completo

A continuacin se muestra un ejemplo de applet que acta como men. Se dispone de dos
marcos: uno con el men y otro donde se visualiza la seleccin realizada.
3.3.7.1 Pgina de marcos

<html>
<head>
<title>EjemplodeApplet</title>
</head>
<framesetcols="20%,80%">
<noframes>
<body></body>
</noframes>
<framename="indice"src="izquierda.htm">
<framename="principal"src="derecha.htm">
</frameset>
</html>
3.3.7.2 Pgina de menu ( izquierda.htm )

<html><head>
<title>EjemplodeApplets</title></head>
<body><h1>Menu</h1>
<appletcode="Menu.class"codebase="./"width="120"height="100">
<paramname="Texto0"value="DIATEL">
<paramname="Texto1"value="EUITT">
<paramname="Texto2"value="UPM">
<paramname="Texto3"value="RedIriS">
<paramname="Target0"value="principal">
<paramname="URL0"value="http://www.diatel.upm.es">
<paramname="URL1"value="http://www.euitt.upm.es">
<paramname="URL2"value="http://www.upm.es">
<paramname="URL3"value="http://www.rediris.es">
<paramname="BGcolor"value="0000FF">
<paramname="FGcolor"value="FFFF00">
</applet>
</body>
</html>
El applet leer los parmetros durante su inicializacin y presentar un men con las opciones
que se indican. Cada texto tiene asignada una URL y una pgina donde se visualizar ( Target ).
Tecnologa Web
3-26
3.3.7.3 Cdigo del applet

importjava.applet.Applet;
importjava.applet.AppletContext;
importjava.awt.*;
importjava.awt.event.*;
importjava.net.MalformedURLException;
importjava.net.URL;
publicclassMenuextendsApplet
{
Stringtextos[];//Textoapresentarenelmenu
URLenlaces[];//URLdestinodelasopciones
Stringtargets[];//Marcosdondesevanapresentar
intaltoTexto;
intancho,alto;
ColorBGColor,FGColor;
Graphicsgrafico;
Imageimagen;
StringtipoLetra;
intnumPuntos,estilo;
intpuntosLinea,posicion;
/****************
LeelosparametrosdelapaginaHTML
****************/
voidleerParametros(){
inti;
//Obtengoelnumerodetextosquevanaserenlaces
i=0;
while(getParameter("Texto"+i)!=null)
i++;
//Ycreolosarraysconesetamao
textos=newString[i];
enlaces=newURL[i];
targets=newString[i];
for(i=0;i<textos.length;i++)
{
textos[i]=getParameter("Texto"+i);
if(getParameter("URL"+i)!=null)
{
try{
enlaces[i]=newURL(getParameter("URL"+i));
}catch(MalformedURLException_ex){
3-27
try{
enlaces[i]=
newURL(getDocumentBase(),getParameter("URL"+i));
}catch(MalformedURLException_ex2){
System.out.println("Enlacenocorrecto...");
}//catchinterno
}//catchexterno
}//if
if(getParameter("Target"+i)!=null)
targets[i]=getParameter("Target"+i);
else
targets[i]=null;
}//for
ancho=getSize().width;
alto=getSize().height;
//Colordefondo
if(getParameter("BGColor")!=null)
BGColor=
newColor(Integer.parseInt(getParameter("BGColor"),16));
//Colordeltexto
if(getParameter("FGColor")!=null)
FGColor=
newColor(Integer.parseInt(getParameter("FGColor"),16));
}//leerparamertros
/****************
Inicializaciondelapplet.
****************/
publicvoidinit(){
leerParametros();
imagen=createImage(ancho,alto);
grafico=imagen.getGraphics();
puntosLinea=alto/textos.length;
//El0.8esparaqueeltextoocupeel80%delespaciototal
numPuntos=(int)(puntosLinea*0.8);
grafico.setFont(newFont(tipoLetra,estilo,numPuntos));
setBackground(BGColor);
setForeground(FGColor);
posicion=0;
repaint();//Ordenderepintado
}
Tecnologa Web
3-28
/****************
Repintadodelapplet.Lallamaelnavegador
****************/
publicvoidpaint(Graphicsg){
update(g);
}
/****************
Vamosapintarelmenu
****************/
publicvoidupdate(Graphicsg){
inti,CordY,CordX;
Colorfondo,texto;
if(imagen==null)
return;
CordY=((puntosLinea+numPuntos)
grafico.getFontMetrics().getDescent())/2;
for(i=0;i<textos.length;i++){
//Eltextosaldracentrado
CordX=(anchografico.getFontMetrics().stringWidth(textos[i]))/2;
if(i!=posicion){
fondo=BGColor;
texto=FGColor;
}
else{
fondo=FGColor;
texto=BGColor;
}
grafico.setColor(fondo);
grafico.fillRect(0,i*puntosLinea,ancho,puntosLinea);
grafico.setColor(texto);
grafico.drawString(textos[i],CordX,CordY);//Pintaeltexto
CordY+=puntosLinea;
}//for
g.drawImage(imagen,0,0,this);
}//update
3-29
/*****************
Sellamaestemetodocadavezquesepinchasobreelapplet.
*****************/
publicbooleanmouseDown(Evente,intx,inty){
posicion=y/puntosLinea;
if(enlaces[posicion]!=null)
{
if(targets[posicion]!=null)
getAppletContext().showDocument(enlaces[posicion],
targets[posicion]);
else
getAppletContext().showDocument(enlaces[posicion]);
}
returntrue;
}//mouseDown
/*****************
Sellamaestemetodocadavezqueseentrasobreelareadelapplet.
*****************/
publicbooleanmouseEnter(Evente,intx,inty){
returnmouseMove(e,x,y);
}
/*****************
Sellamaestemetodocadavezquesemuevesobreelareadelapplet.
*****************/
publicbooleanmouseMove(Evente,intx,inty){
posicion=y/puntosLinea;
showStatus(enlaces[posicion].toString());
repaint();
returntrue;
}
/*****************
Constructor
*****************/
publicMenu(){
estilo=Font.BOLD;
tipoLetra="Times";
}
}//Class
Tecnologa Web
3-30
3.3.7.4 Apariencia
Figura 3-12 : Applet en funcionamiento
3.4 Algunas direcciones interesantes

http://developer.netscape.com/docs/manuals/communicator/jsguide4
http://www.microsoft.com/Spain/scripting
http://tecsanmartinisc.galeon.com/CLIEN
TE.pdf
Introduccin al Lenguaje
Qu es HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web. Es un lenguaje de
hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por
etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el
resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en
los navegadores (programas que permiten visualizar las pginas web).
Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las
pginas web resultantes del cdigo interpretado.
Versiones de HTML
Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya
existentes, y la creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias
compaas se unieron para formar un nuevo comit encargado de establecer los estndares del HTML. Este comit
pas a llamarse W3C.
En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras proporcionadas por los
navegadores Internet Explorer y Netscape Navigator, que ya haban realizado estensiones sobre el estndar HTML
2.0.
En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de
estilo y los scripts.
En septiembre de 2001 se aprob el estndar HTML 4.01.
Los navegadores. Compatibilidad

Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la
pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta
porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador.
Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar
extensiones de los navegadores para que puedan ser compatibles con esta ltima versin.
Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape
Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las
nuevas funciones incluidas en los borradores.
Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero
posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no
queda reflejado en la pgina.
Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya existentes, o se
aaden nuevas etiquetas.
Como resultado a estas extensiones, habrn pginas cuyo cdigo podr ser interpretado completamente por todos
los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la ltima versin de
HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms actualizados.
En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser interpretada por un
navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sera visualizada en su
totalidad por ningn navegador.
Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda
la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor
nmero de internautas vean sus pginas tal como las ha diseado.
Editores
Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores
que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores
disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento
cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar
rapidez.
Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en
otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML
para poder depurar el cdigo de nuestra pginas.
Algunos de los editores visuales con los que podrs crear tus pginas web son
Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog
Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos.
En aulaClic puedes encontrar los cursos de Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores
ms usados hoy en da.
Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros
mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual
posteriormente, y depurar el cdigo cuando fuera necesario.
Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc
de notas que proporciona Windows.
A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se trata de un
editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML.
Si no sabes cmo trabajar con el Bloc de notas, te lo explicamos aqu.
Cuando realices los ejercicios puedes compaginar dos sesiones de la forma que te explicamos aqu.
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos
de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.
Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente
etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar
etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.
Este cdigo dara como resultado el siguiente texto:
Introduccin al Bloc de notas

Arrancar y cerrar el Bloc de notas
Veamos las dos formas bsicas de arrancar el Bloc de notas.
Desde el botn Inicio
situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn
Inicio, se despliega un men; al colocar el cursor sobre Programas aparece otra lista con los programas que hay
instalados en tu ordenador, buscar Accesorios, seguidamente Bloc de notas, hacer clic sobre l, y se arrancar el
programa.
Desde el icono del Bloc de notas del escritorio.
Para cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedir confirmacin para guardarlo
antes de cerrar el programa.
Escribir en el Bloc de notas
Siempre que se abre el bloc de notas aparece un documento en blanco.
A la hora de escribir en l, funciona como cualquier otro editor de texto, basta con situar el cursor en el documento y
escribir.
Es recomendable insertar una nueva lnea para cada nueva etiqueta HTML, ya que resulta ms facil trabajar de este
modo.
Si escribiramos todo el cdigo seguido nos resultara difcil interpretarlo, por ello es preferible programar insertando
las etiquetas por separado, en diferentes lneas.
A travs del men Formato, opcin Fuente, puedes cambiar la fuente de todo el documento. Si lo deseas, puedes
hacer la letra algo ms grande o pequea.
Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones una vez abierto el Bloc de notas.
Pulsar la combinacin de teclas Ctrl+A.
Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Nota: Como el Bloc de notas sirve originalmente para escribir documentos de texto, cuando le decimos Abrir, por
defecto nos muestra los documentos con extensin .txt, nuestras pginas tienen la extensin .htm o html, por lo que
debemos cambiar en el cuadro de dilogo abrir el tipo de archivo para visualizarlos todos y poder ver as nuestras
pginas.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.
Pulsar la combinacin de teclas Ctrl+N.
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Pulsar la combinacin de teclas Ctrl+G.
Hacer clic sobre el men Archivo y elegir la opcin Guardar.
A la hora de guardar un documento no debes olvidar guardarlo con la extensin htm o html. Por ejemplo, puedes
guardar un documento con el nombre mipagina.htm.
Compaginar dos sesiones

Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con el Bloc de
notas.
1 Se supone que la sesin con el curso est abierta.
2 Abrir la sesin del Bloc de notas.
3 Pulsar con el botn derecho sobre cualquier parte vaca de la barra de tareas, en la parte inferior de la pantalla. Es
la barra en la que se encuentra el botn Inicio.
4 Elegir la opcin Mosaico vertical.
Observa como la pantalla ha quedado dividida en dos partes, como en la figura:
5 Una vez tenemos las dos sesiones con el tamao adecuado, basta hacer clic con el ratn para pasar de la una a la
otra.
Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar .
Esto va bien con monitores grandes ( de 17" o ms), con monitores pequeos quizs prefieras dejar las ventanas
con su tamao normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada Alt,
presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin en la barra de tareas en la ltima lnea
de la pantalla.
Compaginar dos sesiones puede resultarte muy til al realizar los ejercicios. Puedes cargar un documento en el Bloc
de notas y en un navegador al mismo tiempo. Cada vez que realices algn cambio en el cdigo del Bloc de notas y
guardes los cambios, puedes actualizar la pgina cargada en el navegador para ver los cambios que ha sufrido por
las modificaciones en el cdigo.
Para actualizar una pgina en Internet Explorer puedes pulsar sobre el botn .
Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos
de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.
Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente
etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar
etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.
Este cdigo dara como resultado el siguiente texto:
1. Mi primera pgina
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio, Programas,
Accesorios, opcin Bloc de notas.
Seguidamente introduce, en el documento en blanco, el texto siguiente:
Guarda el documento con la extensin htm, con el nombre miprimpag.htm. Puedes guardarlo a travs del men
Archivo, opcin Guardar.
Pulsando dos veces sobre el icono del archivo miprimpag.htm, ste debera abrirse automticamente en el
navegador que tengas instalado en tu ordenador.
El navegador deber mostrar una pgina como la de la derecha.

Como puedes ver, la pgina resultante es una pgina que solamente tiene una lnea de texto.
Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA.
Leccin
II
Estructura de una Pgina
A travs de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo
de informacin, y el atributo content indica el valor de dicha informacin.
Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos, como puede ser "Autor",
"Palabras clave", "Descripcin", etc. Pero debido a que la mayora de buscadores estn en ingls, es preferible que
el tipo de informacin se especifique en ingls.
Los tipos de informacin ms utilizados son los siguientes:
Por ejemplo, el siguiente cdigo indica que el autor de la pgina es aulaclic, que la pgina trata sobre un curso de
HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores:
Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice automticamente cada 30
segundos. En ese caso, deberamos utilizar la accin Refresh (actualizar). Podramos utilizar el siguiente cdigo:
Ahora imaginemos que hemos cambiado la direccin en la que se encuentra nuestra pgina web, y queremos que
cuando algn usuario visite la pgina en la direccin antigua, a los 5 segundos el navegador lo redirija
automticamente a la direccin nueva. En ese caso podramos insertar el siguiente cdigo en la pgina que se
encuentra en la direccin antigua:
De este modo, el navegador realizara la funcin de actualizar la pgina, pero cargando la que se encontrara en la
nueva direccin (URL=http://www.aulaclic.com/index.htm).
A travs de la etiqueta es posible establecer el color o la imagen de fondo de la pgina.

El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color
representado en hexadecimal o por un nombre predefinido.
Si no sabes cmo representar los colores en hexadecimal, o a qu nmero o nombre se corresponde cada
uno de ellos, puedes consultarlo aqu.
Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir:
La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la
imagen.
Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el
mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir:
Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede
modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior).
Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen) y
marginheight (altura del margen).
Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.
Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20 pxeles,
tendremos que escribir:
2. Colores en hexadecimal
Los colores en HTML se representan mediante un nmero hexadecimal.
Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que
puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F.
Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como
por ejemplo #FFFFFF.
Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft
Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que
forman parte del nmero hexadecimal.
A continuacin se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo necesites.
Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal.
Estos colores pueden representarse por su nombre, y son los siguientes:
Leccin III
Texto
1. Caracteres especiales y espacios en blanco
A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco
seguidos slamente se mostrar uno en el navegador. Para conseguir que se muestren varios espacios en blanco
seguidos puede sustituirse cada uno de ellos por .
Por ejemplo, para insertar el texto:
Bienvenidos, esta es mi 1 pgina!
Habra que escribir:
2. Comentarios Saltos de lnea

En ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no sean
visualizados en el navegador, pero s a la hora de editar el documento.
Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores.
Por ejemplo, para insertar el texto siguiente con un comentario:
Bienvenidos, esta es mi 1 pgina!

Habra que escribir:
En general, cuando trabajamos con un editor de texto se produce un salto de lnea al pulsar la tecla INTRO.
Si pulsamos INTRO en un documento HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en el
navegador. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar la tecla INTRO hay que
insertar la etiqueta
donde se desee que se produzca el salto.

Queridos usuarios,
tengo el placer de comunicaros que hay una nueva seccin.
Habra que escribir:

Hola, BIENVENIDOS
esta ES MI PGINA WEB
y esto un texto preformateado
Habra que escribir:
Dicha etiqueta no precisa ninguna etiqueta de cierre.

Es posible especificar algunos atributos de la regla horizontal:
Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio
Bienvenidos a mi pgina.
Habra que escribir:

Queridos usuarios,
tengo el placer de comunicaros que hay una nueva seccin.
Habra que escribir:
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y
generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse segn vayan asociados al tipo de letra o a
la informacin que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de
cierre, y que pueden aplicarse varias etiquetas al mismo texto.
A continuacin se muestran algunas etiquetas asociadas al tipo de letra:
A continuacin se muestran algunas etiquetas asociadas al tipo de informacin:
Las etiquetas ms utilizadas son las asociadas al tipo de letra, ya que son ms fciles de recordar, y en muchos
casos los resultados son los mismos que los de aplicar una etiqueta diferente.
Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributo align,
cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).
Aqu encontraris cursos de formacin muy interesantes.
Habra que escribir:

Aqu encontraris cursos de formacin muy interesantes.
Habra que escribir:

Habra que escribir:
Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina. La diferencia
entre los distintos tipos de encabezado es el tamao de la letra, el tipo de resaltado, y la separacin existente entre
el texto y los elementos que tiene encima y debajo de l. Hay que tener en cuanta que el navegador del usuario es el
que aplicar el estilo del encabezado por lo que el mismo ttulo se puede visualizar de forma diferente segn el
navegador.
Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta
de cierre.
A continuacin se muestran los distintos encabezados existentes:
Para todas estas etiquetas es posible especificar el valor del atributo align.
El lenguaje HTML
Apartado 1: Las etiquetas
Habra que escribir:
Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer
que estas propiedades varen.
A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a
lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a
otro, pero una sola vez).
A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar los valores
down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha).
Tambin es posible establecer un color de fondo, a travs del atributo bgcolor.
Por ejemplo, para insertar la siguiente marquesina:
Esto es una marquesina
Habra que escribir:
Si quieres saber cmo crear listas, consltalo aqu .
Por ejemplo, para insertar en una lista los siguientes elementos:

Perro
Gato
Periquito
Habra que escribir:
Por ejemplo, para insertar la siquiente lista:

Perro
Gato
Periquito
Habra que escribir:
A travs del atributo type es posible elegir el tipo de numeracin, que puede ser 1 (nmeros), a (letras minsculas), A
(letras maysculas), i (numeros romanos en minsculas) o I (nmeros romanos en maysculas).
Por ejemplo, para insertar la siquiente lista:
Perro
Gato
Periquito
Habra que escribir:
Anidar listas
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.
Leccin IV
Hiperenlaces
A travs del atributo href se especifica la pgina a la que est asociado el enlace, la pgina que se visualizar
cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
Visita www.aulaclic.com
Habra que escribir:
2. Tipos de referencias
Referencia absoluta:
Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en Internet, en este
caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la pgina. Si no
se escribe el nombre de la pgina se cargar la pgina de inicio asociada al dominio.
Por ejemplo, "http://www.aulaclic.com" tendr el mismo efecto que "http://www.aulaclic.com/index.htm"
Para insertar el enlace:
Visita www.aulaclic.com
Habra que escribir:
Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto
de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn, estando todos ellos dentro
de una misma carpeta, conocida como carpeta raz del sitio.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raz
del sitio, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
Habra que escribir:
Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el
que se encuentra el actual.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el
documento actual, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
Habra que escribir:
Observa que en este caso no aparece el smbolo "/" delante del nombre del documento. Si el documento t_4_1.htm
se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la misma carpeta que
el documento actual, habra que escribir:
Punto de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnculo debe
ser "nombre_de_documento#nombre_de_punto".
Por ejemplo, para insertar el enlace:
Punto de fijacion Tipos de enlaces
Habra que escribir:
Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijacin se llama tipos.
Al final de este tema vers cmo definir el punto de fijacin.
1. Destino del enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica a travs del
atributo target al que se le puede asignar los siguientes valores:
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se
volvern a ver en el tema de Marcos. De momento slo te interesa retener la opcin _blank y _self.
Para insertar el enlace:
Visita www.aulaclic.com en una ventana nueva
Habra que escribir:
Es interesante utilizar esta opcin cuando la pgina de destino est fuera de nuestro sitio para que cuando el usuario
cierre la ventana del explorador, se encuentre automticamente en la pgina desde la que haba salido (que vuelva a
nuestro sitio).
2. Formato de los enlaces
En general, un texto que tiene un vnculo asociado suele aparecer subrayado.
Cuando el vnculo est definido sobre una imgen, en el borde aparecen una serie de puntitos al pulsar sobre ella.
Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.
Aqui tienes dos vnculos similares de ejemplo:
Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que
se ha establecido un borde para la imagen, como veremos ms adelante.
Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del
vnculo. Suele adquirir la apariencia de una mano sealando.
Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del
ratn se posiciona sobre l, estos cambios estn predefinidos en cada navegador, pero nosotros podemos cambiar
esos colores.
Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la etiqueta . Estos
colores se asignan a travs de los atributos link (vnculo), alink (vnculo activo), y vlink (vnculo visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
Por ejemplo, al insertar el siguiente cdigo:
3. Puntos de fijacin. Anclas

Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al
apartado deseado, en lugar de ir al comienzo del documento.
Para ello se utilizan las anclas, o puntos de fijacin, muy tiles a la hora de crear ndices.
Un ancla necesita que se inserten las
con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres
especiales.
Por ejemplo, para insertar un punto de fijacin delante del siguiente texto:
Texto con ancla
Habra que escribir:
Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior se llama miancla,
podramos crear un enlace que nos llevara directamente a la lnea de texto en la que se encuentra el ancla. Por
ejemplo:
Enlace al ancla
Habra que escribir:
Si pulsas sobre el enlace vers como se vuelve a cargar el documento actual, pero en lugar de cargarse desde el
principio, la primera lnea de texto ser la lnea en la que hemos insertado el ancla.
Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos prescindir
de poner el nombre de la pgina en el atributo href.
En el ejemplo anterior podramos haber escrito:
4. Otros tipos de enlaces

Existen otros tipos de enlaces que no conducen a otra pgina web, los veremos a continuacin:
Correo electrnico:
Abre la aplicacin Outlook Express para escribir un correo electrnico, cuyo destinatario ser el especificado en el
enlace. Para ello la referencia del vnculo debe ser "mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo electrnico a aulaClic, tal como este:
e-mail para aulaclic
Habra que escribir:
Despus de hacer clic en el enlace se abrir el Outlook Express (si el usuario lo tiene instalado) con la pantalla para
redactar un nuevo mensaje y con el campo destinatario rellenado con la direcciondecorreo. Podemos hacer que est
rellenado algn campo ms como es el asunto. En este caso habra que escribir:
Vnculo a ficheros para descarga:

El valor del atributo href normalmente ser una pgina web (con extensin htm, html, asp, php...) pero tambin
puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensin pdf. Cuando
el enlace no es a una pgina Web nos aparecer el cuadro de dilogo que seguro habrs visto alguna vez en el que
el navegador le pide al usuario permiso para descargar el fichero en su ordenador.
El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la
extensin .doc est asociada al programa Word, .pdf al programa Acrobar Reader, .xls al programa Excel...) en este
caso en el cuadro de dilogo aparece una nueva opcin, la de abrir el fichero sin descargarlo en el disco duro del
usuario.
Para nombrar el fichero podemos utilizar segn el caso, una referencia externa, una referencia relativa al sitio o una
referencia relativa al documento.
Por ejemplo, en la carpeta donde se encuentra esta pgina tenemos el fichero Word carta.doc y queremos que
nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el
enlace:
haz clic aqu para descargarte el fichero
De la siguiente forma:
En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta
que nuestra pgina.
Vnculo vaco:
Al pulsar sobre un enlace vaco no se abre ninguna pgina ni archivo, pero el formato es el mismo que el de
cualquier otro enlace. El vnculo debe ser el smbolo almohadilla "#".
Por ejemplo, para insertar el enlace vaco:
Vinculo vacio
Habra que escribir:
Leccin V
Imgenes
Imagen
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o
dotarla de una mayor informacin visual.
Para insertar una imagen es necesario insertar la etiqueta
. Dicha etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a travs del atributo src.

Por ejemplo, para insertar la siguiente imagen:
Habra que escribir:
Teniendo en cuentra que la imagen se llama logo_animales.gif y que est dentro de la carpeta imagenes, que se
encuentra en el mismo directorio que el documento actual (referencia relativa al documento).
Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los documentos html se
encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros
objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar
archivos de audio, etc.
Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web.
Esta informacin puedes consultarla aqu .
1. Formatos de imagen
Las imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son
adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos
navegadores.
Los formatos ms utilizados son el GIF y el JPG, que a pesar de ser imgenes de menor calidad que las imgenes
BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a ver un poco ms sobre estos
formatos:
Formato GIF:
Utilizan un mximo de 256 colores, y son recomendables para imgenes con grandes reas de un mismo color o de
tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animacin.
Formato JPG:
Las imgenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamao de la imagen
es mayor y tarda ms en descargarse se utilizan ms para fotos.
Leer ms: http://www.monografias.com/trabajos93/introduccion-al-lenguaje-html/introduccion-al-lenguajehtml.shtml#ixzz3Y4DuRvAT
Elementos de Programacion
ELEMENTOS DE PROGRAMACIN
Dentro de los elementos de programacin ms utilizados para llevar a cabo una buena
prantica de programacin, estn por ejemplo, los algoritmos, el pseudocdigo, los
diagramas de flujo, los diagramas de bloque, los mapas de entidad relacin, los
diagramas de flujo de datos, describiremos algunas a continuacin:
ALGORITMO
Se entiende como un conjunto finito de pasos a que especifican una secuencia de

operaciones a realizar en orden para resolver un problema especfico o clases de
problemas, es decir, es un mtodo para la solucin del problema.
Es un conjunto de operaciones ordenadas de modo tal en que puedan resolver un

problema, son pocos los saben que el trmino deriva del matemtico astrnomo y
gegrafo musulmn al Jwarizmi.
La ciencia que estudia los algoritmos se llama Algoritmia, siendo la famosa Mquina de
Turing la que ha formalizado sus conceptos en un modelo computacional.
Los algoritmos tienen algo en comn con las funciones matemticas: reciben una
entrada y producen una salida, pero para que pueda ser considerado como algoritmo
debe ser eficiente, finito y definido.
PROPIEDADES
se expresa en trminos de un:
Lenguaje comn
Diagramas de flujo
Pseudocdigo
Lenguajes de programacin
Es importante aclarar que los algoritmos deben expresarse de manera grfica para una
mejor comprensin, a este tipo de grafica se le conoce como diagrama de flujo del
algoritmo.
El algoritmo es de carcter general y puede aplicarse a cualquier operacin matemtica

o a cualquier problema, la formulacin de algoritmos fue uno de los ms grandes
adelantos dentro de la ciencia matemtica ya que a partir de ello se pudieron resolver
infinidad de problemas, para llegar a ser tales deben reunir ciertas caractersticas: una
de ellas es que los pasos que deben seguirse deben estar estrictamente descritos,
cada accin debe ser precisa, y debe ser general, es decir, que pueda ser aplicable a
todos los elementos de una misma clase.
Es de gran importancia aclarar que los algoritmos en s mismos no resuelvan

problemas, se resuelven gracias al producto de ejercer las operaciones dictadas por el
algoritmo, se puede decir que es por el planteamiento mismo, la realizacin de
algoritmos es natural e innata en el hombre y en la mayora de los casos es de tipo
inconsciente, en otras palabras, las personas suelen resolver problemas sin tener que
recurrir a la aplicacin de cierto algoritmo, no obstante al encontrarse con problemas de
un grado de dificultad mayor es necesario detenerse a analizar y pensar en la solucin
de ste.
IMPLEMENTACIN
En programacin, se implementan en forma de sentencias en algn lenguaje de

programacin, de esta manera, la forma de escribir los algoritmos depende del lenguaje
de programacin, tambin pueden representarse grficamente empleando diagramas
de flujo o formas similares, de esta manera, son fcilmente comprensibles,
especialmente para personas que no son programadores. son ms "universales", pues
no dependen de un lenguaje de programacin especfico.
Los algoritmos tambin pueden escribirse en pseudocdigo, lo que tambin los hace
fciles de entender.
Se hacen intentos para que las computadoras interpreten y ejecuten los diagramas de
flujo y los pseudocdigos, pero no logran la flexibilidad, potencia y velocidad de los
algoritmos puramente escritos en un lenguaje de programacin especfico.
Un algoritmo tambin puede expresarse en lenguaje natural, aunque esto puede traer
ambigedades e interpretaciones errneas.
ALGORITMOS EN PROGRAMACIN
Un programa de computadora es un algoritmo que le dice a la computadora los pasos

especficos para llevar a cabo una tarea. Los algoritmos son rigurosamente definidos
para que la computadora pueda interpretarlos.
El orden en que se ejecuta cada uno de los pasos que constituyen un algoritmo es
fundamental, el orden bsico es de arriba hacia abajo, ejecutndose una instruccin
tras otra de un cdigo, puede variar en su flujo u orden de ejecucin de pasos
dependiendo de los valores de inicio o que entran durante su ejecucin; el flujo es
manejado por las estructuras de control.
ALGORITMOS PREDEFINIDOS
Existen algoritmos ya definidos matemticamente que son muy eficientes, como los
algoritmos de bsqueda o el algoritmo, y suelen ser tomados por otros programadores
para utilizarlos dentro de sus propios cdigos.
La mayora de los sistemas expertos utilizan algoritmos para el razonamiento, este

planteamiento tiene una limitacin importante: el sistema es capaz de resolver
solamente las situaciones previstas por quien ha diseado el algoritmo.
Existen distintos tipos de algoritmos de razonamiento:
Algoritmos estticos, es decir, algoritmos que funcionan siempre igual,

independientemente del tipo de problema tratado.
Por ejemplo, los sistemas basados en el mtodo de resolucin.
Algoritmos probabilsticos, es decir, algoritmos que no utilizan valores de verdad
booleanos sino continuos.
Algoritmos adaptativos, es decir, algoritmos con cierta capacidad de aprendizaje.
DIAGRAMAS DE FLUJO
Los diagramas de flujo son una manera de representar visualmente el flujo de datos a
travs de sistemas de tratamiento de informacin, los diagramas de flujo describen que
operaciones y en que secuencia se requieren para solucionar un problema dado.
Un diagrama de flujo u organigrama es una representacin diagramtico que ilustra la

secuencia de las operaciones que se realizarn para conseguir la solucin de un
problema, los diagramas de flujo se dibujan generalmente antes de comenzar a
programar el cdigo frente a la computadora, los diagramas de flujo facilitan la
comunicacin entre los programadores y la gente del negocio, desempean un papel
vital en la programacin de un problema y facilitan la comprensin de problemas
complicados y sobre todo muy largos, despes de haber hecho el diagrama de flujo, en
relativamente fcil escribir el programa en cualquier lenguaje de alto nivel, nos dan
ventaja al momento de explicar el programa a otros, por lo tanto, est correcto decir
que un diagrama de flujo es una necesidad para la documentacin mejor de un
programa complejo.
SMBOLOS GRFICOS
Dentro de los smbolos fundamentales para la creacin de diagramas de flujo, los

smbolos grficos son utilizados especficamente para operaciones aritmticas y
relaciones condicionales. La siguiente es una lista de los smbolos ms comnmente
utilizados:
+
Sumar
Menos
Multiplicacin
Divisin
Mas o menos
Equivalente a
>
Mayor que
<
Menor que
Mayor o igual que
Menor o igual que
<>
Diferente de
Si
No
True
False
--
Decremento en 1 unidad
++
Incremento en 1 unidad
REGLAS PARA LA CREACIN DE DIAGRAMAS
1.- Los Diagramas de flujo deben escribirse de arriba hacia abajo, y/o de izquierda a
derecha.
2.- Los smbolos se unen con lneas, las cuales tienen en la punta una flecha que indica
la direccin que fluye la informacin procesos, se deben de utilizar solamente lneas de
flujo horizontal o vertical.
3.- Se debe evitar el cruce de lneas, para lo cual se quisiera separar el flujo del
diagrama a un sitio distinto, se pudiera realizar utilizando los conectores. Se debe tener
en cuenta que solo se van a utilizar conectores cuando sea estrictamente necesario.
4.- No deben quedar lneas de flujo sin conectar.
5.- Todo texto escrito dentro de un smbolo debe ser legible, preciso, evitando el uso de
muchas palabras.
6.- Todos los smbolos pueden tener ms de una lnea de entrada, a excepcin del
smbolo final.
7.- Solo los smbolos de decisin pueden y deben tener ms de una lnea de flujo de
salida.
PSEUDOCODIGO
El pseudocdigo es un lenguaje de pseudoprogramacin utilizado para escribir

algoritmos computacionales, como lenguaje de pseudoprogramacin, el pseudocdigo
es una imitacin de uno o ms lenguajes de programacin, de esta manera podemos
encontrar pseudocdigos orientados a lenguajes de programacin como Pascal, Java,
C, C++, u otros.
El objetivo del pseudocdigo es permitir que el programador se centre en los aspectos

lgicos de la solucin, evitando las reglas de sintaxis de los lenguajes de programacin,
no siendo el pseudocdigo un lenguaje formal, los pseudocdigos varan de un
programador a otro, es decir, no hay un pseudocdigo estndar, todo documento en
pseudocdigo debe permitir la descripcin de:
Instrucciones primitivas
Instrucciones de proceso
Instrucciones de control
Instrucciones compuestas
Instrucciones de descripcin
ESTRUCTURA A SEGUIR EN SU REALIZACIN:
Cabecera:
Programa
Modulo
Tipos de datos
Constantes
Variables
Cuerpo:
Inicio
Instrucciones
Fin
SENTENCIAS DE PROGRAMACION
Las sentencias son los elementos bsicos en los que se divide el cdigo en un lenguaje
de programacin, un programa no es ms que un conjunto de sentencias que se
ejecutan para realizar una cierta tarea.
(* ... *)
begin
(* ... *)
if (a<>b) then
begin
aux := a ;
a := b ;
b := aux
end ;
writeln('a vale ',a,' y b vale ',b)
end.
Las sentencias, se dividen en simples y estructuradas. Las simples sern las que
tratemos en este tema, dejando para el siguiente las estructuradas.
SENTENCIAS SIMPLES
Las sentencias simples se dividen en:
sentencia de salto incondicional (goto):
Se utilizaba mucho en los primeros lenguajes de programacin porque era la nica

manera de saltar de una instruccin del programa a otra.
La forma que tiene de trabajar es la siguiente:

1.- Se pone al principio de una lnea una etiqueta, es como una seal que marca el
sitio.
2.- Y se hacen llamadas a goto desde otras partes del cdigo indicando la etiqueta de
la instruccin que se quiere ejecutar a continuacin
Es una mala herramienta de programacin y se puede cambiar por las sentencias de

control repetitivas y alternativas.
Sentencia de llamada a procedimiento:

Esta sentencia consiste en llamar a un procedimiento, y se hace poniendo el nombre
del procedimiento seguido de un punto y coma.
Mediante el uso de procedimientos facilitars la resolucin de problemas, la legibilidad

de tu cdigo y la depuracin de los programas, lo que hace es dividir un programa
grande en otros ms pequeos para llamarlos cuando se requieran, la declaracin de
procedimientos se suele hacer justo antes del cuerpo principal del programa.
Sentencias de asignacin:
Es una de las instrucciones ms comunes en un programa, permite dar un primer valor
o cambiar el valor a una variable.
La sintaxis: Variable: = expresin o llamada a funcin
Mientras que la parte de la izquierda slo puede ser una variable, la de la derecha
puede ser una expresin o una llamada a una funcin, dentro del trmino expresin se
incluyen valores constantes y variables, en el siguiente ejemplo se puede ver unas

cuantas asignaciones:
begin
(* ... *)
x := 10; (* literal constante *)

y := w; (* "w" puede ser constante o variable *)
z := maximo(x,y); (* llamada a una funcion *)
valor_medio := (a + b) / 2;
(* ... *)
end.
LAS EXPRESIONES: OPERANDOS Y OPERADORES
Una expresin es una combinacin de operandos y operadores, los operandos pueden

ser: Constantes literales o con nombre, variables y otras expresiones, lo que se hace
con una expresin es evaluarla para que devuelva un valor.
Dentro de las expresiones distinguimos dos clases segn el tipo de datos que
devuelven al evaluarlas:
Aritmticas: las que devuelven un valor numrico

Lgicas: las que devuelven true o false
Las expresiones se utilizan fundamentalmente en las asignaciones y en las partes
condicionales de las sentencias if, while y repeat. Ejemplo:
begin
i:= 1;
encontrado:= false;
while (i < final) and (not encontrado) do begin
(* mirar el elemento en la posicin i *)
(* si es, cambiamos "encontrado" a "true" *)
i:= i + 1
end
end.
En el while se revisa: si hay ms elementos y si aun no lo hemos encontrado, si no se

cumple alguna de las dos condiciones se sale del bucle.
Evaluacin de expresiones: Para evaluar una expresin, slo hay que saber sumar,
restar, si un nmero es mayor que otro.
Hay tres reglas de prioridad a seguir para evaluar una expresin:
Primero, los parntesis (si tiene)

Despus, seguir el orden de prioridad de operadores
Por ltimo, si aparecen dos o ms operadores iguales, se evalan de izquierda a
derecha.
VARIABLES
Una variable es una localizacin o casillero en la memoria principal que almacena un

valor que puede cambiar en el transcurso de la ejecucin del programa, cuando un
programa necesita almacenar un dato, necesita una variable, toda variable tiene un
nombre, un tipo de dato y un valor, antes de poder utilizar una variable es necesario
declararla especificando su nombre y su tipo de dato, para declarar variables se tienen
los siguientes formatos:
Declaracin de una variable: tipo nombre
Declaracin de varias variables con el mismo tipo de dato: tipo nombre1, nombre2,
nombre3,...
Donde:
Tipo: es el tipo de dato de la variable que puede ser:

Entero: si la variable almacenar un nmero entero.
Real: si la variable almacenar un numero decimal.
Carcter: si la variable almacenar un carcter.
Cadena: si la variable almacenar un conjunto de caracteres.
Lgico: si la variable almacenar el valor verdadero o el valor falso.
Nombre de las variables: el nombre de la variable debe comenzar con una letra, un
smbolo de subrayado o un smbolo de dlar, los dems caracteres del nombre puede
ser letras, smbolos de subrayado o smbolo de dlar, debe considerarse tambin que
una letra mayscula se considera diferente de una letra minscula.
ELEMENTOS BASICOS PARA LA PROGRAMACION LENGUAJE C++
El lenguaje C++ est compuesto por:
32 palabras clave, comunes a todos los compiladores de C.

Palabras clave aadidas por cada compilador de C (no estndar).
Sintaxis formal del lenguaje.
Indica cmo se organiza (estructura) un programa; cmo se terminan las sentencias;

cmo se escriben cada una de las instrucciones,es decir, son las reglas para escribir
correctamente un programa en C.
Algunas caractersticas del lenguaje C: Distingue entre maysculas y minsculas, todas

las palabras clave se escriben en minscula, los nombres de las palabras clave no
pueden usarse para identificar a variables o funciones, las 32 palabras claves definidas
por el estndar ANSI son: auto, double int, struct, break, else, long, switch, case, enum,
register, typedef, char, extern, return, union, const, floa,t short, unsigned, continue, for,
signed, void, default, goto, sizeof, volatile, do, if, static, y while.
Estructura general de un programa en C
Todos los programas en C constan de una o ms funciones.

La funcin principal main() SIEMPRE est presente, es la nica que obligatoriamente
debe existir.
- es la primera funcin llamada cuando se ejecuta un programa
- controla toda la actividad desarrollada por el programa, es la encargada de hacer las
llamadas al resto de funciones.
Seccin de includes (para la inclusin de libreras/bibliotecas)

#include <librera> o bien
#include librera
Seccin de defines
#define constante valor
Seccin para la declaracin de constantes
const <tipo> <identificador> = <valor>;
Prototipos de funciones y procedimientos
Tipo_devuelto Nombre(lista de parmetros);
Funcin main (Programa principal)
int main()
{Declaracin de variables locales;
Sentencia;
...
return 0;
}
Implementacin de funciones y procedimientos
Tipo_devuelto Nombre(lista de parmetros)
{Declaracin de variables locales;
sentencia;
...
return resultado;
}
Se pueden poner comentarios, toda instruccin en C debe terminar con un punto y

coma (;), tipos, Variables y Constantes
Tipos de Datos Fundamentales
E/S POR CONSOLA CON FORMATO
El trmino con formato se refiere a que estas funciones leen y escriben datos en varios
formatos bajo control del programador.
printf( ): Imprime una cadena de datos en pantalla su prototipo es el siguiente: La

cadena de formato consiste en 2 tipos de elementos: caracteres que se mostrarn en la
pantalla y rdenes de formato que definen la forma en que se muestran los argumentos
posteriores. Una orden de formato empieza con % y va seguido por uno de los
siguientes cdigos de formato, debe haber el mismo n de argumentos que de rdenes
de formato y deben aparecer en el mismo orden y coincidir en el tipo.
scanf( ): Es la rutina de entrada por consola de propsito general, puede leer todos los
tipos de datos que suministra el compilador y convierte los nmeros automticamente
al formato interno apropiado, es el complemento de printf( ). Su prototipo es: int
scanf("%x1%x2...", &arg1, &arg2,...); los %xi indican qu tipo de dato se va a leer a
continuacin.
Ordenes de formato argumentos: Todas los argumentos (excepto las cadenas de

caracteres) deben estar precedidos del operador &(direccin).
Constantes de carcter con barra invertida: Son necesarias para poder imprimir
caracteres especiales, como un retorno de carro, comillas dobles, comillas simples,
tabuladores, etc.
CDIGO SIGNIFICADO
\b Espacio atrs
\t Tabulacin horizontal
\n Salto de lnea
\r Retorno de carro
\a Alerta
\\ Barra invertida
\ Comillas dobles
\ Comilla simple
\x Constante hexadecimal \o Constante octal
Debido a que el C tiene muy pocas palabras clave, suple esta carencia con una serie
de funciones, que realizan acciones muy frecuentes, agrupadas en unas libreras (cada
librera contiene un determinado nmero de funciones), a cuyo conjunto se le llama
Biblioteca, para poder utilizar una determinada librera hay que incluir su archivo de
cabecera, al principio de nuestro programa, mediante #include:
#include <nombre archivo cabecera>
Los principales archivos de cabecera estndar son:
CONIO.H Funciones de manejo de pantalla

CTYPE.H Funciones de manejo de caracteres (ANSI C)
DIR.H Funciones de manejo de directorio
IO.H Rutinas de E/S de tipo UNIX
MATH.H Funciones matemtica (ANSI C)
STDIO.H Funciones de E/S estndar
STDLIB.H Declaraciones variadas y funciones de propsito general (ANSI C)
STRING.H Funciones para trabajar con cadenas de caracteres (ANSI C)
TIME.H Funciones para manipular la hora y fecha del sistema (ANSI C)
http://www.sites.upiicsa.ipn.mx/polilibros/portal/polilibros/p_terminados/PolilibroFC/Unid
ad_III/Unidad%20III_7.htm#
Manipulacin de objetos
Aprenda HTML5 en 5 minutos!
No hay duda, HTML5 es un tema candente para los desarrolladores. Si usted necesita un curso
acelerado para comprender con rapidez los fundamentos de la funcionalidad de HTML5, est en el lugar
correcto.
Hablaremos del nuevo lienzo para dibujo y animacin semntico de marcado, el soporte de audio y
video, y como usar HTML5 con navegadores anteriores. Podra tomar un poco ms de cinco minutos,
pero les prometo que tratar de hacerlo rpido. No se vaya, vale la pena!
Marcado semntico y diseo de pgina

Hay una gran historia acerca de una universidad que, cuando construy sus campus, no creo un solo
sendero para caminar. Simplemente sembraron reas de csped y esperaron.
Un ao ms tarde, el pasto se desgast en donde la gente caminaba ms frecuentemente. As que es en
donde la universidad construy las aceras.
Tiene todo el sentido! Las aceras estaban exactamente donde la gente andaba.
Los nuevos elementos semnticos del HTML5 se basaron en exactamente esa misma lgica (vase
el W3C gua de diseo para "Pave the Cowpaths").
Los elementos semnticos describen su significado o propsito claramente al navegador y al
desarrollador. Comprese con (por ejemplo) la etiqueta <div>. La etiqueta <div> define una divisin o una
seccin de un documento HTML, pero no nos dice nada acerca de su contenido o transmite sentido claro
alguno.
< div >
Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas <div>. Esto
da ms significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar
el propsito de ese marcado.
< div id ="header">
En HTML5 hay nuevos elementos semnticos enriquecidos que transmiten el propsito del elemento a
ambos desarrolladores y navegadores.
< header >
El W3C obtuvo datos de miles de millones de pginas web existentes para descubrir los ID y nombres de
clase que los desarrolladores ya estaban utilizando. Una vez que se descart div1, div2, etc. , tuvieron
con una lista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que
convirtieron en normas.
Aqu estn algunos de los nuevos elementos semnticos en HTML5:
article
aside
figcaption
figure
footer
header
hgroup
mark
nav
section
time
Debido a la riqueza semntica, probablemente pueda adivinar lo que la mayora de estos elementos
hacen.
Pero por si acaso, aqu va una visualizacin:
Los Headers y footers resultan claros, mientras que nav crea una barra de men o navegacin.
Puede utilizar sections y articles para agrupar su contenido. Por ltimo, el elemento aside puede ser
usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.
Este es un ejemplo sencillo de cdigo que utiliza estos elementos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link href="css/html5reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
Este es el primer artculo. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</section>
<figure>
<img width="85" height="85"
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
alt="Jennifer Marsman" />
<figcaption>Jennifer Marsman</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2011</footer>
</body>
</html>
Quiero llamar a unos cuantos elementos nuevos ms en este cdigo
Ha notado que el elemento hgroup que agrupo a mis encabezados h1 y h2?
El elemento mark me permiti resaltar o marcar el texto importante. Finalmente, los
elementos figure y figcaption especifican una figura en mi contenido (como una imagen, grfico,
foto, un fragmento de cdigo, etc.) y me dejan asociar un pie con la firugra.
As es como la pgina web se vera combinada con algo de CSS. (NOTA: Ped prestado el CSS de mi
talentoso compaero Brandon Satrom y su TechEd talk, pero el efecto final menos que bello fes culpa
ma).
Ahora, imagine esto en manos de alguien que sea realmente bueno en CSS (que no lo soy). El resultado
es muy potente. El carcter descriptivo del HTML los hace sper fcil de manejar.
Por ltimo, si usted est tratando de seguirlo en Visual Studio, pero se encuentra con lneas
serpenteantes en todas partes que indican que VS no entiende los elementos HTML5,asegrese de
que tiene Visual Studio 2010 SP1instalado.
Luego, en el men de Visual Studio, vaya a Herramientas, Opciones. En la parte izquierda panel de
navegacin, expanda el Editor de texto, HTML y, a continuacin, haga clic en Validacin. Desde el men
desplegable seleccione HTML5. Esto le dar compatibilidad HTML5 IntelliSense. Fiu!
Para ir ms a profundidad en elementos semnticos, revise:

Cmo habilitar el soporte de estndar HTML5
La seccin de semntica de la especificacin W3C de HTML5
Adntrese en el captulo de semntica de HTML5 titulado " Qu significa todo esto?
".
Dibujo en HTML5 usando el elemento Canvas

Otro elemento novedoso en HTML5 es la etiqueta <canvas> Es exactamente a lo que suena, una
superficie de dibujo en blanco. Necesita usar JavaScript para manipular y dibujar sobre el lienzo.
Es posible que desee dar a su elemento canvas una id de atributo para que pueda tener acceso
mediante programacin desde su cdigo JavaScript (o si est usando jQuery y es el nico lienzo en la
pgina, usted puede tener acceso a el utilizando $('canvas') sin necesidad de ponerle nombre).
Tambin puede (opcionalmente) especificar una altura y una anchura para el lienzo. Entre <canvas> y
</canvas>, se puede especificar un texto para mostrar en los navegadores que no soportan el elemento
canvas.
Este es un ejemplo sencillo de cmo utilizar canvas para dibujar. (Estoy intentando dibujar labandera de
Escocia. Por favor perdone las inexactitudes.)
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw blue rectangle

ctx.fillStyle = '#0065BD';
ctx.fillRect(0, 0, 125, 75);
// Draw white X
ctx.beginPath();
ctx.lineWidth = "15";
ctx.strokeStyle = "white";
ctx.moveTo(0, 0);
ctx.lineTo(125, 75);
ctx.moveTo(125, 0);
ctx.lineTo(0, 75);
ctx.stroke();
</script>
</body>
</html>
Esto es lo que el cdigo genera:
Veamos ahora el cdigo.
En primer lugar, voy a crear el lienzo y a darle una ID de "myCanvas". Si este cdigo fuera
vistoo en un navegador que no soporta el elemento canvas HTML5, mostrara "Su navegador no soporta
la etiqueta canvas" en lugar de dibujar la bandera. .
Despus, tengo una secuencia de comandos. Recuerde, que la etiqueta canvas es slo un
contenedor para grficos; debe usar JavaScript para dibujar y representar grficos sobre ella. En primer
lugar, tomo una referencia al lienzo utilizando la ID "myCanvas" y, a continuacin, obtengo el contexto del
lienzo que proporciona propiedades y mtodos para la elaboracin y manipulacin de la grfica sobre el
lienzo. He especificado " 2d" para usar un contexto en dos dimensiones para dibujar en la pgina.
A continuacin, dibujo el rectngulo azul. Uso fillStyle para especificar el color azul.
UsofillRect para dibujar el rectngulo, especificando el tamao y la posicin. Al llamar fillRect(0, 0,
125, 75) significa: comenzando en la posicin (0, 0), la esquina superior izquierda, dibujar un rectngulo
con ancho=125 alto=75 pxeles.
Por ltimo, dibujo la X blanca sobre la bandera. En primer lugar solicito beginPath para
iniciar el proceso pintar en una ruta. Especifico lineWidth (ancho de lnea) de 15 pxeles
(utilizando el mtodo de adivinar y revisar para intentar diferentes valores hasta que se vea bien) y
un strokeStyle de "blanco" para trazar la ruta del color blanco. A continuacin, trazo la ruta
utilizando moveTo y lineTo . Estos mtodos posicionan el "cursor" para dibujar; la diferencia es que
moveTo mueve el cursor sin trazar una lnea y lineTo dibuja una lnea mientras se desplaza. Empezar
movindome a la posicin (0, 0), la esquina superior izquierda y, a continuacin, trazar una lnea a (125,
75), la esquina inferior derecha. Despus me muevo a la posicin (125, 0), la esquina superior derecha y,
a continuacin, trazar una lnea a (0, 75), la esquina inferior derecha. Por ltimo, el
mtodo stroke hace que estos trazos se vean.
Comparacin rpida de Canvas vs SVG
Grficos vectoriales escalables (SVG) es un estndar para dibujar en la ventana del navegador. Con la
liberacin de Canvas de HTML5, muchas personas se preguntan en qu difieren.
En mi opinin, la mayor diferencia es que canvas utiliza el modo inmediato de
representacin y SVG utiliza modo retenido de representacin. Esto significa que
canvas hace directamente la representacin de los grficos en la pantalla. En mi cdigo anterior, una vez
que la bandera se dibuja, el sistema lo olvida y no se conserva nada. Hacer un cambio requerir un
redibujado completo. En comparacin, SVG conserva un modelo completo de los objetos que se han
representado. Para efectuar un cambio, simplemente tiene que cambiar, por ejemplo, la posicin del
rectngulo y el explorador determinara cmo volver a hacerla. Esto es menos trabajo para los
desarrolladores, pero tambin resulta ms pesado para mantener un modelo.
Vale la pena considerar la capacidad de formatear SVG mediante CSS adems de JavaScript. Un lienzo
se puede manipular solamente a travs de Javascript.
He aqu una resea de alto nivel de otras diferencias:
ABSTRACCIN
ELE MENTOS
CANVAS
SVG
Basado en pixeles (bitmap

dinmico)
Basado en formas
nico elemento HTML
Varios elementos grficos

que pasarn a formar parte
del Modelo de objetos de
Documento (DOM)
CONTROLADOR
Modificados solamente
mediante script
Modificados a travs de
scripts y CSS
>MODELO DE
EVENTO
La Interaccin del Usuario

es granular (x,y)
Interaccin con el Usuario

es abstrada (rect, ruta)
RENDIMIENTO
El rendimiento es mejor
con menor superficie y/o
mayor nmero de objetos
El rendimiento es mejor
con menor nmero de
objetos y/o una superficie
ms amplia
Para una comparacin ms detallada, quiero dirigirlos hacia algunas de las sesiones (de donde extraje
este fabuloso cuadro, con permiso):
Patrick Dengler's "Ideas sobre cundo usar SVG y cundo Canvas"

Jatinder Mann's "Canvas HTML5 a profundidad"
John Bristowe's "Una introduccin a Canvas HTML5"
Soporte de Audio y Video

Una de las grandes caractersticas que es nueva en HTML5 es la capacidad de reproduccin de audio y
videos. Antes de HTML5, necesitaba un plug-in como Silverlight o Flash para esta funcionalidad. En
HTML5, puede incrustar audio y video utilizando las nuevas etiquetas <audio> and <video>.
Desde una perspectiva de programacin, los elementos de audio y vdeo son muy sencillos de utilizar.
(Les dar una explicacin ms a fondo de sus atributos ms abajo.) Los elementos de audio y vdeo
tambin son soportados por todos los navegadores principales (las ltimas versiones de Internet
Explorer, Firefox, Chrome, Opera y Safari). Sin embargo, la parte difcil es que se necesita codecs para
reproducir audio y vdeo, y diferentes navegadores soportan diferentes codecs. (Para una magnfica
explicacin sobre contenedores de video y codecs leahttp://diveintohtml5.net/video.html.)
Afortunadamente, esto no es un obstculo. El soporte para audio y video se implement de
manera brillante, donde no existe la posibilidad de tratar diferentes formatos de archivo (el
navegador intentar cada uno y, a continuacin, pasar al siguiente si no puede reproducirlo).
Como prctica recomendada, debe proporcionar mltiples fuentes de audio y video para contemplar
diferentes navegadores. Tambin puede retroceder a Silverlight o Flash. Por ltimo, cualquier texto entre
las etiquetas de apertura y cierre (como <audio> and </audio>) aparecer en los navegadores que no
soporten el elemento de audio o video.
Por ejemplo:
<audio controls="controls">
<source src="laughter.mp3" type="audio/mp3" />
<source src="laughter.ogg" type="audio/ogg" />
Su navegador no soporta el elemento de audio.
</audio>
Con este cdigo, el navegador intentar primero reproducir el archivo laughter.mp3. Si no tiene los
cdecs adecuados para reproducirlo, intentar a continuaci reproducir el archivo laughter.ogg. Si el
elemento de audio no es reconocido por el navegador en absoluto, mostrar el texto "Su navegador no
soporta el elemento audio" en donde debi estar el control audio.
Una salvedad para audio y video: no incluye gestin de derechos digitales (DRM); tiene que implementar
esto por s mismo como desarrollador. Vea este enlace del W3C que explica su opinin. (Si necesita
usar contenido con DRM, tambin revise la documentacin Silverlight DRM, que podra resultar una
solucin ms fcil.)
Ahora, ahondemos en cada uno de estos nuevos elementos.
Audio
En primer lugar, echemos un vistazo a <audio> con ms detalle.
</audio>
Ya tuvimos ocasin de discutir el problema de de tratar cada una de las fuentes hasta que que encuentre
una que se puede reproducir.
Tenga en cuenta que existe un atributo controls. Esto le mostrar los controles de reproduccin de
audio incluyendo un botn de reproduccin/pausa, el tiempo, un botn de silencio y los controles de
volumen. En la mayora de las situaciones, es bueno mostrar controles de audio al usuario; no me
gusta visitar un sitio web con sonido y a la imposibilidad de detenerlo, silenciarlo
o bajar el volumen. No?
As se ven los controles de audio en Internet Explorer:
Los controles se ven diferente en distintos navegadores. As se ven en Chrome (con una cancin
sonando). El control volumen aparece cuando pasa el puntero por el cono de sonido en el extremo
derecho.
Aqu estn los controles de Firefox (con una cancin en pausa). Al igual que Chrome, tambin tiene un
control de volumen que aparece (no se muestra) al desplazar el puntero sobre el icono de sonido en el
extremo derecho.
Otros atributos divertidos en el elemento de audio incluyen:
ATT R I B U T E
POSSIBLE
VAL U E S
DESCRIPTION
A U TOP L AY
autoplay
Se inicia la reproduccin de audio tan pronto

como est listo
CONTROLS
controls
Muestra los controles de reproduccin de

audio en la pgina
LOOP
loop
Hace que el audio se repita cada vez que

termina
PRELOAD
auto,
metadata,
none
Determina si se debe cargar el audio

cuando se carga la pgina. El valor auto
cargar el audio, metadata cargar slo
metadatos asociados con el archivo de
audio, y none evitar la precarga. (Este
atributo ser ignorado si la reproduccin
automtica est especificada)
SRC
(algn URL)
Especifica la direccin URL del archivo de

audio a reproducir
Por lo que este cdigo muestra no slo mostrar controles de reproduccin de audio, sino que tambin
iniciar la reproduccin de audio inmediatamente y lo repetir una y otra vez en un bucle.
</audio>
Si le gustara jugar con el elemento <audio> > en su navegador hay un increble editor
enhttp://w3schools.com que le permite editar algo de cdigo para ver que pasa. Tambin puede echar
un vistazo al artculo cmo agregar un reproductor de audio HTML5 en su sitio.
Video
Veamos ahora el elemento <video> element.
<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Como hemos dicho anteriormente, el elemento de vdeo cuenta con el apoyo de mltiples fuentes, que
intentar en orden y luego seguir con la siguiente opcin.
Al igual que el audio, el video tiene un atributo controls. Aqu est una captura de pantalla de los
controles de vdeo en Internet Explorer:
Otros atributos divertidos en el elemento de video incluyen:

Ads by Super RadioAd Options
VALORES
POSIBLES
DESCRIPCIN
AUDIO
muted
Establece el estado predeterminado del

audio (actualmente, "silenciado" es la nica
opcin)
A U TOP L AY
autoplay
Se inicia la reproduccin de video tan pronto

como est listo
CONTROLS
controls
Muestra los controles de reproduccin de

video en la pgina
HEIGHT
(valor en
pxeles)
Establece la altura del reproductor de vdeo
LOOP
loop
Hace que el audio se repita cada vez que

termina
ATR I B U TO
(algn URL)
Especifica la direccin URL de una imagen

para representar el vdeo cuando no se
dispone de datos de vdeo
PRELOAD
auto,
metadata,
none
Determina si se debe cargar el video cuando

se carga la pgina. El valor auto cargar el
video, metadata cargar slo metadatos
asociados con el archivo de video, y none
evitar la precarga del video. (Este atributo
ser ignorado si la reproduccin automtica
est especificada)
SRC
(algn URL)
Especifica la direccin URL del archivo de

video a reproducir
WIDTH
(valor en
pxeles)
Establece el ancho del reproductor de vdeo
POSTER
Una vez ms, para jugar con el elemento <video>, utilice el editor en http://w3schools.comque le
permite editar algo de cdigo de ejemplo y ver qu sucede.
Para obtener ms informacin acerca de video y audio revise:
5 Cosas que usted necesita saber para empezar a usar <audio> y <video> hoy
Cmo agregar un reproductor de audio HTML5 en su sitio
W3C Schools HTML5 video
Desarrolle con HTML5 manteniendo a la vez soporte para los

navegadores ms antiguos
Hemos hablado mucho de las nuevas y geniales capacidades de HTML5, incluidos los nuevos elementos
semnticos, la etiqueta canvas para dibujar, y el soporte de audio y video.
Tal vez crea que esto es realmente genial, pero no puede adoptar HTML5 cuando
muchos de los usuarios no tienen navegadores compatibles con HTML5
todava. Sin mencionar que los navegadores que S soportan HTML5 admiten diferentes piezas del
mismo; no todas las nuevas funcionalidades de HTML5 son compatibles con todos los navegadores y las
diferentes funcionalidades pueden ser aplicadas de manera diferente.
Pero hay una manera de utilizar las nuevas caractersticas sin que su sitio ya no sea accesible para los
usuarios con navegadores antiguos. Puede utilizar polyfills .
Segn Paul Irish, un polyfill es "una correccin que imita una futura API, proporcionando funcionalidad
para navegadores antiguos." Un polyfill llena los vacos en navegadores antiguos que no soportan las
funciones de HTML5 en su sitio. Aprender a utilizar polyfills le permitir utilizar HTML5 hoy sin olvidarse
de los usuarios con navegadores antiguos.
Una manera de conseguir soporte polyfill es la biblioteca JavaScript Modernizr (pero haymuchos
polyfills disponibles). Modernizr agrega capacidad de deteccin para que usted pueda comprobar
concretamente si un explorador tiene soporta para, por ejemplo, el elemento canvas y ofrecer una opcin
de copia de seguridad si no lo tiene.
Veamos un ejemplo. Recuerda el ejemplo de cdigo que he utilizado cuando se introducen elementos
semnticos y diseo de pgina ? Aqu est de nuevo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
Este es el primer artculo. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul>
</ul>
</section>
<figure>
<img width="85" height="85"
src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg"
alt="Jennifer Marsman" />
<figcaption>Jennifer Marsman</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2011</footer>
</body>
</html>
Este cdigo contiene una serie de nuevos elementos HTML5 que no son soportadas en navegadores
antiguos. Recuerde que en Internet Explorer 9 se vea as:
Podemos usar Internet Explorer developer tools para ver cmo se vera en versiones anteriores de IE. En
Internet Explorer, presione la tecla F12 para acceder a las herramientas de programador.
Tenga en cuenta que el modo de navegacin (en la barra de men gris en la parte superior) est
configurada ahora para IE9. Haga clic en el Modo Navegacin, y en el men desplegable que aparece,
seleccione "Internet Explorer 8" (que no tiene soporte HTML5).
Despus de hacer este cambio y cambiar a un navegador no compatible con HTML5, esto es lo que
aparece en mi pgina web:
Aunque parece que es un problema enorme, no es realmente tan malo. La razn por la que esto no
funciona es que IE8 no reconoce los nuevos elementos HTML5 que estoy usando, as que no los agrega
al DOM, por lo que no se pueden aplicar estilos mediante CSS.
Sin embargo, con solo agregar una referencia a Modernizr (sin hacer ningn otro cambio en el cdigo!)
entonces obligar a meter estos elementos en el DOM. Descrguelo
dehttp://www.modernizr.com/download/ y agregue una referencia en la seccin <head> de este
modo:
<head>
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-2.0.6.js" type="text/javascript"></script>
</head>
Agregu dos referencias de script, uno para jQuery y uno Modernizr. No necesito realmente la referencia
jQuery en este punto, pero sin duda las necesitaremos para el siguiente script, as que por eso la agrego
ahora.
Con este simple cambio ahora mi sitio se ve en Internet Explorer 8:
No es perfecto, pero est muy cerca de la versin original que vemos en Internet Explorer 9. Modernizr
agreg estos nuevos elementos HTML5 que IE8 no ha entendido en el DOM y ya que estn en el DOM
podramos formatearlos mediante CSS.
Pero Modernizr hace mucho ms que eso! Tenga en cuenta que una de las diferencias entre
nuestras versiones IE8 e IE9 de la pgina web es que la versin IE9 tiene una bonita esquina
redondeada en los dos artculos y la figura, y la versin IE8 no. Tambin podemos utilizar Modernizr para
corregir esto.
if (!Modernizr.borderradius) {
$.getScript("script/jquery.corner.js", function() {
$("article").corner();
$("figure").corner();
});
}
</script>
En este script, estamos comprobando el objeto Modernizr para ver si hay soporte para "borderradius"
(una caracterstica CSS3). Si no, yo uso un script jQuery llamado jquery.corner.js (que est disponible
para su descarga en http://jquery.malsup.com/corner/ y requiere esa referencia adicional a jQuery
que hice antes). A continuacin, simplemente llamo el mtodo esquina del script de mis artculos y
cifras para darles esquinas redondeadas.
O bien, puede hacer esto una forma ligeramente diferente. Modernizr tiene un cargador de recursos
condicional (no incluido) llamado Modernizr.load(), basado en Yepnope.js. Esto le permite cargar slo
los scripts polyfilling que necesitan sus usuarios, y cargar scripts de forma asncrona y en paralelo que a
veces puede ofrecer una mejora de rendimiento. Para obtener Modernizr.load, tiene que incluirlo en una
versin personalizada de Modernizr que usted tiene que crear
en http://www.modernizr.com/download/; no est incluido en la versin de desarrollo. Con
Modernizr.load, podemos escribir un script similar a este:
Modernizr.load({
test: Modernizr.borderradius,
nope: 'script/jquery.corner.js',
callback: function () {
$('article').corner();
$('figure').corner();
}
});
</script>
En resumen, este implementa la misma funcionalidad que la secuencia anterior. Modernizr.load primero
prueba la propiedad booleana "Modernizr.borderradius" para ver si es compatible. Luego, nope define
los recursos para cargar si test es falso. Dado que IE8 no soporta la propiedad CSS3 "borderradius",
cargar jquery.esquina.js script. Por ltimo,callback especifica una funcin para que se ejecute cada
vez que la secuencia de comandos haya terminado de cargar, por lo que invocamos el mtodo "corner"
en mis artculos y figuras como hicimos antes. Hay un breve tutorial sobre Modernizr.load
enhttp://www.modernizr.com/docs/#load si quiere ir ms a fondo.
Ahora, utilizando cualquiera de estos scripts, nuestro Internet Explorer versin 8 (que no soporta HTML5)
se ve as:
Por lo tanto, usando polyfills y herramientas como Modernizr podr utilizar la nueva funcionalidad HTML5
y an as dar una buena experiencia para navegadores antiguos. Para obtener ms informacin, consulte
la seccin http://www.diveintohtml5.net/detect.html que describe en detalle cmo detecta
Modernizr caractersticas HTML5.
Resumen
En esta introduccin a HTML5, cubrimos el marcado semntico, lienzo, audio y video, y utilizar HTML5
manteniendo el soporte a los navegadores ms antiguos. Pero tambin observamos que hay muchas
cosas que no cubrimos: microdatos, almacenamiento, CSS3, etc. Aqu hay algunos recursos para
continuar aprendiendo sobre HTML5:
IE Test Drive incluso si usted no usa Internet Explorer, este es un sitio increble. Contiene
muchas demostraciones: Demostraciones rpidas, Demostraciones HTML5, Demostraciones grficas y
Demostraciones de Navegador . Prubelas en su navegador favorito! Este sitio tambin tiene enlaces a
otros recursos.
Beauty of the Web muestralos mejores sitios en la web que sacan provecho de la aceleracin de
hardware de HTML5 y las caractersticas de anclado de Internet Explorer 9
BuildMyPinnedSite todo el cdigo, ideas, y las muestras que usted necesita para usar anclado e
integracin con Windows
HTML5 Labs es un sitio donde Microsoft prueba especificaciones anticipadas e
inestables de los cuerpos de normalizacin web tales como W3C. Puede jugar con
prototipos como IndexedDB, WebSockets, FileAPI y Media Capture API.
Videos
Brandon Satrom's "Application Development with HTML5" talk at TechEd 2011 de Brandon
Satrom es una fabulosa charla de una hora que le muestra lo que tiene que saber para desarrollar con
HTML5
Charlas sobre HTML5 en MIX 2011 una pltora de sesiones HTML5
Herramientas
Muchas herramientas de desarrollo ya son compatibles con HTML5. Pruebe estas:
Visual Studio 2010 SP1 el SP1 aade HTML5 bsico, CSS3 IntelliSense y validacin.
Para mayor informacin
consultehttp://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-invisual-studio-2010-sp1.aspx.
Actualizacin de estndares web para Microsoft Visual Studio 2010 SP1 esta es una
extensin que Visual Studio agrega actualizando HTML5, IntelliSense y validacin CSS3 en
Visual Studio 2010 SP1, sobre la base de la actual especificacin W3C.
WebMatrix HTML5 es soportado por defecto (aadiendo una nueva pgina HTML
utiliza el doctype HTML5 por defecto y cdigo de plantilla)
Actualizacin de herramientas ASP.NET MVC 3
El dilogo Nuevo Proyecto incluye una casilla de verificacin para activar las
plantilla de de proyecto de HTML5.
Estas plantillas aprovechan Modernizr 1.7 para proporcionar soporte de

compatibilidad para HTML5 y CSS3 en exploradores de nivel inferior.
http://elcentrohtml5.sourceforge.net/Aprenda-HTML5-en-5-minutos#

Unidad 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unidad 4

Uploaded by

Copyright:

Available Formats

Programacion Del lado Del

3.2 Lenguajes de Script

3.2.1 Lenguajes orientados a objetos

3.2.2 Insercin en HTML

Los arrays se construyen en tiempo de ejecucin, no siendo necesario especificar su tamao.

3.2.3.2 Estructuras de control

Estructura for ..in

Estructuras while y do..while

3.2.3.3 Control de eventos

La lista de eventos disponible es bastante amplia, en la tabla siguiente se muestran algunos de

3.2.3.4 Objetos predefinidos

Document: Representa el documento html

History: Pginas visitadas anteriormente.

3.2.3.5 Ejemplos completos

Y la apariencia del cdigo en el navegador es la siguiente:

Y la apariencia del cdigo en el navegador es la siguiente:

3.2.3.6 Validacin de formularios

3.2.3.7 Ejemplos de validacin de formularios

Figura 3-4 : Validacin formularios

Figura 3-5 : Examen

3.3 Java. Plataforma y lenguaje

3.3.2 La plataforma de ejecucin Java

Estrictamente hablado, Java es un lenguaje compilado, pero en realidad Java es a la vez

3.3.3 Tipos de aplicaciones

3.3.3.1 ASPECTOS DE SEGURIDAD

Figura 3-8 : Gestin de seguridad

3.3.4 Caractersticas del lenguaje

3.3.4.1.1 Mtodos especiales

3.3.4.1.2 Reciclado de memoria

Import: Los paquetes de clases se cargan con la palabra clave import,

objeto que ser

3.3.4.3 Robusto: excepciones

En el ejemplo se observa la sintaxis a seguir en el tratamiento de excepciones. Hay una

3.3.5 Insercin en HTML de Applets Java

CODE : Indica el fichero de clase ejecutable. No se permite un URL absoluto, aunque s

3.3.6 Codificacin de applets Java

En el ejemplo aparecen una serie de mtodos que es interesante conocer. A continuacin se

nombre se pasa, null si el parmetro no existe.

3.3.7 Ejemplo completo

3.3.7.1 Pgina de marcos

3.3.7.2 Pgina de menu ( izquierda.htm )

3.3.7.3 Cdigo del applet

Programacin en el lado del cliente

3.4 Algunas direcciones interesantes

Los navegadores. Compatibilidad

Este cdigo dara como resultado el siguiente texto:

Introduccin al Bloc de notas

Compaginar dos sesiones

Este cdigo dara como resultado el siguiente texto:

Seguidamente introduce, en el documento en blanco, el texto siguiente:

El navegador deber mostrar una pgina como la de la derecha.

Estructura de una Pgina

A travs de la etiqueta es posible establecer el color o la imagen de fondo de la pgina.

1. Caracteres especiales y espacios en blanco

2. Comentarios Saltos de lnea

Bienvenidos, esta es mi 1 pgina!

Por ejemplo, para insertar el texto:

Por ejemplo, para insertar el texto:

Dicha etiqueta no precisa ninguna etiqueta de cierre.

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Por ejemplo, para insertar el texto:

Por ejemplo, para insertar el texto:

A continuacin se muestran algunas etiquetas asociadas al tipo de informacin: