PHP POO Nivel Avanzado 2

SEPARATA DEL CURSO INGENIERA WEB
UNIDAD I: DISEO Y CONSTRUCCION DE PAGINAS WEB CON XHTML I
UNIDAD II: DISEO Y CONSTRUCCION DE PAGINAS WEB CON XHTML- II
UNIDAD III: PROGRAMACION PHP
INTRODUCCIN
Esta separata describe los fundamentos del desarrollo de aplicaciones web, que no son sino aplicaciones basadas en el modelo Cliente/Servidor donde la comunicacin con el usuario se hace utilizando pginas web. El cdigo de la aplicacin se puede ejecutar en el cliente, en el servidor, o distribuirse entre ambos. Suelen utilizar una Base de Datos para organizar y facilitar el acceso a la informacin. Las ventajas que presentan son: su facilidad de manejo y de desarrollo, accesibilidad y portabilidad. Dentro de las tecnologas a utilizar en el cliente estn: los lenguajes de guiones (como JavaScript), las Applets Java y ActiveX. En el servidor PHP.
Asignatura: Ingeniera Web | Mg. Ing. Orleans Moiss Glvez Tapia | www.ucvlima.edu.pe
UNIDAD I: DISEO Y CONSTRUCCION DE PAGINAS WEB CON XHTML I

1.1. CONCEPTOS FUNDAMENTALES DE WEB.
Qu es una pgina web?
Una pgina Web es un documento multimedia, que puede llevar incorporado textos, imgenes, sonidos y animaciones. Una caracterstica importante es que se puede acceder a los contenidos, propios externos, por medio de hipervnculos enlaces.
Qu necesitamos para visualizar pginas web?
Cuando accedemos a Internet existen una serie de ordenadores conectados permanentemente que se llaman Servidores Web. En estos ordenadores estn almacenadas las pginas Web tanto de usuarios como de empresas ofreciendo informacin, productos, etc.
Figura 01: Elementos necesarios para visualizar pginas web
Nosotros, cuando nos conectamos a Internet para solicitar una determinada pgina Web desde un ordenador, nos convertimos en Clientes Web. El programa que necesitamos para visualizar dicha pgina se llama Navegador. Este programa se encarga de solicitar al servidor correspondiente una determinada pgina. La transferencia de informacin entre Cliente-Servidor se realiza mediante un protocolo especfico denominado HTTP. En la actualidad para visualizar pginas Web existen diferentes navegadores: Netscape Navigator, Mozilla, Opera, Internet Explorer, etc.
Las pginas Web estn escritas en un lenguaje de programacin llamado HTML. Se trata de un conjunto de marcas que se van intercalando entre el texto para que el navegador sepa qu debe presentar en pantalla en todo momento.
Sitio Web
Un sitio Web est formado por un conjunto de pginas Web. En analoga, un sitio Web es, por ejemplo, una revista, mientras que una pgina Web es una de las pginas que constituyen dicha revista. Cualquier sitio Web publicado en Internet puede ser visto desde cualquier parte del mundo. Las posibilidades que esto ofrece son inimaginables. Los propsitos para los que nos podemos servir de Internet y las tecnologas de la informacin en general vienen a cubrir todo el espectro de propsitos, ya sea para fines personales, de ocio, acadmicos, laborales, empresariales, etc. Su gran potencialidad depender pues de lo inteligentemente que empleemos dicha tecnologa.
Se pueden diferenciar dos grandes grupos de sitios Web, los estticos y los dinmicos.
Web Esttica
Los sitios Web estticos son aquellos sitios enfocados principalmente a mostrar una informacin permanente, donde el navegante se limita a obtener dicha informacin, sin que pueda interactuar con la pgina Web visitada, las Web estticas estn construidas principalmente con hipervnculos o enlaces (links) entre las pginas Web que conforman el sitio, este tipo de Web son incapaces de soportar aplicaciones Web como gestores de bases de datos, foros, consultas on-line, e-mails inteligentes. Esta es una opcin ms que suficiente para aquellos sitios Web que simplemente ofrecen una descripcin de su empresa, quines somos, donde estamos, servicios, etc. Ideal para empresas que no quieren muchas pretensiones con su sitio Web, simplemente informar a sus clientes de sus productos y su perfil de empresa. La principal ventaja de este tipo de pginas es lo econmico que resulta crearlas , con un diseo vistoso e incluyendo las imgenes y el texto con el cual queremos informar a los navegantes, un sitio web esttico se puede crear fcilmente sin necesidad de ningn tipo de programacin especial (PHP, ASP, Java, etc). La gran desventaja de los sitios Web estticos reside en lo laborioso que resulta su actualizacin as como la prdida de potentes herramientas soportadas con bases de datos, como pueden ser la creacin de registros histricos de los clientes, pedidos online, etc. En esta asignatura no desarrollaremos sitios web estticos .
Web Dinmica (Aplicacin Web)
Los sitios Web dinmicos son aquellos que permiten crear aplicaciones dentro de la propia Web, otorgando una mayor interactividad con el navegante. Aplicaciones dinmicas como encuestas y votaciones, foros de soporte, libros de visita, envo de emails inteligentes, reserva de productos, pedidos on-line, atencin al cliente personalizada, etc. El desarrollo de este tipo de Web es ms complicado, pues requiere conocimientos especficos de lenguajes de programacin as como creacin y gestin de bases de datos, pero la enorme potencia y servicio que otorgan este tipo de pginas hace que merezca la pena la inversin y esfuerzo invertidos respecto a los resultados obtenidos. Una gran ventaja que proporciona crear sitios Web dinmicos es la posibilidad de trabajar con bases de datos , las cuales puede almacenar cualquier tipo de datos que a usted le interese para posteriormente realizar cualquier tipo de consultas. Le gustara saber las preferencias y opiniones de los clientes de sus productos y servicios? Cul es su cartera de pedidos generada a travs de la red? Estas y otras preguntas encuentran respuestas con las Web dinmicas y las bases de datos que son el tema central de esta asignatura.
Como una disciplina emergente, la ingeniera w eb permite crear aplicaciones interactivas (w eb dinmicas) bajo la arquitectura cliente/servidor. La diferencia fundamental de una w eb de tipo esttico respecto a una de tipo dinmico es que diseo y contenidos son independientes, por lo que si algn da se plantea un cambio de diseo o la insercin de un nuevo mdulo, no hace falta tocar ningn contenido, cosa que es imposible con un diseo w eb de tipo esttico. La insercin de contenidos es muy sencilla, con un procesador de textos tipo Word. Se podr escribir un artculo y asignarle por ejemplo una fecha de publicacin y una fecha de caducidad, no habr que preocuparse por artculos obsoletos. Y todo esto se podr hacer desde cualquier parte del mundo y desde cualquier ordenador, slo hace falta una conexin a Internet. Esto es posible porque se trabaja directamente con el servidor de contenidos, sin programas externos. Adems, como es un sistema abierto y en continuo crecimiento no se crea una dependencia proveedor-cliente, lo cual redunda en su beneficio si en el futuro deciden hacer cambios en la w eb.
Ingeniera Web
La Ingeniera Web es una disciplina que comprende el proceso de creacin, implantacin y mantenimiento de aplicaciones web cumpliendo con criterios de alta calidad y seguridad.
En la actualidad se estn desarrollando aplicaciones web que estn cambiando nuestros estilos de vida; ya que con solo ingresar a estas aplicaciones podemos realizar compras, pagos de servicios bsicos, realizar reservas de hoteles etc. Aplicacin Web Una aplicacin web es un sistema computacional remoto que se accesa por Internet. Fsicamente los datos se guardan en una base datos ligada a un servidor web. Para ingresar o consultar los datos, hay que estar conectado a Internet, usar un browser (Internet Explorer, Firefox) y escribir la direccin del servidor (ej.: http://www.misdatos.com) donde est la informacin almacenada. La entrada es restringida y es necesario identificarse como usuario para entrar al sistema. La comunicacin se hace usando pginas web estilo formulario.
Qu particularidades tiene el desarrollo web?
Las aplicaciones web tienen sus particularidades, entre las ms significativas podemos listar: Residente en red. Una aplicacin web reside en una red, y debe dar servicio a una comunidad diversa de clientes. Inmediatez . Se refiere al corto tiempo que normalmente tienen los proyectos web para terminar, o por lo menos, lanzar una versin inicial. Evolucin continua. A diferencia del software de aplicaciones convencional, que evoluciona a travs de versiones planeadas y cronolgicamente espaciadas, las aplicaciones web estn en constante evolucin, y se actualizan gradualmente. Seguridad. Dado que no controlamos con certeza quin puede acceder a nuestra aplicacin; la seguridad y confidencialidad de la informacin requieren un nfasis especial. Esttica. Es bien sabido que la primera impresin jams se olvida, por lo que nuestro sitio debe ser atractivo, ergonmico y usable. Medible . Mediante la cuantificacin de resultados, podemos conocer la cantidad de usuarios que tenemos, as como sus patrones de comportamiento.
El proceso de ingeniera web
Es iterativo e incremental. Esto como respuesta a la continua evolucin de las aplicaciones web, as como el corto tiempo en el que normalmente se requiere que sean implementadas. Roger Pressman (en su libro: Software Engineering: A Practitioners Approach, que es una de las biblias de la ingeniera de software) sugiere un proceso de ingeniera web compuesto por las siguientes fases (Figura 02): Planteamiento y formulacin. Identificamos los objetivos de nuestra aplicacin, y delimitamos el alcance de la primera iteracin. Planificacin. Una vez planteado el problema, podremos estimar costos, riesgos y esfuerzo durante el desarrollo. En la planeacin iterativa solamente se detalla la iteracin actual, y las iteraciones subsecuentes slo se plantean de forma general. Anlisis. Durante esta etapa establecemos los requerimientos tcnicos, grficos, y de contenido, que incorporaremos en la iteracin. Ingeniera. La actividad de ingeniera incorpora dos grupos de tareas que se realizan en paralelo: el diseo del contenido y la produccin, se enfocan en el diseo, produccin y adquisicin del contenido de texto, grfico y video que se vayan a integrar en la aplicacin. Estas tareas son realizadas por personal no tcnico. Por otro lado, estn el diseo arquitectnico, de navegacin e interfaz, el cual lidia con los aspectos tcnicos. Generacin de pginas y pruebas. Se prueba que el contenido dinmico se genere correctamente, utilizando las plantillas, interfaces y contenidos diseados en la fase de ingeniera. Posteriormente se realizan las pruebas pertinentes, que dependern del tipo de aplicacin y requerimientos no funcionales (por ejemplo, pruebas de desempeo, etc.). Evaluacin del cliente . Al final de cada iteracin se debe realizar una evaluacin con el cliente, para validar el avance y determinar los cambios o mejoras (en caso de ser necesarios), que se aplicarn en las siguientes iteraciones.
Existen otros procesos de desarrollo de aplicaciones w eb, como por ejemplo UWE (Ingeniera Web basada en UML), es una metodologa enfocada al modelado de aplicaciones Web, basada en la extensin de la semntica del UML mediante la utilizacin de estereotipos, al estar basada estrictamente en UML garantiza que sus modelos sean fciles de entender para conocedores de UML. Su proceso de desarrollo se basa en tres fases principales: la fase de captura de requisitos, la fase de anlisis y diseo y la fase de implementacin. Esta metodologa la estudiaremos en la Unidad II.
Figura 02. Ciclo de vida clsico de una aplicacin web (Roger Pressman)
1.1.1.
Aplicativos (editores) para crear sitos web en modo Diseo
Para el usuario sin conocimientos en tecnologas como XHTML, PHP, CSS, JavaScript, etc. resulta interesante un editor que les permita producir pginas web de manera rpida en un entorno WYSIWYG (abreviatura inglesa para what you see is what you get, o sea, lo que ves es lo que obtienes), por ejemplo:
KompoZer
Es uno de los mejores editores gratuitos, est diseado para usuarios sin conocimientos tcnicos que quieran crear un sitio web atractivo sin necesidad de saber HTML. Sus funciones incluyen la gestin integrada de archivos (subir y editar archivos en un servidor web), organizacin en pestaas (que permite trabajar en varias pginas) y el soporte de formularios, tablas y plantillas.
BlueGriffon
Merece la pena prestar atencin a BlueGriffon, que es est emparentado con KompoZer, actualmente en desarrollo activo, y parece muy prometedor.
Amaya
Otro buen editor es Amaya. Se trata de un proyecto perteneciente al World Wide Web Consortium (W3C) y como tal destaca en el rea del cumplimiento de los estndares y de la accesibilidad.
1.1.2.
Herramientas para el diseo web (IDEs)
Los programadores web utilizan herramientas sofisticadas que facilitan el trabajo enormemente. Dentro de estas herramientas podramos hablar de entornos integrados de desarrollo (IDEs).
Un IDE es un programa que nos permite desarrollar cdigo en uno o ms lenguajes de programacin e incorpora lo siguiente: Un espacio para la escritura de cdigo con cierta ayuda interactiva para generar cdigo y para indicar los errores de sintaxis que se cometan por parte del programador. La posibilidad de compilar y ejecutar el cdigo escrito. La posibilidad de organizar los proyectos de programacin. Herramientas auxiliares para programadores para deteccin de errores o anlisis de programas (debuggers). Otras opciones como utilidades para pruebas, carga de libreras, etc.
Los IDEs ms usados en la actualidad son: Microsoft Visual Studio
Este IDE es la propuesta de Microsoft para desarrollar todo tipo de aplicaciones para su plataforma. NET. Desde esta interfaz podremos desarrollar aplicaciones escritas en Visual Basic, Visual C#, ASP.NET. Es uno de los entornos de programacin ms completos y cuanta con correccin automtica de errores y auto completado inteligente.
Como casi todo el softw are de Microsoft, este IDE no es gratuito salvo en su versin Express que puede ser un buen punto de partida para programar.
NetBeans
Es un IDE multiplataforma, soporta varios lenguajes. Adems de Java, C, C++ y PHP soporta Ada, Groovy, PL/SQL, Python, Ruby y todos los relacionados con la web (HTML, CSS, JavaScript y XML).
Permite hacer desde aplicaciones sencillas hasta aplicaciones empresariales. En la presente asignatura se usar este IDE.
Eclipse
Es un IDE para el desarrollo de software de cdigo abierto. Est escrito totalmente en Java, permite crear aplicaciones empresariales, mviles, etc. El software es libre tanto para uso personal como comercial.
Una de sus principales ventajas es que adems de ser multiplataforma es tambin multilenguaje. Permite desarrollar aplicaciones escritas en Java, C++, PHP, Ruby on Rails, Python, Javasript y Perl entre otros.
Zend Studio
Son muchos los desarrolladores que trabajan con Zend Studio, es posiblemente uno de los mejores IDE del momento.
Se trata de un programa de la casa Zend, uno de los mayores impulsores de PHP, orientada a desarrollar aplicaciones w eb, como no, en PHP.
Aptana (Eclipse)
Aptana es un entorno de desarrollo dirigido hacia las aplicaciones web escritas en Ajax/JavaScript. Est basado en Eclipse y lo podremos encontrar para las tres plataformas mayoritarias (Win, Mac y Linux), ya sea como plugin del mismo Eclipse, o como aplicacin por separado. Php Designer
Php Designer, es un completo entorno de desarrollo y programacin especialmente diseado para desarrolladores de PHP, aunque tambin permite trabajar con comodidad en otros lenguajes de programacin como HTML, XHTML, CSS y SQL. Ofrece toda una serie de asistentes y dilogos integrados que facilitan en todo momento el trabajo, adems cuenta con cliente de FTP y navegador de ficheros integrado, utilidades de correccin y autocompletado, bsqueda integrada en Google y soporte para proyectos.
La ventaja de que un IDE sea multilenguaje es que cuando nos acostumbramos a usarlo con un lenguaje no tendremos que aprender a usar otro entorno de programacin cuando vamos a programar en otro lenguaje.
10
1.1.3.
Elementos de un Web Site
En el contexto de esta asignatura cuando hablamos de Web Site nos referimos a una Aplicacin Web (Web Site no esttico, que incluye lgica del negocio) y cuando hablamos de elementos de un w eb site nos referimos a los elementos de una aplicacin w eb o mejor dicho a los componentes de la arquitectura cliente servidor de una aplicacin w eb.
La arquitectura de un sitio Web tiene tres elementos principales: servidor Web, protocolo HTTP, y uno o ms clientes (browsers).
Figura 03: Arquitectura cliente-servidor de una aplicacin web
Cliente
Es un programa que permite al usuario visualizar documentos descritos en HTML, desde servidores web de todo el mundo a travs de Internet. Por lo general este rol lo cumple un navegador web o explorador web (del ingls, navigator o browser). Servidor Web
Llamado tambin Servidor HTTP, es un programa informtico que procesa una aplicacin del lado del servidor realizando conexiones bidireccionales con el cliente, generando o cediendo una respuesta en cualquier lenguaje del lado del cliente.
Una aplicacin del lado del servidor es cualquier programa o conjunto de instrucciones diseadas con la finalidad de que un Servidor Web las procese para realizar alguna accin. Las aplicaciones del lado del servidor estn escritas mediante algn lenguaje de programacin, entre los que destacan: PHP, ASP.Net, Perl, Python, Ruby.
11
Las aplicaciones del lado del cliente se ejecutan directamente en el brow ser sin necesidad de realizar ninguna solicitud al servidor. Algunas tecnologas de programacin del lado del cliente son: JavaScript, Java, VBScript.
Protocolo HTTP
Es la base del funcionamiento de internet. Se basa en un intercambio de peticiones y respuestas entre clientes (porttiles, telfonos mviles, ordenadores de escritorio ) y servidores. Est diseado para transferir lo que se llama hipertextos, pginas web o pginas HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores de msica.
Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que establecemos una peticin de un archivo HTML residente en el servidor (un ordenador que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente). La Figura 04 detalla la secuencia de pasos en una peticin HTTP.
Lado del Cliente
Lado del Servidor
Figura 04: Secuencia de pasos en una peticin HTTP
12
LEYENDA: 1. El navegador efecta la peticin de la pgina 2. El servidor llama al intrprete del PHP si es necesario. 3. PHP ejecuta los scripts (interactuando con la base de datos si es preciso) y devuelve al servidor el documento generado. 4. El servidor enva el documento resultante en formato HTML. 5. El documento es interpretado por el navegador, se ejecutan los scripts del lado del cliente y se presenta el resultado en pantalla.
1.1.4. Creacin del Sitio Web
Instalar WAMP Crear el sitio (saludo.php) <? PHP $nombre = "Ana"; print ("<p>Hola, $nombre</p>"); ?>
Para ejecutar este primer programa, en una ventana del navegador, tecleamos http://localhost/saludo.php (Apache ha de estar arrancado).
13
1.2. LENGUAJE DE PROGRAMACIN 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. El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un organismo sin nimo de lucro llamado World Wide Web Consortium, ms conocido como W3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cualquier sis tema operativo.
El proceso de indicar las diferentes partes que componen la informacin se denomina marcar (markup en ingls). Cada una de las palabras que se emplean para marcar el inicio y el final de una seccin se denominan etiquetas.
Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>
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.
14
EJEMPLO: A continuacin tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.: <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.ucvlima.edu.pe</font></p> Este cdigo dara como resultado el siguiente texto: Bienvenidos a www.ucvlima.edu.pe Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta <font..>.
1.2.1.
Estructura de un documento HTML
Las pginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye informacin sobre la propia pgina, como por ejemplo su ttulo y su idioma. El cuerpo de la pgina incluye todos sus contenidos, como prrafos de texto e imgenes.
Figura 05. Esquema de las partes que forman un documento HTML
El cuerpo (llamado body en ingls) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en ingls) contiene todo lo que no se ve (con la nica excepcin del ttulo de la pgina, que los navegadores muestran como ttulo de sus ventanas). EJEMPLO: A continuacin se muestra el cdigo HTML de una pgina web muy sencilla:
<html> <head> <title>El primer documento HTML</title> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prcticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </body> </html>
15
Si quieres probar este primer ejemplo, debes hacer lo siguiente: o o o Abre un editor de archivos de texto y crea un archivo nuevo. Copia el cdigo HTML mostrado anteriormente y pgalo tal cual en el archivo que has creado. Guarda el archivo con el nombre que quieras, pero con la extensin .html
Para que el ejemplo anterior funcione correctamente, es imprescindible que utilices un editor de texto sin formato. Si tu sistema operativo es Window s, puedes utilizar el Bloc de notas, Wordpad, EmEditor, UltraEdit, Notepad++ , etc.
Despus de crear el archivo con el contenido HTML, ya se puede abrir con cualquier navegador para que se muestre con el siguiente aspecto:
Figura 06. Aspecto que muestra el primer documento HTML en cualquier navegador
Es importante conocer las tres etiquetas principales de un documento HTML (<html> , <head> , <body> ):
<html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o despus de la etiqueta <html> (con una sola excepcin que se ver ms adelante). En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora. <head>: delimita la parte de la cabecera del documento. La cabecera contiene informacin sobre el propio documento HTML, como por ejemplo su ttulo y el idioma de la pgina. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepcin de la etiqueta <title>, que se utiliza para indicar el ttulo del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a
16
abrir el primer ejemplo en cualquier navegador y observa dnde se muestra el ttulo de la pgina).
<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (prrafos de texto, imgenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene ms que unas pocas.
Figura 07. Esquema de las etiquetas principales que contiene un documento HTML
1.2.2.
Listas, Tablas.
Listas
El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas no ordenadas (se trata de una coleccin simple de elementos en la que no importa su orden), listas ordenadas (similar a la anterior, pero los elementos estn numerados y por tanto, importa su orden) y listas de definicin (un conjunto de trminos y definiciones similar a un diccionario). Las listas no ordenadas son las ms sencillas y las que ms se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre s pero para los que no se indica un orden o secuencia determinados. La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos.
Una lista es un prrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas: Listas ordenadas Listas no ordenadas Listas de definiciones
Lista ordenada Contenedor <ol> <li> tem 1 </li> Lista ordenada <li> tem 2 </li> </ol>
Tipo de lista
Efecto visual 1. tem 1 2. tem 2
3. tem 3
17
Lista no ordenada Contenedor <ul> <li> tem 1 </li> No ordenada <li> tem 2 </li> </ul>

Tipo de lista
Efecto visual
tem 1 tem 2 tem 3
Lista de definiciones Contenedor <dl> <dt>Trmino</dt> Definicin <dd>Definicin</dd> </dl> tem 2 definicin 2 Tipo de lista Efecto visual tem 1 definicin 1
EJEMPLO: El siguiente cdigo HTML muestra un ejemplo sencillo de lista no ordenada:

<html> <head><title>Ejemplo de etiqueta UL</title></head> <body> <h1>Men</h1> <ul> <li>Inicio</li> <li>Noticias</li> <li>Artculos</li> <li>Contacto</li> </ul> </body> </html>
18
Figura 08: Ejemplo de uso de la etiqueta ul
El navegador por defecto muestra los elementos de la lista tabulados y con una pequea vieta formada por un crculo negro.
El aspecto con el que se muestran los elementos de las listas se puede modificar mediante las hojas de estilos CSS. Este tema se ver en la semana 05, Lenguaje CSS.
EJEMPLO: El siguiente cdigo HTML muestra un ejemplo sencillo de lista ordenada:

<html> <head><title>Ejemplo de etiqueta OL</title></head> <body> <h1>Instrucciones</h1> <ol> <li>Enchufar correctamente</li> <li>Comprobar conexiones</li> <li>Encender el aparato</li> </ol> </body> </html>
19
Figura 09: Ejemplo de uso de la etiqueta ol
El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que en este caso no se emplean vietas grficas en los elementos, sino que se numeran de forma consecutiva.
EJEMPLO: El siguiente cdigo HTML muestra un ejemplo sencillo de lista de definicin:

<html> <head><title>Ejemplo de etiqueta DL</title></head> <body> <h1>Metalenguajes</h1> <dl> <dt>SGML</dt> <dd>Metalenguaje para la definicin de otros lenguajes de marcado</dd> <dt>XML</dt> <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd> <dt>RSS</dt> <dt>GML</dt> <dt>XHTML</dt> <dt>SVG</dt> <dt>XUL</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd> </dl> </body> </html>
20
Figura 10: Ejemplo de uso de la etiqueta dl
Los navegadores formatean las listas de definicin de forma similar a las otras listas, tabulando la definicin y alineando a la izquierda los trminos. Aunque no es habitual, cada trmino puede tener asociada ms de una definicin y cada definicin puede tener asociada varios trminos. Tablas
A menudo resulta til presentar informacin de una manera ms estructurada que en las listas. Las tablas permiten mostrar esta informacin en filas y columnas. Las tablas se definen como series de filas. Una tabla debe respetar las siguientes reglas:
-
La tabla est enmarcada por las etiquetas <TABLE> y </TABLE>. El ttulo de la tabla est enmarcado por <CAPTION> </CAPTION> Cada fila est enmarcada por<TR> </TR> (por Table Row). Las celdas de encabezamiento estn enmarcadas por <TH> </TH> (por Table Header). Los datos en cada celda estn enmarcados por <TD> </TD> (Table Data).
21
EJEMPLO:
<TABLE BORDER="1"> <CAPTION>Este es el ttulo de la tabla</CAPTION> <TR> <TH> Ttulo A1 </TH> <TH> Ttulo A2 </TH> <TH> Ttulo A3 </TH> <TH> Ttulo A4 </TH> </TR> <TR> <TH> Ttulo B1 </TH> <TD> Valor B2 </TD> <TD> Valor B3 </TD> <TD> Valor B4 </TD> </TR> </TABLE>
Los resultados de este cdigo: Este es el ttulo de la tabla Ttulo A1 Ttulo A2 Ttulo A3 Ttulo A4 Ttulo B1 Valor B2 Valor B3 Valor B4
1.2.3.
Enlaces, Hiperenlaces
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo. Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. 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.ucvlima.edu.pe Habra que escribir: <a href="http://www.ucvlima.edu.pe">Visita www.ucvlima.edu.pe </a> Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href:
22
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.ucvlima.edu.pe " "http://www.ucvlima.edu.pe/startpage.aspx" Referencia relativa al sitio:
tendr
el
mismo
efecto
que
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: <a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> Observa como aparece el smbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raz del sitio, habra que escribir: <a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> 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: <a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
23
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: <a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> 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: <a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a> Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijacin se llama tipos.
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. _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.
Para insertar el enlace: Visita www.ucvlima.edu.pe en una ventana nueva Habra que escribir:
<a href="http://www.ucvlima.edu.pe" target ="_blank">Visita www.ucvlima.edu.pe en una ventana nueva</a>
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).
24
1.2.4.
Manejo de imgenes, Sonido y Videos
Imgenes
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 <img>. 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: <img src="imagenes/logo_animales.gif"> Teniendo encuentra 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). Multimedia
Los formatos de sonido ms habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre. A travs del atributo src hay que especificar la ruta y el nombre del archivo de audio. Con el atributo loop indicamos el nmero de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habr que asignarle el valor infinite o -1. Por ejemplo, podramos insertar un sonido de fondo escribiendo el siguiente cdigo: <bgsound src="varios/audio.mid" loop="-1"> La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fcil de encontrar, por si deseamos hacerle alguna modificacin. Podramos, por ejemplo, incluirla justo debajo de la etiqueta <body>.
25
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. La etiqueta <embed> es la que se utiliza para insertar archivos de vdeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay que insertar nada. A travs del atributo src hay que especificar la ruta y el nombre del archivo de vdeo. Los videos insertados a travs de esta etiqueta se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Esto puede cambiarse a travs de los atributos autostart y loop. El atributo autostart indica si el archivo se reproducir automticamente al cargarse la pgina, y puede tomar los valores true o false . El atributo loop indica si el archivo se reproducir continuamente en un bucle, y tambin puede tomar los valores true o false . Por ejemplo para insertar un video, se podra escribir: <embed src="varios/video.avi" autostart="false " loop="true "> Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona del mismo modo para los archivos de audio y de vdeo. No hay que olvidar que para los archivos de audio tambin se mostrarn los controles de reproduccin. Para insertar un archivo de audio, se podra escribir: <embed src="varios/audio.mid" autostart="false " loop="true "> Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero. Tambin puede utilizarse el atributo hidden, con los valores true o false . Cuando su valor es true , se ocultan los controles de reproduccin. Por ejemplo, para insertar sonido de fondo se podra escribir: <embed src="varios/audio.mid" autostart="true " loop="true " hidden="true " >
o tambin:
<embed src="varios/audio.mid" autostart ="true " loop ="true " width ="0" height ="0" >
26
1.3. FORMULARIOS y IFRAMES 1.3.1. Concepto de Iframe
Frame
Los frames (marcos o cuadros) permiten dividir la ventana en varias ms pequeas, de modo que en cada una de ellas se cargue una pgina html distinta. Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorar. Un ejmplo sencillo es el siguiente:
<HTML> <HEAD><TITLE> Ttulo de la pgina </TITLE></HEAD> <FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" > </FRAMESET> <NOFRAMES> <BODY> Lo siento,su navegador no soporta frames. Pulse <a href="frames1.htm>aqu </A> para acceder a los contenidos de estas pginas. </BODY> </NOFRAMES> </HTML> Cuyo resultado es el siguiente:
EL atributo ROWS (filas) es el que define el nmero y el tamao de los frames, en este caso dos filas, de 75 pxels la primera y el resto de la ventana la segunda. Tambin se puede dividir en columnas mediante COLS El tamao de los frames se puede especificar de ms formas:
COLS=*,5*
dos columnas, la segunda cinco veces mayor que la primera
COLS=150,*,150 tres colunmas, la primera y tercera de 150 pxels, la segunda ocupa
el resto.
27
ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.
Las etiquetas NOFRAMES y BODY solamente se usan por cortesa, de hecho se pueden suprimir. Las etiquetas FRAME SRC="frames.htm" cargan las pgina indicadas en el frame correspondiente. Tambin es posible anidar frames, llamando a una pgina que tenga de nuevo frames o bien declarndolo explcitamente. Un ejemplo de esto ltimo es el que aparece abajo.
<FRAMESET COLS=20%,*> <FRAME SRC="frames1.htm"> <FRAMESET ROWS=20%,*> <FRAME SRC="frames2.htm"> <FRAME SRC="frames3.htm"> </FRAMESET> </FRAMESET>
Este cdigo divide la ventana en dos columnas, la primera del 20 % del ancho total, y la segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del total. Iframe
El elemento HTML iframe inserta un marco dentro de un documento. ste, trabaja casi exactamente como el elemento HTML frame, excepto que el ltimo, slo puede ser insertado en un conjunto de marcos (elemento HTML frameset). Resulta til, a la hora de mostrar un documento en una porcin de otro. Veamos un ejemplo como disponer este tipo de frame tan particular: pagina1.html
<html> <head> <title>Ejercicio de iframes</title> </head> <body> <h1>Esto es un Ejercicio de un iframe</h1> <iframe src="pagina2.ht ml" width="400" height="200"> No tiene disponible el navegador la capacidad de iframe </iframe> <h2>Esto ya est fuera del iframe</h2> </body> </html>
28
Algunas propiedades tiles aplicables a un iframe:

-
src Archivo a mostrar dentro del iframe. width Ancho en pxeles. height Alto en pxeles. frameborder Podemos asignarle los valores 1 o 0. Si vale 0 el borde no se muestra. scrolling Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto est inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrar solo si algn contenido del iframe no se ve. Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegacin y por ltimo si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegacin para dicho iframe.
name Nombre del iframe si queremos acceder desde otra pgina. Por ejemplo si queremos actualizar su contenido desde un enlace ubicado en otra pgina.
El uso habitual de los iframes es para mostrar publicidad o Webs de colaboracin. Vamos a mostrar el cdigo de la estructura bsica de un iframe para poder explicar sus partes.
<html> <head> <title>Iframes</title> </head> <body> <iframe src="http://html.hazunaweb.com/" width="600" height="400" scrolling="auto"> Texto alternativo para navegadores que no aceptan iframes </iframe> </body> </html>
Como vemos en el cdigo anterior, debemos definir el tamao del marco del iframe y definir si queremos que haya barra desplazadora o no. sta opcin la especificamos gracias al atributo "scrolling". Su valor por defecto es "auto", aunque podemos definir si queremos barras desplazadoras ("yes") o si no las queremos ("no"). El iframe debe tener una fuente, que ser la url que muestre en el marco que hemos creado. En nuestro caso hemos puesto la pgina de inicio de este tutorial html.
29
1.3.2.
Formularios y sus elementos.
Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir informacin de los usuarios de nuestro site. Los formularios html estn compuestos por campos de texto y botones. Los formularios son un tag ms de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, sern partes del formulario. La etiqueta <form> tiene una serie de atributos bsicos que vamos a pasarte a explicar a continuacin.
La etiqueta input
puede de ingresar control los a datos. crear.
Nos define el registro donde el usuario El atributo type especifica el tipo Entre ellos se encuentran los siguientes valores:
Text: Crea un control que nos permite ingresar un texto en una lnea.
Nota: en este ejemplo podemos observar lo siguiente:

-
action="datos.php" --> nos indica que el archivo datos.php es el encargado de manipular los datos que el usuario ingres en el formulario method="get" --> nos indica que los datos del formulario se enviarn por el mtodo get name="nombre" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo
Radio botones
Se usan cuando queremos que el usuario elija una sola opcin de entre una serie de posibilidades.
30
Nota: en este ejemplo podemos observar lo siguiente:

-
action="edades.asp" --> nos indica que el archivo edades.asp es el encargado de manipular los datos que el usuario ingres en el formulario method="post" --> nos indica que los datos del formulario se enviarn por el mtodo post name="edad" --> debemos utilizar el mismo nombre (en este caso "edad") para todos los elementos del mismo control radio. value="mayor" --> define el valor del elemento <input>
Checkbox (casillas de verificacin)
Permite al usuario elegir varias opciones entre todas las posibilidades.
Nota: en este ejemplo podemos observar lo siguiente: action="hobbie.php" --> nos indica que el archivo hobbie.php es el encargado de manipular los datos que el usuario ingres en el formulario method="get" --> nos indica que los datos del formulario se enviarn por el mtodo get name="pasa" --> debemos utilizar el mismo nombre(en este caso "pasa") para todos los elementos del mismo control checkbox. value="tv" --> define el valor del elemento <input>
31
1.3.3.
TRABAJO DE FORO EN EL CAMPUS VIRTUAL
1.4. W3C Y EL LENGUAJE XHTML 1.4.1. Estandarizacin W3C
El W3C, organizacin independiente y neutral, desarrolla estndares relacionados con la Web tambin conocidos como Recomendaciones, que sirven como referencia para construir una Web accesible, interoperable y eficiente, en la que se puedan desarrollar aplicaciones cada vez ms robustas. La finalidad de los estndares es la creacin de una Web universal, accesible, fcil de usar y en la que todo el mundo pueda confiar. Con estas tecnologas abiertas y de uso libre se pretende evitar la fragmentacin de la Web y mejorar las infraestructuras para que se pueda evolucionar hacia una Web con la informacin mejor organizada. 1.4.2. XHTML
XHTML significa lenguaje de marcado de hipertexto extendido. Se utiliza para generar documentos y contenidos de hipertexto generalmente publicados en la WEB. Es adems una reformulacin del lenguaje HTML que se puede jactar de ser ahora compatible con XML. EJEMPLO: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <title>Titulo de la pgina</title> </head> <body> <p>Primer documento XHTML, es decir un, Hola mundo </p> </body> </html> Analicemos el cdigo lnea a lnea:
<?xml version="1.0" encoding="UTF-8"?>
Indicamos la versin de XML empleada (esa misma vale perfectamente) as como la codificacin, UTF-8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
32
Este es el encabezado que deberan llevar todos los documentos XHTML1.0 estrctos acordes a las especficaciones de la W3C. Es un aviso para que el agente de usuario sepa qu tipo de documento va a interpretar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Declaracin de documentos Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Como dije trataremos de concentrarnos en los documentos declarados como estrctos.


Los comentarios comienzan con  (los saltos de lnea no los quiebran). No son tomados en cuenta por el agente de usuario, es decir no se interpretan (por lo que no se representan) y se utilizan frecuentemente para hacer aclaraciones en el cdigo.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
Aqu damos comienzo al documento XHTML, todo documento debe llevar esta etiqueta de apertura ( <html> ) y al finalizar debemos escribir la etiqueta de cierre que en el ejemplo se encuentra al final del cdigo ( </html> ). Adems aparecen 3 atributos, el primero especfica el tipo de documento, y el segundo y el tercero deben llevar como valores el cdigo del lenguaje en el que ser escrito. Para la lengua castellana este valor es es. Puedes averiguar los cdigos de otras lenguas. <head> <title>Titulo de la pgina</title> </head> Con la etiqueta de apertura <head>comienza lo que se llama el encabezado de las pginas web, aqu se dan ciertas especficaciones y otra META informacin acerca del documento que ya veremos con ms detalle. Pero entre ellas est el elemento utilizado en el ejemplo, mediante las etiquetas <title></title>, que encierran el ttulo de la pgina. Los navegadores suelen mostrarlo cmo ttulo de la ventana. Tambin es utilizada por los buscadores cuando presentan resultados de los documentos a sus usuarios. <body> <p>Primer documento XHTML, es decir un, Hola mundo </p> </body>
33
1.5. LENGUAJE CSS (Cascading Style Sheets) 1.5.1. Introduccin a CSS
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentacin y es imprescindible para crear pginas web complejas. Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina: prrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical entre elementos, posicin de cada elemento dentro de la pgina, etc.
Por qu trabajar con Hojas de Estilo? Las hojas de estilo nos ahorran mucho trabajo. La manera correcta de trabajar es separando el contenido de cada pgina, del diseo de la misma. Normalmente los estilos son guardados en un archivo externo con la extensin " .css". Este archivo le permite hacer los cambios de apariencia y disposicin de los elementos en todas las pginas de su sitio Web, con tan solo editar un solo documento CSS.
La estructura de CSS CSS funciona a base de reglas. Cada regla est compuesta por un selector y la declaracin. La declaracin a su vez est compuesta por una propiedad y su valor. La declaracin debe estar definida entre llaves ({...})
34
Sintaxis selector{propiedad:valor} Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML sern afectados por la declaracin cuya propiedad es color y su valor es blue . p{color:blue } Si el valor est compuesto por varias palabras, debemos definirlo entre comillas. p{font-family:"Times New Roman"} Si deseas especificar ms de una propiedad, debers separarlas con un punto y coma(;). h1{color:red; text-align:center} Para definir los estilos de forma ms clara y fcil de leer, puedes describir cada propiedad en diferentes lneas. p { color:red; text-align:center; } Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separndolos con una coma(,) p, h1, h2, h3 { color:blue ; font-family:Arial; } El selector class Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML. Por ejemplo el elemento p puede ser de color azul o de color rojo. El valor del selector class debe ir antepuesto por un punto (.) Sintaxis p.azul {color:blue} p.rojo {color:red}
35
Con el selector class tambin podemos definir diferentes estilos para cualquier elemento HTML. Por ejemplo definimos un class rojo y uno azul. Sintaxis .azul {color:blue} .rojo {color:red}
Dnde usar los estilos? Hay 3 formas de insertar una hoja de estilos: Entre lneas Dentro de la seccin Head Hojas de estilo externas
36
Entre lneas
Definimos el estilo directamente dentro del cdigo HTML. Sintaxis <selector style="propiedad: valor;propiedad: valor;"> Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento. Su uso est dado por el atributo style .
Dentro de la seccin Head
Las hojas de estilo interna deben usarse cuando una pgina tiene un estilo nico. Sintaxis <head> <style type="text/css"> selector 1 {propiedad: valor;} selector 2 {propiedad: valor;} </style> </head> <body> <etiqueta 1>Bla, bla, bla</etiqueta 1> <etiqueta 2>Texto, texto, texto</etiqueta 2> </body> La etiqueta <style type="text/css"> en la cabecera del documento entre las etiquetas <head> y </head> se usa para definir los estilos correspondientes a esta pgina solamente.
37
En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo. Entre las etiquetas style definimos al selector body con un color de fondo #008080 y al selector p de color blanco. o Hojas de estilo externas
Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias pginas. Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web. Los archivos de hojas de estilo deben llevar la terminacin .css. Sintaxis Contenido del archivo de los estilos selector { propiedad:valor; /* No olvidar el (;) al final de cada valor */ propiedad:valor; propiedad:valor; } Sintaxis Esta es la forma de llamar al archivo ".css" desde un documento HTML <head> <link rel="stylesheet" type="text/css" href="/archivo.css"> </head>
38
Cada pgina del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento. rel="stylesheet" nos indica que la relacin es una hoja de estilo. type="text/css" nos dice que el tipo es texto y css. href="/fuentes.css" es el nombre del documento que contiene el cdigo css.
As se vera el documento HTML que llama al archivo "estilos.css".
1.5.2.
El modelo de Caja
El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las pginas se representen mediante cajas rectangulares. Las cajas de una pgina se crean automticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
39
La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la pgina:
Figura 11. Las cajas se crean automticamente al definir cada elemento HTML
Las cajas de las pginas no son visibles a simple vista porque inicialmente no muestran ningn color de fondo ni ningn borde.
Debemos hacernos la idea que todo elemento que se crea dentro de una pgina HTML genera una caja. Podemos acceder a las propiedades del borde de esa caja mediante las CSS; las propiedades ms importantes a las que tenemos acceso son: border-w idth : Establece la anchura de algunos o todos los bordes de los elementos border-style : Establece el estilo de algunos o todos los bordes de los elementos border-color : Establece el color de algunos o todos los bordes de los elementos
Veamos un ejemplo que inicialice estas propiedades:
pagina1.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="pregunta">Quin descubri Amrica y en que ao fue?</p> <p class="respuesta">Coln en 1492</p> </body> </html> estilos.css .pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000; } .respuesta { border-width:1px; border-style:dashed; border-color:#000000; }
40
Como podemos ver, hemos definido dos clases .pregunta que inicializa el color de fondo en amarillo y luego define el ancho del borde en un pixel, el estilo es slido y el color de la lnea de borde es negro. Luego recordar que para indicar que una marca tenga este estilo debemos inicializar la propiedad class de la marca HTML:
<p class="pregunta">Quin descubri Amrica y en que ao fue?</p>
Al segundo estilo definido lo hemos hecho con la clase .respuesta

.respuesta { border-width:1px; border-style:dashed; border-color:#000000; }
El resultado es:
Otra serie de propiedades relacionadas al contorno de una marca HTML son:

margin : establece la anchura de algunos o todos los mrgenes de los elementos margin-top : Establece la anchura del margen superior de los elementos de bloque margin-right : Establece la anchura del margen derecho de los elementos margin-bottom : Establece la anchura del margen inferior de los elementos de bloque margin-left : Establece la anchura del margen izquierdo de los elementos
El margen est despus del borde. Veamos un ejemplo, la pgina HTML muestra dos prrafos con 8 pixeles de margen:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p>Primer prrafo</p> <p>Segundo prrafo</p> </body> </html>
41
La hoja de estilo:
p { background-color:#ffffaa; margin:8px; }
El resultado es:
1.5.3.
Posicionamiento de elementos
La propiedad position nos permite posicionar un elemento dentro de la pgina. Por lo general va acompaado de las propiedades: top, right, bottom y left. Sus posibles valores son: static (esttico) siempre tiene la ubicacin que la pgina da por defecto. relative (relativa) mueve el elemento relativamente de su posicin normal. absolute (absoluta) posiciona al elemento con coordinadas relativas al bloque que lo contiene. fixed (fija) posiciona al elemento con coordinadas relativas a la ventana del navegador. La propiedad float La propiedad float define donde ubicar un texto o una imagen dentro de otro elemento. Solo puede ubicarlo a la derecha o a la izquierda del elemento. Ejemplo: Vamos a posicionar una imagen a la derecha del texto.
42
Resultado:
Ejemplo: El siguiente ejemplo muestra tres imgenes posicionadas de forma normal:
43
Aplicando el posicionamiento relativo, se desplaza la primera imagen de forma descendente:

img.desplazada { position: relative; top: 8em; } <img class="desplazada" src="imagen.png" alt="Imagen genrica" /> <img src="imagenes/imagen.png" alt="Imagen genrica" /> <img src="imagenes/imagen.png" alt="Imagen genrica" />
Resultado:
1.6. LENGUAJE JAVA SCRIPT JavaScript es un lenguaje de programacin que se utiliza principalmente para crear pginas web dinmicas.
Una pgina web dinmica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
Tcnicamente, JavaScript es un lenguaje de programacin interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
44
1.6.1.
Estructura Bsica JScript
A continuacin, se muestra un primer script sencillo pero completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>El primer script</title> <script type="text/javascript"> alert("Hola Mundo!"); </script> </head> <body> <p>Esta pgina contiene el primer script</p> </body> </html>
La instruccin alert() es una de las utilidades que incluye JavaScript y permite mostrar un mensaje en la pantalla del usuario. Si se visualiza la pgina web de este primer script en cualquier navegador, automticamente se mostrar una ventana con el mensaje "Hola Mundo!". Resultado:
Dnde y cmo incluir JavaScript? Existen distintos modos de incluir lenguaje JavaScript en una pgina. o La forma ms frecuente de hacerlo es utilizando la directiva <script> en un documento HTML (se pueden incluir tantas directivas <script> como se quiera en un documento). El formato es el siguiente: <script language="Javascript 1.3">
45
El atributo lenguaje hace referencia a la versin de JavaScript que se va a utilizar en dicho script. Otro atributo de la directiva script es src, que puede usarse para incluir un archivo externo que contiene JavaScript y que quiere incluirse en el cdigo HTML. <script language="JavaScript" src ="archivo.js"> </script> El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuyo nombre acaba con la extensin js. o Puede incluirse tambin cdigo JavaScript como respuesta a algn evento: <input type="submit" onclick="alert('Acabas de hacer click');return false;" value="Click">
JavaScript es sensible a maysculas y minsculas, todos los elementos de JavaScript deben referenciarse cmo se definieron, no es lo mismo "Salto" que "salto".
1.6.2.
Variables, Operadores
Variables: Las variables almacenan y recuperan datos, tambin conocidos como "valores". Una variable puede referirse a un valor que cambia o se cambia. Las variables son referenciadas por su nombre, y el nombre que les es asignado debe ser conforme a ciertas reglas (debe empezar con una letra o ("_"); los caracteres siguientes pueden ser nmeros (0-9), letras maysculas o letras minsculas). Ejemplos de definiciones errneas: var Mi Variable, 123Probando, $Variable, for, while; Ejemplos de definiciones correctas: var _Una_Variable, P123robando, _123, mi_carrooo; Por supuesto, podemos inicializar una variable al declararla: var Una_Variable="Esta Cadenita de texto"; Las variables en JavaScript pueden ser de alcance global o local. Una variable global es accesible desde cualquier <script> de la pgina mientras que una variable local slo lo es desde la funcin en la que fue declarada. Normalmente, se crea una nueva variable global asignndole simplemente un valor: globalVariable=5; Sin embargo, si usted est codificando dentro de una funcin y usted quiere crear una variable local que slo tenga alcance dentro de esa funcin, debe declarar la nueva variable haciendo uso de var:
46
function newFunction() { var localVariable=1; globalVariable=0; ... } Tipos de datos: Javascript reconoce seis tipos de valores diferentes: numricos, lgicos, objetos, cadenas, nulos e indefinidos. JavaScript tiene la peculiaridad de ser un lenguaje dbilmente tipado, esto es, una variable puede cambiar de tipo durante su vida, por ejemplo uno puede declarar una variable que ahora sea un entero y ms adelante una cadena. MiVariable=4; y despus: MiVariable="Una_Cadena"; A diferencia de otros lenguajes en Javascript no es necesario declarar las variables especificando el tipo de dato que contendrn, ser el propio interprete el que le asignar el tipo apropiado.
Nmeros Boleanos Cadenas Objetos Nulos Indefinidos Enteros o coma flotante. True o False. Los tipos de datos cadena deben ir delimitados por comillas simples o dobles. Obj = new Object(); Null Un valor indefinido es el que corresponde a una variable que ha sido creada pero no le ha sido asignado un valor.
Operadores Aritmticos:
Operador + * / % ++ -Nombre Suma Substraccin M ultiplicacin Divisin M dulo: el resto despus de la divisin Incremento. Decremento. Invierte el signo de un operando. Ejemplo 5+6 7-9 6*3 4/8 7%2 a++ a--a Descripcin Suma dos nmeros Resta dos nmeros M ultiplica dos nmeros Divide dos nmeros Devuelve el resto de dividir ambos nmeros, en este ejemplo el resultado es 1 Suma 1 al contenido de una variable. Resta 1 al contenido de una variable. Invierte el signo de un operando.
47
Operadores de Comparacin:
Operador == === != !== > >= < <=
Descripcin " Igual a" devuelve true si los operandos son iguales Estrictamente "igual a" (JavaScript 1.3) " No igual a" devuelve true si los operandos no son iguales Estrictamente " No igual a" (JavaScript 1.3) " Mayor que" devuelve true si el operador de la izquierda es mayor que el de la derecha. " Mayor o igual que " devuelve true si el operador de la izquierda es mayor o igual que el de la derecha. " Menor que" devuelve true si el operador de la izquierda es menor que el de la derecha. "Menor o igual que" devuelve true si el operador de la izquierda es menor o igual que el de la derecha.
Operadores Lgicos:
Operador && || ! Descripcin " Y " Devuelve true si ambos operadores son true. " O " Devuelve true si uno de los operadores es true. "No" Devuelve true si la negacin del operando es true.
EJEMPLO: <html> <head> <title>Ejemplo de JavaScript</title> </head> <body> <script language="JavaScript"> a = 8; b = 3; c = 3; document.write( (a == b) && (c > b) );document.write("<br>"); document.write( (a == b) || (b == c) );document.write("<br>"); document.write( !(b <= c) );document.write("<br>"); </script> </body> </html>
Resultado: false true false

48
El operador de asignacin '=' Permite asignar un valor a una variable.

Operador = += (tambien - =, * =, / =) &= (tambin |=) Descripcin Asigna el valor del operando de la derecha a la variable de la izquierda. Ejemplo: inttotal=100; Aade el valor del operando de la derecha a la variable de la izquierda. Ejemplo: inttotal +=100 Asigna el resultado de (operando de la izquierda & operando de la derecha) al operando de la izquierda
Operadores especiales:
Operador (condicin) ? trueVal : falseVal Descripcin Asigna un valor especificado a una variable si la condicin es true, por otra parte asigna un valor alternativo si la condicin es false. El operador new crea una instancia de un objeto. La palabra clave 'this' se refiere al objeto actual. El operador ',' evala los dos operados. El operador delete borra un objeto, una propiedad de un objeto, o un elemento especificado de un vector. El operador Void especifica una expresin que ser evaluada sin devolver ningn valor. Devuelve el tipo de dato de un operando.
New This , Delete Void Typeof
1.6.3.
Estructuras de Control
La sentencia IF La sentencia If evala una condicin, expresada entre parntesis ( ). Si esta se cumple, ejecuta el bloque de instrucciones que tiene entre llaves { }.
if (condicin) { bloque de instrucciones; }
Tambin podemos indicar un bloque de instrucciones, con la palabra else, que se ejecutar si no se cumple la instruccin.
if (condicin) { bloque de instrucciones si se cumple; } else { bloque de instrucciones si nos e cumple; }
49
Podemos poner varios else, con otras condiciones entre parntesis. Se irn evaluando todas las condiciones hasta encontrar la primera cierta. Si una se cumple, se ejecutarn slo esas instrucciones, aunque hubiesen otras condiciones ciertas. Si no se ha cumplido ninguna, se ejecutar el ltimo else, si no tiene condicin.
if (condicin1) { bloque de instrucciones } else (condicin2) { bloque de instrucciones } else (condicin3) { bloque de instrucciones } else { bloque de instrucciones } si se cumple condicin1; si se cumple condicin2; si se cumple condicin3; si no se ha cumplido ninguna;
Por ejemplo:
if (nota >= 0 && nota < 5) { return 'Suspenso'; } else (nota >= 5 && nota < 6) { return 'Suficiente'; } else (nota >= 6 && nota < 7) { return 'Bien'; } else (nota >= 7 && nota < 9) { return 'Notable'; } else (nota >= 9 && nota <= 10) { return 'Sobresaliente'; } else { return 'La nota no es vlida. Tiene que estar entre 0 y 10'; }
Las sentencias If se pueden anidar, siempre que una quede completamente dentro de otra. Por ejemplo:
if (condicin1) { if (condicin2) { si se cumple condicin 1 y condicin2; } else { si se cumple condicin 1 pero no condicin2; } } else { si no se cumple condicin1 }
La sentencia SWITCH De forma parecida al If se comporta la sentencia Switch. Se le asigna un valor o expresin, y se compara con cada case. Ejecuta el cdigo de la primera coincidencia encontrada. Si no encuentra ninguna, se ejecuta el cdigo de default.
50
switch(expresion) case valor1: instrucciones si break; case valor2: instrucciones si break; default: instrucciones si }
{ coincide;
coincide;
no coincide ninguna;
El bucle WHILE Los bucles son estructuras fundamentales en programacin, ya que permiten repetir una instruccin un nmero determinado de veces, o hasta que se cumpla una determinada condicin (o deje de cumplirse). En bucle While, evala una condicin. Si se cumple, ejecuta su bloque de instrucciones, y vuelve a evaluar la condicin. Si se cumple, vuelve a ejecutar las instrucciones, y as sucesivamente mientras que la condicin se cumpla.
while (condicin) { bloque de sentencias; }
Por ejemplo, el siguiente bucle mostrara 5 mensajes. La variable i inicialmente vale 0. En cada vuelta del bucle, se comprueba si es menor de 5. Si lo es, se incrementa en 1 en la primera instruccin (recuerda que i++ equivale a i+=1, que equivale a i=i+1), se muestra el mensaje en la segunda, y vuelve a comenzar el ciclo. Cuando i sea 5, mostrar el quinto mensaje, y en la siguiente comprobacin, la condicin ser falsa.
var i = 0; while (i < 5) { i++; alert('Mensaje nmero ' + i); }
El bucle While se puede expresar al revs, para que primero ejecute las instruciones, y despus evale la condicin. Esto asegura que por lo menos se ejecuten las instrucciones una vez, y se repitan mientras se cumpla la condicin. Su sintaxis es:
do { bloque de sentencias; } while (condicin)
51
El bucle FOR El bucle FOR se emplea normalmente para contar, para realizar una repeticin un nmero determinado de veces. Se define con un valor inicial para la variable que acta como contador, la condicin que se ha de cumplir para que el bucle se repita, y la actualizacin de la variable (normalmente un incremento). Estros tres parmetros, se separan por punto y coma (;).
for (valor_inicial; condicin; actualizacin) { bloque de sentencias; }
El orden de ejecucin sera: asignar el valor inicial, evaluar la condicin, si se cumple, ejecutar las sentencias, actualizar la variable, evaluar la condcin, si se cumple ejecutar las sentencias, actualizar la variable, etc... El mismo ejemplo que hemos utilizado con el bucle While para mostrar 5 mensajes, lo podemos expresar con un For como:
for (i=1; i<=5; i++) { alert('Mensaje nmero ' + i); }
Una variante del For es la estructura For .. In, que nos permite recorrer los elementos de un array o un objeto.
for (variable in objeto) { bloque de sentencias; }
Si lo utilizamos con un array, lo que har el bucle, es que para cada vuelta, variable tomar el valor de un elemento del array, comenzando por el primero, y se repetir una vez para cada uno. Por ejemplo:
function datosAlumno() { alumno = new Array('Juan', 25, 8.5); datos = 'Datos del alumno:'; for (dato in alumno) { datos = datos + ' ' + dato; } return datos; }
El bucle del ejemplo se repetir tres veces, una para cada elemento. La funcin devolver 'Datos del alumno: Juan 25 8.5'.
52
1.6.4.
Funciones
En JavaScript la estructura de una funcin es la siguiente:

function <nombre de funcin>(argumento1, argumento2, ..., argumento n) { <cdigo de la funcin> }
Debemos buscar un nombre de funcin que nos indique cul es su objetivo (Si la funcin recibe un string y lo centra, tal vez deberamos llamarla centrarTitulo). Veremos que una funcin puede variar bastante en su estructura, puede tener o no parmetros, retornar un valor, etc. Ejemplo: Mostrar un mensaje que se repita 3 veces en la pgina con el siguiente texto:
'Cuidado' 'Ingrese su documento correctamente' 'Cuidado' 'Ingrese su documento correctamente' 'Cuidado' 'Ingrese su documento correctamente'
La solucin sin emplear funciones es:

<html> <head> </head> <body> <script language="javascript"> document.write("Cuidado< br>"); document.write("Ingrese su documento correctamente<br>"); document.write("Cuidado< br>"); document.write("Ingrese su documento correctamente<br>"); document.write("Cuidado< br>"); document.write("Ingrese su documento correctamente<br>"); </script> </body> </html> Empleando una funcin: <html> <head> </head> <body> <script languaje="javascript"> function mostrarMensaje() { document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>"); } mostrarMensaje(); mostrarMensaje(); mostrarMensaje();
53
</script> </body> </html>
Es importante notar que para que una funcin se ejecute debemos llamarla desde fuera por su nombre (en este ejemplo: mostrarMensaje()). 1.6.5. Objetos String, Date, Math
El Objeto String Este objeto nos permite hacer diversas manipulaciones con las cadenas, para que trabajar con ellas sea ms sencillo. Cuando asignamos una cadena a una variable, JS est creando un objeto de tipo String que es el que nos permite hacer las manipulaciones. Propiedades length. Valor numrico que nos indica la longitud en caracteres de la cadena dada. prototype. Nos permite asignar nuevas propiedades al objeto String. Mtodos anchor(nombre). Crea un enlace asignando al atributo NAME el valor de 'nombre'. Este nombre debe estar entre comillas " " big(). Muestra la cadena de caracteres con una fuente grande. blink(). Muestra la cadena de texto con un efecto intermitente. charAt(indice). Devuelve el carcter situado en la posicin especificada por 'indice'. fixed(). Muestra la cadena de caracteres con una fuente proporcional. El Objeto Math Este objeto se utiliza para poder realizar clculos en nuestros scripts. Tiene la peculiaridad de que sus propiedades no pueden modificarse, slo consultarse. Propiedades E. Nmero 'e', base de los logaritmos naturales (neperianos). LN2. Logaritmo neperiano de 2. LN10. Logaritmo neperiano de 10. LOG2E. Logaritmo en base 2 de e. LOG10E. Logaritmo en base 10 de e. PI. Nmero PI. SQRT1_2. Raz cuadrada de 1/2. SQRT2. Raz cuadrada de 2. Mtodos abs(numero). Funcin valor absoluto. acos(numero). Funcin arcocoseno. Devuelve un valor cuyas unidades son radianes o ceil(numero). Devuelve el entero obtenido de redondear 'numero' "por arriba". cos(numero). Devuelve el coseno de 'numero' (que debe estar en radianes) o NaN. exp(numero). Devuelve el valor enumero. floor(numero). Devuelve el entero obtenido de redondear 'numero' "por abajo".
54
1.6.6.
Avance de Trabajo prctico y/o Investigacin
55
UNIDAD II: DISEO Y CONSTRUCCION DE PAGINAS WEB CON XHTML- II 2.1. Javascript con Objetos
Un objeto es una estructura que contiene tanto las variables (llamadas propiedades) como las funciones que manipulan dichas variables (llamadas mtodos). A partir de esta estructura se ha creado un nuevo modelo de programacin (la programacin orientada a objetos) que atribuye a los mismos propiedades como herencia o polimorfismo. Como veremos, JavaScript simplifica en algo este modelo y hace una programacin hbrida entre la programacin estructurada y la programacin orientada a objetos. El modelo de la programacin orientada a objetos normal y corriente separa los mismos en dos: clases e instancias (objetos). Las primeras son entes ms abstractos que definen un conjunto determinado de objetos. Las segundas son miembros de una clase, poseyendo las mismas propiedades que la clase a la cual pertenecen.
Construccin de Objetos
Antes de crear un objeto nuevo, es necesario definir a ese objeto mediante la descripcin de sus propiedades. Se hace mediante una funcin que define el nombre y propiedades de la funcin. Esta funcin se define como funcin constructor. Ejemplo 01: function estudiante(nombre,ao,calificacin) { this.nombre=nombre; this.ao=ao; this.calificacin=calificacin; } La palabra clave this, tiene un papel especial en JavaScript y se refiere al objeto actual. En base a la funcin anterior puede crear un objeto con el estatuto nuevo: estudiante1 = new estudiante("Juan",15,8); La lnea de cdigo crea un objeto llamado estudiante1 con tres propiedades: estudiante1.nombre, estudiante1.ao y estudiante1.calificacin. Para crear un objeto nuevo: estudiante2 = new estudiante("Maria",18,9); Ahora , puede utilizar objetos como propiedades de otros objetos. Por ejemplo: function calificacin(matemticas,ingls,fsica) { this.matemticas = matemticas; this.ingls = ingls; this.fsica = fsica; } Con esto puede crear dos instancias del objeto calificacin para los dos estudiantes: JuanCalificacin = new calificacin(45,80,90); MariaCalificacin = new calificacin(25,65,90);
56
Y con estos objetos, puede entonces crear los objetos estudiantes: estudiante1 = new estudiante("Juan",15,JuanCalificacin); estudiante2 = new estudiante("Maria",18,MariaCalificacin); Ahora puede referirse a la calificacin de matemticas de Juan como estudiante1.grado.matemticas, o a la calificacin de Maria en Fsica en estudiante2.grado.fsica. Para imprimir el nombre, la edad y las calificaciones del estudiante en la ventana del documento, puede crear una funcin llamada verArchivo( ): function verArchivo() {
document.w rite("Nombre: " + this.nombre + "<br>"); document.w rite("Ao: " + this.ao + "<br>"); document.w rite("Calificacin Matemticas: " + this.calificacin.matemticas + "<br>"); document.w rite("Calificacin Ingls: " + this.calificacin.ingls + "<br>"); document.w rite("Calificacin Fsica: " + this.calificacin.fsica + "<br>");
} Una vez definido el mtodo, necesita cambiar la definicin del objeto para incluir el mtodo: function estudiante(nombre,ao,calificacin) {
this.nombre=nombre; this.ao=ao; this.calificacin=calificacin; this.verArchivo = verArchivo;
} Despus puede ver el perfil del estudiante Juan, con el comando: estudiante1.verArchivo( );
Ejemplo 02: <html> <head> <title>Ejemplo 13</title> <Script Language="JavaScript">  </script> </head> <body> <Script Language="JavaScript"> <!-nuevoEmpleado.verArchivo(); // --> </script> </body> </html>
2.2. Servidor de Aplicaciones Web y Servidor de Base de Datos

Un servidor de aplicaciones no es ms que un cambio de nombre, para algunos servidores Web de nueva generacin que proporcionan la lgica de negocio sobre la que construir aplicaciones. Suelen asociarse con servidores de alto rendimiento pensados para dar servicio a sitios Web (Web sites) con grandes necesidades: afluencia de visitas, movimiento de datos, atencin de transacciones hacia bases de datos, etc. Generalmente los fabricantes del sector tienen a disposicin del pblico un servidor Web bsico y otro con multitud de extensiones fuertemente integradas al que llaman servidor de aplicaciones.
58
Un servidor de aplicaciones clsico se apoya en un modelo cliente/servidor de tres capas: Presentacin: una interfaz, generalmente grfica que reside en los clientes. El ejemplo tpico es un navegador. Lgica de negocio: donde reside el servidor de aplicaciones y el conjunto de programas a los que da soporte. Almacenamiento: generalmente una base de datos.
2.3. Lenguaje de Programacin PHP

PHP (acrnimo de "PHP: Hypertext Preprocessor") es un lenguaje interpretado de alto nivel embebido en pginas HTML y ejecutado en el servidor. Hay que entender primero como funciona la solicitud de pginas en un navegador para comenzar a programar en PHP. Comunicacin entre el cliente y el servidor sin PHP: 1 - Tipeamos en la barra del navegador la direccin y el archivo a solicitar. 2 - El web browser (navegador) enva el mensaje a travs de Internet a la computadora, por ejemplo www.lanacion.com/pagina1.htm solicitando la pgina (archivo) pagina1.htm 3 - El web server (servidor web, que puede ser el Apache, IIS, etc.) que es un programa que se ejecuta en la mquina www.lanacion.com, recibe el mensaje y lee el archivo solicitado desde el disco duro. 4 - El servidor web enva el archivo solicitado por el navegador tal cual est en el disco duro. 5 - El navegador muestra en pantalla el archivo que envi el servidor web. Este proceso siempre es el mismo cuando hablamos de pginas estticas (pginas que no cambian), cualquiera sea el cliente que solicita la pgina el contenido siempre ser el mismo. La nica forma que el contenido del archivo cambie es que el administrador de ese sitio web edite el contenido del archivo pagina1.htm y haga modificaciones. Comunicacin entre el cliente y el servidor con PHP: 1 - Tipeamos en la barra del navegador la direccin y el archivo a solicitar. 2 - El web browser (navegador) enva el mensaje a travs de Internet a la computadora llamada www.lanacion.com solicitando la pgina (archivo) pagina1.php 3 - El web server (servidor web, que puede ser el Apache, IIS, etc.), recibe el mensaje y al ver que la extension es "php" solicita al intrprete de PHP (que es otro programa que se ejecuta en el servidor web) que le enve el archivo. 4 - El intrprete PHP lee desde el disco el archivo pagina1.php 5 - El intrprete PHP ejecuta los comandos contenidos en el archivo y eventualmente se comunica con un gestor de base de datos (ejemplos de ellos pueden ser MySql, Oracle, Informix, SQL Server, etc.) 6 - Luego de ejecutar el programa contenido en el archivo enva ste al servidor web. 7 - El servidor web enva la pgina al cliente que la haba solicitado. 8 - El navegador muestra en pantalla el archivo que envi el servidor web. Para aquellas personas que conocen otros lenguajes de programacin (C - Java - C# - Pascal etc.) la salida de los resultados normalmente es la pantalla, en PHP la salida es la pgina HTML (luego sta viaja por internet y llega al cliente que la solicit)
59
Funcion : isset
Permite saber si una variable est definida. La funcin isset recibe como parmetro la variable a verificar, devolviendo un valor TRUE si la variable est definida, de lo contrario devuelve FALSE.
Ejemplo:
$Precio = 27.54; if (isset($Precio)) echo("La variable est definida"); else echo("La variable no est definida");
En este caso se imprimir la leyenda: La variable est definida. Tambin se puede utilizar la funcin isset con objetos, como por ejemplo, para saber si se ha pulsado un botn o no. Ejemplo: Ingresar dos valores en un formulario, y mostrar todos los nmeros comprendidos.
<Html> <Title> Numeros.php </Title> <Body> <?PHP if (isset($_REQUEST[boton])) { $a=$_REQUEST[a]; $b=$_REQUEST[b]; echo "Nmeros comprendidos entre $a y $b"; echo "<Hr>"; for ($i=$a+1; $i<$b; $i++) { echo ("$i - "); } } else { ?> <FORM ACTION="Numeros.php" METHOD="POST"> <H2> Ingrese el intervalo para los nmeros pares <Hr> Valor 1: &nbsp<INPUT TYPE="TEXT" NAME="a" SIZE="10"> <Br> Valor 2: &nbsp<INPUT TYPE="TEXT" NAME="b" SIZE="10"> <Br><Br> <INPUT TYPE="SUBMIT" NAME="boton" VALUE="Ingresar Datos"> <?PHP
60
} ?> </Body> </Html> Comentario: En primera instancia, mediante la funcin isset , se evala si el botn est definido con algn valor, es decir, si se ha pulsado. Para la primera vez que se ejecute la pgina, la condicin if (isset($_REQUEST[boton])) ser falsa (FALSE), por lo tanto se ejecutar el formulario. Una vez ingresado los valores y presionado el botn, la pgina se llama a si misma, pero ahora la condicin: if (isset($_REQUEST[boton])) ser verdadera (TRUE). El resto del programa simplemente ejecuta lo requerido en el enunciado.
Una funcin consta de un nombre y argumentos, llamados comnmente parmetros. Formato: function Nombre_Funcion (parametro1, parametro2, ... parmetro n) { Instrucciones; <return valor> } Los parmetros son opcionales, ya sea que una funcin acepte o no valores, lo mismo que la instruccin return, dependiendo de que la funcin retorne algn valor o no. Ejemplo: Realizar una funcin que acepte dos nmeros y devuelva el producto de ambos. Cargar los dos valores a travs de un formulario.
<Html> <TITLE> Producto.php </TITLE> <Body> <?PHP function Producto($a, $b) { $p = $a * $b; return $p; } // Programa principal if ( $_REQUEST['Boton'] != "" ) { $V1 = $_REQUEST['Valor1']; $V2 = $_REQUEST['Valor2']; echo ("<H3>");
61
echo (" El producto de $V1 y $V2 es: " . Producto($V1, $V2)); } else { ?> <FORM ACTION="Producto.php" METHOD="POST"> <H2> Ingrese Primer valor : <Input Type="Text" Name="Valor1" Size="5"> <Br> Ingrese Segundo valor: <Input Type="Text" Name="Valor2" Size="5"> <Br><Br> <Input Type="Submit" Name="Boton" Value="Ingresar Datos"> </Form> <?PHP } ?> </Body> </Html>
Ejemplo: Realizar una funcin que permita determinar si un nmero pasado como parmetro, es par o impar.
<Html> <TITLE> Par.php </TITLE> <Body> <?PHP function Par($n) { if ($n % 2 == 0) return true; else return false; } // Programa principal if ( $_REQUEST['Boton'] != "" ) { $V = $_REQUEST['Valor']; echo ("<H2>"); echo (" El valor $V es: "); if (Par($V)) echo ("Par"); else echo ("Impar"); }
62
else { ?> <FORM ACTION="Par.php" METHOD="POST"> <H3> Ingrese un valor : <Input Type="Text" Name="Valor" Size="5"> <Br><Br> <Input Type="Submit" Name="Boton" Value="Ingresar Dato"> </Form> <?PHP } ?> </Body> </Html>
Comentario: Se observa que en este caso, que la funcin devuelve un tipo Boolean, es decir true o false, segn corresponda. En el programa principal, la funcin es llamada directamente dentro de la estructura if. Observar adems, que no hace falta colocar == true, ya que lo toma por defecto. Ejemplo: Desarrollar una funcin que acepte una cadena de caracteres y la convierta en mayscula.
<Html> <TITLE> Mayuscula.php </TITLE> <Body> <?PHP function Mayuscula( &$cadena ) { $cadena = strtoupper($cadena); } // Programa principal if ( $_REQUEST['Boton'] != "" ) { $N = $_REQUEST['Nombre']; Mayuscula($N); echo ("<H2>"); echo ("El nombre en mayuscula es es: " . $N); } else { ?> <FORM ACTION="Mayuscula.php" METHOD="POST"> <H2> Ingrese Apellido y Nombre : <Input Type="Text" Name="Nombre" Size="40"> <Br><Br>
63
<Input Type="Submit" Name="Boton" Value="Ingresar Dato"> </Form> <?PHP } ?> </Body> </Html>
Ejemplo: Realizar una funcin que acepte el lado de un cuadrado y calcule su permetro y su superficie (No imprimir dentro de la funcin).
<Html> <TITLE> Cuadrado.php </TITLE> <Body> <?PHP function Calcular( $Lado, &$Perimetro, &$Superficie ) { $Perimetro = $Lado * 4; $Superficie = $Lado * $Lado; } // Programa principal if ( $_REQUEST['Boton'] != "" ) { $P=0; $S=0; $L = $_REQUEST['Lado']; Calcular($L, $P, $S); echo ("El valor del permetro es: $P"); echo ("<Br>"); echo ("El valor de la superficie es: $S"); } else { ?> <FORM ACTION="Cuadrado.php" METHOD="POST"> <H2> Ingrese El valor del Lado de un Cuadrado : <Input Type="Text" Name="Lado" Size="5"> <Br><Br> <Input Type="Submit" Name="Boton" Value="Ingresar Dato"> </Form> <?PHP } ?> </Body> </Html>
64
Comentario: En este caso, cuando se llama a la funcin Calcular, se lo realiza utilizando la variable $L como parmetro valor, ya que no cambia su valor, y las variables $P y $S se las especifica como parmetro por referencia , esto se consigue anteponiendo el smbolo & a las variables Perimetro y Superficie, porque es necesario que cambien sus valores de acuerdo con el clculo requerido. Se reitera que: PHP individualiza a una variable que es por referencia cuando contiene el smbolo &(ampersand) delante de la variable .
65
UNIDAD III: PROGRAMACION PHP
FUNCIONES PHP y MYSQL

Las principales son: mysql_connect() Esta funcin conecta a la base de datos con la cual vamos a trabajar. Sintaxis: mysql_connect(base_de_datos, usuario, Password) mysql_select_db () Esta funcin selecciona la base de datos con la cual vamos a trabajar. Sintaxis: mysql_select_db(base_de_datos, identificador_de_la_conexion) mysql_query() Esta funcin ejecuta una consulta a la base de datos a la que nos hayamos conectado y que hayamos seleccionado previamente. Sintaxis: mysql_query(sentencia sql, identificador_de_la_conexion) mysql_num_rows() Esta funcin toma el nmero de resultados obtenidos de alguna consulta (query) que hayamos realizado previamente. Sintaxis: mysql_num_rows(identificador_de_query) mysql_fetch_array() Esta funcin lista los resultados obtenidos en una query.
66
Sintaxis(listando resultados): While($a=mysql_fetch_array(identificador_de_query) ) { echo $a[identificador_del_campo_a_listar]<br> } ACLARACIN: De esta manera aparecera listado uno sobre otro resultado. Ej: Campo1 Campo2 Campo3 mysql_create_db () Esta funcin crea una base de datos en el servidor. Sintaxis: mysql_create_db(nombre_base_de_datos, identificador_de_la_conexion) mysql_drop_db() Esta funcin elimina una base de datos del servidor. Sintaxis: mysql_drop_db(nombre_base_a_borrar, identificador_de_la_conexion) mysql_close () Esta funcin desconecta a la base de datos con la cual hemos trabajado. Sintaxis: mysql_close(identificador_de_la_conexion)
67
SESIONES EN PHP
Es un mtodo para hacer que variables estn disponibles en mltiples pginas sin tener que pasarlas como parmetro. A diferencia de las cookies ( son pequeos archivos de texto que
nuestra pgina almacenara en el disco duro de los usuarios visitantes, y que podramos recuperar el valor que contengan cuando vuelvan a visitar esa pgina ) , las variables de sesin
se almacenan en el servidor y tienen un tiempo limitado de existencia. Para identificar al usuario que gener las variables de sesin, el servidor genera una clave nica que es enviada al navegador y almacenada en una cookie. Luego, cada vez que el navegador solicita otra pgina al mismo sitio, enva esta cookie (clave nica) con la cual el servidor identifica de qu navegador proviene la peticin y puede rescatar de un archivo de texto las variables de sesin que se han creado. Cuando han pasado 20 minutos sin peticiones por parte de un cliente (navegador) las variables de sesin son eliminadas automticamente (se puede configurar el entorno de PHP para variar este tiempo). Haremos un problema muy sencillo, cargaremos en un formulario el nombre de usuario y clave de un cliente, en la segunda pgina crearemos dos variables de sesin y en una tercera pgina recuperaremos los valores almacenados en las variables de sesin. La primera pgina es un formulario HTML puro: <html> <head> <title>Problema</title> </head> <body> <form action="pagina2.php" method="post"> Ingrese nombre de usuario: <input type="text" name="campousuario"><br> Ingrese clave: <input type="password" name="campoclave"><br> <input type="submit" value="confirmar"> </form> </body> </html> Lo que podemos recalcar es que, cuando en un cuadro de texto queremos ingresar una clave y no queremos que aparezcan los caracteres tipeados en pantalla, debemos utilizar el control de tipo password: <input type="password" name="campoclave"> La segunda pgina es donde creamos e inicializamos las dos variables de sesin: <?php session_start(); $_SESSION['usuario']=$_REQUEST['campousuario']; $_SESSION['clave']=$_REQUEST['campoclave']; ?> <html> <head> <title>Problema</title> </head> <body> Se almacenaron dos variables de sesin.<br><br> <a href="pagina3.php">Ir a la tercer pgina donde se recuperarn las variables de sesin</a> </body> </html>
68
Cuando creamos o accedemos al contenido de variables de sesin debemos llamar a la funcin session_start() antes de cualquier salida de marcas HTML.
Para almacenar los valores en las variables de sesin lo hacemos: $_SESSION['usuario']=$_REQUEST['campousuario']; $_SESSION['clave']=$_REQUEST['campoclave']; Es decir, tenemos el vector asociativo $_SESSION que almacena las variables de sesin. Por ltimo, esta pgina tiene un hipervnculo a la tercera pgina. La ltima pgina de este ejemplo tiene por objetivo acceder a las variables de sesin: <?php session_start(); ?> <html> <head> <title>Problema</title> </head> <body> <?php echo "Nombre de usuario recuperado de la variable de sesin:".$_SESSION['usuario']; echo "<br><br>"; echo "La clave recuperada de la variable de sesin:".$_SESSION['clave']; ?> </body> </html> De nuevo vemos que la primera lnea de esta pgina es la llamada a la funcin session_start() que, entre otras cosas, rescata de un archivo de texto las variables de sesin creadas para ese usuario (recordemos que desde el navegador todas las veces retorna una cookie con la clave que gener PHP la primera vez que llamamos a una pgina del sitio). Para mostrar las variables de sesin, las accedemos por medio del vector asociativo $_SESSION: echo "Nombre de usuario recuperado de la variable de sesin:".$_SESSION['usuario']; echo "<br><br>"; echo "La clave recuperada de la variable de sesin:".$_SESSION['clave']; Tengamos en cuenta que en cualquier otra pgina del sitio tenemos acceso a las variables de sesin slo con llamar inicialmente a la funcin ses sion_start().
69
PROCEDIMIENTOS ALMACENADOS EN PHP

Los procedimientos almacenados son un conjunto precompilado de instrucciones Transact-SQL (*) almacenadas bajo un solo nombre y procesadas como una unidad. Los procedimientos almacenados pueden recibir parmetros, en base a los cuales realizar distintas acciones, y devolver datos de varias formas distintas (principalmente como parmetros de salida y como conjuntos de resultados o Recordsets).
Estructura de los procedimientos almacenados: DELIMITER $$ CREATE DEFINER=`root`@`localhost` PROCEDURE `Nombre_del_procedimiento`(IN Variable VARCHAR(10)) BEGIN END DELIMITER $$ La Sentencia DELIMITER se utiliza en los Procedimientos Almacenados para remplazar el (;) por un carcter que en este caso es ($$), para que de esta manera el procedimiento pueda ser escrito usando los punto y comas sin que se ejecute mientras se escribe; despus de escrito el procedimiento se escribe nuevamente la sentencia DELIMITER; para asignar al punto y coma su funcin habitual. CREATE DEFINER=`root`@`localhost` PROCEDURE `Nombre_del_procedimiento`() La Sentencia CREATE PROCEDURE se utiliza para crear el procedimiento almacenado. DEFINER=`root`@`localhost` nos indica a que usuario y en lugar crear el procedimiento, y al final el nombre del procedimiento almacenado. (IN Variable VARCHAR (10)) En esta parte del cdigo se indican los parmetros, IN indica que es un parmetro de entrada, OUT indica que es un parmetro de salida, INOUT indica que es un parmetro de entrada y salida, Despus se indica el nombre del parmetro, el tipo de dato y la longitud. BEGIN & END Entre el BEGIN y el END es donde van todas las sentencias SQL del procedimiento. Los Procedimientos Almacenados (SP) son usados para consolidar y centralizar lgica que originalmente se implementaba en las aplicaciones. Eso quiere decir, que en vez de tener una "clase", con una lista interminable de funciones que hacen esto: static function String getConsultaUsuario(String usuarioid) { return "SELECT * FROM user WHERE userid = '" + usuarioid +"'"; } Usted debera de tener una serie SP en su gestor de bases de datos, implementado como un API "consolidado y centralizado" (en la base de datos). Lo mismo sucede con muchas consultas SQL "grandes", o secuenciales: no podemos dejarlas regadas en el cdigo, necesitamos moverlas a un solo lugar.
70
EJEMPLO: Para la creacin de los cdigos siguientes asumiremos tener: Una base de datos llamada " wpdemo" que posee una tabla llamada " wp_posts " con al menos dos campos: ` post_excerpt`y `post_type`. Esta es en realidad una base de datos tpica de WordPress 1
CREACIN DEL STORED PROCEDURE DE PRUEBA:

DROP PROCEDURE `miPrimerProcedimientoAlmacenado` // CREATE DEFINER=`root`@`localhost` PROCEDURE `miPrimerProcedimientoAlmacenado`(tipoPost varchar(20)) BEGIN Set names utf8; SELECT * FROM `wp_posts` WHERE trim2(`post_excerpt`) != "" AND `post_type` = tipoPost; END //
Llegado a este punto y si todo est ok, deberemos tener en la base de datos una "Rutina" o procedimiento almacenado llamado miPrimerProcedimientoAlmacenado que podremos verificar haciendo clic en el enlace "+Rutinas" en la parte inferior de explorador de las tablas en phpMyAdmin. El procedimiento que hemos creado espera recibir un parmetro que internamente hemos llamado "tipoPost" que modificar las condiciones de la consulta que traer los datos.
LLAMANDO AL PROCEDIMIENTO ALMACENADO EN PHPMYADMIN

Para probar / ejecutar el procedimiento almacenado desde la pestaa de Consultas de phpMyAdmin usamos la siguiente consulta: CALL miPrimerProcedimientoAlmacenado('post'); NOTA: Presta atencin en la forma en que se pasan los parmetros al SP, usando comillas simples y parntesis para encerrar los valores pasados. Como vers, el resultado es un grupo de registros que cumplen con las condiciones definidas por el parmetro pasado al procedimiento y desde luego la consulta misma de la que consta el SP.
LLAMANDO AL PROCEDIMIENTO ALMACENADO DESDE PHP

Para llamar o ejecutar el procedimiento almacenado desde php debemos realizar los pasos de conexin normales para acceder a mysql y las dems instrucciones siguientes: $sql="call miPrimerProcedimientoAlmacenado('post');"; $res=@mysql_query($sql, $cnx) or die('Error en el query: '.mysql_errno($cnx).' - '.mysql_error($cnx));
WordPress es una poderosa plataforma de publicacin personal, y viene con una gran cantidad de caractersticas incorporadas, diseadas para hacer tan fcil, placentera y atractiva como sea posible la experiencia de publicar en Internet 2 TRIM devuelve la cadena sin los espacios en blanco que pudiera contener al principio ni al final: SELECT TRIM(' Hola ')
71
PROGRAMACIN ORIENTADA A OBJETOS EN PHP

Implementaremos una clase llamada Persona que tendr como atributo (variable) su nombre y dos mtodos (funciones), uno de dichos mtodos inicializar el atributo nombre y el siguiente mtodo mostrar en la pgina el contenido del mismo. pagina1.php <html> <head> <title>Pruebas</title> </head> <body> <?php class Persona { private $nombre; public function inicializar($nom) { $this->nombre=$nom; } public function imprimir() { echo $this->nombre; echo '<br>'; } } $per1=new Persona(); $per1->inicializar('Juan'); $per1->imprimir(); $per2=new Persona(); $per2->inicializar('Ana'); $per2->imprimir(); ?> </body> </html> Analizando el ejercicio anterior La sintaxis bsica para declarar una clase es: class [Nombre de la Clase] { [atributos] [mtodos] } Siempre conviene buscar un nombre de clase lo ms prximo a lo que representa. La palabra clave para declarar la clase es class, seguidamente el nombre de la clase y luego encerramos entre llaves de apertura y cerrado todos sus atributos(variable) y mtodos(funciones). Nuestra clase Persona queda definida entonces:
72
class Persona { private $nombre; public function inicializar($nom) { $this->nombre=$nom; } public function imprimir() { echo $this->nombre; echo '<br>'; } } Los atributos normalmente son privados (private), ya veremos que esto significa que no podemos acceder al mismo desde fuera de la clase. Luego para definir los mtodos se utiliza la misma sintaxis que las funciones del lenguaje PHP. Decamos que una clase es un molde que nos permite definir objetos. Ahora veamos cual es la sintaxis para la definicin de objetos de la clase Persona: $per1=new Persona(); $per1->inicializar('Juan'); $per1->imprimir(); Definimos un objeto llamado $per1 y lo creamos asignndole lo que devuelve el operador new. Siempre que queremos crear un objeto de una clase utilizamos la sintaxis new [Nombre de la Clase]. Luego para llamar a los mtodos debemos anteceder el nombre del objeto el operador -> y por ltimo el nombre del mtodo. Para poder llamar al mtodo, ste debe ser definido pblico (con la palabra clave public). En el caso que tenga parmetros se los enviamos: $per1->inicializar('Juan'); Tambin podemos ver que podemos definir tantos objetos de la clase Persona como sean necesarios para nuestro algoritmo: $per2=new Persona(); $per2->inicializar('Ana'); $per2->imprimir(); Esto nos da una idea que si en una pgina WEB tenemos 2 menes, seguramente definiremos una clase Menu y luego crearemos dos objetos de dicha clase. Esto es una de las ventajas fundamentales de la Programacin Orientada a Objetos (POO), es decir reutilizacin de cdigo (gracias a que est encapsulada en clases) es muy sencilla. Lo ltimo a tener en cuenta en cuanto a la sintaxis de este primer problema es que cuando accedemos a los atributos dentro de los mtodos debemos utilizar los operadores $this -> (this y ->): public function inicializar($nom) { $this->nombre=$nom; } El atributo $nombre solo puede ser accedido por los mtodos de la clase Persona.
73
TIPOS DE ACCESO EN PHP Qu es eso de pblico, privado y protegido? Pblico (public): Se puede acceder desde fuera de la clase. Privado (private): Slo se puede acceder desde dentro de la clase. Protegido (protected): Se puede accede desde dentro de la clase y desde clases herederas.
Qu significa $this ? $this es la variable que hace referencia a la instancia actual del objeto. En todos los lenguajes con orientacin a objetos existe una variable, que hace referencia al objeto con el que se est trabajando
MANEJADORES DE CONTENIDO (CMS: Content Management System)
74
Qu es un CMS (Content Management System)?. Es un software de gestin de contenidos que permite la publicacin y administracin de contenidos a travs de un panel de control, utilizado comnmente para la creacin de webs dinmicas, por ejemplo blogs y tiendas online (comercio electrnico). Los CMS de cdigo abierto ms conocidos son: WordPress, Drupal, Joomla, Movable Type, Prestashop, Magento, Zencart, Concrete5. El uso de CMS de cdigo abierto o la creacin de una web a medida depende de las necesidades de cada uno. Las ventajas ms interesantes del uso de CMS de cdigo abierto son las siguientes:
1. Rpida instalacin: con los conocimientos justos se instala y configura en tu servidor. 2. Simplicidad: suelen tener una interfaz amigable para la gestin de los contenidos. 3. Personalizacin intuitiva : existe un gran nmero de plugins y themes (gratuitos y de pago) que se instalan en sencillos pasos. 4. Precio econmico : puesto que no hay que empezar de cero, el coste es bastante inferior a una web a medida. 5. Respaldo por parte de su comunidad de usuarios : los CMS ms conocidos disponen de una gran comunidad de usuarios. Pero tambin tiene algunos inconvenientes que se deben conocer:
6. Menor seguridad : en un sistema de cdigo abierto existen comunidades que se dedican a encontrar vulnerabilidades en el mismo. 7. Menor velocidad : al ser plataformas genricas, las consultas a la base de datos son altas, por tanto cuanto mayor informacin haya almacenada ms lento ser el sistema.
75
A CONTINUACIN ALGUNOS TIPS PARA EL EXMEN: o EL EXMEN CONSTA DE 6 PREGUNTAS: LAS DOS PRIMERAS SON DE TEORA (4 PUNTOS), son preguntas para marcar la alternativa correcta o indicar VERDADERO / FALSO. Revisar: con qu funcin se crea, inicia o destruye una sesin, cundo un atributo o mtodo es privado, pblico o protegido, uso del arreglo asociativo global $_SESSION, cmo crear una variable de sesin, cul es la instruccin para llamar a un procedimiento almacenado, cmo llamar a los mtodos o campos STATIC de una clase, etc. EN OTRA PREGUNTA SE LES PRESENTAR UN CDIGO EN PHP (puede ser la declaracin de una sola clase o puede involucrar una relacin de herencia entre dos clases ) EN EL CUAL TIENEN QUE IDENTIFICAR CUL ES EL ERROR, Y CUL DEBERA SER LA SOLUCIN, para resolver esta pregunta deben conocer correctamente los tipos de acceso tanto a campos como a mtodos: privado, pblico o protegido; comprender que la mejor manera de acceder a un campo privado de un objeto es mediante mtodos pblicos del tipo SET y GET. TRES PREGUNTAS SON PARA ESCRIBIR CDIGO EN PHP (DEL SCRIPT PRINCIPAL main.php y DE LAS CLASES NECESARIAS para la solucin).
EJERCICIOS TIPO, PARA EL EXMEN FINAL

(Se les recomienda practicarlos por ser muy similares a los del examen final)
76
EJERCICIO 01: El siguiente cdigo en PHP corresponde a la implementacin de una relacin de herencia entre dos clases: Coche y Deportivo.
<?php class Coche { private $velocidad = 0; function setVelocidad($velocidad) { $this->velocidad = (int) $velocidad; } } Class Deportivo extends Coche{ function aumentarVelocidad() { $this->velocidad = $this->velocidad * 2; } } $deportivo = new Deportivo(); $deportivo->setVelocidad(100); $deportivo->aumentarVelocidad(); ?>
Se pide: o o Identificar los errores y explicar el porqu de los mismos. Proponer la solucin correcta
77
EJERCICIO 02: Implementar un programa en PHP de nombre IUMatematica.php que hace uso de la clase Matematica.php, esta clase tiene mtodos estticos para las cuatro operaciones bsicas (suma, resta, multiplicacin, divisin), grficamente la relacin entre ambos archivos sera:
IUMatematica.php
Matematica.php
Luego de ingresar dos operandos, elegir un operador y pulsar en el botn Procesar se muestra el resultado en una tabla (al final de la interfaz anterior) como lo muestra la siguiente figura:
IUMatematica.php
Tener en cuenta: La pgina IUMatematica.php emplea un formulario recursivo por lo tanto se deber usar correctamente la funcin isset(). Se pide la implementacin tanto de la pgina IUMatematica.php como de la clase Matematica
78
EJERCICIO 03.- Este ejercicio implica trabajar con 3 pginas y aplicar el concepto de SESIONES en PHP: En la pagina1.html , cargaremos en un formulario el nombre de usuario y clave de un cliente En la pagina2.php creamos e inicializamos dos variables de sesin. En la pagina3.php recuperaremos los valores almacenados en las variables de sesin.
La pagina1.html es un formulario HTML puro:
<html> <head> <title>Problema</title> </head> <body> <form action="pagina2.php" method="post"> Ingrese nombre de usuario: <input type="text" name="campousuario"><br> Ingrese clave: <input type="password" name="campoclave"><br> <input type="submit" value="confirmar"> </form> </body> </html> El grfico siguiente muestra la secuencia en que se deben ejecutar las pginas. Se pide implementar pagina2.php y pagina3.php de tal manera que el resultado de cada pgina sea:
Pagina1.html
Pagina2.php
Pagina3.php
79
EJERCICIO 04: Usando clases en PHP resolver una ecuacin de segundo grado:
Se pide implementar la clase Ecuacion y Math (en archivos independientes del mismo nombre de la clase). La clase ecuacin depende de la clase Math porque necesita de los mtodos estticos pow y sqrt para realizar el clculo de las races de la ecuacin.
Grficamente la relacin de dependencia entre estos archivos es como sigue:
Programa: main.php
Tener en cuenta que el mtodo resolver realiza el clculo de las dos races de la ecuacin de segundo grado y las devuelve en un arreglo, dentro de ste mtodo se debe invocar a los mtodos de la clase Math. La implementacin del programa principal es como sigue: main.php <?php require_once 'Ecuacion.php'; $ecua = new Ecuacion(1,-4,3); $raiz = $ecua->resolver(); echo("A : ".$ecua->getA()."<br>"); echo("B : ".$ecua->getB()."<br>"); echo("C : ".$ecua->getC()."<br>"); echo("Raiz 1: {$raiz[0]}<br>"); echo("Raiz 2: {$raiz[1]}<br>"); ?>
80
EJERCICIO 05.- Partiendo de la siguiente figura y tomando como base el cdigo de la clase Artculo:
Paquete.php
Articulo.php
Programa: main.php
Articulo.php
<?php class Articulo { private $code = 0; private $name = null; private $price = 0.0; function __construct($code, $name, $price) { $this->code = $code; $this->name = $name; $this->price = $price; } } ?>
Se pide: a. b. Implementar en PHP la clase Paquete, si se sabe que un objeto de esta clase contiene una lista de objetos de la clase Articulo. Para ilustrar el uso de la clase Paquete, elabore un programa main.php en el cual usted deber: Crear como mnimo 03 objetos de la clase artculo (inicialce los atributos de caja objeto con los valores que usted desee) Aadir los artculos creados dentro de un objeto de la clase Paquete Mostrar el code , name y price de cada artculo que se encuentra dentro del objeto paquete usando la estructura de control foreach.
81
EJERCICIO 06.- Partiendo de la siguiente figura y tomando como base el cdigo la clase padre CalculadoraBase :
CalculadoraBase.php
CalculadoraBase.php
<?php class CalculadoraBase { public function suma( $n1, $n2 ) { $rpta = $n1 + $n2; return $rpta; }
Calculadora1.php
public function resta( $n1, $n2 ) { $rpta = $n1 - $n2; return $rpta; }
} ?>
Programa: main.php
Se pide: c. d. Implementar en PHP la clase hija Calculadora1, si se sabe que tiene dos mtodos pblicos factorial y esPrimo. Para ilustrar el uso de la clase Calculadora1, elabore un programa main.php en el cual usted deber: Crear 01 objeto de la clase Calculadora1. Declarar dos variables n1=5 y n2=11 e invocar con estos valores a los mtodos suma y resta del objeto creado (en el paso anterior). Invocar a los mtodos factorial(n1) y esPrimo(n2) del objeto de la clase Calculadora1. Mostrar los resultados de las llamadas a estos mtodos.
82
EJERCICIO 07. Usando clases en PHP implementar una pgina de nombre menu.php que al cargarse en un navegador, muestre una lista de hipervnculos en forma horizontal (bsicamente un men de opciones) como lo indica la siguiente figura:
Se pide completar el siguiente cdigo: Menu.php <html> <head> <title>Pruebas</title> </head> <body> <?php class Menu { private $enlaces=array(); private $titulos=array(); public function cargarOpcion($en,$tit) { $this->enlaces[]=$en; $this->titulos[]=$tit; } public function mostrar() { for($f=0;$f<count($this->enlaces);$f++) { echo '<a href="'.$this->enlaces[$f].'">'.$this->titulos[$f].'</a>'; echo "-"; } } } $menu1=new Menu(); $menu1->cargarOpcion('http://www.google.com','Google'); $menu1->cargarOpcion('http://www.yahoo.com','Yhahoo'); $menu1->cargarOpcion('http://www.msn.com','MSN'); $menu1->mostrar(); ?> </body> </html>
Tener en cuenta que: Lo primero que se debe hacer es cargar una lista de direcciones web y los ttulos de los enlaces. Es decir ser necesario definir dos vectores paralelos que almacenen las direcciones y los ttulos respectivamente. Luego utilizar una estructura repetitiva para visualizar la combinacin de enlaces y ttulos (hipervnculos) en un men.
83
SOLUCIN - EJERCICIO 02: Matemtica.php <?php class Matematica { public static function sumar( $num1, $num2) { $rpta = $num1 + $num2; return $rpta; } public static function restar( $num1, $num2) { $rpta = $num1 - $num2; return $rpta; } public static function multiplicar( $num1, $num2) { $rpta = $num1 * $num2; return $rpta; } public static function dividir( $num1, $num2) { $rpta = $num1 / $num2; return $rpta; } } ?> IUMatematica.php (implementacin parcial)
<?php require_once '../model/Matematica.php'; $resultado = FALSE; if( isset( $_REQUEST["procesar"] ) ) { $num1 = $_REQUEST["num1"]; $num2 = $_REQUEST["num2"]; $ope = $_REQUEST["oper"]; En caso que $ope sea +: invocar al mtodo sumar En caso que $ope sea -: invocar al mtodo restar En caso que $ope sea *: invocar al mtodo multiplicar En caso que $ope sea /: invocar al mtodo dividir $resultado = TRUE; } ?> <html> Crear la interfaz grfica (formulario recursivo) If (resultado) Crear la tabla que muestra el resultado </html>
La implementacin al 100% de esta clase est en el directorio: EJERCICIO 02 (colgado en el campus dentro de la carpeta EXAMEN_FINAL)
84
SOLUCIN - EJERCICIO 03: pagina2.php <?php session_start(); $_SESSION['usuario']=$_REQUEST['campousuario']; $_SESSION['clave']=$_REQUEST['campoclave']; ?> <html> <head> <title>Problema</title> </head> <body> Se almacenaron 2 variables de sesin.<br><br> <a href="pagina3.php">Ir a pgina3.php para mostrarlas</a> </body> </html>
Pagina3.php <?php session_start(); ?> <html> <head> <title>Problema</title> </head> <body> <?php $u=$_SESSION['usuario']; $c=$_SESSION['clave']; echo "Nombre de usuario recuperado de la variable de sesin:".$u; echo "<br><br>"; echo "La clave recuperada de la variable de sesin:".$c; ?> </body> </html>
85
SOLUCIN - EJERCICIO 04: Math.php <?php class Math { public static function pow( $base, $exp ) { $rpta = pow($base, $exp); return $rpta; } public static function sqrt( $num ) { $rpta = sqrt( $num ); return $rpta; } } ?>
Ecuacion.php <?php require_once 'Math.php'; class Ecuacion { private $a; private $b; private $c; function __construct($a = 0, $b = 0, $c = 0) { $this->a = $a; $this->b = $b; $this->c = $c; } public function getA() { return $this->a; } public function setA($a) { $this->a = $a; } public function getB() { return $this->b; } public function setB($b) { $this->b = $b; } public function getC() { return $this->c; } public function setC($c) { $this->c = $c; } . Contina en la siguiente pgina
86
public function resolver( ) { $disc = Math::pow($this->getB(), 2) - 4 * $this->getA() * $this->getC(); $temp = Math::sqrt($disc); $raiz[] = (-$this->getB() + $temp) / ( 2 * $this->getA() ); $raiz[] = (-$this->getB() - $temp) / ( 2 * $this->getA() ); return $raiz; } } ?> Main.php <?php require_once 'Ecuacion.php'; $ecua = new Ecuacion(1,-4,3); $raiz = $ecua->resolver(); echo("A : ".$ecua->getA()."<br>"); echo("B : ".$ecua->getB()."<br>"); echo("C : ".$ecua->getC()."<br>"); echo("Raiz 1: {$raiz[0]}<br>"); echo("Raiz 2: {$raiz[1]}<br>"); ?> SOLUCIN - EJERCICIO 05 Articulo.php <?php class Articulo{ private $code = 0; private $name = null; private $price = 0.0; function __construct($code, $name, $price) { $this->code = $code; $this->name = $name; $this->price = $price; } public function getCode() { return $this->code; } public function setCode($code) { $this->code = $code; } public function getName() { return $this->name; } public function setName($name) { $this->name = $name; } . Contina en la siguiente pgina
87
public function getPrice() { return $this->price; } public function setPrice($price) { $this->price = $price; } } ?> Paquete.php <?php require_once 'Articulo.php'; class Paquete { private $list = null; function __construct() { $this->list = array(); } public function add( Articulo $article){ $this->list[] = $article; } public function getList(){ return $this->list; } } ?>
main.php
<?php require_once 'Paquete.php'; $paquete1 = new Paquete(); $paquete1->add(new Articulo(10,"Impresora",150.00)); $paquete1->add(new Articulo(20,"Monitor",320.00)); $paquete1->add(new Articulo(30,"Teclado",25.00)); foreach ( $paquete1->getList() as $obj ) { echo("{$obj->getCode()} {$obj->getName()} {$obj->getPrice()}<br>"); } ?>
88
EJERCICIO 06 - SOLUCIN CalculadoraBase.php <?php class CalculadoraBase { public function suma( $n1, $n2 ) { $rpta = $n1 + $n2; return $rpta; } public function resta( $n1, $n2 ) { $rpta = $n1 - $n2; return $rpta; } } ?> Calculadora1.php <?php require_once 'CalculadoraBase.php'; class Calculadora1 extends CalculadoraBase { public function factorial( $n ) { $f = 1; while( $n > 1 ) { $f *= $n--; } return $f; } public function esPrimo( $n ) { $primo = TRUE; $k = 1; while( ++$k < $n ) { if( $n % $k == 0 ) { $primo = FALSE; break; } } return $primo; } } ?>
89
main.php <?php require_once 'Calculadora1.php'; // Datos $n1 = 5; $n2 = 11; // Proceso $obj = new Calculadora1(); $suma = $obj->suma($n1, $n2); $fact = $obj->factorial($n1); $primo = $obj->esPrimo($n2); // Reporte echo("$n1 + $n2 = $suma<br>"); echo("Factorial de $n1 es $fact<br>"); echo("$n2 es primo: " . ($primo?"Si":"No")); ?>
EJERCICIO 07 - SOLUCIN Menu.php <html> <head> <title>Pruebas</title> </head> <body> <?php class Menu { private $enlaces=array(); private $titulos=array(); public function cargarOpcion($en,$tit) { $this->enlaces[]=$en; $this->titulos[]=$tit; } public function mostrar() { for($f=0;$f<count($this->enlaces);$f++) { echo '<a href="'.$this->enlaces[$f].'">'.$this->titulos[$f].'</a>'; echo "-"; } } } $menu1=new Menu(); $menu1->cargarOpcion('http://www.google.com','Google'); $menu1->cargarOpcion('http://www.yahoo.com','Yhahoo'); $menu1->cargarOpcion('http://www.msn.com','MSN'); $menu1->mostrar(); ?> </body> </html>
90
Analicemos ahora la solucin al ejercicio 07, como podemos ver normalmente los atributos de la clase se definen inmediatamente despus que declaramos la clase: class Menu { private $enlaces=array(); private $titulos=array(); Si queremos podemos hacer un comentario indicando el objetivo de cada atributo. Luego tenemos el primer mtodo que aade a los vectores los datos que llegan como parmetro: public function cargarOpcion ($en,$tit) { $this->enlaces[]=$en; $this->titulos[]=$tit; } Conviene darle distinto nombre a los parmetros y los atributos (por lo menos inicialmente para no confundirlos). Utilizamos la caracterstica de PHP que un vector puede ir creciendo solo con asignarle el nuevo valor. El dato despus de esta asignacin $this->enlaces[ ]=$en; se almacena al final del vector. Este mtodo ser llamado tantas veces como opciones tenga el men. El siguiente mtodo tiene por objetivo mostrar el men propiamente dicho: public function mostrar() { for($f=0;$f<count($this->enlaces);$f++) { echo '<a href="'.$this->enlaces[$f].'">'.$this->titulos[$f].'</a>'; echo "-"; } } Disponemos un for y hacemos que se repita tantas veces como elementos tenga el vector $enlaces (es lo mismo preguntar a uno u otro cuantos elementos tienen ya que siempre tendrn la misma cantidad). Para obtener la cantidad de elementos del vect or utilizamos la funcin count. Dentro del for imprimimos en la pgina el hipervnculo: echo '<a href="'.$this->enlaces[$f].'">'.$this->titulos[$f].'</a>'; Hay que acostumbrarse que cuando accedemos a los atributos de la clase se le antecede el operador $this-> y seguidamente el nombre del atributo propiamente dicho. Si no hacemos esto estaremos creando una variable local y el algoritmo fallar. Por ltimo para hacer uso de esta clase Menu debemos crear un objeto de dicha clase (lo que en programacin estructurada es definir una variable): $menu1=new Menu(); $menu1->cargarOpcion('http://www.google.com','Google'); $menu1->cargarOpcion('http://www.yahoo.com','Yhahoo'); $menu1->cargarOpcion('http://www.msn.com','MSN'); $menu1->mostrar();
91
Creamos un objeto mediante el operador new y seguido del nombre de la clase. Luego llamamos al mtodo cargarOpcion tantas veces como opciones necesitemos para nuestro men (recordar que SOLO podemos llamar a los mtodos de la clase si definimos un objeto de la misma) Finalmente llamamos al mtodo mostrar que imprime en la pgina nuestro men.
CON RESPECTO AL EXAMEN FINAL

Los 07 ejercicios resueltos en esta tercera parte de la separata
sern muy similares a los del prximo examen final, se recomienda analizar detalladamente y comprender la
solucin de cada uno de ellos. o LAS 02 PREGUNTAS DE TEORA ( ver: tips para el
examen pg 76) sumarn 4 PUNTOS

o LAS PREGUNTAS DE CODIFICACIN 16 PUNTOS
TODO LO QUE VENDR EN EL EXAMEN FINAL EST COMPRENDIDO EN LA TERCERA UNIDA DE ESTA SEPARATA, ESPECFICAMENTE LOS EJERCICIOS TIPO PARA EL EXAMEN ESTN COMPRENDIDOS ENTRE LAS PG. 76 - 92 (todos estos ejercicios han sido parte de las guas de laboratorio resueltas en la unidad III).
ADICIONALMENTE SE PROPORCIONA UN DIRECTORIO DE CASOS PRCTICOS ( ESTUDIADOS EN CLASE DURANTE LA TERCERA UNIDAD y
no
formarn parte del examen final )
IMPLEMENTADOS EN PHP, SOLAMENTE DEBEN DE GRABARLO EN EL DIRECTORIO RAZ DE SU SERVIDOR WEB: EJERCICIO DEL COLEGIO LOS GENIOS EJERCICIO SOBRE SESIONES EN PHP SIMULANDO UN CARRITO DE COMPRAS ETC.
92

PHP POO Nivel Avanzado 2

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

PHP POO Nivel Avanzado 2

Caricato da

Copyright:

Formati disponibili

SEPARATA DEL CURSO INGENIERA WEB

UNIDAD I: DISEO Y CONSTRUCCION DE PAGINAS WEB CON XHTML I

UNIDAD II: DISEO Y CONSTRUCCION DE PAGINAS WEB CON XHTML- II

UNIDAD III: PROGRAMACION PHP

UNIDAD I: DISEO Y CONSTRUCCION DE PAGINAS WEB CON XHTML I

Qu es una pgina web?

Qu necesitamos para visualizar pginas web?

Figura 01: Elementos necesarios para visualizar pginas web

Web Dinmica (Aplicacin Web)

Qu particularidades tiene el desarrollo web?

El proceso de ingeniera web

Aplicativos (editores) para crear sitos web en modo Diseo

Herramientas para el diseo web (IDEs)

Los IDEs ms usados en la actualidad son: Microsoft Visual Studio

Elementos de un Web Site

Figura 03: Arquitectura cliente-servidor de una aplicacin web

Lado del Cliente

Lado del Servidor

Figura 04: Secuencia de pasos en una peticin HTTP

Estructura de un documento HTML

Figura 05. Esquema de las partes que forman un documento HTML

Efecto visual 1. tem 1 2. tem 2

tem 1 tem 2 tem 3

EJEMPLO: El siguiente cdigo HTML muestra un ejemplo sencillo de lista no ordenada:

Figura 08: Ejemplo de uso de la etiqueta ul

EJEMPLO: El siguiente cdigo HTML muestra un ejemplo sencillo de lista ordenada:

Figura 09: Ejemplo de uso de la etiqueta ol

EJEMPLO: El siguiente cdigo HTML muestra un ejemplo sencillo de lista de definicin:

Figura 10: Ejemplo de uso de la etiqueta dl

Si no se escribe el nombre de la pgina se cargar la pgina de inicio asociada al dominio.

Por ejemplo, "http://www.ucvlima.edu.pe " "http://www.ucvlima.edu.pe/startpage.aspx" Referencia relativa al sitio:

Manejo de imgenes, Sonido y Videos

1.3. FORMULARIOS y IFRAMES 1.3.1. Concepto de Iframe

dos columnas, la segunda cinco veces mayor que la primera

COLS=150,*,150 tres colunmas, la primera y tercera de 150 pxels, la segunda ocupa

ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.

Algunas propiedades tiles aplicables a un iframe:

Formularios y sus elementos.

Nota: en este ejemplo podemos observar lo siguiente:

Nota: en este ejemplo podemos observar lo siguiente:

Checkbox (casillas de verificacin)

Permite al usuario elegir varias opciones entre todas las posibilidades.

TRABAJO DE FORO EN EL CAMPUS VIRTUAL

1.4. W3C Y EL LENGUAJE XHTML 1.4.1. Estandarizacin W3C

Declaracin de documentos Frameset:

Como dije trataremos de concentrarnos en los documentos declarados como estrctos.

1.5. LENGUAJE CSS (Cascading Style Sheets) 1.5.1. Introduccin a CSS

Dentro de la seccin Head

As se vera el documento HTML que llama al archivo "estilos.css".

Al segundo estilo definido lo hemos hecho con la clase .respuesta

Otra serie de propiedades relacionadas al contorno de una marca HTML son:

Ejemplo: El siguiente ejemplo muestra tres imgenes posicionadas de forma normal:

Aplicando el posicionamiento relativo, se desplaza la primera imagen de forma descendente:

Estructura Bsica JScript

A continuacin, se muestra un primer script sencillo pero completo:

Operador == === != !== > >= < <=

Resultado: false true false

El operador de asignacin '=' Permite asignar un valor a una variable.

New This , Delete Void Typeof

En JavaScript la estructura de una funcin es la siguiente:

La solucin sin emplear funciones es:

</script> </body> </html>

Avance de Trabajo prctico y/o Investigacin