Date post: | 01-Jan-2016 |
Category: |
Documents |
Upload: | headshoot13 |
View: | 212 times |
Download: | 4 times |
SEPARATA DEL CURSO INGENIERÍA WEB
UNIDAD III: PROGRAMACION PHP
UNIDAD II: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML- II
UNIDAD I: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML – I
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 2
INTRODUCCIÓN
Esta separata describe los fundamentos del desarrollo de aplicaciones web, que no
son sino aplicaciones basadas en el modelo Cliente/Servidor donde la comunicación
con el usuario se hace utilizando páginas web. El código de la aplicación 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 información.
Las ventajas que presentan son: su facilidad de manejo y de desarrollo, accesibilidad y
portabilidad.
Dentro de las tecnologías a utilizar en el cliente están: los lenguajes de guiones (como
JavaScript), las Applets Java y ActiveX. En el servidor PHP.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 3
UNIDAD I: DISEÑO Y CONSTRUCCION DE PAGINAS WEB CON XHTML – I
1.1. CONCEPTOS FUNDAMENTALES DE WEB.
¿Qué es una página web?
Una página Web es un documento multimedia, que puede llevar incorporado textos, imágenes, sonidos y animaciones. Una característica importante es que se puede acceder a los contenidos, propios ó externos, por medio de hipervínculos ó enlaces.
¿Qué necesitamos para visualizar páginas web?
Cuando accedemos a Internet existen una serie de ordenadores conectados permanentemente que se llaman Servidores Web. En estos ordenadores están
almacenadas las páginas Web tanto de usuarios como de empresas ofreciendo información, productos, etc.
Figura 01: Elementos necesarios para visualizar páginas web
Nosotros, cuando nos conectamos a Internet para solicitar una determinada página Web desde un ordenador, nos convertimos en Clientes Web.
El programa que necesitamos para visualizar dicha página se llama Navegador. Este programa se encarga de solicitar al servidor correspondiente una determinada página.
La transferencia de información entre Cliente-Servidor se realiza mediante un protocolo específico denominado HTTP.
En la actualidad para visualizar páginas Web existen diferentes navegadores: Netscape Navigator, Mozilla, Opera, Internet Explorer, etc.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 4
Las páginas Web están escritas en un lenguaje de programación 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 páginas Web. En analogía, un sitio Web es, por ejemplo, una revista, mientras que una página Web es una de las páginas 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 propósitos para los que nos podemos servir de Internet y las tecnologías de la información en general vienen a cubrir todo el espectro de propósitos, ya sea para fines personales, de ocio, académicos, laborales, empresariales, etc. Su gran potencialidad dependerá pues de lo inteligentemente que empleemos dicha tecnología.
Se pueden diferenciar dos grandes grupos de sitios Web, los estáticos y los dinámicos.
Web Estática
Los sitios Web estáticos son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces (links) entre las páginas 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 opción más que suficiente para aquellos sitios Web que simplemente ofrecen una descripción de su empresa, quiénes 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 páginas es lo económico que resulta crearlas , con un diseño vistoso e incluyendo las imágenes y el texto con el cual queremos informar a los navegantes, un sitio web estático se puede crear fácilmente sin necesidad de ningún tipo de programación especial (PHP, ASP, Java, etc).
La gran desventaja de los sitios Web estáticos reside en lo laborioso que resulta su actualización así como la pérdida de potentes herramientas soportadas con bases de datos, como pueden ser la creación de registros históricos de los clientes, pedidos on-line, etc.
“En esta asignatura no desarrollaremos sitios web estáticos”.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 5
Web Dinámica (Aplicación Web)
Los sitios Web dinámicos son aquellos que permiten crear aplicaciones dentro de la
propia Web, otorgando una mayor interactividad con el navegante. Aplicaciones dinámicas como encuestas y votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes, reserva de productos, pedidos on-line, atención al cliente personalizada, etc.
El desarrollo de este tipo de Web es más complicado, pues requiere conocimientos específicos de lenguajes de programación así como creación y gestión de bases de datos, pero la enorme potencia y servicio que otorgan este tipo de páginas hace que merezca la pena la inversión y esfuerzo invertidos respecto a los resultados obtenidos.
Una gran ventaja que proporciona crear sitios Web dinámicos 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 gustaría saber las preferencias y opiniones de los clientes de sus productos y servicios?
¿Cuál es su cartera de pedidos generada a través de la red?
Estas y otras preguntas encuentran respuestas con las Web dinámicas y las bases de datos que son el tema central de esta asignatura.
Como una disciplina emergente, la ingeniería w eb permite crear aplicaciones interactivas
(w eb dinámicas) bajo la arquitectura cliente/servidor.
La diferencia fundamental de una w eb de tipo estático respecto a una de tipo dinámico es
que diseño y contenidos son independientes, por lo que si algún día se plantea un cambio de diseño o la inserción de un nuevo módulo, no hace falta tocar ningún contenido,
cosa que es imposible con un diseño w eb de tipo estático.
La inserción de contenidos es muy sencilla, con un procesador de textos tipo Word. Se
podrá escribir un artículo y asignarle por ejemplo una fecha de publicación y una fecha de
caducidad, no habrá que preocuparse por artículos obsoletos.
Y todo esto se podrá hacer desde cualquier parte del mundo y desde cualquier ordenador, sólo hace falta una conexión a Internet. Esto es posible porque se trabaja directamente con
el servidor de contenidos, sin programas externos. Además, 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.
Ingeniería Web
La Ingeniería Web es una disciplina que comprende el proceso de creación, implantación y mantenimiento de aplicaciones web cumpliendo con criterios de alta calidad y seguridad.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 6
En la actualidad se están desarrollando aplicaciones web que están cambiando nuestros estilos de vida; ya que con solo ingresar a estas aplicaciones podemos realizar compras, pagos de servicios básicos, realizar reservas de hoteles etc.
Aplicación Web
- Una aplicación web es un sistema computacional remoto que se accesa por Internet.
- Físicamente 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 dirección del servidor (ej.: http://www.misdatos.com) donde está la información almacenada.
- La entrada es restringida y es necesario identificarse como usuario para entrar al sistema.
- La comunicación se hace usando páginas web estilo formulario.
¿Qué particularidades tiene el desarrollo web?
Las aplicaciones web tienen sus particularidades, entre las más significativas podemos listar:
- Residente en red. Una aplicación 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 versión inicial.
- Evolución continua. A diferencia del software de aplicaciones convencional,
que evoluciona a través de versiones planeadas y cronológicamente espaciadas, las aplicaciones web están en constante evolución, y se actualizan gradualmente.
- Seguridad. Dado que no controlamos con certeza quién puede acceder a
nuestra aplicación; la seguridad y confidencialidad de la información requieren un énfasis especial.
- Estética. Es bien sabido que la primera impresión jamás se olvida, por lo que
nuestro sitio debe ser atractivo, ergonómico y usable.
- Medible. Mediante la cuantificación de resultados, podemos conocer la
cantidad de usuarios que tenemos, así como sus patrones de comportamiento.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 7
El proceso de ingeniería web
Es iterativo e incremental. Esto como respuesta a la continua evolución 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 Practitioner’s Approach”, que es una de las biblias de la ingeniería de software) sugiere un proceso de ingeniería web compuesto por las siguientes fases (Figura 02):
- Planteamiento y formulación. Identificamos los objetivos de nuestra
aplicación, y delimitamos el alcance de la primera iteración.
- Planificación. Una vez planteado el problema, podremos estimar costos,
riesgos y esfuerzo durante el desarrollo. En la planeación iterativa solamente se detalla la iteración actual, y las iteraciones subsecuentes sólo se plantean de forma general.
- Análisis. Durante esta etapa establecemos los requerimientos técnicos,
gráficos, y de contenido, que incorporaremos en la iteración.
- Ingeniería. La actividad de ingeniería incorpora dos grupos de tareas que se
realizan en paralelo: el diseño del contenido y la producción, se enfocan en el diseño, producción y adquisición del contenido de texto, gráfico y video que se vayan a integrar en la aplicación. Estas tareas son realizadas por personal no técnico. Por otro lado, están el diseño arquitectónico, de navegación e interfaz, el cual lidia con los aspectos técnicos.
- Generación de páginas y pruebas. Se prueba que el contenido dinámico se genere correctamente, utilizando las plantillas, interfaces y contenidos diseñados en la fase de ingeniería. Posteriormente se realizan las pruebas pertinentes, que dependerán del tipo de aplicación y requerimientos no funcionales (por ejemplo, pruebas de desempeño, etc.).
- Evaluación del cliente. Al final de cada iteración se debe realizar una
evaluación con el cliente, para validar el avance y determinar los cambios o mejoras (en caso de ser necesarios), que se aplicarán en las siguientes iteraciones.
Existen otros procesos de desarrollo de aplicaciones w eb, como por ejemplo UWE (Ingeniería Web basada en UML), es una metodología enfocada al modelado de aplicaciones
Web, basada en la extensión de la semántica del UML mediante la utilización de
estereotipos, al estar basada estrictamente en UML garantiza que sus modelos sean
fáciles 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 análisis y diseño y la fase de implementación. Esta metodología la estudiaremos en la Unidad II.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 8
Figura 02. Ciclo de vida clásico de una aplicación web (Roger Pressman)
1.1.1. Aplicativos (editores) para crear sitos web en modo Diseño
Para el usuario sin conocimientos en tecnologías como XHTML, PHP, CSS, JavaScript, etc. resulta interesante un editor que les permita producir páginas web de manera rápida 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á diseñado para usuarios sin conocimientos técnicos que quieran crear un sitio web atractivo sin necesidad de saber HTML. Sus funciones incluyen la gestión integrada de archivos (subir y editar archivos en un servidor web), organización en pestañas (que permite trabajar en varias páginas) y el soporte de formularios, tablas y plantillas.
BlueGriffon
Merece la pena prestar atención 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 estándares y de la accesibilidad.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 9
1.1.2. Herramientas para el diseño web (IDEs)
Los programadores web utilizan herramientas sofisticadas que facilitan el trabajo enormemente. Dentro de estas herramientas podríamos hablar de entornos integrados de desarrollo (IDEs).
Un IDE es un programa que nos permite desarrollar código en uno o más lenguajes de programación e incorpora lo siguiente:
Un espacio para la escritura de código con cierta ayuda interactiva para generar código y para indicar los errores de sintaxis que se cometan por parte del
programador.
La posibilidad de compilar y ejecutar el código escrito.
La posibilidad de organizar los proyectos de programación.
Herramientas auxiliares para programadores para detección de errores o análisis de programas (debuggers).
Otras opciones como utilidades para pruebas, carga de librerías, etc.
Los IDEs más 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 programación más completos y cuanta con corrección automática de errores y auto completado inteligente.
Como casi todo el softw are de Microsoft, este IDE no es gratuito salvo en su versión
Express que puede ser un buen punto de partida para programar.
NetBeans
Es un IDE multiplataforma, soporta varios lenguajes. Además 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.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 10
Eclipse
Es un IDE para el desarrollo de software de código abierto. Está escrito totalmente en Java, permite crear aplicaciones empresariales, móviles, etc. El software es libre tanto para uso personal como comercial.
Una de sus principales ventajas es que además de ser multiplataforma es también
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 aplicación por separado.
Php Designer
Php Designer, es un completo entorno de desarrollo y programación especialmente diseñado para desarrolladores de PHP, aunque también permite trabajar con comodidad en otros lenguajes de programación como HTML, XHTML, CSS y SQL.
Ofrece toda una serie de asistentes y diálogos integrados que facilitan en todo momento el trabajo, además cuenta con cliente de FTP y navegador de ficheros integrado, utilidades de corrección y autocompletado, búsqueda 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 programación cuando
vamos a programar en otro lenguaje.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 11
1.1.3. Elementos de un Web Site
En el contexto de esta asignatura cuando hablamos de Web Site nos referimos a una
Aplicación Web (Web Site no estático, que incluye lógica del negocio) y cuando hablamos de
elementos de un w eb site nos referimos a los elementos de una aplicación w eb o mejor
dicho a los componentes de la arquitectura cliente servidor de una aplicación w eb.
La arquitectura de un sitio Web tiene tres elementos principales: servidor Web, protocolo HTTP, y uno o más clientes (browsers).
Figura 03: Arquitectura cliente-servidor de una aplicación web
Cliente
Es un programa que permite al usuario visualizar documentos descritos en HTML, desde servidores web de todo el mundo a través de Internet. Por lo general este rol lo cumple un navegador web o explorador web (del inglés, navigator o browser).
Servidor Web
Llamado también Servidor HTTP, es un programa informático que procesa una aplicación del lado del servidor realizando conexiones bidireccionales con el cliente, generando o cediendo una respuesta en cualquier lenguaje del lado del cliente.
Una aplicación del lado del servidor es cualquier programa o conjunto de instrucciones diseñadas con la finalidad de que un Servidor Web las procese para realizar alguna acción.
Las aplicaciones del lado del servidor están escritas mediante algún lenguaje de
programación, entre los que destacan: PHP, ASP.Net, Perl, Python, Ruby.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 12
Las aplicaciones del lado del cliente se ejecutan directamente en el brow ser sin
necesidad de realizar ninguna solicitud al servidor. Algunas tecnologías de programación 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 (portátiles, teléfonos móviles, ordenadores de escritorio ) y servidores. Está diseñado para transferir lo que se llama hipertextos, páginas web o páginas HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores de música.
Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que
establecemos una petición 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 petición HTTP.
Figura 04: Secuencia de pasos en una petición HTTP
Lado del Cliente
Lado del Servidor
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 13
LEYENDA:
1. El navegador efectúa la petición de la página
2. El servidor llama al intérprete 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 envía 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. Creación 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).
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 14
1.2. LENGUAJE DE PROGRAMACIÓN HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas 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 sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser
visualizados en los navegadores (programas que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de los documentos,
y de mostrar a los usuarios las páginas web resultantes del código interpretado.
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar reconocido por todas las
empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo.
El proceso de indicar las diferentes partes que componen la información se denomina
marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio
y el final de una sección 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 añadir 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 página se encontrará entre una etiqueta de comienzo y su
correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan
etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 15
EJEMPLO:
A continuación 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 código daría 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 páginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma. El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.
Figura 05. Esquema de las partes que forman un documento HTML
El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).
EJEMPLO:
A continuación se muestra el código HTML de una página web muy sencilla:
<html> <head> <title>El primer documento HTML</title> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </body> </html>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 16
Si quieres probar este primer ejemplo, debes hacer lo siguiente:
o Abre un editor de archivos de texto y crea un archivo nuevo.
o Copia el código HTML mostrado anteriormente y pégalo tal cual en el archivo que has creado.
o Guarda el archivo con el nombre que quieras, pero con la extensión .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.
Después 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 después de la etiqueta <html> (con una sola excepción que se verá más 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 información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta <title>, que se utiliza para indicar el título 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
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 17
abrir el primer ejemplo en cualquier navegador y observa dónde se muestra el título de la página).
<body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más 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 colección simple de elementos en la que no importa su orden), listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden) y listas de definición (un conjunto de términos y definiciones similar a un diccionario).
Las listas no ordenadas son las más sencillas y las que más 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 párrafo estructurado que contiene una serie de elementos. HTML define tres tipos de listas:
Listas ordenadas
Listas no ordenadas
Listas de definiciones
Lista ordenada
Contenedor Tipo de lista Efecto visual <ol>
<li> ítem 1 </li>
<li> ítem 2 </li>
</ol>
Lista ordenada
1. ítem 1
2. ítem 2
3. ítem 3
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 18
Lista no ordenada
Contenedor Tipo de lista Efecto visual <ul>
<li> ítem 1 </li>
<li> ítem 2 </li>
</ul>
No ordenada
ítem 1
ítem 2
ítem 3
Lista de definiciones
Contenedor Tipo de lista Efecto visual <dl>
<dt>Término</dt>
<dd>Definición</dd>
</dl>
Definición
ítem 1
definición 1
ítem 2
definición 2
EJEMPLO:
El siguiente código 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>Artículos</li> <li>Contacto</li> </ul> </body> </html>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 19
Figura 08: Ejemplo de uso de la etiqueta ul
El navegador por defecto muestra los elementos de la lista tabulados y con una pequeña viñeta formada por un círculo 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 código 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>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 20
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 viñetas gráficas en los elementos, sino que se numeran de forma consecutiva.
EJEMPLO:
El siguiente código HTML muestra un ejemplo sencillo de lista de definición: <html> <head><title>Ejemplo de etiqueta DL</title></head> <body> <h1>Metalenguajes</h1> <dl> <dt>SGML</dt> <dd>Metalenguaje para la definición 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>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 21
Figura 10: Ejemplo de uso de la etiqueta dl
Los navegadores formatean las listas de definición de forma similar a las otras listas, tabulando la definición y alineando a la izquierda los términos. Aunque no es habitual, cada término puede tener asociada más de una definición y cada definición puede tener asociada varios términos.
Tablas
A menudo resulta útil presentar información de una manera más estructurada que en las listas. Las tablas permiten mostrar esta información 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 título de la tabla está enmarcado por <CAPTION> </CAPTION>
- Cada fila está enmarcada por<TR> </TR> (por Table Row).
- Las celdas de encabezamiento están enmarcadas por <TH> </TH> (por Table Header).
- Los datos en cada celda están enmarcados por <TD> </TD> (Table Data).
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 22
EJEMPLO:
<TABLE BORDER="1">
<CAPTION>Este es el título de la tabla</CAPTION>
<TR>
<TH> Título A1 </TH>
<TH> Título A2 </TH>
<TH> Título A3 </TH>
<TH> Título A4 </TH>
</TR>
<TR>
<TH> Título B1 </TH>
<TD> Valor B2 </TD>
<TD> Valor B3 </TD>
<TD> Valor B4 </TD>
</TR>
</TABLE>
Los resultados de este código:
Este es el título de la tabla
Título A1 Título A2 Título A3 Título A4
Título B1 Valor B2 Valor B3 Valor B4
1.2.3. Enlaces, Hiperenlaces
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.
Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace, la
página que se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
Visita www.ucvlima.edu.pe
Habría que escribir:
<a href="http://www.ucvlima.edu.pe">Visita www.ucvlima.edu.pe </a>
Existen diferentes formas de expresar una referencia a una página a través del atributo href:
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 23
Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página.
Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.
Por ejemplo, "http://www.ucvlima.edu.pe" tendrá el mismo efecto que "http://www.ucvlima.edu.pe/startpage.aspx"
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un
diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.
Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra
directamente dentro de la carpeta raíz del sitio, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces
Habría que escribir:
<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz 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 raíz del sitio, habría 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
Habría que escribir:
<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 24
Observa que en este caso no aparece el símbolo "/" 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, habría que escribir:
<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Punto de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto".
Por ejemplo, para insertar el enlace:
Punto de fijacion Tipos de enlaces
Habría 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 fijación se llama tipos.
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se
especifica a través 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 opción predeterminada. Abre el documento vinculado en el mismo marco o ventana
que el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
Para insertar el enlace:
Visita www.ucvlima.edu.pe en una ventana nueva
Habría 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 opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio).
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 25
1.2.4. Manejo de imágenes, Sonido y Videos
Imágenes
Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información 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 través del atributo src.
Por ejemplo, para insertar la siguiente imagen:
Habría 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 más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden
utilizarse. Lo ideal es incluir algún 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 través del atributo src hay que especificar la ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el número 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, podríamos insertar un sonido de fondo escribiendo el siguiente código:
<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 fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 26
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vídeo 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 vídeo. 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 través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.
Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.
El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.
El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.
Por ejemplo para insertar un video, se podría 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
vídeo.
No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.
Para insertar un archivo de audio, se podría 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.
También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor es true, se ocultan los controles de reproducción.
Por ejemplo, para insertar sonido de fondo se podría escribir:
<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >
o también:
<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 27
1.3. FORMULARIOS y IFRAMES
1.3.1. Concepto de Iframe
Frame
Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargue una página 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> Título de la página </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 páginas.
</BODY>
</NOFRAMES>
</HTML>
Cuyo resultado es el siguiente:
EL atributo ROWS (filas) es el que define el número y el tamaño de los frames, en este
caso dos filas, de 75 píxels la primera y el resto de la ventana la segunda. También se
puede dividir en columnas mediante COLS
El tamaño de los frames se puede especificar de más formas:
COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera
COLS=150,*,150 tres colunmas, la primera y tercera de 150 píxels, la segunda ocupa
el resto.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 28
ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.
Las etiquetas NOFRAMES y BODY solamente se usan por cortesía, de hecho se pueden
suprimir.
Las etiquetas FRAME SRC="frames.htm" cargan las página indicadas en el frame
correspondiente.
También es posible anidar frames, llamando a una página que tenga de nuevo frames
o bien declarándolo explícitamente. 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 código 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, sólo puede ser insertado en un conjunto de marcos (elemento HTML frameset). Resulta útil, a la hora de mostrar un documento en una porción 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.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>
<h2>Esto ya está fuera del iframe</h2>
</body>
</html>
FRAME 1 FRAME 3
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 29
Algunas propiedades útiles aplicables a un iframe:
- src Archivo a mostrar dentro del iframe.
- width Ancho en píxeles.
- height Alto en píxeles.
- 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 algún contenido del iframe no se ve.
Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegación para dicho iframe.
- name Nombre del iframe si queremos acceder desde otra página. Por ejemplo
si queremos actualizar su contenido desde un enlace ubicado en otra página.
El uso habitual de los iframes es para mostrar publicidad o Webs de colaboración. Vamos a mostrar el código de la estructura básica 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 código anterior, debemos definir el tamaño del marco del iframe y definir si queremos que haya barra desplazadora o no. Ésta opción 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 página de inicio de este tutorial html.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 30
1.3.2. Formularios y sus elementos.
Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro site. Los formularios html están compuestos por campos de texto y botones.
Los formularios son un tag más 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, serán partes del formulario.
La etiqueta <form> tiene una serie de atributos básicos que vamos a pasarte a explicar a continuación.
La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos. El atributo type especifica el tipo de control a crear.
Entre ellos se encuentran los siguientes valores:
Text: Crea un control que nos permite ingresar un texto en una línea.
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 enviarán por el
método 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 opción de entre una serie de posibilidades.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 31
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 enviarán por el
método 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 verificación)
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 enviarán por el método 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>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 32
1.3.3. TRABAJO DE FORO EN EL CAMPUS VIRTUAL
1.4. W3C Y EL LENGUAJE XHTML
1.4.1. Estandarización W3C
El W3C, organización independiente y neutral, desarrolla estándares relacionados con la Web también conocidos como Recomendaciones, que sirven como referencia para construir una Web accesible, interoperable y eficiente, en la que se puedan desarrollar aplicaciones cada vez más robustas.
La finalidad de los estándares es la creación de una Web universal, accesible, fácil de usar y en la que todo el mundo pueda confiar. Con estas tecnologías abiertas y de uso libre se pretende evitar la fragmentación de la Web y mejorar las infraestructuras para que se pueda evolucionar hacia una Web con la información 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 además una reformulación 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"> <!--Este es un comentario y no será tomado en cuenta por el navegador --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <title>Titulo de la página</title> </head> <body> <p>Primer documento XHTML, es decir un, Hola mundo</p> </body> </html>
Analicemos el código línea a línea:
<?xml version="1.0" encoding="UTF-8"?>
Indicamos la versión de XML empleada (esa misma vale perfectamente) así como la codificación, UTF-8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 33
Este es el encabezado que deberían llevar todos los documentos XHTML1.0 estríctos acordes a las específicaciones 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">
Declaración 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 estríctos.
<!--Este es un comentario y no será tomado en cuenta por el navegador -->
Los comentarios comienzan con <!-- y terminan con --> (los saltos de línea 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 código.
<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 código ( </html> ). Además aparecen 3
atributos, el primero específica el tipo de documento, y el segundo y el tercero deben llevar como valores el código del lenguaje en el que será escrito. Para la lengua castellana este valor es es. Puedes averiguar los códigos de otras lenguas.
<head> <title>Titulo de la página</title> </head>
Con la etiqueta de apertura <head>comienza lo que se llama el encabezado de las
páginas web, aquí se dan ciertas específicaciones y otra META información acerca del documento que ya veremos con más detalle. Pero entre ellas está el elemento utilizado en el ejemplo, mediante las etiquetas <title></title>, que encierran el título de la página. Los navegadores suelen mostrarlo cómo título de la ventana. También 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>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 34
1.5. LENGUAJE CSS (Cascading Style Sheets)
1.5.1. Introducción a CSS
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, 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, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, 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 página, del diseño de
la misma.
Normalmente los estilos son guardados en un archivo externo con la extensión ".css".
Este archivo le permite hacer los cambios de apariencia y disposición de los elementos
en todas las páginas 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 declaración. La declaración a su vez está compuesta por una propiedad y su valor. La declaración debe estar definida entre llaves ({...})
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 35
Sintaxis
selector{propiedad:valor}
Veamos un ejemplo donde el selector p indica que todos los elementos p del
documento HTML serán afectados por la declaración 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 más de una propiedad, deberás separarlas con un punto y coma(;).
h1{color:red; text-align:center}
Para definir los estilos de forma más clara y fácil de leer, puedes describir cada propiedad en diferentes líneas.
p
{
color:red;
text-align:center;
}
Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separándolos 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}
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 36
Con el selector class también podemos definir diferentes estilos para cualquier
elemento HTML.
Por ejemplo definimos un class rojo y uno azul.
Sintaxis
.azul {color:blue}
.rojo {color:red}
¿Dónde usar los estilos?
Hay 3 formas de insertar una hoja de estilos:
Entre líneas
Dentro de la sección Head
Hojas de estilo externas
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 37
o Entre líneas
Definimos el estilo directamente dentro del código 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.
o Dentro de la sección Head
Las hojas de estilo interna deben usarse cuando una página 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 página solamente.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 38
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 páginas.
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 terminación .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>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 39
Cada página 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 relación 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 código css.
Así se vería 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 páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 40
La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:
Figura 11. Las cajas se crean automáticamente al definir cada elemento HTML
Las cajas de las páginas no son visibles a simple vista porque inicialmente no
muestran ningún color de fondo ni ningún borde.
Debemos hacernos la idea que todo elemento que se crea dentro de una página
HTML genera una caja.
Podemos acceder a las propiedades del borde de esa caja mediante las CSS; las
propiedades más 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">Quién descubrió América
y en que año fue?</p>
<p class="respuesta">Colón 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;
}
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 41
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 sólido y el color de la línea 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">Quién descubrió América y en que año 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 márgenes 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á después del borde. Veamos un ejemplo, la página HTML muestra dos párrafos con 8 pixeles de margen:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
</body>
</html>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 42
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 página. Por lo
general va acompañado de las propiedades: top, right, bottom y left.
Sus posibles valores son:
static (estático)
siempre tiene la ubicación que la página da por defecto. relative (relativa) mueve el elemento relativamente de su posición 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.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 43
Resultado:
Ejemplo: El siguiente ejemplo muestra tres imágenes posicionadas de forma normal:
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 44
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 genérica" />
<img src="imagenes/imagen.png" alt="Imagen genérica" />
<img src="imagenes/imagen.png" alt="Imagen genérica" />
Resultado:
1.6. LENGUAJE JAVA SCRIPT
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.
Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación 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.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 45
1.6.1. Estructura Básica JScript
A continuación, 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 página contiene el primer script</p>
</body>
</html>
La instrucción alert() es una de las utilidades que incluye JavaScript y permite mostrar
un mensaje en la pantalla del usuario. Si se visualiza la página web de este primer script en cualquier navegador, automáticamente se mostrará una ventana con el mensaje "Hola Mundo!".
Resultado:
¿Dónde y cómo incluir JavaScript?
Existen distintos modos de incluir lenguaje JavaScript en una página.
o La forma más 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">
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 46
El atributo lenguaje hace referencia a la versión 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 código HTML.
<script language="JavaScript" src ="archivo.js"> </script>
El archivo externo simplemente es un archivo del texto que contiene código JavaScript, y cuyo nombre acaba con la extensión js.
o Puede incluirse también código JavaScript como respuesta a algún evento:
<input type="submit" onclick="alert('Acabas de hacer click');return false;"
value="Click">
JavaScript es sensible a mayúsculas y minúsculas, todos los elementos de JavaScript deben referenciarse cómo se definieron, no es lo mismo "Salto" que "salto".
1.6.2. Variables, Operadores
Variables:
Las variables almacenan y recuperan datos, también 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 números (0-9), letras mayúsculas o letras minúsculas).
Ejemplos de definiciones erróneas:
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 página mientras que una variable local sólo lo es desde la función en la que fue declarada.
Normalmente, se crea una nueva variable global asignándole simplemente un valor:
globalVariable=5;
Sin embargo, si usted está codificando dentro de una función y usted quiere crear una variable local que sólo tenga alcance dentro de esa función, debe declarar la nueva variable haciendo uso de var:
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 47
function newFunction() { var localVariable=1; globalVariable=0; ... }
Tipos de datos:
Javascript reconoce seis tipos de valores diferentes: numéricos, lógicos, objetos, cadenas, nulos e indefinidos.
JavaScript tiene la peculiaridad de ser un lenguaje débilmente 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 más adelante una cadena.
MiVariable=4;
y después:
MiVariable="Una_Cadena";
A diferencia de otros lenguajes en Javascript no es necesario declarar las variables especificando el tipo de dato que contendrán, será el propio interprete el que le asignará el tipo apropiado.
Números Enteros o coma flotante.
Boleanos True o False.
Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples o dobles.
Objetos Obj = new Object();
Nulos Null
Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido creada pero no le ha sido asignado un valor.
Operadores Aritméticos:
Operador Nombre Ejemplo Descripción
+ Suma 5 + 6 Suma dos números
- Substracción 7 - 9 Resta dos números
* Multiplicación 6 * 3 Multiplica dos números
/ División 4 / 8 Divide dos números
% Módulo: el resto después de la
división 7 % 2
Devuelve el resto de dividir ambos números,
en este ejemplo el resultado es 1
++ Incremento. a++ Suma 1 al contenido de una variable.
-- Decremento. a-- Resta 1 al contenido de una variable.
- Invierte el signo de un
operando. -a Invierte el signo de un operando.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 48
Operadores de Comparación:
Operador Descripción
== " 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 Lógicos:
Operador Descripción
&& " Y " Devuelve true si ambos operadores son true.
|| " O " Devuelve true si uno de los operadores es true.
! "No" Devuelve true si la negación 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
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 49
El operador de asignación '='
Permite asignar un valor a una variable.
Operador Descripción
= Asigna el valor del operando de la derecha a la variable de la izquierda.
Ejemplo: inttotal=100;
+=
(tambien - =, * =, / =)
Añade el valor del operando de la derecha a la variable de la izquierda.
Ejemplo: inttotal +=100
&=
(también |=)
Asigna el resultado de (operando de la izquierda & operando de la derecha)
al operando de la izquierda
Operadores especiales:
Operador Descripción
(condición) ? trueVal : falseVal Asigna un valor especificado a una variable si la condición es
true, por otra parte asigna un valor alternativo si la condición es
false.
New El operador new crea una instancia de un objeto.
This La palabra clave 'this' se refiere al objeto actual.
, El operador ',' evalúa los dos operados.
Delete El operador delete borra un objeto, una propiedad de un objeto,
o un elemento especificado de un vector.
Void El operador Void especifica una expresión que será evaluada
sin devolver ningún valor.
Typeof Devuelve el tipo de dato de un operando.
1.6.3. Estructuras de Control
La sentencia IF
La sentencia If evalúa una condición, expresada entre paréntesis ( ). Si esta se
cumple, ejecuta el bloque de instrucciones que tiene entre llaves { }.
if (condición) { bloque de instrucciones;
}
También podemos indicar un bloque de instrucciones, con la palabra else, que se
ejecutará si no se cumple la instrucción.
if (condición) { bloque de instrucciones si se cumple;
} else { bloque de instrucciones si nos e cumple; }
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 50
Podemos poner varios else, con otras condiciones entre paréntesis. Se irán evaluando
todas las condiciones hasta encontrar la primera cierta. Si una se cumple, se
ejecutarán sólo esas instrucciones, aunque hubiesen otras condiciones ciertas. Si no
se ha cumplido ninguna, se ejecutará el último else, si no tiene condición.
if (condición1) {
bloque de instrucciones si se cumple condición1; } else (condición2) { bloque de instrucciones si se cumple condición2;
} else (condición3) { bloque de instrucciones si se cumple condición3; } else {
bloque de instrucciones 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 válida. Tiene que estar entre 0 y 10';
}
Las sentencias If se pueden anidar, siempre que una quede completamente dentro de
otra. Por ejemplo:
if (condición1) { if (condición2) {
si se cumple condición 1 y condición2; } else { si se cumple condición 1 pero no condición2;
} } else { si no se cumple condición1
}
La sentencia SWITCH
De forma parecida al If se comporta la sentencia Switch. Se le asigna un valor o
expresión, y se compara con cada case. Ejecuta el código de la primera coincidencia
encontrada. Si no encuentra ninguna, se ejecuta el código de default.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 51
switch(expresion) {
case valor1: instrucciones si coincide; break;
case valor2: instrucciones si coincide; break;
default: instrucciones si no coincide ninguna; }
El bucle WHILE
Los bucles son estructuras fundamentales en programación, ya que permiten repetir
una instrucción un número determinado de veces, o hasta que se cumpla una
determinada condición (o deje de cumplirse).
En bucle While, evalúa una condición. Si se cumple, ejecuta su bloque de
instrucciones, y vuelve a evaluar la condición. Si se cumple, vuelve a ejecutar las
instrucciones, y así sucesivamente mientras que la condición se cumpla.
while (condición) { bloque de sentencias;
}
Por ejemplo, el siguiente bucle mostraría 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 instrucción (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 comprobación, la condición será falsa.
var i = 0; while (i < 5) {
i++; alert('Mensaje número ' + i);
}
El bucle While se puede expresar al revés, para que primero ejecute las instruciones, y
después evalúe la condición. Esto asegura que por lo menos se ejecuten las
instrucciones una vez, y se repitan mientras se cumpla la condición. Su sintaxis es:
do { bloque de sentencias;
} while (condición)
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 52
El bucle FOR
El bucle FOR se emplea normalmente para contar, para realizar una repetición un
número determinado de veces.
Se define con un valor inicial para la variable que actúa como contador, la condición
que se ha de cumplir para que el bucle se repita, y la actualización de la variable
(normalmente un incremento). Estros tres parámetros, se separan por punto y coma
(;).
for (valor_inicial; condición; actualización) {
bloque de sentencias; }
El orden de ejecución sería: asignar el valor inicial, evaluar la condición, si se cumple,
ejecutar las sentencias, actualizar la variable, evaluar la condción, 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 número ' + 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 función
devolverá 'Datos del alumno: Juan 25 8.5'.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 53
1.6.4. Funciones
En JavaScript la estructura de una función es la siguiente:
function <nombre de función>(argumento1, argumento2, ..., argumento n)
{
<código de la función>
}
Debemos buscar un nombre de función que nos indique cuál es su objetivo (Si la función recibe un string y lo centra, tal vez deberíamos llamarla centrarTitulo). Veremos que una función puede variar bastante en su estructura, puede tener o no parámetros, retornar un valor, etc.
Ejemplo: Mostrar un mensaje que se repita 3 veces en la página con el siguiente texto:
'Cuidado' 'Ingrese su documento correctamente'
'Cuidado' 'Ingrese su documento correctamente'
'Cuidado' 'Ingrese su documento correctamente'
La solución 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 función: <html> <head>
</head> <body> <script languaje="javascript">
function mostrarMensaje() { document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>"); }
mostrarMensaje(); mostrarMensaje(); mostrarMensaje();
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 54
</script>
</body> </html>
Es importante notar que para que una función 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 más 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 numérico que nos indica la longitud en caracteres de la cadena dada. prototype. Nos permite asignar nuevas propiedades al objeto String. Métodos
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 carácter situado en la posición especificada por 'indice'. fixed(). Muestra la cadena de caracteres con una fuente proporcional.
El Objeto Math
Este objeto se utiliza para poder realizar cálculos en nuestros scripts. Tiene la peculiaridad de que sus propiedades no pueden modificarse, sólo consultarse.
Propiedades
E. Número '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. Número PI. SQRT1_2. Raíz cuadrada de 1/2. SQRT2. Raíz cuadrada de 2.
Métodos
abs(numero). Función valor absoluto. acos(numero). Función 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".
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 55
1.6.6. Avance de Trabajo práctico y/o Investigación
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 56
UNIDAD II: DISEÑO 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 métodos). A partir de esta estructura se
ha creado un nuevo modelo de programación (la programación orientada a objetos) que atribuye a los mismos propiedades como herencia o polimorfismo. Como veremos, JavaScript
simplifica en algo este modelo y hace una programación híbrida entre la programación estructurada y la programación orientada a objetos.
El modelo de la programación orientada a objetos normal y corriente separa los mismos en dos: clases e instancias (objetos). Las primeras son entes más 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.
Construcción de Objetos
Antes de crear un objeto nuevo, es necesario definir a ese objeto mediante la descripción de sus propiedades. Se hace mediante una función que define el nombre y propiedades de la función. Esta función se define como función constructor.
Ejemplo 01: function estudiante(nombre,año,calificación) { this.nombre=nombre; this.año=año; this.calificación=calificación; }
La palabra clave this, tiene un papel especial en JavaScript y se refiere al objeto actual. En base a la función anterior puede crear un objeto con el estatuto nuevo:
estudiante1 = new estudiante("Juan",15,8);
La línea de código crea un objeto llamado estudiante1 con tres propiedades: estudiante1.nombre, estudiante1.año y estudiante1.calificación.
Para crear un objeto nuevo:
estudiante2 = new estudiante("Maria",18,9);
Ahora , puede utilizar objetos como propiedades de otros objetos. Por ejemplo:
function calificación(matemáticas,inglés,física) { this.matemáticas = matemáticas; this.inglés = inglés; this.física = física; }
Con esto puede crear dos instancias del objeto calificación para los dos estudiantes:
JuanCalificación = new calificación(45,80,90); MariaCalificación = new calificación(25,65,90);
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 57
Y con estos objetos, puede entonces crear los objetos estudiantes:
estudiante1 = new estudiante("Juan",15,JuanCalificación); estudiante2 = new estudiante("Maria",18,MariaCalificación);
Ahora puede referirse a la calificación de matemáticas de Juan como
estudiante1.grado.matemáticas, o a la calificación de Maria en Física en estudiante2.grado.física.
Para imprimir el nombre, la edad y las calificaciones del estudiante en la ventana del documento, puede crear una función llamada verArchivo( ):
function verArchivo() {
document.w rite("Nombre: " + this.nombre + "<br>");
document.w rite("Año: " + this.año + "<br>");
document.w rite("Calificación Matemáticas: " + this.calificación.matemáticas + "<br>");
document.w rite("Calificación Inglés: " + this.calificación.inglés + "<br>");
document.w rite("Calificación Física: " + this.calificación. física + "<br>");
}
Una vez definido el método, necesita cambiar la definición del objeto para incluir el método:
function estudiante(nombre,año,calificación) { this.nombre=nombre;
this.año=año;
this.calificación=calificación;
this.verArchivo = verArchivo; }
Después puede ver el perfil del estudiante Juan, con el comando:
estudiante1.verArchivo( );
Ejemplo 02:
<html>
<head> <title>Ejemplo 13</title> <Script Language="JavaScript"> <!--
function verArchivo() {
document.w rite("<h1>Empleado: " + this.nombre + "</h1><hr><pre>"); document.w riteln("Número de Empleado: " + this.numero);
document.w riteln("Número del Seguro Social: " + this.nss);
document.w riteln("Salario Anual: " + this.salario);
document.w rite("</pre>");
}
function empleado() {
this.nombre=prompt("Coloque el nombre del Empleado","nombre");
this.numero=prompt("Coloque el número del Empleado " + this.nombre, "000-000");
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 58
this.nss=prompt("Coloque el número del Seguro Social de " + this.nombre, "000-000");
this.salario=prompt("Coloque el salario Anual de" + this.nombre, "Bs 000");
this.verArchivo=verArchivo;
} nuevoEmpleado = new empleado(); // --> </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 más que un cambio de nombre, para algunos servidores Web de nueva generación que proporcionan la lógica 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, atención de transacciones hacia bases de datos, etc. Generalmente los fabricantes del sector tienen a disposición del público un servidor Web básico y otro con multitud de extensiones
fuertemente integradas al que llaman servidor de aplicaciones.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 59
Un servidor de aplicaciones clásico se apoya en un modelo cliente/servidor de tres capas:
Presentación: una interfaz, generalmente gráfica que reside en los clientes. El ejemplo típico
es un navegador.
Lógica 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 Programación PHP
PHP (acrónimo de "PHP: Hypertext Preprocessor") es un lenguaje interpretado de alto nivel
embebido en páginas HTML y ejecutado en el servidor.
Hay que entender primero como funciona la solicitud de páginas en un navegador para
comenzar a programar en PHP.
Comunicación entre el cliente y el servidor sin PHP:
1 - Tipeamos en la barra del navegador la dirección y el archivo a solicitar.
2 - El web browser (navegador) envía el mensaje a través de Internet a la computadora, por
ejemplo www.lanacion.com/pagina1.htm solicitando la página (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 máquina www.lanacion.com, recibe el mensaje y lee el archivo solicitado
desde el disco duro.
4 - El servidor web envía 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 páginas estáticas (páginas que no cambian), cualquiera sea el cliente que solicita la página 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.
Comunicación entre el cliente y el servidor con PHP:
1 - Tipeamos en la barra del navegador la dirección y el archivo a solicitar.
2 - El web browser (navegador) envía el mensaje a través de Internet a la computadora llamada www.lanacion.com solicitando la página (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 intérprete de PHP (que es otro programa que se
ejecuta en el servidor web) que le envíe el archivo.
4 - El intérprete PHP lee desde el disco el archivo pagina1.php
5 - El intérprete 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 envía éste al servidor web.
7 - El servidor web envía la página al cliente que la había solicitado.
8 - El navegador muestra en pantalla el archivo que envió el servidor web.
Para aquellas personas que conocen otros lenguajes de programación (C - Java - C# - Pascal etc.) la salida de los resultados normalmente es la pantalla, en PHP la salida es la página
HTML (luego ésta viaja por internet y llega al cliente que la solicitó)
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 60
Funcion : isset
Permite saber si una variable está definida. La función isset recibe como parámetro 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. También se puede utilizar la función isset con objetos, como por ejemplo, para saber si se ha pulsado un botón o no.
Ejemplo: Ingresar dos valores en un formulario, y mostrar todos los números comprendidos.
<Html> <Title> Numeros.php </Title>
<Body> <?PHP if (isset($_REQUEST[boton]))
{ $a=$_REQUEST[a];
$b=$_REQUEST[b]; echo "Números 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 números pares <Hr>
Valor 1:  <INPUT TYPE="TEXT" NAME="a" SIZE="10"> <Br> Valor 2:  <INPUT TYPE="TEXT" NAME="b" SIZE="10">
<Br><Br> <INPUT TYPE="SUBMIT" NAME="boton" VALUE="Ingresar Datos">
<?PHP
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 61
}
?> </Body>
</Html>
Comentario:
En primera instancia, mediante la función isset, se evalúa si el botón está definido con algún valor, es decir, si se ha pulsado. Para la primera vez que se ejecute la página, la condición if (isset($_REQUEST[boton])) será falsa (FALSE), por lo tanto se ejecutará el formulario. Una vez ingresado los valores y presionado el botón, la página se llama a si misma, pero ahora la condición: if (isset($_REQUEST[boton])) será verdadera (TRUE). El resto del programa simplemente ejecuta lo requerido en el enunciado.
Una función consta de un nombre y argumentos, llamados comúnmente parámetros.
Formato:
function Nombre_Funcion (parametro1, parametro2, ... parámetro n)
{ Instrucciones; <return valor> }
Los parámetros son opcionales, ya sea que una función acepte o no valores, lo mismo que la instrucción return, dependiendo de que la función retorne algún valor o no.
Ejemplo: Realizar una función que acepte dos números y devuelva el producto de ambos. Cargar los dos valores a través 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>");
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 62
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 función que permita determinar si un número pasado como parámetro, 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"); }
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 63
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 función devuelve un tipo Boolean, es decir true o false,
según corresponda. En el programa principal, la función es llamada directamente dentro de la estructura if. Observar además, que no hace falta colocar == true, ya que lo toma por defecto.
Ejemplo: Desarrollar una función que acepte una cadena de caracteres y la convierta en mayúscula.
<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>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 64
<Input Type="Submit" Name="Boton" Value="Ingresar Dato">
</Form> <?PHP
} ?> </Body>
</Html> Ejemplo: Realizar una función que acepte el lado de un cuadrado y calcule su perímetro y su superficie (No imprimir dentro de la función). <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 perímetro 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>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 65
Comentario:
En este caso, cuando se llama a la función Calcular, se lo realiza utilizando la variable $L
como parámetro valor, ya que no cambia su valor, y las variables $P y $S se las especifica como parámetro por referencia , esto se consigue anteponiendo el símbolo & a las variables Perimetro y Superficie, porque es necesario que cambien sus valores de acuerdo con el cálculo requerido.
Se reitera que: PHP individualiza a una variable que es por referencia cuando contiene el símbolo &(ampersand) delante de la variable.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 66
UNIDAD III: PROGRAMACION PHP
FUNCIONES PHP y MYSQL
Las principales son:
mysql_connect()
Esta función conecta a la base de datos con la cual vamos a
trabajar.
Sintaxis: mysql_connect(base_de_datos, usuario, Password)
mysql_select_db ()
Esta función 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 función 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 función toma el número de resultados obtenidos de alguna consulta (query) que hayamos realizado previamente.
Sintaxis:
mysql_num_rows(identificador_de_query)
mysql_fetch_array()
Esta función lista los resultados obtenidos en una query.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 67
Sintaxis(listando resultados):
While($a=mysql_fetch_array(identificador_de_query) )
{
echo “$a[identificador_del_campo_a_listar]<br>”
}
ACLARACIÓN: De esta manera aparecería listado uno sobre otro
resultado. Ej: Campo1
Campo2
Campo3
mysql_create_db ()
Esta función crea una base de datos en el servidor.
Sintaxis: mysql_create_db(nombre_base_de_datos,
identificador_de_la_conexion)
mysql_drop_db()
Esta función elimina una base de datos del servidor.
Sintaxis:
mysql_drop_db(nombre_base_a_borrar, identificador_de_la_conexion)
mysql_close ()
Esta función desconecta a la base de datos con la cual hemos
trabajado.
Sintaxis:
mysql_close(identificador_de_la_conexion)
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 68
SESIONES EN PHP
Es un método para hacer que variables estén disponibles en múltiples páginas sin tener que
pasarlas como parámetro. A diferencia de las cookies (son pequeños archivos de texto que nuestra página almacenaría en el disco duro de los usuarios visitantes, y que podríamos recuperar el valor que contengan cuando vuelvan a visitar esa página ), las variables de sesión se almacenan en el servidor y tienen un tiempo limitado de existencia.
Para identificar al usuario que generó las variables de sesión, el servidor genera una clave única que es enviada al navegador y almacenada en una cookie. Luego, cada vez que el
navegador solicita otra página al mismo sitio, envía esta cookie (clave única) con la cual el servidor identifica de qué navegador proviene la petición y puede rescatar de un archivo de
texto las variables de sesión que se han creado. Cuando han pasado 20 minutos sin peticiones por parte de un cliente (navegador) las variables de sesión son eliminadas automáticamente (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 página crearemos dos variables de sesión y en una tercera página
recuperaremos los valores almacenados en las variables de sesión. La primera página 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 página es donde creamos e inicializamos las dos variables de sesión:
<?php
session_start();
$_SESSION['usuario']=$_REQUEST['campousuario'];
$_SESSION['clave']=$_REQUEST['campoclave'];
?>
<html>
<head>
<title>Problema</title>
</head>
<body>
Se almacenaron dos variables de sesión.<br><br>
<a href="pagina3.php">Ir a la tercer página donde se recuperarán
las variables de sesión</a>
</body>
</html>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 69
Cuando creamos o accedemos al contenido de variables de sesión debemos llamar a la función session_start() antes de cualquier salida de marcas HTML. Para almacenar los valores en las variables de sesión lo hacemos:
$_SESSION['usuario']=$_REQUEST['campousuario'];
$_SESSION['clave']=$_REQUEST['campoclave'];
Es decir, tenemos el vector asociativo $_SESSION que almacena las
variables de sesión.
Por último, esta página tiene un hipervínculo a la tercera página.
La última página de este ejemplo tiene por objetivo acceder a las variables de sesión:
<?php
session_start();
?>
<html>
<head>
<title>Problema</title>
</head>
<body>
<?php
echo "Nombre de usuario recuperado de la variable de
sesión:".$_SESSION['usuario'];
echo "<br><br>";
echo "La clave recuperada de la variable de
sesión:".$_SESSION['clave'];
?>
</body>
</html>
De nuevo vemos que la primera línea de esta página es la llamada a la función session_start()
que, entre otras cosas, rescata de un archivo de texto las variables de sesión 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 página del sitio).
Para mostrar las variables de sesión, las accedemos por medio del vector asociativo $_SESSION:
echo "Nombre de usuario recuperado de la variable de
sesión:".$_SESSION['usuario'];
echo "<br><br>";
echo "La clave recuperada de la variable de
sesión:".$_SESSION['clave'];
Tengamos en cuenta que en cualquier otra página del sitio tenemos acceso a las variables de sesión sólo con llamar inicialmente a la función session_start().
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 70
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 parámetros, en base a los cuales realizar distintas acciones, y devolver datos de varias formas distintas (principalmente como parámetros 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 carácter 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; después de
escrito el procedimiento se escribe nuevamente la sentencia DELIMITER; para asignar al punto y coma su función 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 código se indican los parámetros, IN indica que es un parámetro de entrada, OUT indica que es un parámetro de salida, INOUT indica que es un parámetro de entrada y
salida, Después se indica el nombre del parámetro, 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 lógica 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 debería 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 código,
necesitamos moverlas a un solo lugar.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 71
EJEMPLO:
Para la creación de los códigos 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 típica de WordPress1
CREACIÓN 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 parámetro 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 pestaña de Consultas de
phpMyAdmin usamos la siguiente consulta:
CALL miPrimerProcedimientoAlmacenado('post');
NOTA: Presta atención en la forma en que se pasan los parámetros al SP, usando comillas simples y paréntesis para encerrar los valores pasados.
Como verás, el resultado es un grupo de registros que cumplen con las condiciones definidas por el parámetro 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 conexión normales para acceder a mysql y las demás instrucciones siguientes:
$sql="call miPrimerProcedimientoAlmacenado('post');"; $res=@mysql_query($sql, $cnx) or die('Error en el query:
'.mysql_errno($cnx).' - '.mysql_error($cnx));
1 WordPress es una poderosa plataforma de publicación personal, y viene con una gran cantidad de características incorporadas,
diseñadas para hacer tan fácil, 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 ')
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 72
PROGRAMACIÓN ORIENTADA A OBJETOS EN PHP
Implementaremos una clase llamada Persona que tendrá como atributo (variable) su nombre y dos métodos (funciones), uno de dichos métodos inicializará el atributo nombre y el siguiente
método mostrará en la página 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 básica para declarar una clase es:
class [Nombre de la Clase] {
[atributos]
[métodos]
}
Siempre conviene buscar un nombre de clase lo más próximo 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 métodos(funciones).
Nuestra clase Persona queda definida entonces:
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 73
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 métodos se utiliza la misma sintaxis que las funciones del lenguaje PHP.
Decíamos que una clase es un molde que nos permite definir objetos. Ahora veamos cual es la
sintaxis para la definición de objetos de la clase Persona:
$per1=new Persona();
$per1->inicializar('Juan');
$per1->imprimir();
Definimos un objeto llamado $per1 y lo creamos asignándole 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 métodos debemos anteceder el nombre del objeto el operador -> y
por último el nombre del método. Para poder llamar al método, éste debe ser definido público (con la palabra clave public). En el caso que tenga parámetros se los enviamos:
$per1->inicializar('Juan');
También 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 página WEB tenemos 2 menúes, seguramente definiremos una clase Menu y luego crearemos dos objetos de dicha clase.
Esto es una de las ventajas fundamentales de la Programación Orientada a Objetos (POO), es
decir reutilización de código (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 métodos debemos utilizar los operadores $this -> (this
y ->):
public function inicializar($nom)
{
$this->nombre=$nom;
}
El atributo $nombre solo puede ser accedido por los métodos de la clase Persona.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 74
TIPOS DE ACCESO EN PHP
¿Qué es eso de público, privado y protegido?
Público (public): Se puede acceder desde fuera de la clase.
Privado (private): Sólo 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 orientación a objetos existe una variable, que hace referencia al objeto con el que se está trabajando
MANEJADORES DE CONTENIDO (CMS: Content Management System)
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 75
¿Qué es un CMS (Content Management System)?.
Es un software de gestión de contenidos que permite la publicación y administración de
contenidos a través de un panel de control, utilizado comúnmente para la creación de
webs dinámicas, por ejemplo blogs y tiendas online (comercio electrónico). Los CMS de
código abierto más conocidos son: WordPress, Drupal, Joomla, Movable Type,
Prestashop, Magento, Zencart, Concrete5.
El uso de CMS de código abierto o la creación de una web a medida depende de las
necesidades de cada uno. Las ventajas más interesantes del uso de CMS de código
abierto son las siguientes:
1. Rápida instalación: con los conocimientos justos se instala y configura en tu
servidor.
2. Simplicidad: suelen tener una interfaz amigable para la gestión de los contenidos.
3. Personalización intuitiva: existe un gran número de plugins y themes (gratuitos y
de pago) que se instalan en sencillos pasos.
4. Precio económico: 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 más conocidos
disponen de una gran comunidad de usuarios.
Pero también tiene algunos inconvenientes que se deben conocer:
6. Menor seguridad: en un sistema de código abierto existen comunidades que se
dedican a encontrar vulnerabilidades en el mismo.
7. Menor velocidad: al ser plataformas genéricas, las consultas a la base de datos
son altas, por tanto cuanto mayor información haya almacenada más lento será el
sistema.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 76
A CONTINUACIÓN ALGUNOS TIPS PARA EL EXÁMEN:
o EL EXÁMEN CONSTA DE 6 PREGUNTAS: LAS DOS PRIMERAS SON DE TEORÍA (4
PUNTOS), son preguntas para marcar la alternativa correcta o indicar VERDADERO / FALSO. Revisar: con qué función se crea, inicia o destruye una sesión, cuándo un atributo o método es privado, público o protegido, uso del arreglo asociativo global $_SESSION, cómo crear una variable de sesión, cuál es la instrucción para llamar a un procedimiento almacenado, cómo llamar a los métodos o campos STATIC de una clase, etc.
o EN OTRA PREGUNTA SE LES PRESENTARÁ UN CÓDIGO EN PHP (puede ser la
declaración de una sola clase o puede involucrar una relación de herencia entre dos clases) EN EL CUAL TIENEN QUE IDENTIFICAR CUÁL ES EL ERROR, Y CUÁL
DEBERÍA SER LA SOLUCIÓN, para resolver esta pregunta deben conocer correctamente los tipos de acceso tanto a campos como a métodos: privado,
público o protegido; comprender que la mejor manera de acceder a un campo privado de un objeto es mediante métodos públicos del tipo SET y GET.
o TRES PREGUNTAS SON PARA ESCRIBIR CÓDIGO EN PHP (DEL SCRIPT PRINCIPAL main.php y DE LAS CLASES NECESARIAS para la solución).
EJERCICIOS TIPO, PARA EL EXÁMEN
FINAL (Se les recomienda practicarlos por ser muy
similares a los del examen final)
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 77
EJERCICIO 01: El siguiente código en PHP corresponde a la implementación de una relación 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 Identificar los errores y explicar el porqué de los mismos.
o Proponer la solución correcta
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 78
EJERCICIO 02: Implementar un programa en PHP de nombre IUMatematica.php que hace uso de
la clase Matematica.php, esta clase tiene métodos estáticos para las cuatro operaciones básicas (suma, resta, multiplicación, división), gráficamente la relación entre ambos archivos sería:
Luego de ingresar dos operandos, elegir un operador y pulsar en el botón “Procesar” se muestra el
resultado en una tabla (al final de la interfaz anterior) como lo muestra la siguiente figura:
IUMatematica.php Matematica.php
IUMatematica.php
Tener en cuenta:
La página IUMatematica.php emplea un formulario recursivo por lo tanto se deberá usar correctamente la función
isset().
Se pide la implementación tanto de la página IUMatematica.php como de la
clase Matematica
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 79
EJERCICIO 03.- Este ejercicio implica trabajar con 3 páginas 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 sesión.
En la pagina3.php recuperaremos los valores almacenados en las variables de sesión.
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 gráfico siguiente muestra la secuencia en que se deben ejecutar las páginas. Se pide
implementar pagina2.php y pagina3.php de tal manera que el resultado de cada página sea:
Pagina1.html Pagina2.php
Pagina3.php
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 80
EJERCICIO 04: Usando clases en PHP resolver una ecuación de segundo grado:
Se pide implementar la clase Ecuacion y Math (en archivos independientes del mismo nombre
de la clase). La clase ecuación depende de la clase Math porque necesita de los métodos estáticos pow y sqrt para realizar el cálculo de las raíces de la ecuación.
Gráficamente la relación de dependencia entre estos archivos es como sigue:
Tener en cuenta que el método resolver realiza el cálculo de las dos raíces de la ecuación de segundo grado y las devuelve en un arreglo, dentro de éste método se debe invocar a los métodos de la clase Math. La implementación 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>"); ?>
Programa: main.php
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 81
EJERCICIO 05.- Partiendo de la siguiente figura y tomando como base el código de la
clase Artículo:
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. Implementar en PHP la clase Paquete, si se sabe que un objeto de esta clase contiene
una lista de objetos de la clase Articulo.
b. Para ilustrar el uso de la clase Paquete, elabore un programa main.php en el cual usted deberá:
Crear como mínimo 03 objetos de la clase artículo (inicialíce los atributos de caja objeto con los valores que usted desee)
Añadir los artículos creados dentro de un objeto de la clase Paquete
Mostrar el code, name y price de cada artículo que se encuentra dentro del objeto paquete usando la estructura de control foreach.
Programa: main.php
Articulo.php Paquete.php
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 82
EJERCICIO 06.- Partiendo de la siguiente figura y tomando como base el código la clase
padre CalculadoraBase:
Se pide:
c. Implementar en PHP la clase hija Calculadora1, si se sabe que tiene dos métodos
públicos factorial y esPrimo.
d. 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 métodos suma
y resta del objeto creado (en el paso anterior).
Invocar a los métodos factorial(n1) y esPrimo(n2) del objeto de la clase Calculadora1.
Mostrar los resultados de las llamadas a estos métodos.
<?php class CalculadoraBase { public function suma( $n1, $n2 ) { $rpta = $n1 + $n2; return $rpta; } public function resta( $n1, $n2 ) { $rpta = $n1 - $n2; return $rpta; } } ?>
Programa: main.php
Calculadora1.php
CalculadoraBase.php CalculadoraBase.php
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 83
EJERCICIO 07. Usando clases en PHP implementar una página de nombre menu.php que al cargarse en un navegador, muestre una lista de hipervínculos en forma horizontal (básicamente un menú de opciones) como lo indica la siguiente figura:
Se pide completar el siguiente código:
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 títulos de los enlaces. Es decir será necesario definir dos vectores paralelos que almacenen las direcciones y los títulos respectivamente.
Luego utilizar una estructura repetitiva para visualizar la combinación de enlaces y títulos (hipervínculos) en un menú.
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 84
SOLUCIÓN - EJERCICIO 02:
Matemática.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 (implementación parcial)
La implementación al 100% de esta clase está en el directorio: EJERCICIO 02 (colgado en el campus –
dentro de la carpeta “EXAMEN_FINAL”)
<?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 método sumar En caso que $ope sea -: invocar al método restar En caso que $ope sea *: invocar al método multiplicar
En caso que $ope sea /: invocar al método dividir $resultado = TRUE; } ?>
<html> Crear la interfaz gráfica (formulario recursivo) If (resultado)
Crear la tabla que muestra el resultado
</html>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 85
SOLUCIÓN - 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 sesión.<br><br>
<a href="pagina3.php">Ir a página3.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 sesión:".$u;
echo "<br><br>"; echo "La clave recuperada de la variable de sesión:".$c; ?>
</body> </html>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 86
SOLUCIÓN - 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; } …. Continúa en la siguiente página……
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 87
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>"); ?>
SOLUCIÓN - 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;
} …. Continúa en la siguiente página……
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 88
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>"); }
?>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 89
EJERCICIO 06 - SOLUCIÓN
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; }
} ?>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 90
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 - SOLUCIÓN
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>
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 91
Analicemos ahora la solución al ejercicio 07, como podemos ver normalmente los atributos
de la clase se definen inmediatamente después 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 método que añade a los vectores los datos que llegan como parámetro:
public function cargarOpcion ($en,$tit)
{
$this->enlaces[]=$en;
$this->titulos[]=$tit;
}
Conviene darle distinto nombre a los parámetros y los atributos (por lo menos inicialmente para no confundirlos).
Utilizamos la característica de PHP que un vector puede ir creciendo solo con asignarle el
nuevo valor. El dato después de esta asignación $this->enlaces[ ]=$en; se almacena al final del vector.
Este método será llamado tantas veces como opciones tenga el menú.
El siguiente método 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 tendrán la misma cantidad). Para obtener la cantidad de elementos del vector utilizamos la
función count.
Dentro del for imprimimos en la página el hipervínculo:
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 programación 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();
Asignatura: Ingeniería Web| Mg. Ing. Orleans Moisés Gálvez Tapia| www.ucvlima.edu.pe 92
Creamos un objeto mediante el operador new y seguido del nombre de la clase. Luego
llamamos al método cargarOpcion tantas veces como opciones necesitemos para nuestro menú (recordar que SOLO podemos llamar a los métodos de la clase si definimos un objeto de la misma)
Finalmente llamamos al método mostrar que imprime en la página nuestro menú.
ADICIONALMENTE SE PROPORCIONA UN DIRECTORIO DE CASOS PRÁCTICOS (ESTUDIADOS EN
CLASE DURANTE LA TERCERA UNIDAD y no formarán parte del examen final)
IMPLEMENTADOS EN PHP, SOLAMENTE DEBEN DE GRABARLO EN EL DIRECTORIO RAÍZ DE SU
SERVIDOR WEB:
EJERCICIO DEL COLEGIO LOS GENIOS
EJERCICIO SOBRE SESIONES EN PHP
SIMULANDO UN CARRITO DE COMPRAS
ETC.
CON RESPECTO AL EXAMEN FINAL
Los 07 ejercicios resueltos en esta tercera parte de la separata
serán muy similares a los del próximo examen
final, se recomienda analizar detalladamente y comprender la
solución de cada uno de ellos.
o LAS 02 PREGUNTAS DE TEORÍA (ver: tips para el
examen – pág 76) sumarán 4 PUNTOS
o LAS PREGUNTAS DE CODIFICACIÓN 16 PUNTOS
TODO LO QUE VENDRÁ EN EL EXAMEN FINAL ESTÁ
COMPRENDIDO EN LA TERCERA UNIDA DE ESTA SEPARATA,
ESPECÍFICAMENTE LOS EJERCICIOS TIPO PARA EL EXAMEN
ESTÁN COMPRENDIDOS ENTRE LAS PÁG. 76 - 92 (todos estos
ejercicios han sido parte de las guías de laboratorio resueltas en
la unidad III).