190 41 196 139

Reciba as esora virtual en: WW'\IV.USS.edu.
pe
INGENI ERA WEB

Ciclo VIII
FACULTAD DE INGENIERIA, ARQUITECTURA Y URBANISMO
ESCUELA DE INGENIERA DE SISTEMAS
;
,----------------------------------------------------------------------------'
t Rector Fundador Escuela profesional: ~
1
Dr. Csar Acua Peralta Sistemas

1

1
Gerente General Curso : 1
!
1
Dr. Humberto Acua Peralta INGENIERA WEB f
1
3
1
Rector : Profesor: 1
Dr. Humberto Llempn Coron el lng. Franklin Te r n Santa Cru z
Vicerrector acadmico : Ao acadmico:

Mg. Alcib ades Si me Ma rques 2011
Decano de la Facultad de Ciclo acadmico

Ingeniera, Arquitectura Y Urbanismo: Vil
Mg. Jorge Lujn Lp ez
Gua Didctica INGENIERA WEB
Director de Escuela de Sistemas Autor Fran klin Te r n San ta Cruz
_ Mg. Luis Vives Garnique
Edicin 2010
Directora del Programa Acadmico de Uni versidad Se or de Sip n
Pimentel - Pe r
Educacin a Distancia:
Mg. Lad y Lora Pera lta
DATOS DE IDENTIFICACION
PROFESOR Franklin Tern Santa Cruz

TELFONO PEaD (074) 481615
E- mail Coordinador de
Escue l a de Ing. Sistemas cpead _ sistemas @crece . uss .ed u.pe
~ ,
~--- - - -- - ---- - - ---- - --- -- ---- - --- - -- - ---------------------- -- - - - - ---~--- - --~~
MATERiAL DE USO DIDCTICO PARA ESTUDIANTES DE LA UNIVERSIDAD SEOR DE SI PAN
PROHIBIDA SU REPRODUCCIN TOTAL O P.U,RCIAL POR CUf\LQU IER iv1EDIO
PROG RAMA
EDU CACIN
PEa A DISTAN CIA
Ingeniera Web Gua didctica IJJU
ndice
Programacin de Contenidos ............. ....... .. ...... .. ........ ... .. ............ .. ...... .. ............ ........................... 6
Bibliografa. .... .............. ...... .. ......... ..... .. .... .......... .... .......... .... ...... .. ...... .. .......... .. ... .. .. .. ... .... .. . 7
Orientaciones generales para el estudio ............ ....... .. .... .. ... ... .. ........ .. .. .... ..... .... ..... .... ... ..... ... .... ..... 8
Tema 01 : World Wide Web ....................... .. ..... .. .. ... .. ...... .. .... ... .. .... .. ..... .. ......... .... ........ .......... .. .... 10
Introduccin al tema .. ..... ....... ...... ............. ...... .. ....... ....... .... .. ... .... .. ... ..... .... .... ..... .. ... .. .. ... .. .... .. .... 10
1.1 Definicin de World Wide Web ...... .. .. .. .. ....... .. .. ... ...... ... ..... .... .. ... .... ................ .. .......... .. .... 11
1.2 Historia de la Web ...... .... .. .. ...... ....... .. .... ... .... .. ...... ...... .... .. ..... .. ..... .... ........ ...... .... ....... .. .. ... 11
1.3 Funcionamiento de la Web .. .............................. .... .. ...... ........ .. .. .......... ... .. .. .... .. .... .. .. ........ 11
Tema 02 : HTML- HyperText Markup Language ............. .. ..... .. ..... .. .......... ................................ 15
Introduccin al tema .. .............. ........... ....... ...... ... ...... .... ... .. ......... .... ........ ... .. .. .... .. .............. ......... 15
2.1 HTML .. .... ...................................... ..... .. .... ....... ....... ....... ........ ............. .. ..... .... .... .. ...... .. .. .... 16
3.1 Formato de Texto con 1-lTML ...................... .. .... .. .... ... ..... .. .... ... .. ...... .... .................... .. ....... 17
3.2 Listas .. ........ ..... ..................... ..... ....... .. .. .... .... ...... ........ .... ... ........ .. .. ............................ ........ 17
3.3 Comentarios no visibles en la pantalla ....... .. ................ .... .... .... .. .. .. ....... .. ...... .. ... .. .... .. ...... 19
Tema 03: Java Script ...................................................... .............. .. ..... .... ......... .. .... .. .... .... .... .. ..... 22
Introduccin al tema ... .... .. .............. .. ...... ... ..... .. .......... ... ... ............... .... .. ................. .. ...... ...... .. ... . 22
3.1 Java Script ... ...... ... ...... ....... .... ... ... .... .. .... .. .... .. ........ ... ... .. .. ... ..... .... .. .. ... ........ .. ..... .... .. .. .... ... 23
3.2 Elementos bsicos ...... ..... .... .... ... ...... .. ... ... ... .. .. ... .. .. ..... ... ... .... ....... ........ ... .. ..... .... ... .... .. ..... 24
3.2.1 Comentarios ... ... .......... .. .... .. ........... ...... ... ...... ..... .. .... .. .. .... ..... ...... .. .. .. ... ........ ...... ... ... .... 24
3.2.2 Tipos de datos ........ .......... .... .......... .. ... .. .... .... ... .. .. ... .. ... ...... ... .. .... ... .. .... .. ... .. .. .... .... ....... 25
3.2.3 Variables ................... .. .... .... .. ....... .............. ............ ... ...... .. ........ .......... .. .. ... .... ...... .... ..... 25
3.2.4 Vectores y matrices .... .... .... .. ......... .... .. ....... .. ..................... .. ...... .. ........... ....... ... ........ ... . 26
3.2.5 Operadores ............... ...... .. ....... ... .... ..... .. ............. ... .......... .. ... .. .. ...... .. .... ... .. ... ............... . 26
Tema 04: CSS- Cascade Style Sheets .... .... .... .. .... ... .... .... .... .......... ... .. ..... .......... .... .. .......... .. ..... 29
Introduccin al tema .... .. .. ...... ..... ....... .. ............. .... ... .... .... .. ... ........... ... ...... .... ...... ........... ... ....... .. . 29
Dentro del diseo de pginas web, se presenta esta como la vanguardia en cuanto a definicin
de estilos dentro de las plantillas de diseo. A travs de instrucciones en cdigo HTML se
definen los estndares del conjunto de pginas que conforman el proyecto ............................ 29
4.1 CSS .. ..... ... ........... ...... ..... ........... ... .......... ........ .. .... .. .. ..... ... ... ...... .......... ... .... .... .. ... .............. 30
Tema 05: Introduccin a PHP ...... .... .. .... ......... ... ... ... .. .. ... .. ...... ......... ... .......... ..... .. ....... ... ............. 35
Introduccin al tema ...... .... .... ...... .... ....... .. .... .......... ....... ....... ... .. .. ... .. .. .... ....... .. ....... .. .. .... .. ... .. .... . 35
5.1 PHP ..... ..... ...... ...... ....... .......... .... .. ....... ......... ... ...... ..... ..... ...... , ...... .... .. .. .. .... .. ........ ...... ....... . 36
5.2 Qu se puede hacer con PHP? .... .. ... ...... .......... ...... .. .... ... .. .. .. ...... .. ............. .. ..... .. .. .. ...... 36
5.3 Sintaxis bsica ... ..... .. ... ....... ... .................. .... .... ... .... .... .. ... .. : .. .. .. ... ..... .. .. ... ... .... .. .... .. ... ... .... 38
5.4 Expresiones .................. .... ........... .. .......... ...... .. ... .. .. ... .. .... ... .... ... ... .. ... .... .. .. ......... ..... ......... 39
Tema 06 : Funciones de usuario y cadenas ...... .. .. .. .. ......... .. ...... ............................ .. .... .... .......... 44
Introduccin al tema ................. .... .. .. ... ....... ......... .. .. .. .. ... .... ... ... .... .... ........ ... .. .. ..... .. .. .. ...... ... .. ..... 44
6.1 Funciones definidas por el usuario ............................... ... .. .... .............. .... ..... .. .. .. .... ........ .. 45
6.2 Cadenas ...... ............... ... .. ..... ..... ....... ....... ...... .. .... .. ... .... .... .... ... ... .......... .. ................... .. ..... 47
Tema 07: Formularios HTML con PHP .......... .. ...... .. ..... .. .. ... .. ........ .. .. .. .. .............. .. ... .... .. .. .. .. ...... 56
Introduccin al tema .... ............................ ..... .. .... .. ....... .. ... ... .. ..... .. ................... .. ......... ...... .......... 56
7.1 Formularios HTML .... ... .......... ........................... ... .... .. ... ..... ..... ... .. ............ .......... ..... ... .. ... .. 57
7.2 Envo de datos de un formulario a PHP .... .. .............. .... ..... ... .... ... .. ...... ... ......... .......... .. .. .. 61
Tema 08: Programacin Orientada a Objetos con PHP .......... ... ... ...... .......... .. .. .. .............. .. .... . 65
Introduccin al tema .. ... .......... ............ ..... .. ....... .... .... .. ... ........ ..... ....... ............. ... ... ........... ........... 65
8.1 Clases y Objetos ... ......... .. ... ...... ... ....... .. .... ....... .... .. .... ................. ...... ..... .. ... .... .... .. ............ 66
Tema 09: Acceso a Bases de Datos con PHP ...... .... .... ... .... .... ..... ...... ... .. ...... .. .. ........... ...... ... .... 70
Introduccin al tema ............................................ .. .... .... ...... .. ... .... .. ... ....... ........ .. ... ..... .. .... ... .. ..... 70
9.1 Acceso a Base de Datos con PDO ......... .. .. .. .. .......... .. .. ........ .. ....... .. ............. .. .. ........ ........ 71
Tema 10: Seguridad en la red .... ...... .. ............. .. .. ..... .. ...... ... .......... .... .. ... .... ... .. ... ........... ..... .. .. ... 76
Introduccin al tema .. .. .. .. ............ .. .. ... ... ..... .. ......... ... .. ...... .. ...... ...... .. ..... .. ..... .... ...... .. ..... ... .. .... .. .. 76
10.1 Seguridad ...... ................... ... ..... .... ... .... .... ... .. .. ..... .. .... ....... ...... .. .... .. ...... .. .... ... .. .. ... .. .... .. 77
10.2 Uso de Register Global .......... ... .. .. ..... .. .... ...... .. .... .. ..... .. .. .. .. .. .. ... ... ...... .. ...... .... ........... 78
2
Ingeniera Web Gua didctica tlm
Tema 11: AJAX con PHP ............ ........ ..... .. ........ .. ..... ... ... .... ..... .... .... ..... .. .... . ..... .. .... .... .. .. ...... ..... 79
Introduccin al tema ................ ... ....... ....... .... ... ....... .... ............... .. ..... ... ... ........... .. ..... ............. ...... 79
11 .1 AJAX ............. ..... ..... ..... ........ ..... ...... ........... .... ............... .... ........ .. ........ ...... ....... ..... .... .... 80
3
Ingeniera Web Gua didctica U!.)
Introduccin
Si el conocimiento te plantea problemas, la ignorancia
no te aportar las soluciones.
Isaac Asimov
i
Estimado estudiante del PEaD - Programa de
Educacin a Distancia - bienvenido al curso de
Ingeniera Web, es un placer compartir contigo esta
nueva experiencia curricular, que serv1ra para
enriquecer tu formacin profesional y contacto con el desarrollo de aplicaciones Web.
Ingeniera Web, es una asignatura de formacin profesional del VIII ciclo en la currcula
de la escuela de Ingeniera de Sistemas del PEaD, que centra su estudio en el
desarrollo de aplicaciones web utilizando PHP como lenguaje script.
En la sociedad en la que vivimos, la Internet ha empezado a formar parte del da a da

de millones de habitantes en el planeta, y dentro de los diversos servicios que
proporciona Internet, la World Wide Web es el servicio ms utilizado, en este contexto,
un profesional con formacin tecnolgica no puede estar ajeno a esta realidad. Este
curso te permitir entender y aplicar las diversas herramientas y estndares utilizados
para el desarrollo de aplicaciones web.
Adems pongo en tus manos esta gua didctica, que la he diseado de manera clara,
sencilla mediante resmenes, esquemas, que estoy seguro que con tu apoyo, permitir
lograr los objetivos propuestos. Dicha gua ha sido divida en dos unidades: la primera
unidad denominada DHTML, se centra en el estudio de los lenguajes y tecnologas
utilizadas de lado de los clientes web o navegadores en Internet. En la segunda unidad
denominada: Webs dinmicas con PHP, se estudia las diversas tcnicas y herramientas
de desarrollo para la segurid?d y el acceso a bases de datos en Internet.
Es importante indicarte que el estudio a distancia es una gran responsabilidad, debido a

que t eres el principal administrador del tiempo. Recuerda tu puedes slo debes
proponrtelo.
lng. Osear E. Capuay Uceda

Tu docente gua
4
Ingeniera Web Gua didctica 1!1
Competencia
! Desarrolla sistemas de informacin basados en web

aplicando enfoques modernos de gestin.
: Identifica requerimientos de calidad para la construccin de
proyectos web, contribuyendo con soluciones de comercio
electrnico.
! Conoce, sugiere e implementa el uso de la tecnologa
emergente en servidores web, valorando la importancia de
las aplicaciones web de una manera crtica y reflexiva .
~,, . ~
5
Ingeniera Web Gua didctica iJ);'
Programacin de Contenidos
UNIDAD
"DHTML"
Contenidos Semanas de estudio
Tema 01: World Wide Web Semana 01

Tema 02: HTML Semana 02 y 03
Tema 03: Java Script Semana 04
Tema 04: Hojas de Estilo en Cascada Semana 05
Tema 05: Introduccin a PHP Semana 06 y 07
Primera evaluacin en lnea Semana 08
( 11 UNIDAD )
'~ilidMWUiMWil~lii&miiiitWWWii#liii.lWiiillM iiliitWJrmm&--W:&IHPMU#!Mdl~~Jiil i Miii
"Webs Dinmicas con PHP"
Contenidos Semanas de estudio

Tema 06: Funciones de usuario y cadenas Semana 09
Tema 07: Formularios HTML con PHP Semana 10
Tema 08: Programacin Orientada a Objetos Semana 11 y 12
Tema 09: Acceso a Bases de Datos con PHP Semana 13 y 14
Tema 10: Seguridad en la red Semana 15
Tema 11: AJAX con PHP Semana 16
Segunda evaluacin en lnea Semana 17
6
Ingeniera Web Gua didctica
Bibliografa
1. Texto Bsico.
! Lpez Quijado J. (2008). Domine PHP 5. 1era edicin. Mxico. Alfaomega

Grupo Editor.
Se ha considerado el libro, porque explica de una manera clara los diferentes
conceptos y herramientas utilizadas en la web para el desarrollo de aplicaciones
utilizando PHP como lenguaje de lado del servidor web .
Adems este libro complementa nuestro estudio con tpicos especiales que instigan
al estudiante a seguir investigando y sobre todo a desarrollar aplicaciones con valor
agregado que las diferencia de otras.
2. Texto recomendado
! Suehring, Steve (2009). La Biblia de PHP 6 y MySQL. 1 ra edicin. Espaa:
Editorial Anaya Multimedia.
PHP y MySQL son tecnologas de cdigo abierto que son los elementos
fundamentales de la mayora de sitios y servidores web . Te recomiendo este libro
porque con l aprenders PHP 6 y MySQL por dentro y por fuera , explorars los
pros y contras de utilizar tecnologas de cdigo abierto, y encontrars pginas de
consejos y tcnicas que te ayudarn a extraer el mximo partido a este potente do
de desarrollo.
3. Direcciones Electrnicas
! http://www.desarrolloweb.com/
Pgina que nos proporciona una gran variedad de contenidos referente al desarrollo
de aplicaciones en Internet. Este sitio contiene muchos manuales y ejemplos
prcticos que te ayudar a refo rzar los conocimientos adquiridos en las sesiones de
clase .
! http://www.forosdelweb .com/
Es un excelente lugar para resolver consultas relacionadas con la programacin de
aplicaciones web desarrolladas con PHP y bases de datos. Aqu podrs consultar a
expertos y personas con muchos aos de experiencia respecto a cualquier error o
problema que pueda surgir durante el desarrollo de tu proyecto web.
! http://www.php .net/
Pgina del lenguaje de programacin de lado del servidor PHP , el mismo que
utilizaremos a los largo del curso . En este sitio web pod.remos consultar las
novedades, versiones, herramientas y manuales tiles para cualquier consulta
acerca del lenguaje.
7
Ingeniera Web Gua didctica (JJfft
Orientaciones generales para el estudio
Te saluda el lng. Osear E. Capuay Uceda y te felicita por la

iniciativa de seguir capacitndote, te acompaar durante el
presente curso para guiarte ante cualquier duda .
Para la presente experiencia curricular se te ha proporcionado el

libro: Domine PHP 5 y adems una gua didctica en la cual
encontrars orientaciones generales para poder desarrollar el curso
de acuerdo al slabo de la Escuela de Ingeniera de Sistemas. Para
ello debes consultar paralelamente la gua y el libro recomendado.
La gua didctica est desarrollada con la claridad necesaria para que los estudiantes
puedan asimilar con facilidad los conceptos y herramientas utilizadas en el desarrollo de
aplicaciones web, encontrars adems el desarrollo de ciertos temas que el libro no
considera , y en el libro texto encontrars el desarrollo capitular en forma ms amplia, de
presentarse cualquier duda podrs realizarme la consulta va Internet a travs del campus
virtual en la opcin consultas al docente.
La seleccin del libro texto y la gua didctica ha sido diseada pensando en ti , de tal
manera que puedas conocer de manera sencilla, las tcnicas, y conceptos de esta
asignatura , pero tambin te recomienda el uso de la bibliografa complementaria para
ahondar algn tema que te interese y de esta forma estimular tu desarrollo profesional.
Te recomiendo que si eres un trabajador, debes elaborar un horario o un calendario de

estudio que te permita organizar y distribuir de la mejor manera tu tiempo de tal manera que
avances las sesiones de acuerdo al tiempo programado.
Debers complementar tus clases con actividades y realizar los ejercicios de autoevaluacin
que te permitirn medir tus logros. No avances a la siguiente unidad sin estar convencido de
haber logrado el aprendizaje propuesto.
En cuanto a las evaluaciones, el primer examen parcial se realizar luego de terminada la

primera unidad y el segundo parcial cuando se concluya la segunda. En ambos casos se
evaluarn los contenidos de la unidad correspondiente.
Es importante escoger un ambiente de estudio adecuado, un lugar tranquilo y con las

condiciones necesarias que permitan la concentracin, proveyndote de todos los
materiales necesarios, de tal manera que no necesites levantarte constantemente, ya que
eso no contribuye a la concentracin , adems al momento de estudiar es recomendable
subrayar las ideas principales, realizar cuadros resmenes, cuadros sinpticos y
comparativos .
Finalmente para desearte los mayores logros en la meta de convertirte en un profesional y

recuerda que el xito de tus acciones depende de ti mismo.
8
I UNIDAD
DHTML
__. -~Jo)~ ;--'\ o __
. , ~
,-:=;:-J}::.::::--; ;/
/7::'-
0-. -
t....:.::::.:::::~-t:l.r::J::;
- -. - - --~.;-,
.,v "--.. ,
'? '~
"Una persona usualmente se convierte en aquello que l cree que es. Si yo sigo
dicindome a m mismo que no puedo hacer algo, es posible que yo termine
siendo incapaz de hacerlo. Por el contrario si yo tengo la creencia que s puedo
hacerlo, con seguridad yo adquirir la capacidad de realizarlo aunque no la
haya tenido al principio. "
Gandhi. Mahatma
@!I[J[jffiill[J@@IJIJIJffiill@@@@f
CAPACIDAD
! Comprende, analiza y define y conoce las herramientas utilizadas
en la Ingeniera Web.
! Conoce las etiquetas HTML para el diseo de pginas web.
! Explica el funcionamiento de las diferentes etiquetas y propiedades
HTML.
: Valida su diseo con la pgina del consorcio W3C
: Conoce y programa en java Script
! Utiliza libreras de funciones pre-construidas en Java Script para
sus aplicaciones
: Propone nuevos estilos e interfaces web.
: Experimenta con nuevas herramientas para la construccin de
estilos web
! Conocer las formas de validacin de CSS y cmo superar los
errores encontrados.
! Comprende, conoce y utiliza las funciones bsicas y el paradigma
Orientado a Objetos de PHP y la conexin a base de datos_
9
Ingeniera Web Gua didctica iiU
Tema 01 World Wide Web

Los errores causados por los datos inadecuados son
mucho menores que los que se deben a la total
ausencia de datos.
Charles Babbage
Qu crees que estudiaremos en esta
asignatura?
.............. . ..... . ... .......... ;. ...... .
E a de Ingeniera Web con la introduccin de

conceptos relacionados con la World Wide Web , que servirn de base para nuestro
estudio posterior. Este primer tema nos permitir conocer los principales componentes,
protocolos, lenguajes y tecnologas del servicio de Internet ms utilizado en la
actualidad : la World Wide Web o simplemente Web .
lO
Ingeniera Web Guia didctica m!lm
1.1 Definicin de World Wide Web
La World Wide Web, es un sistema cliente servidor basado en hipertexto, sus

contenidos se caracterizan principalmente por tener hipervnculos que enlazan
diferentes pginas, las cuales son accesibles a travs de Internet. Con un cliente web o
navegador, un usuario visita sitios web compuestos de pginas web que contienen
elementos en diferentes formatos como: texto, imgenes, videos, animaciones u otros
elementos multimedia, y navega a travs de ellas usando enlaces o hipervnculos.
La Web fue creada por Tim Berners-Lee y Robert Cailliau en 1989 mientras trabajaban
en el CERN en Ginebra, Suiza, aos despus, en 1992 publicaron su trabajo, y desde
entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estndares
Web, y ltimamente ha abogado por su visin de una Web Semntica.
1.2 Historia de la Web

La idea de la Web se remonta a los aos 40 cuando Vannevar Bush propone un sistema
similar. El proyecto mencionado nunca fue materializado, quedando relegado al plano
terico bajo el nombre de Memex. En los aos 50, Ted Nelson realiza la primera
referencia a un sistema de hipertexto. Pero no es hasta 1989, con un soporte basado en
redes informticas, cuando Tim Berners-Lee referencia a ENQUIRE al CERN
(refirindose a Enquire Within Upon Everything, en castellano Preguntando de Todo
Sobre Todo), en donde describa un sistema de gestin de informacin ms formal y
elaborado.
Berners-Lee us un NeXTcube como el primer servidor web del mundo y tambin

escribi el primer navegador web, WorldWideWeb en 1990.
En el ao de 1991, Berners-Lee envi un pequeo resumen del proyecto World Wide

Web al newsgroup alt.hypertext, por lo que el 6 de agosto de 1991 se seala como el
debut de la web como un servicio disponible pblicamente en Internet.
World Wide Web tena algunas diferencias de los otros sistemas de hipertexto que
estaban disponibles en aquel momento:
* WWW slo requera enlaces unidireccionales en vez de los bidireccionales. Esto

haca posible que una persona enlazara a otro recurso sin necesidad de ninguna accin
del propietario de ese recurso. Con ello se reduca significativamente la dificultad de
implementar servidores web y navegadores (en comparacin con los sistemas
anteriores), pero en cambio presentaba el problema crnico de los enlaces rotos.
* A diferencia de sus predecesores, como HyperCard, World wide Web era no-
propietario, haciendo posible desarrollar servidores y clientes independientemente y
aadir extensiones sin restricciones de licencia.
El 30 de abril de 1993, el CERN anunci que la web sera gratuita para todos.
1.3 Funcionamiento de la Web
El proceso de navegacin de un usuario en la web se realiza de la siguiente manera:
El primer paso consiste en el establecimiento de una conexin del usuario a Internet.

Luego el usuario utilizar un cliente web o navegador (trmino utilizado en ingls:
browser) con el cual solicitar una pgina a un servidor web.
11
Ingeniera Web Gua didctica [Mi\.)
La pgina web se solicita al servidor, escribiendo una direccin URL (sigla en ingls de
Uniform Resource Locator o Localizador Uniforme de Recursos), luego, la solicitud es
recibida por el servidor indicado y ste ubicar en el sitio web la pgina solicitada,
aunque ahora la mayora de navegadores son capaces de abrir documentos como
videos, sonido, hojas de clculo, etc.
En cada documento al que se accede, se puede utilizar hipervnculos para navegar de
una pgina a otra sin conocer la URL o direccin de la pgina destino.
-- - - --
- PAGINA DE RESPUESTA
1
SERVIDOR WEB
12
Ingeniera Web Gua didctica tJ!I
1~ Actividad N 01 1
! Elabora
Una monografa que describa los estndares web establecidos por la W3C .
! Compara
En el siguiente cuadro establece las comparaciones entre los diferentes servidores web
ms utilizados en Internet.
! Grafica
La cantidad de servidores web, para determinar cul de ellos ha sido el ms utilizado en
el perodo 2001 - 201 O.
13
Ingeniera Web Gua didctica -
~ -~utoevaluacin 01 111
1.- Preguntas de opcin mltiple: 8. ( ) Internet lnformation Server es
Marca con un aspa la respuesta el servidor web fabricado por
correcta: Microsoft.
9. ( ) La World Wide Web trabaja
1. Es el consorcio que rige el destino sobre una arquitectura Cliente
de la Web .: Servidor.
a)WWW 111.- Preguntas de ensayo

b)W3C 1O. Realiza un anlisis con respecto a
e) Triple WC las labores que realiza la W3C.
d)WWW3C
e) Ninguna Anterior
2. Marque el nombre que no le

corresponde a un cliente web:
a) Navegador
b) Browser
e) Webmail
d) Ninguna Anterior
3. No es un servidor web :
a) Apache
b) Internet lnformation Server
e) Cherokee
d) Android
e) Todas
4. Se anuncia que la Web ser

gratuita para todos, en el ao:
a) 1983
b) 1989
e) 1990
d) 1993
e)2009
11.- Determina las proposiciones

verdaderas y falsas, anotando "V" o
"F":
5. ( ) Mozilla Firefox es un servidor
web.
6. ( ) HTTP es el protocolo utilizado
en la World Wide Web .
7. ( ) El servidor Web ms utilizado
en Internet en la dcada del 2001 al
201 O fue Apache.
14
Tema 02: HTML- HyperText Markup

Language
La p gina WEB es el sop orte interactivo ideal p ara ofrecer un servicio,

facilitar informacin, hacer negocio, etc. de un modo ms completo y
directo que cualquier otro.
Vinton Cerf
( 1934) Padre de Internet. (Fundador de ln ternet Society).
\~ IU' :~tTJk 1
Crees que es necesario establecer estndares para que todas las : 1';) ..,~, () ~
pginas se vean ig uales en todos los navegadores?

i\h/3 r KHTMl-;L
. _. , p>-~
In
H- na pgina Web.
Lc HTML de modo
que los navegadores que utilizamos los usuarios muestran las pginas Web despus de
interpretar su contenido HTML.
la
>
dir~cdn te
' _,;_.,
15
Ingeniera Web Gua didctica JTIJ:)
2.1 HTML
El W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que
permite publicar informacin de forma global". Desde su primera definicin, el lenguaje
HTML ha sido un lenguaje utilizado exclusivamente para crear documentos electrnicos
pero es un lenguaje que se utiliza en la mayora de aplicaciones electrnicas
(aplicaciones web comerciales, educativas, financieras y tambin muy utilizada en
buscadores, etc.).
El lenguaje HTML, cuenta con un conjunto de etiquetas o tambin llamadas "Tags", las
cuales funcionan de la siguiente manera:
<tag> Modelo de Inicio de una etiqueta .

</tag> modelo de Cierre de una etiqueta.
El texto o cualquier elemento de la pgina web, que est entre ambas etiquetas (de
inicio y cierre), estar influenciado por la accin que stas realicen. Por ejemplo, todo el
documento HTML debe estar entre las etiquetas <HTML> y </HTML>.
<HTML>
[Documento Web]
</HTML>
Hay que considerar que no todos los tags tienen etiqueta de cierre. Aunque se
recomienda que las etiquetas o tags que no tienen incluyan un "/" antes del cierre. Por
ejemplo la etiqueta BR se recomienda escribirla as: <br /> .
La cabecera se define con la etiqueta <HEAD> y su finalizacin es con </HEAD> . En la

cabecera se coloca la informacin sobre la pgina web, pero hay que tener en cuenta
que esta informacin no se muestra en el navegador, excepto el ttulo de la pgina que
se muestra en la barra de ttulo de la ventana del navegador, el cual se encuentra entre
las etiquetas <TITLE> y </TITLE>.
El cuerpo, est comprendido entre las etiquetas <BODY> y </BODY>. Dentro de ste
est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.)
Por lo mencionado anteriormente, podemos conclui r que la estructura de un documento

web (pgina web) tiene dos partes: el encabezado y el cuerpo, y que de acuerdo a las
etiquetas utilizadas para delimitar estas partes, las etiquetas HTML para construir una
pgina web deben estar en el siguiente orden:
<HTML>
<HEAD>
<TITLE> Mi primer ejemplo </TITLE>
</HEAD>
<BODY>
[Aqu se escribe el contenido de la pgina]
</BODY>
</HTML>
Antes de crear nuestra primera pgina Web , debemos tener ciertas consideraciones
sobre el texto que vamos a incluir en el documento: No hay necesidad de tratar de
justificar el texto al ancho del navegador, pues el texto de una pgina Web se
caracteriza por justificarse de acuerdo al ancho que tome la ventana, adems cuando
queramos pasar a un nuevo prrafo, es necesario utilizar la etiqueta <P>.
16
Ingeniera Web Guia didctica tJI
El contenido de la pgina puede tener varios ttulos, los cuales escribiremos entre las
etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta H6), el nmero en la etiqueta de
ttulo indica el tamao de los caracteres de la frase o palabra. El tamao mayor es el
correspondiente al nmero 1.
Una etiquE;!ta muy interesante es la de centrado <CENTER> y </CENTER> (debemos
tomar en cuenta que a esta etiqueta no la soportan todos los navegadores, aunque s la
mayora de ellos) . Esta etiqueta centra todo lo que est dentro de ella, ya sea texto,
imgenes, etc.
Existen otros tags como por ejemplo, los separadores horizontales (horizontal rules) ,
que se insertan con la etiqueta <HR> (este tag no tiene la correspondiente etiqueta de
cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la
apariencia de estar embutida sobre el fondo, o podemos tambin especificar su ancho
en pxeles o en porcentaje respecto al ancho de la ventana.
3.1 Formato de Texto con HTML

En ejemplo anterior, podemos notar que cuando colocamos texto, este aparece sin
ningn formato en especial. Slo, cuando quisimos crear un nuevo prrafo , utilizamos la
etiqueta <P>, esta etiqueta inserta una lnea en blanco despus de la ltima del prrafo
anterior. Pero si deseamos realizar un salto de lnea, es decir pasar a la siguiente lnea
sin incluir una en blanco, utilizaremos el tag <BR> (BReak) que en ingls significa
quebrar o romper. Esta etiqueta por su naturaleza o funcionamiento no tiene una
etiqueta de cierre .
Negrita y Cursiva
Cuando trabajamos con texto formateado, las caractersticas ms utilizadas son: negrita
y cursiva . Pues en HTML, podemos darle esas caractersticas al texto utilizando las
etiquetas: <B> para poner el texto en negrita, y <1> para formato cursiva . Cada una de
ellas si cuenta con su respectiva etiqueta de cierre (</B> y </1 >).
Espacios en blanco
Al escribir el texto, si ponemos ms de un espacio en blanco entre dos palabras
observamos que el navegador slo reconoce uno de ellos. Si queremos forzarle a que lo
haga, debemos poner el cdigo " " (non-breaking space) .
Superndices y Subndices
En las frmulas matemticas puede interesar poder escribir ndices y subndices, que se
consiguen con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente. Por
ejemplo: m2 se obtiene con: m<SUP>2</SUP> y vx con: v<SUB>x</SUB>.
3.2 Listas
Cuando tenemos un conjunto de elementos es necesario mostrarlos en forma de listas,
las cuales pueden ser de diferentes tipos :
1.Listas desordenadas (sin numerar)

2.Listas ordenadas (numeradas)
3.Listas de definicin.
Las listas desordenadas (Unordered Lists) sirven para presentar cosas que, por no tener
un orden determinado, no necesitan ir precedidas por un nmero. Su estructura es la
siguiente:
17
Ingeniera Web Gua didctica as.\
<UL>
<LI> Naranja
<LI> Manzana
<LI> Fresa
<LI> Etc.
</UL>
Como se puede apreciar, para crear una lista de este tipo se utiliza la etiqueta <UL>, y
luego para cada elemento la etiqueta <LI> (List ltem). Adems podemos anidar una lista
dentro de otra . Por ejemplo:
<UL>
<LI> Mamferos
<LI> Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI> Aves
</UL>
Las Listas Ordenadas (Ordered Lists) sirven para presentar tems en un orden
determinado. Su estructura es muy similar a la anterior. La diferencia est en que en el
resultado aparecer automticamente un nmero correlativo para cada cosa.
<OL>
<LI> lntroduccion
<LI> Conceptos
<LI> Aplicaciones
<LI> Enlaces web
</OL>
El texto aparecer como sigue:
1.1ntroduccion
2.Conceptos
3.Aplicaciones
4.Enlaces web
Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas.
El tercer tipo lo forman las listas de definicin . Como su nombre indica, son apropiadas
para glosarios (o definiciones de trminos) . Toda la lista debe ir englobada entre las
etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada rengln de la
lista tiene dos partes: 1) el nombre de la cosa a definir, que se consigue con la etiqueta
<DT> (definition term) y 2) la definicin de dicha cosa, que se consigue con la etiqueta
<DO> (definition definition) .
<DL>
<DT> HTML
<DO> Son las iniciales de HyperText Markup Language
<DT>WWW
<DO> Son las iniciales de World Wide Web
</DL>
18
Su resultado es:
HTML
Son las iniciales de HyperText Markup Language
www
Son las iniciales de World Wide Web
3.3 Comentarios no visibles en la pantalla

A veces es muy til escribir comentarios en el documento HTML sobre todo cuando
creamos pginas dinmicas, el cdigo que escribimos, nos pueden servir para recordar
posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos smbolos:  .
Ejemplo: 
En el editor escribe:
<HTML>
<HEAD>
<TITLE> Ejercicio 2 <ITITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Mis Cursos </H1>
</CENTER>
<HR>
Sin un orden particular, mis <B> cursos </B> son los siguientes:
<UL>
<LI> Redes de computadoras
<LI> Ingeniera de Software
<UL>
<LI> Herramientas Case
<LI> Software de Aplicacin 1
<LI> Software de Aplicacin 11
</UL>
<LI> Sistemas de Informacin Gerencial
</UL>
Los cursos que mas me gustan son <1> (en orden de preferencia): </1>
<OL>
<LI> Ingeniera de Software
<LI> Sistemas de Informacin Gerencial
<LI> Redes de Computadoras
</OL>
</BODY>
</HTML>
19
Ingeniera Web Gua didctica JJ,)
ll~l -~--
: Compara
Actividad N" 021
Las dos ltimas versiones de HTML publicadas por la W3C.
! Elabora
Una monografa que establezca las diferencias entre DHTML y XHTML.
! Investiga
Cmo se utiliza y cul es la importancia del servicio de validacin (HTML y XHTML) que
tiene la W3C.
! Elabora
Una pgina web que contenga etiquetas para la ceracin de tablas, formularios y
elementos de entrada de datos como: cajas de texto, listas desplegables, radio botones,
etc.
! Valida
Valida la pgina web creada en el tem anterior utilizando el servicio de validacin de la
W3C.
20
Ingeniera Web Guia didctica m!~
~~Autoevaluacin 02
A. Preguntas de opcin mltiple c.- O
111
d.- NULL
1. Etiqueta que se utiliza para insertar e.- CENTER
un salto de lnea en una pgina web:
a.- BR 6. Nombre de la etiqueta que se utiliza
b.- LR para insertar CHECKBOX en un
c.- LN formulario HTML:
d.- NL a.- CHECK
e.- HR b.- CHECKBOX
c.- INPUTCHECK
2. Etiqueta que se utiliza para insertar d.- INPUT
una imagen en una pgina web. e.- Ninguna Anterior
a.-IMAGE
b.-IMGSRC 7. Palabra clave que se utiliza para
c.-IMG seleccionar un elemento de una lista
d.- LINK desplegable:
e.- IMAGEN a.- CHECKED
b.- SELECTED
3. Propiedad de la etiqueta TD que se c.- MARKUP
utiliza para combinar las celdas de d. - SELECTION
una tabla. e. - Ninguna Anterior
a.- COLSCELL
b.- COMBCELL B. Determina las proposiciones
c.- COLSPAN verdaderas y falsas, anotando "V"
d.- SPANCELL o "F":
e.- ROWCOLUMN
8. ( ) La propiedad method de un
4. Etiqueta que se utiliza para insertar formulario determina la forma de
un hipervnculo en una pgina web . envo de datos .
a.- LINK
b.- VINK 9. ( ) La etiqueta OL sirve para crear
c.- HREF una lista ordenada HTML.
d.- A
e. - Ninguna anterior 10. ( ) La propiedad BORDER de la
etiqueta IMG tiene valor por defecto
5. Valor por defecto de la propiedad 1.
BORDER de la etiqueta TABLE.
a.- LEFT
b.- 1
21
Ingeniera Web Gua didctica ~JJq
Tema 03: Java Script
No pensbamos en el negocio, sino en Internet

como unaforma de comunicacin global.
Jerry Yang
Uno de los creadores de Yahoo!
Existe alguna relacin entre Java y

Java Script?
Introduccin al tema
Java Script, al igual que Java o VRML, es una de las mltiples maneras que han surgido
para extender las capacidades del lenguaje HTML. Al ser la ms sencilla, es por el
momento la ms extendida. Es importante saber que: Java Script no es un lenguaje de
programacin propiamente dicho. Es un lenguaje script u orientado a documento, como
pueden ser los lenguajes de macros que tienen muchos procesadores de texto.
22
Ingeniera Web Gua didctica i-~i
3.1 Java Script

Nunca se podr hacer un programa con JavaScript, tan slo se podr mejorar una
pgina Web con algunas cosas sencillas. JavaScript y Java son dos cosas distintas,
principalmente porque Java s que es un lenguaje de programacin completo. Lo nico
que comparten es la misma sintaxis. Existen tres versiones de JavaScript. Casi todo lo
que se ha escrito en este documento funciona con la versin 1.0, que naci con el
Netscape Navigator 2.0. Tambin existe una versin 1.3, introducida en la versin 4.06.
Esta versin es una pequea revisin de la 1.2 creada para ajustarse al estndar
internacional ECMA que regula el lenguaje JavaScript.
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana
que nos muestre el mensaje "Hola, Bienvenido al PEaD de la USS!". As podremos ver
los elementos principales del lenguaje. El siguiente cdigo es una pgina Web completa
con un botn que, al pulsarlo, muestra el mensaje.
Ejemplo:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function HolaPEaD() {
alert("iHola, Bienvenido al PEaD de la USS!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onCiick="HolaPEaD()">
</FORM>
</BODY>
</HTML>
Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos
que tiene la pgina anterior:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Dentro de estos elementos ser donde se puedan poner funciones en JavaScript.
Por otra parte el cdigo de JavaScript puede ser incluido en la pgina web de la
siguiente manera:
<script language="JavaScript" src ="archivo.js"> </script>
El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript,
y cuyo nombre acaba con la extensin js.
El cdigo de Java Script puede ser escrito en cualquier lugar de la pgina web, en este
ejemplo, se ha escrito en la cabecera con la finalidad de hacer el cdigo ms legible. Si
un navegador no acepta JavaScript no leer lo que hay entre estos elementos.
function HolaPEaD() {
23
Ingeniera Web Gua didctica ~~~~
alert("Hola, Bienvenido al PEaD de la USS!");

}
Aunque JavaScript est orientado a objetos no es de ningn modo tan estricto como
Java , donde nada est fuera de un objeto. En el cdigo de la funcin vemos una
llamada al mtodo alert (que pertenece al objeto window) que es la que se encarga de
mostrar el mensaje en pantalla .
<FORM>
onCiick="HolaPEaD()">
</FORM>
Dentro del elemento que usamos para mostrar un botn vemos una cosa nueva:
onCiick. Es un controlador de evento. Cuando el usuario pulsa el botn, el evento click
se dispara y ejecuta el cdigo que tenga entre comillas el controlador de evento onCiick,
en este caso la llamada a la funcin HolaPEaD(), que tendremos que haber definido con
anterioridad . Existen muchos ms eventos que iremos descubriendo segn avancemos.
En realidad , podramos haber escrito lo siguiente:
<FORM>
onCiick="alert('i Hola, Bienvenido al PEaD de la USS!')">
</FORM>
3.2 Elementos bsicos

3.2.1 Comentarios
Un comentario es una parte de nuestro programa que el ordenador ignora y que, por
tanto, no realiza ninguna tarea. Se utilizan generalmente para poner en lenguaje
humano lo que estamos haciendo en el lenguaje de programacin y as hacer que el
cdigo sea ms comprensible.
En JavaScript existen dos tipos de comentarios . El primero nos permite que el resto de
la lnea sea un comentario. Para ello se utilizan dos barras inclinadas:
var i = 1; 11 Aqui esta el comentario
Sin embargo, tambin permite un tipo de comentario que puede tener las lneas que
queramos. Estos comentario comienzan con : /* y terminan por */.
Literales
Se llama as a los valores que puede tomar una variable o una constante . Aparte de los
distintos tipos de nmeros y valores booleanos:
"Soy una cadena"

3434
3.43
true, false
Tambin podemos especificar arrayso vectores :
vacaciones = ["Navidad" ' "Semana Santa" ' "Verano"] '

alert(vacaciones[O]);
Dentro de las cadenas podemos indicar varios caracteres especiales, con significados
especiales. Estos son los ms usados:
24
Carcter
Significado
\n Nueva lnea
\t Tabulador
\' Comilla simple
\" Comilla doble
\\ Barra invertida
\999 El nmero ASCII (segn la codificacin Latin-1) del carcter en hexadecimal
De este modo, el siguiente literal:
"Javascript (\xA9 2002)"
se corresponde con la cadena:
Javascript ( 2002)
Por ltimo, tambin se pueden especificar objetos como literales, aunque no funcione en
ms que en Netscape 4 y superiores:
miNavegador ={nombre: "Netscape", version: 4.5, idioma: "Espaol", plataforma: "PC"};

alert(m iNavegador. plataforma);
Sentencias y bloques
En Javascript las sentencias se separan con un punto y coma, y se agrupan mediante
llaves ({y}).
3.2.2 Tipos de datos

En Javascript los tipos de datos se asignan dinmicamente segn asignamos valores a
las distintas variables y son los clsicos: cadenas de texto, varios tipos de enteros y
reales, valores booleanos, vectores, matrices, referencias y objetos.
3.2.3 Variables
Las variables son nombres que ponemos a los lugares donde almacenamos la
informacin. En Javascript, deben comenzar por una letra o un subrayado (_), pudiendo
haber adems dgitos entre los dems caracteres.
No es necesario declarar una variable, pero cuando se hace es por medio de la palabra
reservada var. Una variable, cuando no es declarada, tiene siempre mbito global,
mientras que en caso contrario ser de mbito global si est. definida fuera de una
funcin, y local si est definida dentro:
var x; 11 Accesible fuera y dentro de pruebas

y = 2; 11 Accesible fuera y dentro de pruebas
function pruebas() {
var z; 11 Accesible slo dentro de pruebas
w = 1; 11 Accesible fuera y dentro de pruebas
}
Se pueden declarar varias variables en una misma sentencia separndolos por comas:
var x, y, z;
25
Ingeniera Web Gua didctica ijS@,L
El tipo de datos de la variable ser aquel que tenga el valor que asignemos a la misma,
a no ser que le asignemos un objeto por medio del operador new.
3.2.4 Vectores y matrices

Estos tipos de datos complejos son un conjunto ordenado de elementos, cada uno de
los cuales es en s mismo una variable distinta. En Javascript, los vectores y las
matrices son objetos. Como veremos que hacen todos los objetos, se declaran
utilizando el operador new:
miVector =new Array(20)

El vector tendr inicialmente 20 elementos (desde el O hasta el 19). Si queremos
ampliarlo no tenemos ms que asignar un valor a un elemento que est fuera de los
lmites del vector:
miEstupendoVector[25] = "Algn valor"

De hecho, podemos utilizar de ndices cualquier expresin que deseemos utilizar. Ni
siquiera necesitamos especificar la longitud inicial del vector si no queremos:
vectorRaro = new Array() ;

vectorRaro["insertar en los favoritos"] = "Esto es Javascript";
Hacer una matriz bidimensional es ms complicado , ya que tenemos que hacer un bucle
que cree un vector nuevo en cada elemento del vector original.
Nota importante: JavaScript es sensible a maysculas y minsculas, todos los

elementos de JavaScript deben referenciarse cmo se definieron, no es lo mismo
"Salto" que "salto".
3.2.5 Operadores
Los operadores nos permiten unir identificadores y literales para formar expresiones.
Las expresiones son el resultado de operaciones matemticas o lgicas. Un literal o una
variable son expresiones, pero tambin lo son esos mismos literales y variables unidos
entre s mediante operadores.
Java Script dispone de muchos ms operadores que la mayora de los lenguajes, si
exceptuamos a sus padres C, C++ y Java. Algunos de ellos no los estudiaremos debido
a su escasa utilidad y con algunos otros (especialmente el condicional) deberemos
andamos con cuidado , ya que puede lograr que nuestro cdigo no lo entendamos ni
nosotros.
26
lngenieria Web Guia didctica B
Activ~dad N 03 1
! Compara
Las dos ltimas versiones de Java Script publicadas por la W3C.
! Elabora
Una monografa que establezca las diferencias entre Java Script y JScript.
! Elabora
Una pgina web que contenga etiquetas un formulario validado con JavaScript.
27
Ingeniera Web Gua didctica I!M
Autoevaluacin 03
A. Preguntas de opcin mltiple b.- confirm

c.- message
1. No es un mtodo del objeto window: d.- alert
a.- alert e.- Ninguna anterior
b.- open
c.- write 5. Contiene la fecha y hora en que se
d.- confirm modific el documento por ltima vez
e.- Ninguna anterior y se suele usar en conjuncin con
write para aadir al final del
2. Atributo del objeto window que define documento estas caractersticas.
la cadena de caracteres que saldr a.- dateModified
e la barra de estado en un momento b.- lastModified
dado. c.- datelast
a.- alert d.- modifiedlast
b.- setTimeOut e.- Ninguna anterior
c.- status
d.- confirm B. Escribe el cdigo de Java Script
e.- Ninguna anterior necesario para:
3. Muestra una ventana de dilogo con 6. Validar slo nmeros en una caja
el mensaje especificado y dos de texto .
botones. Si el usuario pulsa OK, el
mtodo devuelve true . Si, en cambio, 7. Validar slo letras en una caja de
pulsa Cancelar, devolver false .
texto .
a.- alert
b.- prompt
8. Validar una direccin de correo
c.- open
d. - confirm electrnico escrita en una caja de
e. - Ninguna anterior texto.
4. Muestra una ventana de dilogo con 9. Mostrar un mensaje en la barra de

el mensaje especificado y un campo estado del navegador.
de texto en el que el usuario pueda
teclear, cuyo valor inicial ser igual a 1O. Obligar al usuario a escribir algo en
sugerencia. Si el usuario pulsa OK, el una caja de texto (dato obligatorio)
mtodo devuelve la cadena
introducida en el campo de texto.
a.- prompt
28
Ingeniera Web Guia didctica B
Tema 04: CSS - Cascade Style Sheets
Nunca consideres el estudio como una obligacin, sino como una

oportunidad para penetrar en el bello y maravilloso mundo del saber.
Albert Einstein
Cascada en el diseo Web?
) ' .
.. . !.
a
esta como la vanguardia en cuanto a definicin de estilos dentro de las plantillas de
diseo. A travs de instrucciones en cdigo HTML se definen los estndares del
conjunto de pginas que conforman el proyecto.
29
Ingeniera Web Gua didctica IJJ.,
4.1 css
CSS2, se basa en una serie de reglas de diseo:
Compatibilidad hacia atrs y hacia adelante. Las aplicaciones del usuario CSS2
sern capaces de entender las hojas de estilo CSS1. Las aplicaciones del
usuario CSS1 podrn leer las hojas de estilo CSS2 y descartar las partes que no
entienden . Adems, las aplicaciones del usuario que no soporten CSS sern
capaces de mostrar los documentos estilsticamente mejorados. Por supuesto, el
efecto estilstico hecho posible por CSS no ser procesado, pero todo el
contenido ser presentado.
Complementariedad con documentos estructurados. Las hojas de estilo
complementan los documentos estructurados (ej., HTML y aplicaciones XML)
proveyendo informacin estilstica del texto marcado. Debe ser fcil cambiar la
hoja de estilo con poco o ningn impacto en el sistema de marcas.
Independencia del vendedor, la plataforma y el dispositivo. Las hojas de estilo
permiten a los documentos permanecer independientes del vendedor, la
plataforma y el dispositivo. Las mismas hojas de estilo son tambin
independientes del vendedor y la plataforma, pero CSS2 permite dirigir una hoja
de estilo a un grupo de dispositivos (ej., impresoras) .
Mantenibilidad. Apuntando a una hoja de estilo desde los documentos, los
responsables de los sitios en la Web pueden simplificar el mantenimiento y
conservar un estilo y un efecto consistente a todo lo largo del sitio. Por ejemplo,
si el color del fondo de las pginas de una organizacin cambia, slo un archivo
necesita ser cambiado .
Simplicidad. CSS2 es ms compleja que CSS1, pero sigue siendo un lenguaje
de estilo simple que es humanamente legible y posible de escribir. Las
propiedades CSS se mantienen independientes unas de otras en la medida de lo
posible y generalmente slo hay un modo de conseguir un efecto determinado.
Rendimiento de la red. CSS proporciona una compacta codificacin para
presentar los contenidos . Comparado con los archivos de imgenes o de audio
que son usados frecuentemente por los autores para conseguir ciertos efectos
en el procesamiento, las hojas de estilo, la mayora de las veces, disminuyen el
tamao del contenido. Adems, menos conexiones de la red tienen que ser
abiertas, lo cual ayuda a incrementar el rendimiento de la red.
Flexibilidad. Las CSS pueden ser aplicadas al contenido de varias maneras. La
caracterstica clave es la capacidad de formar una cascada de estilos con la
informacin especificada en la hoja de estilo predeterminada (aplicacin del
usuario) , las hojas de estilo del usuario, las hojas de estilo vinculadas , el
encabezamiento del documento y en los atributos de los elementos que forman
el cuerpo del documento.
Riqueza. Proporcionando a los autores un abundante juego de efectos de
procesamiento, aumenta la riqueza de la Web como medio de expresin. Los
diseadores han estado ambicionando la funcionalidad comnmente encontrada
en los programas de edicin y de presentaciones grficas. Algunos de los
efectos requeridos entran en conflicto con la independencia del dispositivo, pero
CSS2 llega muy lejos satisfaciendo las demandas de los diseadores.
Combinacin con lenguajes alternativos. El juego de propiedades de CSS
descriptas en esta especificacin conforman un slido modelo de aplicacin de
formatos para presentaciones visuales y auditivas. Este modelo puede ser
accedido mediante el lenguaje CSS, pero la combinacin con otros lenguajes
tambin es posible. Por ejemplo, un programa en JavaScript puede cambiar
dinmicamente el valor de la propiedad 'color' de un determinado elemento.
Accesibilidad. Varias caractersticas de CSS harn a la Web ms accesible para
los usuarios con discapacidades:
30
o Las propiedades para controlar la apariencia de las fuentes permiten a los

autores eliminar las inaccesibles imgenes de texto renderizado.
o Las propiedades de posicionamiento permite a los autores eliminar los
artilugios con el sistema de marcas (ej., imgenes invisibles) para forzar la
composicin.
o La semntica de las reglas !important indica que los usuarios con
particulares requerimientos de presentacin pueden suplantar las hojas de
estilo del autor.
o El nuevo valor 'inherit' (heredado) para todas las propiedades mejora la
generalidad del funcionamiento en cascada y permite una ms fcil y
consistente sintona en el estilo.
o El avanzado soporte de medios, incluyendo grupos de medios y los tipos de
medios braille, de relieve y tty permitirn a los usuarios y autores
confeccionar pginas para esos dispositivos.
o Las propiedades auditivas ofrecen control sobre la salida de voz y audio.
o Los selectores de atributos, la funcin 'attr()' y la propiedad 'content' brindan
acceso al contenido alterno.
o Los contadores y la numeracin de secciones y prrafos pueden mejorar la
navegabilidad del documento y economizar espacio de sangrado (importante
en los dispositivos braille).
o Las propiedades 'word-spacing' y 'text-indent' tambin eliminan la necesidad
de usar espacios en blanco extras en el documento.
Aqu Mostraremos cun fcil puede ser disear unas simples hojas de estilo. Para esta
gua, necesitar saber un poco del cdigo HTML y alguna terminologa bsica de
composicin grfica. Comenzamos con un pequeo documento HTML:
Ejemplo:
<HTML>
<HEAD>
<TITLE>La Web con estilos</TITLE>
</HEAD>
<BODY>
<H1>La Web con estilos</H1>
<P>Esta página le ayudará a diseñar páginas web.
</BODY>
</HTML>
Para establecer el color azul para el texto de los elementos H 1, puede escribir la
siguiente regla CSS:
H1 {color: green}
Una regla CSS consta de dos partes principales: un selector ('H1.') y una declaracin
('color: green'). La declaracin tiene dos partes: una propiedad ('color') y un valor
('green').
La especificacin HTML 4.0 define de qu manera las reglas de las hojas de estilo
pueden especificarse para los documentos HTML: ya sea dentro del documento HTML o
a travs de una hoja de estilo externa. Para poner la hoja de estilo dentro del
documento~ use el elemento STYLE:
Ejemplo:
<!DOCTYPE HTML PUBLIC "-/IW3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> ---- La Web con estilos ---- </TITLE>
<STYLE type="text/css">
H1 {color: green}
31
Ingeniera Web Gua didctica ~~~
</STYLE>
</HEAD>
<BODY>
<H 1>La Web con estilos</H 1>
<P>Esta página web te enseñará mucho.
</BODY>
</HTML>
Para una mayor flexibilidad, recomiendo que los diseadores especifiquen hojas de
estilo externas; ellas pueden cambiarse sin modificar el documento fuente HTML y
pueden compartirse entre varios documentos. Para vincular una hoja de estilo externa
puede usar el elemento LINK:
Ejemplo:
<! DOCTYPE HTML PUBLIC "-/IW3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>La Web con estilos</TITLE>
<LINK rel="stylesheet" href="pead_estilo.css" type="textlcss">
</HEAD>
<BODY>
<H1>La Web con estilos</H1>
<P> Esta página web te enseñará mucho .
</BODY>
</HTML>
32
Ingeniera Web Gua didctica !1m
11~ Actividad N 04 ~1
! Compara
Las dos ltimas versiones de CSS publicadas por la W3C.
! Elabora
Una monografa que describa los principales comandos o elementos CSS.
! Investiga
Cmo se utiliza y cul es la importancia del servicio de validacin de Hojas de Estilo
(CSS) que tiene la W3C.
! Elabora
Una pgina web que contenga diferentes estilos utilizando clases personalizadas.
! Valida
Valida la pgina web creada en el tem anterior utilizando el servicio de validacin de la
W3C.
33
Ingeniera Web Gua didctica u;:~
A.
Autoevaluacin 04
Preguntas de opcin mltiple d.- Rendimiento de la red

111
e.- Ninguna anterior
1. Selecciona la orden que colorea de
rojo los elementos H1 : 5. CSS2 es ms compleja que CSS1 ,
a.- H1 {color: red} pero sigue siendo un lenguaje de
b.- H1 { red } estilo simple que es humanamente
c.- H1 {color= red} legible y posible de escribir. Esta es
d. - H1 = red; una regla de diseo conocida con el
e.- Ninguna anterior nombre de:
a.- Flexibilidad
2. Selecciona la orden que colorea de b.-Mantenibilidad
azul los elementos OL que se c.- Simplicidad
encuentran dentro de un elemento d.- Rendimiento de la red
UL: e.- Ninguna anterior
a.- UL OL {color: blue }
b.- OL UL {color: blue} B. Determina las proposiciones
c.- UL, OL {color: blue} verdaderas y falsas, anotando "V"
d.- OLUL {color: blue, blue} o "F":
6. ) Los elementos HTML que se
3. Selecciona la orden que colorea de encuentran dentro de otro, heredan
azul los elementos OL y UL su estilo.
a.- UL OL {color: blue}
b. - OL UL {color: blue} 7. ( ) Con las hojas de estilo es posible
c.- UL, OL {color: blue } crear animaciones multimedia.
d.- OLUL { color: blue, blue}
e.- Ninguna anterior 8. ( ) Con las hojas de estilo se puede
cambiar el estilo de todo un sitio web,
4. No es una regla de diseo CSS. mod ificando el contenido de un solo
a.-Compatibilidad hacia atrs y hacia archivo.
adelante
b.- Mantenibilidad
c.- Simplicidad
34
Ingeniera Web Guia didctica B
Tema 05: Introduccin a PHP
El maestro que intenta ensear sin inspirar en

el alumno el deseo de aprender est tratando
de forjar un hierro fro .
Horace Mann
Qu se pueden hacer con PHP en

la Web?
Introduccin al tema
PHP es un lenguaje de programacin de estilo clsico. No es un lenguaje de marcas
como podra ser HTML, XML o WML. Est ms cercano a JavaScript o a C. Pero a
diferencia de JavaScript que se ejecutan en el navegador, PHP se ejecuta en el
servidor, por eso nos permite acceder a los recursos que este tenga como por ejemplo
una base de datos. El programa PHP es ejecutado en el servidor y el resultado enviado
al navegador.
35
Ingeniera Web Gua didctica ft!\$
5.1 PHP
PHP (acrnimo de "PHP: Hypertext Preprocessor") es un lenguaje de "cdigo abierto"
interpretado, de alto nivel, embebido en pginas HTML y ejecutado en el servidor.
Una respuesta corta y concisa , pero, qu significa realmente? Un ejemplo nos aclarar
las cosas:
Ejemplo : Un ejemplo introductorio
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo "Hola, &iexcl ;soy un script PHP!";
?>
</body>
</html >
Puede apreciarse que no es lo mismo que un script escrito en otro lenguaje de

programacin como Perl o C -- En vez de escribir un programa con muchos comandos
para crear una salida en HTML, escribimos el cdigo HTML con cierto cdigo PHP
embebido (incluido) en el mismo, que producir cierta salida (en nuestro ejemplo,
producir un texto) . El cdigo PHP se incluye entre etiquetas especiales de comienzo y
final que nos permitirn entrar y salir del modo PHP.
Lo que distingue a PHP de la tecnologa Javascript, la cual se ejecuta en la mquina

cliente, es que el cdigo PHP es ejecutado en el servidor. Si tuvisemos un script similar
al de nuestro ejemplo en nuestro servidor, el cliente solamente recibira el resultado de
su ejecucin en el servidor, sin ninguna posibilidad de determinar qu cdigo ha
producido el resultado recibido. El servidor web puede ser incluso configurado para que
procese todos los archivos HTML con PHP.
Lo mejor de usar PHP es que es extremadamente simple para el principiante, pero a su

vez, ofrece muchas caractersticas avanzadas para los programadores profesionales.
No sienta miedo de leer la larga lista de caractersticas de PHP, en poco tiempo podr
empezar a escribir sus primeros scripts.
5.2 Qu se puede hacer con PHP?

PHP puede hacer cualquier cosa que se pueda hacer con un script CGI , como procesar
la informacin de formularios, generar pginas con contenidos dinmicos, o enviar y
recibir cookies . Y esto no es todo , se puede hacer mucho ms.
Existen tres campos en los que se usan scripts escritos en PHP.
Scripts del lado del servidor. Este es el campo ms tradicional y el principal foco de
trabajo . Se necesitan tres cosas para que esto funcione . El intrprete PHP (CGI
mdulo) , un servidor web y un navegador. Es necesario correr el servidor web con PHP
36
Ingeniera Web Gua didctica tJm
instalado. El resultado del programa PHP se puede obtener a travs del navegador,
conectndose con el servidor web. Consultar la seccin Instrucciones de instalacin
para ms informacin.
Scripts en la lnea de comandos. Puede crear un script PHP y correrlo sin ningn
servidor web o navegador. Solamente necesita el intrprete PHP para usarlo de esta
manera. Este tipo de uso es ideal para scripts ejecutados regularmente desde cron (en
*nix o Linux) o el Planificador de tareas (en Windows). Estos scripts tambin pueden ser
usados para tareas simples de procesamiento de texto . Consultar la seccin Usos de
PHP en la lnea de comandos para ms informacin.
Escribir aplicaciones de interfaz grfica. Probablemente PHP no sea el lenguaje ms

apropiado para escribir aplicaciones grficas, pero si conoce bien PHP, y quisiera
utilizar algunas caractersticas avanzadas en programas clientes, puede utilizar PHP-
GTK para escribir dichos programas. Tambin es posible escribir aplicaciones
independientes de una plataforma. PHP-GTK es una extensin de PHP , no disponible
en la distribucin principal. Si est interesado en PHP-GTK, puedes visitar las pginas
web del proyecto.
PHP puede ser utilizado en cualquiera de los principales sistemas operativos del
mercado, incluyendo Linux, muchas variantes Unix (incluyendo HP-UX, Solaris y
OpenBSD), Microsoft Windows, Mac OS X, RISC OS y probablemente alguno ms.
PHP soporta la mayora de servidores web de hoy en da, incluyendo Apache, Microsoft
Internet lnformation Server, Personal Web Server, Netscape e iPianet, Oreilly Website
Pro server, Caudium , Xitami, OmniHTTPd y muchos otros. PHP tiene mdulos
disponibles para la mayora de los servidores, para aquellos otros que soporten el
estndar CGI, PHP puede usarse como procesador CGI.
De modo que, con PHP tiene la libertad de elegir el sistema operativo y el servidor de su
gusto. Tambin tiene la posibilidad de usar programacin procedimental o programacin
orientada a objetos. Aunque no todas las caractersticas estndar de la programacin
orientada a objetos estn implementadas en la versin actual de PHP, muchas
bibliotecas y aplicaciones grandes (incluyendo la biblioteca PEAR) estn escritas
ntegramente usando programacin orientada a objetos.
Con PHP no se encuentra limitado a resultados en HTML. Entre las habilidades de PHP
se incluyen: creacin de imgenes, archivos PDF y pelculas Flash (usando libswf y
Ming) sobre la marcha. Tambi puede presentar otros resultados , como XHTM y
archivos XML. PHP puede autogenerar stos archivos y almacenarlos en el sistema de
archivos en vez de presentarlos en la pantalla .
Quizs la caracterstica ms potente y destacable de PHP es su soporte para una gran

cantidad de bases de datos. Escribir un interfaz va web para una base de datos es una
tarea simple con PHP. Las siguientes bases de datos estn soportadas actualmente:
Adabas D, lngres, Oracle (OCI7 and OCI8), dBase, lnterBase, Ovrimos, Empress,
FrontBase, PostgreSQL, FilePro (read-only) , mSQL, Salid , Hyperwave, Direct MS-SQL,
Sybase, IBM DB2, MySQL, Velocis , lnformix, ODBC y Unix dbm.
Tambin contamos con una extensin DBX de abstraccin de base de datos que
permite usar de forma transparente cualquier base de datos soportada por la extensin.
Adicionalmente, PHP soporta ODBC (el Estndar Abierto de Conexin con Bases de
Datos), asi que puede conectarse a cualquier base de datos que soporte tal estndar.
37
Ingenier a Web Gua didctica ~~~
PHP tambin cuenta con soporte para comunicarse con otros serv1c1os usando
protocolos tales como LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (en Windows) y
muchos otros. Tambin se pueden crear sockets puros. PHP soporta WDDX para el
intercambio de datos entre lenguajes de programacin en web. Y hablando de
interconexin, PHP puede utilizar objetos Java de forma transparente como objetos
PHP Y la extensin de CORBA puede ser utilizada para acceder a objetos remotos.
PHP tiene unas caractersticas muy tiles para el procesamiento de texto , desde
expresiones regulares POSIX extendidas o tipo Perl hasta procesadores de documentos
XML. Para procesar y acceder a documentos XML, soportamos los estndares SAX y
DOM. Puede utilizar la extensin XSL T para transformar documentos XML.
Si usa PHP en el campo del comercio electrnico, encontrar muy tiles las funciones
Cybercash, CyberMUT, VeriSign Payflow Pro y CCVS para sus programas de pago.
5.3 Sintaxis bsica

Para interpretar un archivo, php smplemente interpreta el texto del archivo hasta que
encuentra uno de los carcteres especiales que delimitan el inicio de cdigo PHP. El
intrprete ejecuta entonces todo el cdigo que encuentra, hasta que encuentra una
etiqueta de fin de cdigo, que le dice al intrprete que siga ignorando el cdigo
siguiente. Este mecanismo permite embeber cdigo PHP dentro de HTML: todo lo que
est fuera de las etiquetas PHP se deja tal como est, mientras que el resto se
interpreta como cdigo .
Hay cuatro conjuntos de etiquetas que pueden ser usadas para denotar bloques de
cdigo PHP. De estas cuatro, slo 2 (<?php . . . ?> y <script language="php"> . .
.</script>) estn siempre disponibles; el resto pueden ser configuradas en el fichero de
php.ini para ser o no aceptadas por el intrprete. Mientras que el formato corto de
etiquetas (short-form tags) y el estilo ASP (ASP-style tags) pueden ser convenientes, no
son portables como la versin de formato largo de etiquetas. Adems, si se pretende
embeber cdigo PHP en XML o XHTML, ser obligatorio el uso del formato <?php ... ?>
para la compatibilidad con XML.
Las etiquetas soportadas por PHP son :
Ejemplo: Formas de escapar de HTML
1. <?php echo("si quieres servir documentos XHTML o XML, haz como aquí\n");
?>
2. <?echo ("esta es la más simple, una instrucción de procesado SGML

\n") ; ?>
<?= expression ?> Esto es una abreviatura de "<? echo expression ?>"
3. <script language="php">
echo ("muchos editores (como FrontPage) no
aceptan instrucciones de procesado") ;
</script>
4. <%echo ("Opcionalmente, puedes usar las etiquetas ASP"); %>

<%= $variable; # Esto es una abreviatura de "<% echo . . ." %>
38
Ingeniera Web Gua didctica B
El mtodo primero, <?php ... ?>, es el ms conveniente, ya que permite el uso de PHP
en cdigo XML como XHTML.
El mtodo segundo no siempre est disponible. El formato corto de etiquetas est

disponible con la funcin short_tags() (slo PHP 3), activando el parmetro del fichero
de configuracin de PHP short_open_tag, o compilando PHP con la opcin --enable-
short-tags del comando configure. Aunque est activa por defecto en php.ini-dist, se
desaconseja el uso del formato de etiquetas corto.
El mtodo cuarto slo est disponible si se han activado las etiquetas ASP en el fichero
de configuracin: asp_tags.
Nota: El soporte de etiquetas ASP se aadi en la versin 3.0.4.
Nota: No se debe usar el formato corto de etiquetas cuando se desarrollen aplicaciones

o bibliotecas con intencin de redistribuirlas, o cuando se desarrolle para servidores que
no estn bajo nuestro control, porque puede ser que el formato corto de etiquetas no
est soportado en el servidor. Para generar cdigo portable y redistribuble, asegrate
de no usar el formato corto de etiquetas.
La etiqueta de fin de bloque incluir tras ella la siguiente lnea si hay alguna presente.
Adems, la etiqueta de fin de bloque lleva implcito el punto y coma; no necesitas por lo
tanto aadir el punto y coma final de la ltima lnea del bloque PHP.
PHP permite estructurar bloques como: Ejemplo 10-2. Mtodos avanzados de escape
<?php
if ($expression) {
?>
<strong> This is true. </strong>
<?php
} else {
?>
<strong> This is false. </strong>
<?php
}
?>
Este ejemplo realiza lo esperado, ya que cuando PHP encuentra las etiquetas ?> de fin
de bloque, empieza a escribir lo que encuentra tal cual hasta que encuentra otra
etiqueta de inicio de bloque. El ejemplo anterior es , por supuesto, inventado. Para
escribir bloques grandes de texto generamente es ms eficiente separalos del cdigo
PHP que enviar todo el texto mediante las funciones echo(), print() o similares.
5.4 Expresiones
Las expresiones son la piedra angular de PHP. En PHP, casi cualquier cosa que
escribes es una expresin. La forma ms simple y ajustada de definir una expresin es
"cualquier cosa que tiene un valor".
39
lngenieria Web Gua didctica C'!lm
Las formas ms bsicas de expresiones son las constantes y las variables. Cuando
escribes "$a = 5", ests asignando '5' a $a . '5', obviamente, tiene el valor 5 , en otras
palabras '5' es una expresin con el valor 5 (en este caso, '5' es una constante entera).
Despus de esta asignacin, se espera que el valor de $a sea 5 tambin, de manera

que si escribes $b = $a, se espera tambin que se comporte igual que si escribieses $b
= 5. En otras palabras, $a es una expresin tambin con el valor 5. Si todo va bien, eso
es exactamente lo que pasar.
Las funciones son un ejemplo algo ms complejo de expresiones. Por ejemplo,

considera la siguiente funcin:
<?php
function foo () {
return 5;
}
?>
Suponiendo que ests familiarizado con el concepto de funciones (si no lo ests chale
un vistazo al captulo sobre funciones), asumirs que teclear $e = foo() es
esencialmente lo mismo que escribir $e = 5, y has acertado. Las funciones son
expresiones que valen el valor que retornan. Como foo() devuelve 5, el valor de la
expresin 'foo()' es 5. Normalmente las funciones no devuelven un valor fijo, sino que
suele ser calculado.
Desde luego, los valores en PHP no se limitan a enteros, y lo ms normal es que no lo

sean. PHP soporta tres tipos escalares: enteros, punto flotante y cadenas (los tipos
escalares son aquellos cuyos valores no pueden 'dividirse' en partes menores, no como
los arrays, por ejemplo). PHP tambin soporta dos tipos compuestos (no escalares):
arrays y objetos. Se puede asignar cada uno de estos tipos de valor a variables o bien
retomarse de funciones, sin ningn tipo de limitacin.
Hasta aqu, los usuarios de PHP/FI 2 no deberan haber notado ningn cambio. Sin
embargo, PHP lleva las expresiones mucho ms all, al igual que otros lenguajes. PHP
es un lenguaje orientado a expresiones, en el sentido de que casi todo es una
expresin. Considera el ejemplo anterior '$a = 5'. Es sencillo ver que hay dos valores
involucrados, el valor de la constante entera '5', y el valor de $a que est siendo
actualizado tambin a 5. Pero la verdad es que hay un valor adicional implicado aqu, y
es el valor de la propia asignacin . La asignacin misma se evala al valor asignado, en
este caso 5. En la prctica, quiere decir que '$a = 5', independientemente de lo que
hace, es una expresin con el valor 5. De esta manera, escribir algo como '$b =($a = 5)'
es como escribir '$a = 5; $b = 5;' (un punto y coma marca el final de una instruccin).
Como las asignaciones se evalan de derecha a izquierda, puedes escribir tambin '$b
=$a= 5'.
Otro buen ejemplo de orientacin a expresiones es el pre y post incremento y

decremento. Los usuarios de PHP/FI 2 y los de otros muchos lenguajes les sonar la
notacin variable++ y variable--. Esto son las operaciones de incremento y decremento.
En PHP/FI 2, la instruccin '$a++' no tiene valor (no es una expresin), y no puedes
asignarla o usarla de ningn otro modo. PHP mejora las caractersticas del
incremento/decremento hacindolos tambin expresiones, como en C. En PHP, como
en C, hay dos tipos de incremento - pre-incremento y post-incremento. Ambos, en
esencia, incrementan la variable y el efecto en la variable es idntico. La diferencia
radica en el valor de la propia expresion incremento. El preincremento , escrito
40
'++$variable', se evala al valor incrementado (PHP incrementa la variable antes de leer
su valor, de ah el nombre 'preincremento') . El postincremento, escrito '$variable++', se
evala al valor original de $variable antes de realizar el incremento (PHP incrementa la
variable despus de leer su valor, de ah el nombre 'postincremento') .
Un tipo muy corriente de expresiones son las expresiones de comparacin. Estas

expresiones se evalan a O o 1, significando FALSO (FALSE) o VERDADERO (TRUE),
respectivamente. PHP soporta > (mayor que), >= (mayor o igual que), == (igual que), !=
(distinto), < (menor que) y <= (menor o igual que). Estas expresiones se usan
frecuentemente dentro de la ejecucin condicional como la instruccin if.
El ltimo tipo de expresiones que trataremos, es la combinacin operador-asignacin.

Ya sabes que si quieres incrementar $a en 1, basta con escribir '$a++' o ++$a'. Pero
qu pasa si quieres aadir ms de 1, por ejemplo 3? Podras escribir '$a++' mltiples
veces, pero no es una forma de hacerlo ni eficiente ni cmoda. Una prctica mucho ms
corriente es escribir '$a= $a+ 3'. '$a+ 3' se evala al valor de $a ms 3, y se asigna de
nuevo a $a, lo que resulta en incrementar $a en 3. En PHP, como en otros lenguajes
como C, puedes escribir esto de una forma ms concisa, que con el tiempo ser ms
clara y tambin fcil de entender. Aadir 3 al valor actual de $a se puede escribir como
'$a += 3'. Esto quiere decir exactamente "toma el valor de $a, smale 3, y asgnalo otra
vez a $a". Adems de ser ms corto y claro, tambin resulta en una ejecucin ms
rpida. El valor de '$a += 3', como el valor de una asignacin normal y corriente, es el
valor asignado. Ten en cuenta que NO es 3, sino el valor combinado de $a ms 3 (se
es el valor asignado a $a). Cualquier operacin binaria puede ser usada en forma de
operador-asignacin, por ejemplo '$a -= 5' (restar 5 del valor de $a), '$b *= 7' (multiplicar
el valor de $b por 7), etc.
Hay otra expresin que puede parecer extraa si no la has visto en otros lenguaes, el
operador condicional ternario:
<?php
$first ? $second : $third
?>
Si el valor de la primera subexpresin es verdadero (distinto de cero), entonces se

evala la segunda subexpresin, si no, se evala la tercera y se es el valor.
41
Ingeniera Web Gua didctica U@:\
Actividad N" 051

! Programar
Un archivo .php que utilice la gestin estndar de errores.
Un archivo .php que utilice la gestin personalizada de errores.
Un archivo .php que utilice depuracin en tiempo de ejecucin .
! Elabora
Una monografa que describa los diferentes tipos de datos que tiene PHP.
! Elabora
Una pgina web que genere una tabla HTML de m filas por n columnas, donde m y n
son variables PHP y adems utilice una hoja de estilos que coloree las filas pares de
gris (#AAAAAA) y las impares de verde claro (#AACCAA).
42
~-~utoevaluacin 05 [lllll
A. Preguntas de opcin mltiple 5. Operador aritmtico que retorna
TRUE si el valor a la izquierda del
1. Funcin de PHP para imprimir un operador es igual al valor de la
resultado PHP. derecha, y son del mismo tipo.
a.- alert a.-= (igual)
b.- php b.- == (doble igual)
c.- echo c.-=== (triple igual)
d.- printer d.-==== (cudruple igual)
e.- Ninguna anterior e.- Ninguna anterior
2. Con que smbolo inicia una variable B. Utilizando las sentencias de control
PHP . de PHP, escribe una pgina PHP
a.-% con el cdigo necesario para:
b.- $
c.- & 6. Que analice una variable y determine
d.-# si su valor es primo o no.
7. Que convierta un nC1mero entero (1 a
3. No es un dato escalar de PHP. 999) a su forma textual. Ejemplo: 2 =>
a.- float dos; 123 => ciento veintitrs.
b.- int
c.- string 8. Imprima de color rojo la variable "x"
d.- booleano cuando tenga un valor menor a 11 o
e.- Ninguna anterior de color azul cuando sea mayor o
igual.
4. Es un dato compuesto de PHP.
a.- float 9. Que analice una variable y determine
b.- string si su valor es mltiplo de 7 o no.
c.- array
d.- complex 1 O. Imprima los 1O primeros nmeros de
e.- Ninguna anterior la serie de Fibonacci.
43
Ingeniera Web Guia didctica OJ:
Tema 06: Funciones de usuario y

cadenas
Hay alguien tan inteligente que aprende de la

experiencia de los dems.
Voltaire
Las funciones de usuario ayudan a

la reutilizacin de cdigo?
iente sintaxis:
- : 1'-'' '1'-'
function foo ($arg_1, $arg_2, ... , $arg_n)
{
echo "Función de ejemplo.\n";
return $retval;
}
?>
Cualquier instruccin vlida de PHP puede aparecer en el cuerpo de la funcin, incluso

otras funiones y definiciones de clases. En PHP3, las funciones deben definirse antes
de que se referencien. En PHP4 no existe tal requerimiento. Excepto cuando una
funcin es definida condicionalmente
44
Ingeniera Web Guia didctica r!Jm
6.1 Funciones definidas por el usuario

La informacin puede suministrarse a las funciones mediante la lista de parmetros, una
lista de variables y/o constantes separadas por comas.
PHP soporta pasar parmetros por valor (el comportamiento por defecto), por
referencia, y parmetros por defecto. Listas de longitud variable de parmetros slo
estn soportadas en PHP4 y posteriores; ver Listas de longitud variable de parmetros y
la referencia de las funciones func_num_args(), func_get_arg() , y func_get_args() para
ms informacin. Un efecto similar puede conseguirse en PHP3 pasando un array de
parmetros a la funcin :
Ejemplo: Pasando matrices a funciones
<?php
function takes_array($input)
{
echo "$input[O] + $input[1] = ", $input[O]+$input[1];
}
?>
Pasar parmetros por referencia

Por defecto, los parmetros de una funcin se pasan por valor (de manera que si
cambias el valor del argumento dentro de la funcin, no se ve modificado fuera de ella) .
Si deseas permitir a una funcin modificar sus parmetros, debes pasarlos por
referencia.
Si quieres que un parmetro de una funcin siempre se pase por referencia , puedes
anteponer un ampersand (&) al nombre del parmetro en la definicin de la funcin :
Ejemplo: Pasando parmetros de funciones por referencia
<?php
function add_some_extra(&$string)
{
$string .=' y algo más.';
}
$str ='Esto es una cadena , ';
add_some_extra($str);
echo $str; // Saca 'Esto es una cadena , y algo más.'
?>
Parmetros por defecto

Una funcin puede definir valores por defecto para los parmetros escalares estilo C++:
Ejemplo: Uso de parmetros por defecto en funciones
<?php
function makecoffee ($type = "cappucino")
{
return "Hacer una taza de $type.\n";
}
echo makecoffee () ;
echo makecoffee ("espresso");
?>
45
Ingeniera Web Gua didctica ij]J~j
La salida del fragmento anterior es: Hacer una taza de cappucino.

Hacer una taza de espresso.
El valor por defecto tiene que ser una expresin constante, y no una variable, miembro
de una clase llamada a una funcin.
Destacar que cuando se usan parmetros por defecto, estos tienen que estar a la
derecha de cualquier parmetro sin valor por defecto; de otra manera las cosas no
funcionarn de la forma esperada. Considera el siguiente fragmento de cdigo :
Ejemplo: Uso incorrecto de parmetros por defecto en funciones
<?php
function makeyogurt ($type ="acidophilus", $flavour)
{
return "Haciendo un bol de $type $flavour.\n";
}
echo makeyogurt ("mora"); // No funcionará de la manera

esperada
?>
La salida del ejemplo anterior es:
Warning: Missing argument 2 in call to makeyogurt() in

/usr/local/etc/httpd/htdocs/php3testlfunctest. html on line 41
Haciendo un bol de mora .
Y ahora, compralo con:
Ejemplo: Uso correcto de parmetros por defecto en funciones
<?php
function makeyogurt ($flavour, $type ="acidophilus")
{
return "Haciendo un bol de $type $flavour.\n";
}
echo makeyogurt ("mora"); 11 funciona como se esperaba

?>
La salida de este ejemplo es :
Haciendo un bol de acidophilus mora.
Lista de longitud variable de parmetros

PHP4 soporta las listas de longitud variable de parmetros en las funciones definidas
por el usuario. Es realmente fcil , usando las funciones func_num_args() ,
func_get_arg(), y func_get_args().
46
Ingeniera Web Gua didctica m!lll
No necesita de ninguna sintaxis especial, y las listas de parmetros pueden ser escritas
en la llamada a la funcin y se comportarn de la manera esperada.
6.2Cadenas
Un valor string es una serie de caracteres. En PHP, un caracter es lo mismo que un
byte, es decir, hay exactamente 256 tipos de caracteres diferentes. Esto implica tambin
que PHP no tiene soporte nativo de Unicode. Vea utf8_encode() y utf8_decode() para
conocer sobre el soporte Unicode.
Nota: El que una cadena se haga muy grande no es un problema . PHP no impone lmite
prctico alguno sobre el tamao de las cadenas , as que no hay ninguna razn para
preocuparse sobre las cadenas largas.
Sintaxis
Un literal de cadena puede especificarse en tres formas diferentes.
comillas simples
comillas dobles
sintaxis heredoc
Comillas simples
La forma ms simple de especificar una cadena sencilla es rodearla de comillas simples
(el caracter ') .
Para especificar una comilla sencilla literal, necesita escaparla con una barra invertida
(\), como en muchos otros lenguajes. Si una barra invertida necesita aparecer antes de
una comilla sencilla o al final de la cadena , necesitar doblarla . Note que si intenta
escapar cualquier otro caracter, la barra invertida ser impresa tambin! De modo que,
por lo general , no hay necesidad de escapar la barra invertida misma.
Nota: En PHP 3, se generar una advertencia de nivel E_NOTICE cuando esto ocurra.
Nota: A diferencia de las otras dos sintaxis, las variables y secuencias de escape para
caracteres especiales no sern expa ndidas cu ando ocurren al interior de cadenas entre
comillas sencillas.
<?php
echo 'esta es una cadena simple';
echo 'Tambin puede tener saltos de lnea embebidos

en las cadenas de esta forma , ya que
es vlido' ;
11 Imprime: Arnold dijo una vez: ' 1'11 be back"

echo 'Arnold dijo una vez : "1\'11 be back"';
11 Imprime: Ha eliminado C:\*.*?

echo 'Ha eliminado C:\\*.*?';
11 Imprime: Ha eliminado C:\*.*?

echo 'Ha eliminado C:\*.*?';
11 Imprime: Esto no va a expandirse: \n una nueva lnea

echo 'Esto no va a expandirse: \n una nueva lnea' ;
47
Ingeniera Web Gua didctica mm
11 Imprime: Las variables no se $expanden $tampoco

echo 'Las variables no se $expanden $tampoco';
?>
Comillas dobles
Si la cadena se encuentra rodeada de comillas dobles ("), PHP entiende ms
secuencias de escape para caracteres especiales:
Tabla 11-1 . Caracteres escapados
secuencia significado
\n alimentacin de lnea (LF o OxOA (10) en ASCII)
\r retorno de carro (CR o OxOD (13) en ASCII)
\t tabulacin horizontal (HT o Ox09 (9) en ASCII)
\\barra invertida
\$ signo de dlar
\"comilla-doble
\[0-7]{1 ,3} la secuencia de caracteres que coincide con la expresin regular es un
caracter en notacin octal
\x[0-9A-Fa-f]{1 ,2} la secuencia de caracteres que coincide con la expresin regular es
un caracter en notacin hexadecimal
Nuevamente, si intenta escapar cualquier otro caracter, la barra invertida ser impresa
tambin! Antes de PHP 5.1 .1, la barra invertida en \{$var} no vena imprimindose.
Pero la caracterstica ms importante de las cadenas entre comillas dobles es el hecho

de que los nombres de variables sern expandidos. Vea procesamiento de cadenas
para ms detalles.
He red oc
Otra forma de delimitar cadenas es mediante el uso de la sintaxis heredoc ("<<<") . Debe
indicarse un identificador (seguido por un salto de lnea) despus de la secuencia <<<,
luego la cadena, y luego el mismo identificador para cerrar la cita .
El identificador de cierre debe comenzar en la primera columna de la lnea. Asimismo, el

identificador usado debe seguir las mismas reglas que cualquier otra etiqueta en PHP:
debe contener solo caracteres alfanumricos y de subrayado, y debe iniciar con un
caracter no-dgito o de subrayado.
Aviso
Es muy importante notar que la lnea con el identificador de cierre no contenga otros
caracteres, excepto quizs por un punto-y-coma (;). Esto quiere decir en especial que el
identificador no debe usar sangra, y no debe haber espacios o tabuladores antes o
despus del punto-y-coma. Es importante tambin notar que el primer caracter antes del
identificador de cierre debe ser un salto de lnea, tal y como lo defina su sistema
operativo. Esto quiere decir \r en Macintosh, por ejemplo . El delimitador de cierre
(posiblemente seguido de un punto-y-coma) debe ser seguido tambin por una nueva
lnea.
Si esta regla es rota y el identificador de cierre no es "limpio", entonces no se considera

un identificador de cierre y PHP continuar en busca de uno. Si, en tal caso, no se
encuentra un identificador de cierre apropiado, entonces un error del analizador
sintctico resultar con el nmero de lnea apuntando al final del script.
48
Ingeniera Web Gua didctica tJII
No es permitido usar la sintaxis heredoc al inicializar miembros de clase. Use otro tipo
de sintaxis en su lugar. Ejemplo 11-3. Ejemplo invlido
<?php
class foo {
public $bar = <<<EOT
bar
EOT;
}
?>
El texto heredoc se comporta tal como una cadena entre comillas dobles, sin las
comillas dobles. Esto quiere decir que no necesita escapar tales comillas en sus
bloques heredoc, pero aun puede usar los cdigos de escape listados anteriormente.
Las variables son expandidas, aunque debe tenerse el mismo cuidado cuando se
expresen variables complejas al interior de un segmento heredoc, al igual que con otras
cadenas. Ejemplo 11-4. Ejemplo de uso de una cadena heredoc
<?php
$cadena= <<<FIN
Ejemplo de una cadena
que se extiende por varias lneas
usando la sintaxis heredoc.
FIN;
/* Un ejemplo ms complejo, con variables. */

class foo
{
var $foo;
var $bar;
function foo()
{
$this->foo = 'Foo';
$this->bar = array('Bar1', 'Bar2', 'Bar3');
}
}
$foo = new foo();

$nombre = 'MiNombre';
echo <<<FIN
Mi nombre es "$nombre". Estoy imprimiendo algo de $foo->foo.
Ahora, estoy imprimiendo algo de {$foo->bar[1]}.
Esto debera imprimir una letra 'A' mayscula: \x41
FIN;
?>
Nota: El soporte heredoc fue agregado en PHP 4.
Procesamiento de variables
Cuando una cadena es especificada en comillas dobles o al interior de un bloque
heredoc, las variables son interpretadas en su interior.
49
Ingeniera Web Gua didctica d!l
Existen dos tipos de sintaxis: una simple y una compleja . La sintaxis simple es la ms
comn y conveniente . Esta ofrece una forma de interpretar una variable, un valor array,
o una propiedad de un object.
La sintaxis compleja fue introducida en PHP 4, y puede reconocerse por las llaves que
rodean la expresin .
Sintaxis simple
Si un signo de dlar ($) es encontrado, el analizador sintctico tomar ambiciosamente
tantos lexemas como le sea posible para formar un nombre de variable vlido. Rodee el
nombre de la variable de llaves si desea especificar explcitamente el final del nombre.
<?php
$cerveza = 'Heineken';
echo "El sabor de varias $cerveza's es excelente"; // funciona , "'" no es un caracter
vlido pa ra nombres de variables
echo "Tom algunas $cervezas"; //no funciona, 's' es un caracter vlido para nombres
de variables
echo "Tom algunas ${cerveza}s"; //funciona
echo "Tom algunas {$cerveza}s" ; //funciona
?>
De forma similar, puede hacer que un ndice de un array o una propiedad de un object
sean interpretados. En el caso de los ndices de matrices, el corchete cuadrado de
cierre (]) marca el final del ndice . Para las propiedades de objetos, se aplican las
mismas reglas de las variables simples, aunque con las propiedades de objetos no
existe un truco como el que existe con las variables.
<?php
11 Estos ejemplos son especficos al uso de matrices al interior de
11 cadenas. Cuando se encuentre por fuera de una cadena, siempre rodee
11 de comillas las claves tipo cadena de su matriz, y no use
11 {llaves} por fuera de cadenas tampoco.
11 Mostremos todos los errores

error_reporting (E_ALL);
$frutas= array('fresa' =>'roja', 'banano'=> 'amarillo');
1/ Funciona pero note que esto trabaja de forma diferente por fuera de
11 cadenas entre comillas
echo "Un banano es $frutas[banano] .";
11 Funciona
echo "Un banano es {$frutas['banano']}.";
11 Funciona, pero PHP busca una constante llamada banano primero, como
11 se describe ms adelante.
echo "Un banano es {$frutas[banano]}.";
11 No funciona, use llaves. Esto resulta en un error de anlisis sintctico.

echo "Un banano es $frutas['banano'].";
50
Ingeniera Web Gu a didctica
JI Funciona
echo "Un banano es" . $frutas['banano'] . ".";
JI Funciona
echo "Este cuadro tiene $cuadro->ancho metros de ancho.";
JI No funciona . Para una solucin, vea la sintaxis compleja.

echo "Este cuadro tiene $cuadro->ancho00 centmetros de ancho .";
?>
Para cualquier cosa ms sofisticada, debera usarse la sintaxis compleja.
Sintaxis compleja (llaves)

Esta no es llamada compleja porque la sintaxis sea compleja, sino porque es posible
incluir expresiones complejas de esta forma.
De hecho, de esta forma puede incluir cualquier valor que sea parte del espacio de
nombres al interior de cadenas. Simplemente escriba la expresin en la misma forma
que lo hara si se encontrara por fuera de una cadena , y luego la ubica entre { y }. Ya
que no es posible escapar '{', esta sintaxis ser reconocida nicamente cuando el
caracter $ se encuentra inmediatamente despus de {. (Use "{\$" para obtener una
secuencia literal "{$"). Algunos ejemplos para aclarar el asunto:
<?php
JI Mostremos todos los errores
error_reporting(E_ALL);
$genial ='fantstico' ;
JI No funciona, imprime: Esto es {fantstico}

echo "Esto es { $genial}";
JI Funciona, imprime: Esto es fantstico

echo "Esto es {$genial}" ;
echo "Esto es ${genial}";
JI Funciona
echo "Este cuadro tiene {$cuadro->ancho}OO centmetros de ancho.";
JI Funciona
echo "Esto funciona : {$matriz[4][3]}";
JI Esto est mal por la misma razn por la que $foo[bar] est mal por
JI fuera de una cadena. En otras palabras, aun funciona pero ya que
JI PHP busca primero una constante llamada foo , genera un error de
JI nivel E_NOTICE (constante indefinida) .
echo "Esto est mal: {$matriz[foo][3]}";
JI Funciona. Cuando se usan matrices multi-dimensionales , use siempre

JI llaves alrededor de las matrices al interior de cadenas
echo "Esto funciona : {$matriz['foo'][3]}";
JI Funciona.
echo "Esto funciona: " . $arr['foo'][3] ;
51
Ingeniera Web Gua didctica f- 1
liiW
echo "Puede incluso escribir {$obj->valores[3]->nombre}";
echo "Este es el valor de la variable llamada $nombre: {${$nombre}}";

?>
Acceso a cadenas y modificacin por caracter

Los caracteres al interior de una cadena pueden ser consultados y modificados al
especificar el desplazamiento, comenzando en cero, del caracter deseado despus de
la cadena usando corchetes cuadrados tipo-matriz como $cadena[42] , as que piense
en una cadena como un array de caracteres.
Nota: Tambin es posible acceder a los caracteres usando llaves como $cadena{42}
para el mismo propsito. Sin embargo, se prefiere el uso de corchetes cuadrados ya
que el estilo {corchetes} es considerado obsoleto a partir de PHP 6.
Ejemplo: Algunos ejemplos de cadenas
<?php
11 Obtener el primer caracter de una cadena
$cadena ='Esta es una prueba.';
$primer= $cadena[O];
11 Obtener el tercer caracter de una cadena

$tercer= $cadena[2];
11 Obtener el ltimo caracter de una cadena.

$cadena= 'Esta es tambin una prueba.';
$ultimo = $cadena[strlen($cadena)-1];
11 Modificar el ltimo caracter de una cadena

$cadena = 'Observe el mar';
$cadena[strlen($cadena)-1] = '1';
11 El mtodo alternativo usando {} es obsoleto desde PHP 6

$tercer = $cadena{2};
?>
Funciones y operadores tiles

Las cadenas pueden ser concatenadas usando el operador '.' (punto) . Note que el
operador '+' (adicin) no funciona para este propsito. Por favor refirase a la seccin
Operadores de cadena para ms informacin.
Existen bastantes funciones tiles para la modificacin de cadenas.
Vea la seccin de funciones de cadena para consultar funciones de uso general, o las
funciones de expresiones regulares para bsquedas y reemplazos avanzados (en dos
sabores: Perl y POSIX extendido) .
. Existen tambin funciones para cadenas tipo URL, y funciones para encriptar/descifrar
cadenas (mcrypt y mhash).
52
lngenieria Web Guia didctica
Finalmente, si aun no ha encontrado lo que busca, vea tambin las funciones de tipo de
caracter.
Conversin a cadena
Es posible convertir un valor a una cadena usando el moldeamiento (string), o la funcin
strval() . La conversin a cadena se realiza automticamente para usted en el contexto
de una expresin cuando se necesita una cadena. Esto ocurre cuando usa las
funciones echo() o print(), o cuando compara el valor de una variable con una cadena.
El contenido de las secciones del manual sobre Tipos y Manipulacin de Tipos ayudan a
aclarar este hecho. Vea tambin settype().
11 11
Un valor boolean TRUE es convertido a la cadena 1 el valor FALSE se representa
,
1111
como (una cadena vaca). De esta forma, usted puede convertir de ida y vuelta entre
valores booleanos y de cadena.
Un nmero integer o de punto flotante (float) es convertido a una cadena que representa
el nmero con sus dgitos (incluyendo la parte del exponente para los nmeros de punto
flotante).
Nota: El caracter de punto decimal es definido en la localizacin del script (categora

LC_NUMERIC). Vea setlocale().
11 11
Las matrices son siempre convertidas a la cadena Array de modo que no puede ,
volcar los contenidos de un valor array con echo() o print() para ver lo que se encuentra
en su interior. Para ver un elemento, usted tendra que hacer algo como echo $arr['foo'].
Vea ms adelante algunos consejos sobre el volcado/vista del contenido completo.
11 11
Los objetos son convertidos siempre a la cadena bject Si quisiera imprimir los
valores de variables miembro de un object para efectos de depuracin, lea los

pargrafos siguientes. Si quiere conocer el nombre de clase del cual un objeto dado es
instancia, use get_class(). A partir de PHP 5, el mtodo _toString() es usado si resulta
aplicable.
11 11
Los recursos son siempre convertidos a cadenas con la estructura Resource id #1 en
donde 1 es el nmero nico del valor resource asignado por PHP durante tiempo de
ejecucin. Si quisiera obtener el tipo del recurso, use get_resource_type().
NULL se convierte siempre a una cadena vaca.
Como puede apreciar, el imprimir matrices, objetos o recursos no le ofrece informacin

til sobre los valores mismos. Consulte las funciones print_r() . y var_dump() para
conocer mejores formas de imprimir valores para depuracin.
Tambin puede convertir valores PHP a cadenas y almacenarlas permanentemente.

Este mtodo es conocido como seriacin, y puede ser efectuado con la funcin
serialize(). Tambin puede seriar valores PHP a estructuras XML, si cuenta con soporte
WDDX en su configuracin de PHP.
Conversin de cadenas a nmeros

Cuando una cadena es evaluada como un valor numrico, el valor resultante y su tipo
son determinados como sigue.
La cadena ser evaluada como un float si contiene cualquier caracter entre'.', 'e', o 'E'.
De otra forma, evaluar como un entero.
53
Ingeniera Web Gua didctica UJ.)
El valor es dado por la porcin inicial de la cadena. Si la cadena comienza con datos
numricos vlidos, stos sern el valor usado. De lo contrario, el valor ser O (cero) . Un
signo opcional es considerado un dato numrico vlido, seguido por uno o ms dgitos
(que pueden contener un punto decimal) , seguidos por un exponente opcional. El
exponente es una 'e' o 'E' seguida de uno o ms dgitos.
<?php
$foo = 1 + "1 0.5"; 11 $foo es flotante (11 .5)
$foo = 1 + "-1.3e3"; 11 $foo es flotante (-1299)
$foo = 1 + "bob-1.3e3"; 11 $foo es entero (1)
$foo = 1 + "bob3"; 11 $foo es entero ( 1)
$foo = 1 + "1 O Cerditos"; 11 $foo es entero (11)
$foo = 4 + "1 0.2 Cerditos"; JI $foo es flotante (14.2)
$foo = "1 0.0 cerdos "+ 1; 11 $foo es flotante (11)
$foo = "1 0.0 cerdos "+ 1.0; 11 $foo es flotante ( 11)
?>
Para ms informacin sobre esta conversin , vea la pgina del manual Unix sobre
strtod(3).
Si quisiera probar cualquiera de los ejemplos presentados en esta seccin, puede cortar
y pegar los ejemplos e insertar la siguiente lnea para verificar por s mismo lo que est
sucediendo:
<?php
echo "\$foo==$foo; tipo es" . gettype ($foo) . "<br />\n";
?>
No espere obtener el cdigo de un caractar convirtindolo a un entero (como lo hara en

C, por ejemplo) . Use las funciones ord() y chr() para convertir entre cdigos de caracter
y caracteres .
54
li~l Actividad N" 06 -1
! Programar
Un archivo .php que encuentre la posicin de la ltima ocurrencia de una cadena en
otra, insensible a maysculas y minsculas.
Un archivo .php que sustituya las vocales a, e, i, o y u de una cadena por 1, 2, 3, 4 y 5
respectivamente e imprima la nueva cadena .
Un archivo .php que contenga una variable cuyo valor es la fecha del sistema en
formato dd-mm-aaaa (Ejm: 20-05-1989) e la imprima en formato aaaa-mm-dd (Ejm :
1989-05-20), utilizando funciones de cadenas.
! Elabora
Una monografa que contenga un resumen de las funciones de cadena de PHP 5.
~ -~utoevaluacin 06
! Programar
Una pgina web que contenga 4 funciones definidas por Ud, las cuales sirvan para:
Ordenar una lista de nmeros.
Convertir a arbigo un nmero romano. Ejm: XII=> 12
Convertir a romano un nmero arbigo . Ejm: 25 => XXV
Solicitar el ingreso de una clave en un formulario. La segunda pagtna
debe verificar si ingres el string "z80" y mostrar un mensaje de
bienvenida, en caso contrario, esta pgina debe redireccionar a la
primera pgina nuevamente.
55
Ingeniera Web Gua didctica i-
~
l
Tema 07: Formularios HTML con PHP

Por la ignorancia se desciende a la servidumbre,
por la educacin se asciende a la libertad.
Diego Lus Crdoba
Son tan importantes los formularios

en el desarrollo de aplicaciones web?
Introduccin al tema
Los formularios permiten a los usuarios
enviar informacin al servidor, en el cual hay instalado(s) programa(s) que procesan
esta informacin. Es por esta razn que se les considera como uno de los elementos
ms importantes en la construccin de aplicaciones web.
56
7.1 Formularios HTML

Estructura de un formulario
La estructura de un formulario es la siguiente:
Etiqueta de inicio :
Cuerpo del formulario , con los distintos elementos para poder introducir los
datos.
Botones de envo y de borrado.
Etiqueta de cierre </FORM>
Etiqueta de inicio
<FORM ACTION=m ailto:email METHOD="POST" ENCTYPE = "TEXT/PLAIN">
El atributo ACTION indica la accin que se debe efectuar.
El atributo METHOD=POST indica que los datos sean inmediatamente enviados a la
direccin de email u a otro destino establecido segn el atributo ACTION .
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos
como un archivo de texto, perfectamente legible y sin codificar.
Elementos para introducir los datos
Existen tres tipos de elementos:
1. Introduccin por medio de texto
2. Introduccin por medio de mens
3. Introduccin por medio de botones
La introduccin de los datos se consigue por medio de la etiqueta:
<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">
En donde:
xxx es la palabra que indica el tipo de introduccin .
yyy es el nombre que le asignamos nosotros a la variable de introduccin del dato.
zzz es el nombre de la variable que contendr el valor del elemento.
Introduccin por medio de texto (una lnea)

En este caso es xxx=text, es decir, INPUT TYPE="text". El atributo VALUE no procede
en este caso .
Vamos a poner un ejemplo: solicitamos el apellido del usuario.
<FORM ACTION=mailto:email METHOD="POST" ENCTYPE="TEXT/PLAIN">

Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>
Si el usuario introduce su apellido, por ejemplo: Ruiz , y pulsa el botn de envo (que
veremos ms adelante) , recibiremos un email suyo con el siguiente texto:
Apellido=Ruiz
La longitud de este formulario es por defecto de 20 caracteres . Se puede variar

incluyendo en la etiqueta el atributo SIZE="nmero". Por otra parte, sea cual sea la
longitud del formulario , si no se indica nada , el usuario puede introducir el nmero de
caracteres que quiera. Se puede limitar esto, incluyendo en la etiqueta el atributo
MAXLENGTH="nmero".
57
Ingeniera Web Gua didctica H!J:~
En el caso que hemos visto, si hubiramos cambiado la etiqueta correspondiente por:
<INPUT TYPE="text" NAME="Apellido" SIZE="1 O" MAXLENGTH="12">
Tambin se puede hacer que el texto introducido no sea reconocible, es decir que todos
los caracteres se representen por asteriscos. Basta con cambiar en la etiqueta INPUT
TYPE="text" por INPUT TYPE="password". En el ltimo ejemplo, si cambiamos la
etiquea correspondiente por:
<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">
Los caracteres introducidos se representan por asteriscos.

Introduccin por medio de texto (mltiples lneas)
Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un
comentario, es conveniente utilizar un formulario de texto de mltiples lneas.
Esto se consigue con la etiqueta de inicio:

<TEXTAREA NAME="yyy" ROWS="nmero" COLS="nmero">
(en donde no se utiliza INPUT TYPE y donde ROWS representa el nmero de filas, y
COLS el de columnas). y la de cierre: <ffEXTAREA>
Ejemplo: Formulario solicitando los comentarios del usuario:

Introduce tus comentarios:
<BR>
<TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
<ffEXTAREA>
</FORM>
Introduccin por medio de Listas Desplegables

Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los
casos anteriores, escoja entre varias opciones que le presentamos nosotros, haremos
uso de un formulario en forma de listas desplegables.
Se consigue con la etiqueta de inicio <SELECT NAME="yyy"> y la de cierre

</SELECT>. Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>.
Ejemplo: Pedimos al usuario que elija su color preferido:

Cul es tu color preferido?
<BR>
<SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
</SELECT >
</FORM>
Si el usuario escoge, por ejemplo: Azul y ha pulsado el botn de envo, recibiremos un

email suyo con el texto: ColorPreferido=Azul.
58
Ingeniera Web Gua didctica tBi
En el ejemplo anterior, slo es visible en el formulario una opcin. Si queremos que
sean visibles mltiples opciones a la vez, aadimos en la etiqueta los atributos
MLTIPLE SIZE="nmero", donde especificamos el nmero de opciones visibles .
Formulario de confirmacin (checkbox)

Si queremos que el usuario confirme una opcin determinada, podemos hacer uso de
un formulario de confirmacin, o checkbox, que se consigue con la etiqueta:
<INPUT TYPE="checkbox" NAME="yyy">
Ejemplo: Solicitamos al usuario que confirme su inclusin en una lista de correo:

<INPUT TYPE="checkbox" NAME="Lista">
S, deseo ser incluido en la lista de correo.
</FORM>
Si el usuario marca este formulario y pulsa el botn de envo, recibiremos un email suyo
con el texto: Lista=On.
Si queremos que el formulario aparezca inicialmente como marcado (el usuario no

necesitar hacerlo), basta con aadir el atributo CHECKED dentro de la etiqueta .
Ejemplo: <INPUT TYPE="checkbox" NAME="Lista" CHECKED>
Botones de radio
Cuando queremos que el usuario elija una nica opcin entre varias, podemos hacer
uso de los botones de radio, que se consiguen con la etiqueta:
<INPUT TYPE="radio" NAME="yyy" VALUE="zzz">
Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y zzz es el
nombre de cada una de las opciones en concreto.
Ejemplo: solicitamos al usuario que defina cul es su sistema operativo preferido:

Cul es tu sistema operativo preferido?
<BR>
<INPUT TYPE="radio" NAME="Sistemaperativo" VALUE="PC" CHECKED> PC
<INPUT TYPE="radio" NAME="Sistemaperativo" VALUE="Mac"> _Mac
<INPUT TYPE="radio" NAME="Sistemaperativo" VALUE="Unix"> Unix
</FORM>
Obsrvese el atributo opcional CHECKED que se ha aadido en la primera etiqueta.

Esa ser la opcin que aparece marcada por defecto.
Si el usuario ha escogido la opcin PC y pulsa el botn de envo, recibiremos un email

suyo con el texto: Sistemaperativo=PC .
Botones de envo y de borrado

Hasta ahora, en todos los ejemplos que hemos visto , faltaba un elemento esencial en
cualquier formulario , y es el botn de envo de los datos, que se consigue con la
etiqueta:
59
Ingeniera Web Gua didctica i!lj
<INPUT TYPE="submit" VALUE="Enviar">
En donde zzz es el texto que queremos que aparezca en el botn. Ejemplo :

Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>
Otro botn interesante es el de borrado de los datos introducidos, muy conveniente en

un formulario con muchos elementos. Es muy similar al de envo, pues se consigue con
la etiqueta:
<INPUT TYPE="reset" VALUE="zzz">
En donde zzz es el texto que queremos que aparezca en el botn. Si aadimos al

ejemplo anterior la etiqueta:
<P><INPUT TYPE="reset" VALUE="Borrar datos">
. Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando

luego el botn de borrado.
Consideraciones finales
Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar.
Pero no hay ningn inconveniente en usar, dentro del mismo formulario , distintos tipos
de introduccin de datos. Al pulsar el usuario el botn de envo recibiramos en email
suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el
smbolo& .
<HTML>
<HEAD><TITLE>LIBRO DE VISITAS</TITLE></HEAD>
<BODY>
<P><CENTER>
<H2>Libro de visitas</H2>
<P>
<FORM ACTION=mailto :xy@ab METHOD="POST" ENCTYPE="TEXT/PLAIN">
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>
<P><HR><P>
</BODY>
</HTML>
60
Ingeniera Web Gua didctica lB!
7.2 Envo de datos de un formulario a PHP
Veremos esto con un ejemplo bsico:
<HTML>
<HEAD> <TITLE>New Document</TITLE></HEAD>
<BODY>
<form method="post" action="registro. php">
Nombres <input type="text" name="txtnom" size="20"><BR>
Apellidos <input type="text" name="txtape" size="20"><BR>
Direccion <input type="text" name="txtdir" size="20"><br>
Sexo <input type="radio" name="optsexo" value="M">Masculino
<input type="radio" name="optsexo" value="F">Femenino
<br>
T elefono <input type="text" name="txttel" size="20"><br>
<input type="submit" value="Enviar">
</form>
</BODY>
</HTML>
Este formulario es recibido por registro.php
<HTML>
<BODY>
<?php
$nombres = $_POST['txtnom'];
$apellidos = $_POST['txtape'];
$direccion = $_POST['txtdir'];
$telefono = $_POST['txttel'];
$sexo = $_POST['optsexo'];
echo "Los datos son:<br>";

echo "Nombres: $nombres<br>";
echo "Apellidos: $apellidos<br>";
echo "Direccion: $direccion<br>";
echo "Sexo: $sexo<br>";
echo "Telefono: $telefono<br>";
?>
</BODY>
</HTML>
Vemos ahora otro ejemplo, esta vez para subir un archivo al servidor web .
<HTML>
<HEAD> <TITLE>Subir archivos</TITLE></HEAD>
<BODY>
<form action="subir.php" enctype="multipart/form-data" method="POST">
Archivo <input type="file" name="txtarchivo">
<input type="submit" value="Subir archivo">
</form>
</BODY>
</HTML>
61
lngenieria Web Guia didctica ij!ll
subir.php
<HTML>
<BODY>
<?php
$nomreai=$_FILES['txtarchivo']['name'];
$tipo =$ _FI LES['txtarchivo']['type'];
$tamano =$_FI LES['txtarchivo']['size'];
$temporai=$_FILES['txtarchivo']['tmp_name'];
$origen=$temporal;
$destino="docs/" .$nomreal;
copy($origen, $destino);
echo "Nombre real: $nomreal <br>";

echo "Tipo de archivo: $tipo <br>";
echo "Tamao: $tamano bytes<br>";
echo "Nombre Temporal: $temporal<br>";
?>
</BODY>
</HTML>
62
Ingeniera Web Guia didctica tJ!lm
Actividad N 07 "1
! Programar
Un formulario HTML que enve datos al archivo registro.php, los datos de un nuevo
cliente (idcliente, nombres, apellidos, fecha de nacimiento, ciudad, y pas).
Un formulario HTML que suba al servidor web la foto de cada cliente (complementar el
tem anterior- registro de cliente).
! Elabora
Una monografa que contenga las diferencias que existen entre el mtodo POST y GET
de los formularios HTML.
63
Ingeniera Web Gua didctica ~~~
~ -~~toevaluacin 07 llllll
! Programar
1. Escriba un documento html que contenga un formulario con los siguientes
elementos: un campo de texto , dos radio botones y un botn de envo de datos.
2. Escriba otro documento html que contenga nicamente un ttulo en su cuerpo
3. Cambie la extensin de este segundo documento para que sea .php
4. Publique el fichero con extensin php en el servidor y compruebe que puede
acceder al mismo utilizando un navegador.
5. En el documento html que tiene el formulario, copie la URL que ha utilizado para
acceder al fichero php y pguela como valor del atributo action . Ponga GET
como valor en el atributo method.
6. Compruebe que si pulsa sobre el botn del documento html se abre el
documento del punto 2 correctamente .
7. Publique el documento html en el servidor, acceda al mismo con un navegador y
compruebe que todo funciona correctamente
8. Inserte en el cuerpo del documento php una seccin de cdigo (utilizando<? y
?>) . Dentro de esa seccin, y utilizando los datos que recoge del formulario del
documento html , haga las siguientes pruebas:
Imprima el valor que se recoge en el campo de texto del formulario para
que aparezca en un prrafo.
Imprima el valor del radio botn que se le enva
Cree una sentencia IF que, en funcin del valor del radio botn recibido,
imprima una cadena u otra (por ejemplo "VALOR 1" y "VALOR 2").
Compruebe que la sentencia condicional se ejecuta correctamente
dependiendo del radio botn seleccionado.
Altere esa sentencia condicional. Si el usuario ha seleccionado uno de los
radio botones, escriba el contenido del campo de texto que se le enva en
un fichero en el servidor. Si el usuario ha seleccionado el otro, recupere el
valor almacenado en el fichero previamente.
9. Inserte un rea de texto en el formulario , de forma que el texto que escriba el
usuario se guarde en otro fichero del servidor.
1O. Cree otro documento php que, cada vez que se ejecuta, lee el contenido del
fichero en el que se escribe el texto del punto 9 y lo pinta en pantalla en forma de
prrafos (tenga en cuenta que en el texto pueden aparecer saltos de lnea)
11. Cree una pgina html que tenga un men con dos opciones. Una le conduce al
documento html que tena el formulario y la otra al php que lee el contenido del
fichero .
12. Publique esta pgina html y compruebe que todo funciona correctamente cuando
utiliza un navegador.
13. Una pgina Web que muestre una lista desplegable de departamentos del Per,
y cada vez que se cambie de departamento, la lista de provincias cambia
dinmicamente.
64
Ingeniera Web Gua didctica fl!
Tema 08: Programacin Orientada a

Objetos con PHP
No deja de ser humillante para una persona de

ingenio, saber que no hay tonto que no le pueda
ensear algo.
Jean Baptiste Say
Qu son Patrones en Programacin

Orientada a Objetos y para qu
sirven?
Introduccin al tema
En PHP 5 hay un nuevo modelo de Objetos. El manejo de PHP de objetos ha sido

reescrito por completo, permitiendo un mejor desempeo y ms caractersticas.
65
Ingeniera Web Gua didctica rJ!I
8.1 Clases y Objetos
Clase
Cada definicin de clase empieza con la palabra "class", seguida por un nombre de
clase, el cual puede ser cualquier nombre que no est en la lista de palabras reserved
en PHP. Seguida por un par de llaves curvas, las cuales contienen la definicin de los
miembros de la clase y los mtodos. Una pseudo variable $this est disponible cuando
un mtodo es llamado dentro del contexto de un objeto . $this es una referencia al objeto
que se est usando (usualmente el objeto al que el mtodo pertenece, pero puede ser
otro objeto, si un mtodo es llamado estticamente desde el contexto de un objeto
secundario). Este es ilustrado en el siguiente ejemplo:
<?php
class A
{
function foo()
{
if (isset($this)) {
echo '$this está definido (';
echo get_class($this);
echo ")\n";
} else {
echo "\$this no está definido.\n";
}
}
}
class 8
{
function bar()
{
A::foo() ;
}
}
$a= new A() ;

$a->foo();
A: :foo() ;
$b = new B();
$b->bar();
B:: bar() ;
?>
El resultado del ejemplo seria:
$this est definido

$this no est definido.
$this est definido
$this no est definido.
Ejemplo: Definicin simple de una clase
<?php
class SimpleCiass
{
66
lngenieria Web Guia didctica t-!1
public $var = 'a valor por defecto';
public function mostrarVar() {

echo $this->var;
}
}
?>
Nuevo objeto
Para crear una instancia de un objeto, un nuevo objeto debe ser creado y asignado a
una variable . Un objeto siempre ser asignado cuando se crea un objeto nuevo a menos
que el objeto tenga un constructor definido que arroje una excepcin en caso de error.
Ejemplo: Creando una instancia
<?php
$instance = new SimpleCiass()
?>
Cuando se asigna una instancia de un objeto previamente creado a una nueva variable ,
la nueva variable accesar la misma instancia que la del objeto a la que fue asignada.
Este comportamiento es el mismo cuando se pasan instancias a una funcin. Una
nueva instancia de un objeto previamente creado puede ser hecho clonandolo .
Ejemplo: Asignamiento de Objeto
<?php
$assigned = $instance;
$reference =& $instance;
$instance->var = '$assigned tendrá este valor';
$instance = null; // $instance y $reference sern null

var_dump($instance) ;
var_dump($reference);
var_dump($assigned);
?>
El resultado del ejemplo seria :
NULL
NULL
object(SimpleCiass)#1 (1) {
["var"]=>
string(30) "$assigned tendr este valor"
}
Extendiendo objetos
Una clase puede heredar mtodos y miembros de otra clase usando la palabra 'extends'
en la declaracin. No es posible extender de mltiples clases, una clase puede heredar
solo de una clase base.
67
lngenieria Web Guia didctica Hl!I:J
Los mtodos de herencia y sus miembros pueden ser evitados, redeclarndolos con el
mismo nombre con el que los defini la clase padre, a menos que la clase padre haya
definido un mtodo como final. Es posible accesar a los mtodos o miembros
redeclarados haciendo referencia a ellos con parent::
Ejemplo: Herencia de SimpleCiass
<?php
class ExtendCiass extends SimpleCiass
{
function displayVar()
{
echo "Extendiendo la clase\n";
parent: :displayVar();
}
}
$extended = new ExtendCiass() ;

$extended->displayVar();
?>
El resultado del ejemplo seria:
Extendiendo la clase
a valor por defecto
<?php
require "clase1.php";
class ExtendCiass extends MiCiase

{
11 Redefinicin de mtodo
function ver()
{
echo "clase con nuevo método <br>";
parent: :ver() ;
}
}
$extended = new ExtendCiass() ;
$extended->ver();
?>
68
lngenieria Web Guia didctica lB
Actividad N" 08 .1
: Elabora
Una monografa que explique cada uno de los patrones que se explican en el texto
base: Domine PHP 5.
Un cuadro comparativo de 5 editores Web de PHP, indicando ventajas y desventajas.
I.Autoevaluacin 08
: Programar
1. Un archivo PHP que Defina una Clase que permita determinar el cociente entero
de la divisin de 2 nmeros naturales por el mtodo de restas sucesivas hasta que
la ltima diferencia sea menor al divisor.
2. Un archivo PHP que utilice la autocarga de objetos.
3. Un archivo PHP por cada patrn explicado en el texto base: Domine PHP 5.
69
Ingeniera Web Gua didctica e:
Tema 09: Acceso a Bases de Datos con

PHP
Aprender es como remar contra corriente: en
cuanto se dej a, se retrocede.
E dward Benjamin Britten
Cules son las bases de datos a las

que se puede conectar PHP?
Introduccin al tema
Para acceder a bases de datos vamos a utilizar una extensin de PHP 5 denominadad
PDO - PHP Data Object. La cual nos servir para conectarnos a diferentes motores de
bases de datos existentes en el mercado, por ejemplo: MySQL, PostgreSQL y MS-SQL.
70
9.1 Acceso a Base de Datos con PDO

PHP Data Objects (PDO) es una extensin de PHP que utiliza controladores para
acceder a datos de diversos motores de base de datos como MySOL, MS-SOL, Oracle,
PostgreSOL, etc.
PDO provee una capa de abstraccin de datos, con la cual, la codificacin depende
menos de la base de datos que utilices, debido a que los mtodos tienen el mismo
nombre para todas las bases de datos que soporta, es decir, ya no tendremos que
escribir mysql_query() para ejecutar una sentencia SOL en MySOL y cuando migremos
a PostgreSOL cambiarla por pg_query().
PDO est disponible desde PHP 5.1 y requiere de las nuevas caractersticas de
programacin orientada a objetos que viene desde PHP 5, por lo que no corre en
versiones anteriores.
A continuacin te muestro un ejemplo de conexin con PDO.
<?php
JI PDO PHP DATA OBJECT
$tipobase="mysql";
$servidor="localhost";
$base="dbclase";
$dsn="$tipobase:dbname=$base; host=$servidor";
$user="root";
$password="";
$cnx = new PDO($dsn, $user, $password);
?>
Como podemos apreciar en la ltima lnea, se utiliza programacin orientada a objetos

para la conexin a la base de datos "dbclase" ubicada en un servidor MySOL.
Ahora veamos archivos complementarios para hacer el mantenimiento a una tabla

"persona" que contiene los campos: idpersona, nombres, apellidos y email.
lista.php
<?php
JI Archivo : lista.php
require "conexion.php";
$sentencia="SELECT * FROM persona";
$resultado=$cnx->query($sentencia) or die("Error SOL");
?>
<HTML>
<HEAD> <TITLE>Lista de Personas</TITLE></HEAD>
<BODY>
Número de Registros:
<?php
echo $resultado->rowCount()."<br>";?>
<form action='eliminar.php' method="post">
<table border="1">
<tr>
<th><input type="submit" value="Eiiminar"></th>
<th>ld</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>E-mail</th>
<th>Editar</th>
71
</tr>
<?php
wh ile($reg =$resultad o->fetch Object() ){
echo "<tr>
<td><input type='checkbox' name='chk[]' value='$reg->idpersona'></td>
<td>$reg->idpersona</td>
<td>$reg->nombres </td>
<td>$reg->apellidos </td>
<td >$reg->email </td>
<td><a href='editar.php?id=$reg->idpersona'>Editar</a></td>
</tr>";
}
?>
</table>
</form>
<a href='nuevo.php'>Nuevo Registro</a>
</BODY>
</HTML>
nuevo.php
<!DOCTYPE html PUBLIC "-/IW3CI/DTD XHTML 1.0 Transitionaii/EN"
"http://www.w3. org/TR/xhtmi1/DTD/xhtml1-transitional .dtd">
<html xmlns="http :l/www.w3.org/1999/xhtml">
<head>
<title>Nueva persona</title>
</head>
<body>
<form id="form 1" name="form 1" method="post" action="insertar. php">
<table width="200" border="O">
<tr><th colspan="2">Nueva persona</th> </tr>
<tr><td>Nombres</td>
<td><input type="text" name="txtnombres" id="txtnombres" /></td>
</tr>
<tr><td>Apellidos</td>
<td><input type="text" name="txtapellidos" id="txtapellidos" /></td>
</tr>
<tr><td>E-mail</td>
<td><input type="text" name="txtemail" id="txtemail" 1></td>
</tr>
<tr> <th colspan="2">
<input type="button" name="button" id="button" value="Cancelar"
onclick="location='lista.php"'/>
<input type="submit" name="button2" id="button2" value="Guardar" /></th>
</tr>
</table>
</form >
</body>
</html>
insertar.php
<?php
!/Archivo: insertar.php
require "conexion .php" ;
$nombres=$ _POST['txtnombres'];
72
Ingeniera Web Gui a didctica
$apellidos=$_POST['txtapellidos'];
$email=$ _POST['txtemai 1'];
$sqi="CALL pa_l nsertar('$nombres', '$apellidos' ,'$email')";
$cnx->query($sql);
header("location: lista.php");
?>
editar.php
<?php
$idpersona=$_GET['id'];
$sqi="SELECT * FROM persona WHERE idpersona=$idpersona";
$res=$cnx->query($sql);
$reg=$res->fetch0bject();
?>
<!DOCTYPE html PUBLIC "-/MJ3C//DTD XHTML 1.0 Transitionaii/EN"
"http://www. w3 .org/TR/xhtml1 /DTD/xhtml1 -transitional.dtd">
<html xmlns="http://www .w3.org/1999/xhtml">
<head>
<title>Editar pgina</title>
</head>
<body>
<form id="form 1" name="form 1" method="post" action="actualizar.php">
<input type="hidden" name="idpersona" value="<?php echo $idpersona?>"/>
<table width="200" border="O">
<tr>
<th colspan="2">Editar persona</th>
</tr>
<tr>
<td>Nombres</td>
<td><input type="text" name="txtnombres" id="txtnombres" value="<?php echo $reg-
>nombres?>"/></td>
</tr>
<tr><td>Apellidos</td>
<td><input type="text" name="txtapellidos" id="txtapellidos" value="<?php echo
$reg->apellidos?>" /></td>
</tr>
<tr><td>E-mail</td>
<td><input type="text" name="txtemail" id="txtemail" value="<?php echo $reg-
>email?>" /></td>
</tr>
<tr>
<th colspan="2"><input type="button" name="button" id="button" value="Cancelar"
onclick="location='lista.php"'/>
<input type="submit" name="button2" id="button2" value="Actualizar" /></th>
</tr>
</table>
</form>
</body>
</html>
actualizar.php
<?php
73
Ingeniera Web Gua didctica JJJ,\
//Archivo : insertar.php
$idpersona=$_POST['idpersona'] ;
$nombres=$_POST['txtnombres'];
$apellidos=$ _POST['txtapellidos'];
$emaii=$_POST['txtemail'] ;
$sqi="CALL pa_Actualizar($idpersona, '$nombres', '$apellidos', '$email')";
$cnx->q uery($sq 1);
header("location: lista.php");
?>
eliminar.php
<?php
$lista=$ _POST['chk'];
$cant=count($1ista) ; // Contando elementos del arreglo
if($cant>O){
foreach($1ista as $indice => $valor){
$cnx->query("CALL pa_Eiiminar($valor)");
}
}
header("location: lista.php") ;
?>
J[~J-~ Actividad N" 09 .1

! Programar
Un conjunto de pginas PHP para dar mantenimiento (listado, insercin, edicin y
eliminacin de registros) de una tabla denominada "vehculo". Los campos de la tabla
la debes definir, y debe tener mnimo 5 campos, incluyendo un identificador nico .
Una pgina o paginas PHP que permitan mostrar el uso de transacciones con PDO.
Un conjunto de pginas PHP para dar mantenimiento a la tabla "persona" utilizada en

el ejemplo, pero utilizando el motor de base de datos MS-SQL Server 2005 .
! Elabora
Una monografa que describa la forma en que se pueden ejecutar sentencias
preparadas, procedimientos almacenados y transacciones en PDO.
74
Ingeniera Web Gua didctica \-~i
IA~toevaluacin 09
! Programar
Un conjunto de pginas PHP para construir un sistema de generacin de exmenes.
Los profesores del Instituto WebMax desean disponer de un sistema con el que
generar los exmenes de test que realizan a los alumnos. Este sistema deber
disponer de las siguientes caractersticas:
El acceso al sistema estar restringido nicamente a usuarios registrados.
Cuando un usuario quiera utilizar el sistema deber proporcionar un
nombre de usuario y una contrasea vlidos .
Un usuario de administracin predeterminado podr dar de alta y de baja
usuarios para los profesores de la academia, as como modificar sus datos.
Los usuarios, una vez registrados en el sistema, podrn llevar a cabo las
siguientes acciones:
Dar de alta una pregunta de examen en el sistema. Adems de
proporcionar el texto de la pregunta, debern indicarse 4 posibles
respuestas . Los usuarios tambin podrn modificar y borrar las
preguntas existentes.
Ver un listado general con todas las preguntas y respuestas
almacenadas en el sistema.
Generar un examen a partir de las preguntas y respuestas
almacenadas en el sistema. Para ello debern indicarse el nmero
de preguntas a incluir en el examen, as como el nmero de
modelos de examen diferentes a generar. Del total de preguntas
almacenadas en el sistema, se elegirn tantas como haya indicado
el usuario, siguiendo un orden aleatorio. El formato de salida de
cada modelo ser de lista numerada, con una numeracin para las
preguntas y otra independiente para las respuestas .
Por ejemplo:
1. Pregunta sobre ...
a. Una respuesta a la pregunta
b. Otra respuesta
c. Otra
d. La ltima de esta pregunta
2. Pregunta sobre otra cosa
75
Ingeniera Web Guia didctica OJ\.J
Tema 10: Seguridad en la red
La verdadera educacin consiste en obtener lo

mejor de uno mismo. Qu otro libro se puede
estudiar mejor que el de la Humanidad?
MaJ1atma Gandhi
Qu mtodos de ataque son los ms

frecuentes en las aplicaciones web?
Introduccin al tema
PHP es un poderoso lenguaje e intrprete, el cual es capaz de acceder a archivos,
ejecutar comandos y abrir conexiones de red en el servidor. Esto hace que cualquier
cosa que sea ejecutada en un servidor Web sea insegura por naturaleza. PHP est
diseado especficamente para ser un lenguaje ms seguro para escribir programas
CGI que Perl o C.
76
10.1 Seguridad
Un sistema completamente seguro es prcticamente un imposible, de modo que el
enfoque usado con mayor frecuencia en la profesin de seguridad es uno que busque el
balance adecuado entre riesgo y funcionalidad. Si cada variable enviada por un usuario
requiriera de dos formas de validacin biomtrica (como rastreo de retinas y anlisis
dactilar), usted contara con un nivel extremadamente alto de confiabilidad . Tambin
implicara que llenar los datos de un formulario razonablemente complejo podra tomar
media hora, cosa que podra incentivar a los usuarios a buscar mtodos para esquivar
los mecanismos de seguridad.
La mejor seguridad con frecuencia es lo suficientemente razonable como para suplir los
requerimientos dados sin prevenir que el usuario realice su labor de forma natural, y sin
sobrecargar al autor del cdigo con una complejidad excesiva. De hecho, algunos
ataques de seguridad son simples recursos que aprovechan las vulnerabilidades de
este tipo de seguridad sobrecargada, que tiende a erosionarse con el tiempo.
Una frase que vale la pena recordar: Un sistema es apenas tan bueno como el eslabn
ms dbil de una cadena . Si todas las transacciones son registradas copiosamente
basndose en la fecha/hora, ubicacin, tipo de transaccin, etc. pero la verificacin del
usuario se realiza nicamente mediante una cookie sencilla, la validez de atar a los
usuarios al registro de transacciones es mermada severamente.
Cuando realice pruebas, tenga en mente que no ser capaz de probar todas las
diferentes posibilidades, incluso para las pginas ms simples. Los datos de entrada
que usted puede esperar en sus aplicaciones no necesariamente tendrn relacin
alguna con el tipo de informacin que podra ingresar un empleado disgustado, un
cracker con meses de tiempo entre sus manos, o un gato domstico caminando sobre el
teclado. Es por esto que es mejor observar el cdigo desde una perspectiva lgica, para
determinar en dnde podran introducirse datos inesperados, y luego hacer un
seguimiento de cmo esta informacin es modificada, reducida o amplificada.
Internet est repleto de personas que tratan de crearse fama al romper la seguridad de
su cdigo, bloquear su sitio, publicar contenido inapropiado, y por lo dems haciendo
que sus das sean ms interesantes. No importa si usted administra un sitio pequeo o
grande, usted es un objetivo por el simple hecho de estar en lnea, por tener un servidor
al cual es posible conectarse. Muchas aplicaciones de cracking no hacen distinciones
por tamaos, simplemente recorren bloques masivos de direcciones IP en busca de
vctimas. Trate de no convertirse en una.
Hoy en da, las bases de datos son componentes cardinales de cualquier aplicacin
basada en web, permitiendo que los sitios web provean contenido dinmico. Debido a
que informacin considerablemente sensible o secreta puede ser almacenada en una
base de datos, usted debe considerar seriamente la proteccin de sus bases de datos.
Para recuperar o almacenar cualquier informacin necesita conectarse a la base de

datos, enviar una consulta vlida , recoger el resultado y cerrar la conexin . Hoy en da,
el lenguaje de consultas usado comnmente en estas interacciones es el Lenguaje de
Consultas Estructurado (SOL por sus siglas en ingls). Puede apreciar cmo un
atacante puede intentar acometidas con una consulta SOL.
Como puede suponer, PHP no puede proteger su base de datos por s solo. Las
siguientes secciones estn dirigidas a servir de introduccin a los conceptos bsicos de
cmo acceder y manipular bases de datos desde scripts PHP.
77
Ingeniera Web Gua didctica JJ.i
Mantenga en mente esta simple regla : proteccin en profundidad . Entre ms acciones

tome para incrementar la proteccin de su base de datos, menor ser la probabilidad de
que un atacante tenga xito exponiendo o abusando de cualquier informacin
almacenada. Un buen diseo del esquema de la base de datos y de la aplicacin basta
para lidiar con sus mayores temores.
10.2 Uso de Register Global

Quizs el cambio ms controversia! en la historia de PHP se ha dado cuando la directiva
register_globals pas de tener como valor por defecto ON al valor OFF en PHP 4.2.0.
La dependencia sobre esta directiva era bastante comn y muchas personas ni siquiera
estaban enteradas de que exista y asuman que ese era el modo en que PHP
trabajaba. Esta pgina explicar cmo puede llegar a escribirse cdigo inseguro con
esta directiva pero tenga en mente que no es la directiva misma la que es insegura sino
el uso inapropiado de ella.
Cuando se encuentra activa, la directiva register_globals inyectar sus scripts con todo
tipo de variables, como variables de peticiones provenientes de formularios HTML. Esto
junto con el hecho de que PHP no requiere la inicializacin de variables significa que es
muy fcil escribir cdigo inseguro. Fue una decisin difcil , pero la comunidad de PHP
decidi deshabilitar esta directiva por defecto. Cuando est habilitada, las personas
usan variables sin saber con seguridad de dnde provienen y solo queda asumir.
1~1 Actividad N" 10 1
! Investigar
Casos reales de ataques efectuados a aplicaciones Web alojadas en Internet. Indicar
la fecha, sitio web y tipo de ataque.
! Elabora
Una monografa que describa los diversos ataques de los que puede ser vctima una
aplicacin Web.
1 Autoevaluacin 1 O
! Programar
1. Programar un formulario para el logeo de usuarios, utilizando el cifrado de contraseas
(con MD5) y sesiones.
2. Escriba un formulario que solicite nombres y los almacene en una sesin hasta que el
usuario cierre la sesin .
o El formulario contiene un campo para escribir un nombre (una o varias palabras).
o El formulario muestra los nombres que se han escrito anteriormente.
o La pgina contiene un enlace para cerrar la sesin.
3. Escriba una pgina que compruebe si el navegador permite crear cookies y se lo diga al
usuario (mediante una o ms pginas) .
4. Escriba una pgina que permita crear una cookie de duracin lim itada, comprobar el
estado de la cookie y destruirla.
78
Ingeniera Web Gua didctica t!Jm
Tema 11: AJAX con PHP
Dos excesos deben evitarse en la educacin de la

juventud; demasiada severidad, y demasiada
dulzura.
Platn
Qu ventajas nos da el uso de AJAX

en el desarrollo de aplicaciones web?
Introduccin al tema
AJAX proviene de los trminos ingleses
Asyncronous Javascript And XML. AJAX no es una tecnologa sino muchas tecnologas,
cada una con sus beneficios y virtudes propias, unindose para formar una poderosa
combinacin .
79
Ingeniera Web Gua didctica rmT.J
11.1 AJAX
AJAX incorpora:
Presentacin basada en estndares usando XHTML y CSS.
Exhibicin e interaccin dinmicas usando el Document Object Model;
Intercambio y manipulacin de datos usando XML and XSL T;
Recuperacin de datos asincrnica usando XMLHttpRequest;
JavaScript poniendo todo junto.
Modelo clsico de Aplicaciones Web
ln t er!uc: Gle US\Jario
lla:s es de cl~to :>, proccsmnrcn(o,

5ste n1as le-g tl do.s
modelo clsico
de a plicadones web
Modelo AJAX de Aplicaciones Web
..
. .
90-t!Ct u~J

Nrrr
--.
. 'l .
trant sr:>orte hUJ ( s )
datos XML
> .: ''')',;'!). '"~. l
modelo Ajax
de aplicaciones web
80
Ingeniera Web Guia didctica !m
Utilizando una lnea de tiempo las aplicaciones web seran de la siguiente forma :
modelo clsico de apf:icadones Vil1eb (sncrono)
rnodelo AJa x de aplicaciones web (asncrono)
Los mayores desafos al desarrollar aplicaciones web que utilizan AJAX, son por el lado
del diseo web, debido a que se olvidar varias limitaciones de la Web, y comenzar a
imaginar un rango ms amplio y rico de posibilidades.
81
Ingeniera Web Gua didctica !11
Actividad N 11 1
: Investigar
Las diversas aplicaciones de AJAX en las aplicaciones web .
: Elabora
Una monografa que describa los 1O ejemplos creados con XAJAX (Framework para
AJAX en PHP) y 1O ejemplos con JQuery.
82
Ingeniera Web Gua didctica llw
i- 1
~-~utoevaluacin 11
! Programar
111
1. Una pgina Web que utilice AJAX que muestre una lista desplegable de
departamentos del Per, y cada vez que se cambie de departamento, la lista
de provincias cambia dinmicamente.
2. Una pgina Web que contenga un formulario para el registro de nuevos

usuarios y validar el correcto ingreso de datos utilizando AJAX .
3. Una pgina Web que contenga tres botones y al presionar cada uno, la hoja de
estilos cambiar de acuerdo al botn presionado.
4. Una pgina Web que contenga un formulario con 1O cajas de texto , y cada vez
que el usuario escriba o modifique el contenido de alguna de ellas , se muestre
en la parte inferior de la pgina, la suma de los datos ingresados en las 1O
cajas de texto .
83
Ingeniera Web Gua didctica ijJj:i
Solucionario
1. e
2. 8
1. 8 3. E
2. e 4. e
3. D 5. e
4. D 6.
5. F 7.
6. V 8.
7. V 9.
8. V 10. -
9. V
1. A
2. e
3. e
4. D
5. e
6. D
7. 8
8. V
9. V
10. V
1. e
2. e
3. D
4. e
5. 8
6.
7.
8.
9.
1O. -
1. A
2. A
3. e
4. E
5. e
6. V
7. F
8. V
84
Ingeniera Web Gua didctica m!~
Referencias bibliogrficas
DLpez Quijada J. Domine PHP 5. 1era edicin . Mxico. Alfaomega Grupo Editor.
Suehring, Steve. La Biblia de PHP 6 y MySQL. 1ra edicin. Espaa: Editorial
Anaya Multimedia .
Willard, Wendy. Fundamentos de programacin en HTML. 1era. Edicin .
Colombia. Ed . Me Graw-Hill lnteramericana. 2002 . 625 p Cdigo : 005. 72/W58-
011191
Ors Cabello, Juan Carlos. Navegar en internet diseo de pginas web
interactivas con JavaScript y CSS. 3era . Edicin. Mxico. Ed. Alfaomega Grupo
Editor. 2002 . 355 p.
Valdivia , Dilan. Programacin con Java Script. 1era Edicin . Lima. Ed . Librera
editorial Macro. 2001. 596 p.
Gutirrez Rodrguez , Abraham; Bravo Garca, Gins. PHP a travs de ejemplos.
1era Edicin . Mexico DF . Ed . Alfaomega Grupo Editor. 2004. 412 p.
Celma Gimnez , Matilde; Casamayor Rdenas , Juan Carlos; Mota Herranz, Laura .
Base de datos relacionales. 1era Edicin. Madrid . Ed. Pearson Educacin. 2003.
296p.
Korth, Henry; Silberschatz, Abraham . Fundamentos de base de Datos. 2da
Edicin . Mad rid. Ed. Me Graw-Hill lnteramericana. 1993. 739 p.
85

190 41 196 139

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

190 41 196 139

Uploaded by

Copyright:

Available Formats

Reciba as esora virtual en: WW'\IV.USS.edu.

INGENI ERA WEB

Dr. Humberto Llempn Coron el lng. Franklin Te r n Santa Cru z

Vicerrector acadmico : Ao acadmico:

Decano de la Facultad de Ciclo acadmico

PROFESOR Franklin Tern Santa Cruz

En la sociedad en la que vivimos, la Internet ha empezado a formar parte del da a da

Es importante indicarte que el estudio a distancia es una gran responsabilidad, debido a

lng. Osear E. Capuay Uceda

! Desarrolla sistemas de informacin basados en web

Contenidos Semanas de estudio

Tema 01: World Wide Web Semana 01

"Webs Dinmicas con PHP"

Contenidos Semanas de estudio

! Lpez Quijado J. (2008). Domine PHP 5. 1era edicin. Mxico. Alfaomega

Orientaciones generales para el estudio

Te saluda el lng. Osear E. Capuay Uceda y te felicita por la

Para la presente experiencia curricular se te ha proporcionado el

Te recomiendo que si eres un trabajador, debes elaborar un horario o un calendario de

En cuanto a las evaluaciones, el primer examen parcial se realizar luego de terminada la

Es importante escoger un ambiente de estudio adecuado, un lugar tranquilo y con las

Finalmente para desearte los mayores logros en la meta de convertirte en un profesional y

Tema 01 World Wide Web

.............. . ..... . ... .......... ;. ...... .

E a de Ingeniera Web con la introduccin de

1.1 Definicin de World Wide Web

La World Wide Web, es un sistema cliente servidor basado en hipertexto, sus

1.2 Historia de la Web

Berners-Lee us un NeXTcube como el primer servidor web del mundo y tambin

En el ao de 1991, Berners-Lee envi un pequeo resumen del proyecto World Wide

* WWW slo requera enlaces unidireccionales en vez de los bidireccionales. Esto

1.3 Funcionamiento de la Web

El proceso de navegacin de un usuario en la web se realiza de la siguiente manera:

El primer paso consiste en el establecimiento de una conexin del usuario a Internet.

a)WWW 111.- Preguntas de ensayo

2. Marque el nombre que no le

4. Se anuncia que la Web ser

11.- Determina las proposiciones

Tema 02: HTML- HyperText Markup

La p gina WEB es el sop orte interactivo ideal p ara ofrecer un servicio,

pginas se vean ig uales en todos los navegadores?

<tag> Modelo de Inicio de una etiqueta .

La cabecera se define con la etiqueta <HEAD> y su finalizacin es con </HEAD> . En la

Por lo mencionado anteriormente, podemos conclui r que la estructura de un documento

3.1 Formato de Texto con HTML

1.Listas desordenadas (sin numerar)

El texto aparecer como sigue:

3.3 Comentarios no visibles en la pantalla

Tema 03: Java Script

No pensbamos en el negocio, sino en Internet

Existe alguna relacin entre Java y

3.1 Java Script

Dentro de estos elementos ser donde se puedan poner funciones en JavaScript.

<script language="JavaScript" src ="archivo.js"> </script>

alert("Hola, Bienvenido al PEaD de la USS!");

3.2 Elementos bsicos

var i = 1; 11 Aqui esta el comentario

"Soy una cadena"

Tambin podemos especificar arrayso vectores :

vacaciones = ["Navidad" ' "Semana Santa" ' "Verano"] '

De este modo, el siguiente literal:

"Javascript (\xA9 2002)"

se corresponde con la cadena:

2. <?echo ("esta es la más simple, una instrucción de procesado SGML

echo makeyogurt ("mora"); // No funcionará de la manera

11 Imprime: Ha eliminado C:\.?

11 Imprime: Ha eliminado C:\.?