DISEÑO Y CREACIÓN DE PÁGINAS WEB: 2011

=== ¡== BIENVENIDOS A LA CLASE DE PÁGINA WEB == DOCENTE == GUILLERMO HORACIO PATIÑO

MARCOS

código del menú

<HTML>

<head><TITLE>Menu</title>
</HEAD>

<OL type="1">
<H3>
<FONT COLOR="YELLOW">
<LI><a href="Computador.html" target="VENTANA">Computador</a>
<LI><a href="automovil.html" target="VENTANA">Automóvil</a>
<LI><a href="Telefono.html" target="VENTANA">Teléfono</a>
<LI><a href="guillermopatino.html" target="VENTANA">Autor</a>
</LI>
</FONT>
</H3>
</OL>

</BODY>

</HTML>
==========================================================================
código marco principal << este código es el que se ejecuta >>

<html>
<head>
<title>MARCOS</title>
</head>

<FRAMESET>

<body>

<FRAMESET COLS=10%,50%>
<FRAME SRC="Menu.html">
<FRAME SRC="Computador.html" NAME="VENTANA">
<FRAME SRC="automovil.html" NAME="VENTANA">
<FRAME SRC="Telefono.html" NAME="VENTANA">
<FRAME SRC="guillermopatino.html" NAME="VENTANA">
</FRAMESET>

</body>
</html>

==========================================================================

ejemplo de página con marco

MARCOS O FRAMES
Los marcos o FRAMES, son etiquetas o procedimientos especiales de HTML
que permiten dividir, lo que aparentemente es una sola página, en diferentes zonas
o ventanas, independientes unas de las otras. En cada ventana se puede mostrar
una página diferente. La división puede hacerse verticalmente por columnas, de
manera horizontal por filas, o una combinación de ambas. La página contenida en
cada marco tendrá definidas sus propiedades de manera independiente y desde un
marco se puede, a través de enlaces, hacer que se despliegue una página
cualquiera en otro marco, lo que los hace muy útiles para varios propósitos. Por
ejemplo, en una misma ventana se puede definir un marco que contenga el logotipo
o “banner” de la compañía, un segundo marco para desplegar el menú de
navegación, y por último un marco que muestre la página o documento actual.
La construcción de páginas que contienen marcos se hace de manera similar
a la de cualquier documento HTML. La única diferencia radica en el hecho de que la
etiqueta <BODY> es reemplazada por <FRAMESET>, que es la etiqueta que
define la estructura de los frames o marcos en los que se dividirá la ventana del
navegador.
36 de 44 http//:www.masterlinux.org EFGM© 2000-2007
Para explicar el uso de <FRAMESET>, y el de otras etiquetas necesarias
para la implementación de frames, se utilizarán cuatro páginas ya creadas:
Computador.html, Automovil.html, Telefono.html y Menu.html, y una nueva que
servirá como página de definición de los marcos, la cual debe guardarse con el
nombre de Marcos.html, dentro del mismo directorio de las otras páginas
mencionadas.
Se creará como ejercicio una página dividida verticalmente en dos marcos:
en el de la izquierda, ocupando el 20% de la pantalla, aparecerá el contenido de la
página “MenuFrames.html”; mientras que en el marco de la derecha que ocupará
el 80% restante, se desplegará inicialmente la página Computador.html o
cualquiera de las otras dos, dependiendo de el enlace que se active en el frame de
la izquierda. Para este propósito se deben escribir las siguientes líneas:
<HTML>
<FRAMESET COLS="20%, 80%">
<FRAME SRC = "MenuFrames.html" NAME ="izquierda">
<FRAME SRC="Computador.html" NAME ="derecha">
</FRAMESET>
<NOFRAMES>
Lo sentimos, su navegador no soporta FRAMES
</NOFRAMES>
</HTML>
La etiqueta FRAMESET sirve para dos propósitos principales: definir la
orientación de los marcos que puede ser horizontal (ROWS) o vertical (COLS); y el
número y tamaño de cada marco. En el ejemplo, el atributo COLS ="20%, 80%",
divide la pantalla en dos marcos verticales, ocupando el primero de ellos a la
izquierda, el 20%, y el segundo el 80% del espacio. Para conformar n marcos
dentro de una pantalla, el atributo COLS o ROWS debe contener n valores
separados por comas. Estos valores pueden ser porcentajes o valores absolutos; en
cuyo caso el marco así definido, tendrá un espacio igual al del número de píxeles
indicado. Si se quiere por ejemplo, dividir la pantalla de manera horizontal en cuatro
frames, y se necesita que el primero de ellos tenga una altura fija de 40 píxeles, el
segundo ocupe el 50% del espacio restante, y los otros dos se dividan el espacio de
manera proporcional:
<FRAMESET ROWS="40, 50%, 25%, 25%">
Otra forma de definir el tamaño de los frames consiste en utilizar el carácter
*. En el siguiente ejemplo, una pantalla de 800 píxeles será dividida en tres marcos
verticales: el primero de 400 píxeles (50% de 800), el segundo de 260 (valor
absoluto) y el tercero 140 píxeles, correspondiente al espacio restante.
<FRAMESET COLS="50%, 260, *">
Las etiquetas <FRAME> definen entre otras cosas el origen de la página que
contendrá y el nombre del marco. En el ejercicio propuesto, se observan dos de
estas etiquetas, en la primera se define el marco denominado “izquierda” donde se
desplegará la página MenuFrames.html y en el segundo marco de nombre
37 de 44 http//:www.masterlinux.org EFGM© 2000-2007
“derecha” se mostrará la página Computador.html. Para que el ejercicio sea
completamente funcional, es necesario editar el archivo Menu.html como se indica a
continuación, guardándolo luego como MenuFrames.html:
<A HREF = "Computador.html" TARGET = "derecha">
Computador</A>
<A REF ="Automovil.html" TARGET ="derecha"> Automovil</A>
<A REF ="Telefono.html" TARGET ="derecha"> Teléfono</A>
El atributo TARGET de la etiqueta <A>, cuyo valor en el ejemplo es
“derecha”, indica en cual de los marcos definidos se debe desplegar la página
correspondiente a cada uno de los enlaces. Si se omite este atributo, el documento
será mostrado dentro del mismo marco. Otro valor posible para TARGET es
“blank”, con lo que se abrirá una nueva ventana en la cual se mostrará la página
correspondiente al enlace invocado.
La etiqueta <FRAME> tiene otros atributos que permiten controlar el
comportamiento de cada marco:
<FRAME SRC="xx" NAME="xx" MARGINWIDTH="x" MARGINHEIGHT="y"
SCROLLING="z" FRAMEBORDER="w" NORESIZE>
Donde:
MARGINWIDTH="x" define el valor en píxeles del margen izquierdo y derecho
entre el contenido y los bordes del frame. El valor de x debe ser mayor que 1. Si
este atributo es omitido, el browser se auto ajustará para hacer el mejor despliegue
posible del contenido del marco.
MARGINHEIGHT="y" trabaja de manera similar a MARGINWIDTH, pero
controla los márgenes superior e inferior del frame.
El atributo SCROLLING="z" soporta tres valores posibles yes, no y auto. Se
utiliza para controlar la aparición o no de las barras de desplazamiento (scrollbars),
cuando el contenido del frame excede el área del mismo.
FRAMEBORDER="w" se utiliza para controlar que el browser muestre o no los
bordes del marco. En Internet Explorer w debe ser un valor numérico (cero significa
sin bordes), mientras que en Netscape Navigator w toma cualquiera de los valores
yes o no.
Por defecto, el tamaño de todos los frames especificados en una página
puede ser cambiado por el usuario arrastrando los bordes del marco. Si se desea
mantener fijo el tamaño predefinido de un marco, basta con agregar el atributo
NORESIZE dentro de la etiqueta de definición.
Aunque no es muy común en la actualidad, si el navegador desde donde se
accede la página no soporta el procedimiento FRAMES, se desplegará en lugar de
los marcos definidos, la información contenida dentro de las etiquetas
<NOFRAMES> y </NOFRAMES>.
38 de 44 http//:www.masterlinux.org EFGM© 2000-2007
Dentro de un documento que contiene frames pueden existir varias etiquetas
<FRAMESET>, lo que se conoce como anidamiento. Con este procedimiento, un
marco puede ser subdividido en otros marcos, para lo cual la etiqueta <FRAME> que
define las características del marco a subdividir se reemplaza por una nueva
etiqueta de definición de frames. En el ejemplo siguiente, la pantalla es dividida
inicialmente en dos zonas horizontales, mediante la etiqueta <FRAMESET
rows="30%, *">; la etiqueta <FRAMESET cols="25%, *">, divide al segundo marco
horizontal en dos nuevos marcos verticales.
<HTML>
<HEAD>
<TITLE>Ejemplo de Frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%, *">
<FRAME SRC = "banner.htm">
<FRAMESET COLS="25%, *">
<FRAME SRC="menu.html" NAME ="menu">
<FRAME SRC="princ.html" NAME ="princ">
</FRAMESET>
</FRAMESET>
</HTML>

CÓDIGO FLOTANTE

CLIC VER CÓDIGO FLOTANTE

COMENTARIOS EN PHP

SERVIDOR WAMP SERVER 2.1

DESCARGAR

PHP

ENLACE PARA VER EL TUTORIAL DE PHP

programación no son más que porciones de código independientes que realizan

una tarea específica.

La división en la etapa de diseño de un programa en subrutinas o

subprogramas y su posterior implementación utilizando funciones bien

determinadas, facilitan la labor del programador a la hora de corregir errores

tanto de sintaxis como lógicos.

El desarrollo, la escalabilidad y el mantenimiento de un programa

"modular" como suele llamársele a un programa implementado con funciones,

también se facilita.

Una vez definida y comprobado el correcto desempeño de una función,

ésta puede ser utilizada tantas veces como sea necesario y desde cualquier parte

del programa.

Una función en JavaScript, debe ser definida para luego ser llamada

desde cualquier parte del programa. De nuevo, se recomienda hacer la definición

de todas las funciones en la sección HEAD del documento HTML, para evitar

errores generados por el llamado a funciones que aún no han sido interpretadas.

Las funciones en JavaScript pueden o no devolver valores, así como,

pueden o no recibir argumentos para realizar sus tareas. La siguiente es la forma

general de declarar o definir una función en JavaScript:

function nombreFuncion (argumento1, argumento2, ... argumentoN)

{

sentencia1;

sentencia2;

...

sentenciaN;

return expresión; //Si la función devuelve un valor

}

Los nombres de las funciones en JavaScript se asignan teniendo en

cuenta las mismas reglas descritas para nombrar variables.

Con el siguiente script, se implementa una función llamada escribeDatos,

que no recibe argumentos ni devuelve ningún valor, y cuya tarea consiste en

imprimir en el cuerpo de la página el nombre del usuario y la edad del mismo,

basada en la fecha de nacimiento y el año actual:

Una vez definida, una función se puede utilizar tantas veces como sea

necesario. Para que una función ejecute la tarea para la cual fue definida, es

indispensable hacer un llamado a la misma. Los llamados a funciones como en

todos los lenguajes, se realizan utilizando el nombre de la función y la lista de

argumentos entre paréntesis:

nombre_funcion(argumento1, argumento2, ... argumentoN);

En el ejemplo, la función no recibe ningún argumento, por lo que el

llamado a escribeDatos se hace de la siguiente manera:

escribeDatos();

El listado siguiente contiene el código necesario para elaborar una página

que calcula y muestra la edad de Andrés:

Datos

Para ilustrar la manera de definir y llamar funciones que reciben

argumentos, en el siguiente listado se han hecho las modificaciones necesarias

para que la función escribeDatos del ejemplo anterior, reciba en el llamado los

valores correspondientes a los argumentos nombre, actual y nacimiento:

Datos

Dentro del bloque de sentencias de una función puede existir cualquier

expresión válida, incluso el llamado a otra función previamente definida. En el

siguiente ejemplo se definen dos funciones: la función calcula, que recibe como

argumentos el año actual y el año de nacimiento y devuelve la diferencia entre

ambos valores. La función escribeDatos que recibe como argumento el nombre

del usuario y lo imprime junto con la edad calculada por la función calcula:

Datos

Variables globales y variables locales

Existen diferencias en el comportamiento de una variable dependiendo del

sitio donde ha sido declarada. Cuando la declaración se hace fuera de cualquier

función, se dice que la variables es global y puede ser utilizada desde cualquier

función definida dentro del mismo script. Mientras que si la variable se declara

dentro de una función específica, la variable es local y el uso de la misma está

limitado a operaciones dentro del ámbito de la función donde fue declarada. Si

se intenta utilizar una variable local por fuera de la función donde fue declarada,

el resultado será un error en tiempo de ejecución.

Variables

Funciones predefinidas en JavaScript

Existen algunas funciones predefinidas en JavaScript, la mayoría de las

cuales permiten chequear el tipo de dato de una expresión o variable que se

pasa como argumento a la función, evaluar expresiones o hacer casting de tipos

de datos:

La función eval permite la evaluación de cadenas de caracteres. Si la

cadena de caracteres representa una expresión, la función eval devuelve el

resultado de evaluar la expresión. Por ejemplo:

//Y es una cadena de caracteres

Y=”35+56/28+1.5”;

//Si imprime el valor de Y

document.write(Y);

//El resultado será 35+56/28+1.5

//Ahora X recibe como valor el resultado de evaluar Y

X=eval(Y);

//Si imprime X

document.write(X);

//El resultado será 38.5

Si la cadena de caracteres contiene sentencias válidas de JavaScript , el

resultado de la evaluación será la ejecución de las sentencias contenidas en la

cadena. Veamos:

//La variable Y vale 5;

Y=5;

//Z es una cadena de caracteres que contiene 2 sentencias

Z=”Y+=10; document.write(Y);”

//La función eval ejecuta las dos sentencias contenidas en Z

eval(Z);

//El resultado es la impresión del número 15

La función isFinite() evalúa la expresión que se le pasa como

argumento y devuelve un valor booleano dependiendo del resultado de la

evalución. Devuelve false cuando la expresión no es un valor numérico o

cuando el resultado es un valor infinito, por ejemplo, una división por cero.

Devuelve true en cualquier otro caso:

x=5;

y="Hola";

z=0;

//La siguiente línea imprimirá false

document.write(isFinite(y+x));

//La siguiente línea imprimirá false

document.write(isFinite(x/z));

//La siguiente línea imprimirá true

document.write(isFinite(x*z));

La función isNaN() devuelve true cuando la expresión que se le pasa

como argumento no es un valor numérico, y false en cualquier otro caso:

x=5;

y="Hola";

z=0;

//La siguiente línea imprimirá true

document.write(isNaN(y+x));

//La siguiente línea imprimirá false

document.write(isNaN(x/z));

//La siguiente línea imprimirá false

document.write(isNaN(x*z));

Las función parseInt() devuelve un entero correspondiente al valor de la

cadena de caracteres que se le pasa como argumento, si esta puede ser

evaluada, de lo contrario devuelve NaN. Además, esta función permite convertir

números entre diferentes bases:

X=”50.5”

//Z toma como valor 50

Z=parseInt(X) ;

/*Z ahora vale 40 en base 10que es el resultado de convertir 50 que

está expresado en base 8 */

Z=parseInt(X, 8);

/*Z ahora vale 80 en base 10 que es el resultado de convertir 50 que

está expresado en base 16 */

Z=parseInt(X, 16);

La función parseFloat() trabaja de manera similar a parseInt().

Devuelve un valor real, producto de la evaluación de la cadena que se le pasa

como argumento. Ambas funciones devuelven NaN, si el primer carácter de la

cadena es diferente a un dígito, un punto (.), el signo mas (+) o el signo menos

(-). Si los primeros caracteres corresponden a una expresión numérica válida y

los siguientes son otros caracteres cualesquiera, estos serán ignorados. Por

ejemplo, en la expresión z=parseFloat(“-3.58e-3 Hola”); z tomará como

valor –0.0038, que corresponde a –3.58x10-3, los caracteres “ Hola” son

ignorados por la función.

Existen otras cuatro funciones predefinidas en JavaScript, que serán

explicadas o utilizadas más adelante, lo mismo que las funciones aritméticas que

fueron implementadas en JavaScript como objetos.

=======================================================================================
=======================================================================================

VARIABLES Y TIPOS DE DATOS

Valores

JavaScript no tiene un conjunto extenso de tipos de datos, ni hace

chequeo de los mismos. Lo anterior significa que para JavaScript no existen

diferencias entre un entero y un real. El tipo de dato se define de manera

dinámica y su tratamiento depende del contexto en el que se esté trabajando.

Para el desarrollo de aplicaciones en JavaScript se dispone de los siguientes

tipos de datos o valores:

• Números

• Valores lógicos

• Cadenas de caracteres

• Valores primitivos (null y undefined)

El tratamiento de los datos en JavaScript es dinámico, no requiere de la

declaración de variables y la evaluación de las mismas depende del contexto, lo

que permite hacer casting libremente. Por ejemplo, se puede definir una variable

que contenga una cadena de texto, y, posteriormente asignar a la misma un

valor numérico sin que la ejecución del script genere errores. Para comprender lo

anterior, escriba lo siguiente:

Casting

El resultado que se obtendrá al abrir la página será:

Mi nombre es Juan y tengo 42 años

En la primera línea del script se ha definido a x como una variable que

contiene una cadena de caracteres. La segunda línea del script imprime el valor

de x (“Mi nombre es Juan y tengo “). La misma variable recibe un valor

numérico en la tercera línea y posteriormente el script imprimirá el resultado de

sumar x+x, en este caso 42. Finalmente, x vuelve a tomar como valor una

cadena de caracteres que se imprime en la sexta línea del script.

Lo anterior puede que simplifique y agilice la escritura de código, pero

vuelve a JavaScript un lenguaje desordenado, poco elegante y a veces confuso.

Considere el siguiente ejemplo:

Confuso

Podría esperarse que el resultado obtenido fuera 530 (x+5), pero en

realidad el anterior script mostrará 5255. Por qué? El aparente resultado erróneo

que se obtiene se debe a dos razones: la primera, cuando el valor asignado a

una variable se encierra entre comillas (“”), JavaScript trata a esa variable

como una cadena, aunque se trate de un valor numérico y la segunda razón, el

operador + en contextos numéricos significa suma, mientras que en operaciones

con caracteres es el operador de concatenación.

Si en lugar del signo +, en la segunda línea del script, se utiliza cualquier

otro operador aritmético, los resultados que se obtienen serán los esperados

desde el punto de vista matemático. Se sugiere al lector utilizar otros operadores

aritméticos como resta (-), multiplicación (*), y división (/), en la segunda línea

del anterior script, así como, invertir el orden de las variables.

A diferencia de C y C++, JavaScript soporta valores booleanos. Su uso se

explicará más adelante en el capítulo de operadores. Por ahora interesa saber

que una variable booleana puede tomar cualquiera de los valores true

(verdadero) o false (falso).

Variables

Las variables en JavaScript como en otros lenguajes, son contenedores de

valores a los cuales se puede acceder a través de sus nombres. Los nombres o

identificadores de las variables pueden estar compuestos por una combinación

de letras (a-z, A-Z), dígitos (0-9) y el carácter de subrayado (_). El nombre de

una variable debe ser diferente a cualquiera de las palabras reservadas del

lenguaje (ver Apéndice A) y finalmente, el nombre de las variables no puede

comenzar con un dígito (0-9).

JavaScript es sensible a las mayúsculas (case sensitive), por lo que la

variable Mi_variable es diferente a mi_variable.

La declaración de variables en JavaScript se puede hacer de dos

maneras: utilizando la palabra reservada “var” seguida del nombre de la

variable (como en los scripts del ejemplo anterior), o mediante la simple

asignación de un valor a la variable (y=21;). Cuando se declara una variable sin

la asignación de un valor inicial esta toma como valor “undefined” (indefinida).

Si se trata de utilizar en contextos numéricos una variable no definida el

resultado puede ser:

1. Un error en tiempo de ejecución, cuando la variable no ha sido

declarada utilizando la palabra reservada“var”

2. “NaN”, cuando la variable fue declarada mediante el uso de var.

Se dice que una variable es global, cuando puede ser utilizada o

referenciada en cualquier parte del script y una variable es local cuando solo

puede ser utilizada en el ámbito de una función. Las variables para que sean

globales, deben ser declaradas por fuera de cualquier función. Una variable es

local cuando se declara dentro una función, y es obligatorio el uso de var en el

proceso de declaración. El alcance de las variables será explicado más

profundamente en el capítulo de funciones.

Arreglos

Un arreglo es un conjunto de valores del mismo tipo identificados por el

mismo nombre. Para distinguirlos, cada uno de los elementos de un arreglo tiene

asociado un índice numérico dependiendo de la posición que ocupan, razón por

la que a este tipo de datos se les conoce como variables indexadas.

Arreglo días

Índice 0 1 2 3 4 5 6

Valor “Lunes” “Martes” “Miércoles” “Jueves” “Viernes” “Sábado” “Domingo”

Posición 1 2 3 4 5 6 7

JavaScript como otros lenguajes, soporta la declaración y el trabajo con

variables indexadas que contienen dos o más elementos que constituyen un

arreglo. Por ejemplo, el arreglo dias contiene los nombres de los siete días de la

semana y se declara en JavaScript de la siguiente manera:

dias=[“Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”, “Sábado”,

“Domingo”];

Aunque la anterior, no es la forma más rigurosa de declarar un arreglo, se

utiliza solamente para ilustrar el trabajo con ellos.

Para referirse en cualquier arreglo a un elemento ubicado en la posición

x, se debe utilizar el nombre de la variable y el índice del elemento encerrado

entre paréntesis cuadrados ([]). El índice corresponde a la posición del elemento

disminuida en 1. Esto significa, que para un vector compuesto por n elementos,

el primero de ellos siempre tendrá como índice 0, mientras que el índice del

último elemento será n-1. Por ejemplo, la siguiente página:

Indices

Hoy es

, el tercer día de la semana.

mostrará como resultado:

Hoy es Miércoles, el tercer día de la semana.

Se pueden declarar arreglos dejando uno o más de sus elementos sin

definir:

vocales = [“a”, , “i”, “o”, “u”];

y más adelante darle valor al elemento indefinido:

vocales[1] = “e”;

O se puede eliminar un elemento cualquiera de un arreglo ya declarado,

mediante el uso del operador delete:

delete vocales[3];

Los arreglos son en realidad objetos definidos en JavaScript, por lo que se

tratarán con profundidad en el capítulo correspondiente.

Comentarios

Los comentarios corresponden a texto delimitado por caracteres

especiales, que el intérprete del lenguaje ignora y que el programador utiliza

para documentar sus aplicaciones haciéndolas más fáciles de entender.

JavaScript soporta dos tipos de comentarios: los precedidos por dos barras

inclinadas “//”, y los encerrados dentro de los caracteres “/*” y “*/”. El primero

tiene como efecto que el intérprete ignore todo lo escrito después de los dos

slashs y hasta el final de la línea. En el segundo caso, el intérprete no tendrá en

cuenta lo que se encuentre ubicado dentro de esos caracteres especiales, sin

importar si su contenido ocupa más de una línea dentro del código.

document.write(dias[2]);//Esta parte será ignorada por el intérprete

/* Todo lo que escribamos aquí

tampoco será tenido en cuenta.

Aunque el comentario ocupe más de

una línea */

Formularios	Marcos	Php	Ejemplos php	Funciones php	Servidor xampp	Joomla
Funciones joomla	Configuración	Configuración joomla 2	Configuración servidor	Sistema calificación	Talleres html	Creaer blog
Skydrive	Tablas 1	Tablas 2	Marcos	JavaColores	La biblia java	Principios básicos

DISEÑO Y CREACIÓN DE PÁGINAS WEB

JAVASCRIPT

MARCOS

CÓDIGO FLOTANTE

COMENTARIOS EN PHP

SERVIDOR WAMP SERVER 2.1

CREAR MENÚ CSS

ACTUALIZACIÓN CLASE JAVASCRIPT

TALLER JAVASCRIPT

APLICAR COLORES EN JAVASCRIPT

FORMULARIO

PASOS BÁSICOS PARA PROGRAMAR EN JAVASCRIPT

LA BIBLIA DE JAVASCRIPT

COMO CREAR UNA RADIO POR INTERNET, PAGINA WEB Y CHAT.

FORMULARIO ENCUESTA

PRINCIPIOS DE JAVASCRIPT