Texto Universitario IngWeb

ASIGNATURA
INGENIERA WEB
Ingeniera Web
VISIN
Ser una de las 10 mejores universidades
privadas del Per al
ao 2020,
reconocidos por nuestra excelencia
acadmica y vocacin de servicio, lderes
en formacin integral, con perspectiva
global; promoviendo la competitividad del
pas.
MISIN
Somos una universidad privada, innovadora y
comprometida con el desarrollo del Per, que
se dedica a formar personas competentes,
ntegras y emprendedoras, con visin
internacional; para que se conviertan en
ciudadanos responsables e impulsen el
desarrollo de sus comunidades, impartiendo
experiencias de aprendizaje vivificantes e
inspiradoras; y generando una alta valoracin
mutua entre todos los grupos de inters.
Docente
Miguel ngel Crdova Sols
Material publicado con fines de estudio
Tercera Edicin
Huancayo, 2014
Pg.
Exigencia acadmica para grandes cambios!
Ingeniera Web
PRESENTACIN
La ingeniera web es una asignatura que le permitir al alumno la aplicacin de
metodologas sistemticas, disciplinadas y cuantificables al desarrollo eficiente, operacin y
evolucin de aplicaciones de alta calidad en la World Wide Web. La competencia a
desarrollar es: Asignatura de especialidad que le permitir al analizar los conceptos y
mtodos de procesos de software, mtodos de desarrollo, mtricas e indicadores,
caractersticas y atributos de calidad y reingeniera en el desarrollo de aplicaciones Web as
como las buenas prcticas en estrategias y metodologas para la evaluacin y promocin de

sitios web mostrando perseverancia y responsabilidad en las actividades acadmicas.
En general, los contenidos que se dividen son: Introduccin a la Ingeniera Web: Cmo
elaboramos un sitio web?, Procesos Ingeniera de Software en la Ingeniera Web: Del
Anlisis y diseo a las aplicaciones web, Mtodos de desarrollo de la Ingeniera Web:
Desarrollo, metodologas, tcnicas. Pruebas y calidad. Mtricas web, Ingeniera web reversa
y Comercio Electrnico: E-commerce.
Es recomendable que el estudiante desarrolle una permanente lectura de estudio junto a una
minuciosa investigacin de campo, va internet, la consulta a expertos y los resmenes. El
contenido del material se complementar con las lecciones presenciales y a distancia que
se desarrollan en la asignatura.
Agradezco a todas las autoridades de la Universidad Continental as como a los estudiantes por
sus comentarios y sugerencias que me permitieron elaborar el presente manual.
Miguel ngel Crdova Sols

Docente
Pg.
Ingeniera Web
NDICE
Presentacin. .................................................................................................................................... 3
ndice. ............................................................................................................................................... 4
PRIMERA SEMANA:. ............................................................................................................... 5
Introduccin a la Ingeniera Web: Cmo elaboramos un sitio web?. .............................................. 5
Actividades. ..................................................................................................................................... 12
SEGUNDA SEMANA:. ............................................................................................................ 16
Sitios web dinmicos. ...................................................................................................................... 16
Actividades. ..................................................................................................................................... 48
TERCERA SEMANA:. .............................................................................................................. 52
Mtodos de desarrollo de la Ingeniera Web: Desarrollo, metodologas, tcnicas. Pruebas
y calidad. Mtricas web................................................................................................................... 52
Actividades. ..................................................................................................................................... 74
Frameworks PHP y Gestores de Base de datos. .............................................................................. 77
Actividades. ................................................................................................................................... 109
CUARTA SEMANA:. ............................................................................................................. 122
Servidor web en Windows y Linux: Arquitecturas y tecnologas. .................................................. 122
Actividades. ................................................................................................................................... 124
QUINTA SEMANA:. ............................................................................................................. 125
Content Management System. ..................................................................................................... 125
Actividades. ................................................................................................................................... 127
SEXTA SEMANA: ................................................................................................................ 135
Negocios en la web. ...................................................................................................................... 135
Actividades. ................................................................................................................................... 137
SEPTIMA SEMANA: ............................................................................................................ 140
Desarrollo de aplicaciones mviles. .............................................................................................. 140
Actividades. ................................................................................................................................... 143
Bibliografa. .................................................................................................................................. 148
Pg.
Ingeniera Web
UNIDAD N I
SESIN I:
Introduccin a la Ingeniera Web: Cmo elaboramos un sitio web?
LOGRO:
Discrimina los elementos web y aplica CSS.
INFORMACIN:
1.1 La WWW como servicio de Internet

La WWW (World Wide Web) o, de forma ms coloquial, la web, se ha convertido, junto con
el correo electrnico, en el principal caballo
de batalla de Internet. sta ha dejado de ser una inmensa biblioteca de pginas estticas
para convertirse en un servicio que permite acceder a multitud de prestaciones y funciones,
as como a infinidad de servicios, programas, tiendas, etc.
1.2 Fundamentos de la web

El xito espectacular de la web se basa en dos puntales fundamentales: el protocolo HTTP
y el lenguaje HTML. Uno permite una implementacin simple y sencilla de un sistema de
comunicaciones que nos permite enviar cualquier tipo de ficheros de una forma fcil,
simplificando el funcionamiento del servidor y permitiendo que servido- plificando el
funcionamiento del servidor y permitiendo que servidores poco potentes atiendan miles de
peticiones y reduzcan los costes de despliegue. El otro nos proporciona un mecanismo de
composicin de pginas enlazadas simple y fcil, altamente eficiente y de uso muy simple.
1.3 El lenguaje HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es
el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para
Pg.
Ingeniera Web
describir la estructura y el contenido en forma de texto, as como para complementar el
texto con objetos tales como imgenes. HTML se escribe en forma de "etiquetas", rodeadas
por corchetes angulares (<,>).HTML tambin es usado para referirse al contenido del tipo
de MIME text/html o todava ms ampliamente como un trmino genrico para el HTML, ya
sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida
directamente de SGML (como HTML 4.01 y anteriores).
Ejemplo bsico:
1.4 Formularios Web
Pg.
Ingeniera Web
Pg.
Ingeniera Web
Pg.
Ingeniera Web
Pg.
Ingeniera Web
Pg.
10
Ingeniera Web
Pg.
11
Ingeniera Web
INFORMACIN
CLAVE:
EL HTML es el lenguaje de las pginas web
HTML
HTML +
XML
(HTML)
HTML 5
ACTIVIDAD:
PREGUNTA 1: Elabore la pgina web que se muestra a continuacin, considerando las

recomendaciones Ingenieriles indicados en clase, las imgenes se desplazan dentro de su celda.
Pg.
12
Ingeniera Web
PREGUNTA 2: Elabore el siguiente sitio web empleando CSS como archivo adjunto.
Ttulo
Define los estilos (index):
Hojas de estilo en cascada
SubTtulo
CSS redirige aqu. Para otras acepciones, vase CSS (desambiguacin).

Las hojas de estilo en cascada (en ingls Cascading Style Sheets), CSS es un lenguaje usado para definir la
presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). El W3C
(World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que
servirn de estndar para los agentes de usuario o navegadores.
La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su
presentacin.
Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es ms
importante que un bloque etiquetado como <H2>. Versiones ms antiguas de HTML permitan atributos
extra dentro de la etiqueta abierta para darle formato (como el color o el tamao de fuente). No obstante,
cada etiqueta <H1> deba disponer de la informacin si se deseaba un diseo consistente para una pgina y,
adems, una persona que lea esa pgina con un navegador pierde totalmente el control sobre la
visualizacin del texto.
Contenido1
Cuando se utiliza CSS, la etiqueta <H1> no debera proporcionar informacin sobre como va a ser
visualizado, solamente marca la estructura del documento.
La informacin de estilo separada en una hoja de estilo, especifica cmo se ha de mostrar <H1>:
color, fuente, alineacin del texto, tamao y otras caractersticas no visuales como definir el
volumen de un sintetizador de voz (vase Sintetizacin del habla), por ejemplo.
Contenido2
La informacin de estilo puede ser adjuntada tanto como un documento separado o en el mismo
documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o
en cada etiqueta particular mediante el atributo "style".
Contenido1
DESDE LA PGINA 2 ASIGNAR LAS CLASES CSS
Pgina 2: html.html
HTML
HyperText Markup Language
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de
marcado predominante para la elaboracin de pginas web. Es usado para describir la estructura y el
contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. HTML
Pg.
13
Ingeniera Web
se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML tambin puede describir,
hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el
cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
HTML tambin es usado para referirse al contenido del tipo de MIME text/html o todava ms ampliamente
como un trmino genrico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y
posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).
Pgina 3: W3C
W3C
World Wide Web Consortium
El World Wide Web Consortium, abreviado W3C, es un consorcio internacional que produce
recomendaciones para la World Wide Web. Est dirigida por Tim Berners-Lee, el creador original de URL
(Uniform Resource Locator, Localizador Uniforme de Recursos), HTTP (HyperText Transfer Protocol,
Protocolo de Transferencia de HiperTexto) y HTML (Lenguaje de Marcado de HiperTexto) que son las
principales tecnologas sobre las que se basa la Web.
Organizacin de la W3C
Fue creada el 1 de octubre de 1994 por Tim Berners-Lee en el MIT, actual sede central del consorcio.
Unindose posteriormente en abril de 1995 INRIA en Francia, reemplazado por el ERCIM en el 2003 como el
husped europeo del consorcio y Universidad de Kei (Shonan Fujisawa Campus) en Japn en septiembre de
1996 como husped asiatico. Estos organismos administran el consorcio, el cual est integrado por:
Miembros del W3C. A abril de 2010 contaba con 330 miembros (lista completa)
Equipo W3C (W3C Team) 65 investigadores y expertos de todo el mundo (Directorio)
Oficinas W3C (W3C Offices). Centros regionales establecidos en Alemania y Austria (oficina
conjunta), Australia, Benelux (oficina conjunta), China, Corea del Sur, Espaa, Finlandia, Grecia, Hong
Kong, Hungra, India, Israel, Italia, Marruecos, Suecia y Reino Unido e Irlanda (oficina conjunta)
(Oficinas W3C.)
La oficina espaola del W3C, establecida en el 2003, est albergada por la Fundacin CTIC en el Parque
Cientfico Tecnolgico de Gijn (Principado de Asturias).
PREGUNTA 3:
Crear el sitio web de Mundo Verde organizacin que concientiza acerca la ecologa y la
conservacin del Medio Ambiente en la ciudad de Huancayo, las imgenes lo encontrar en el
aula virtual. Est pgina ser creada en marcos en la disposicin que Ud. considere necesario,
adems debe contener al menos una animacin.
Los diseos tales tipos de letras, colores, tamaos; sern a criterios del estudiante.
El men de los contenidos es:
1. Presentacin (Colocar informacin general de Mundo Web)
2. Noticias
2.1 Noticia 1
2.2 Noticia 2
Pg.
14
Ingeniera Web
2.3 Noticia 3
2.4 Noticia 4
3. Galera de afiches
4. Video
5. Formulario de consulta: Nombre, Email, Ciudad, Comentario, Botn Enviar
Pg.
15
Ingeniera Web
SESIN II:
Sitios web dinmicos

LOGRO:
Ejecuta funcionalidades a los formularios web mediante JavaScript.
INFORMACIN:
2.1 HTML Dinmico
2.2 JAVA Script
Pg.
16
Ingeniera Web
Pg.
17
Ingeniera Web
Pg.
18
Ingeniera Web
Pg.
19
Ingeniera Web
Pg.
20
Ingeniera Web
Pg.
21
Ingeniera Web
Pg.
22
Ingeniera Web
Pg.
23
Ingeniera Web
Pg.
24
Ingeniera Web
2.3 Funciones y programacin orientada a objetos
Pg.
25
Ingeniera Web
Pg.
26
Ingeniera Web
Pg.
27
Ingeniera Web
Pg.
28
Ingeniera Web
Ejemplos:
BOTN QUE SALUDA CON ALERT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boton que saluda</title>
<script language="javascript" >

function Saludo()
{
alert('Hola');
}
</script>
</head>
<BODY>
<FORM>
<p>
<label>
<input type="button" name="boton1" id="boton1"

value="Enviar" onClick="Saludo()">
</label>
</p>
</FORM>
</BODY>
</html>
Pg.
29
Ingeniera Web
SALUDO DOCUMENT.WRITE
<head>
<title>Documento sin título</title>

function Saludo()
{
document.write('Hola');
}
</script>
</head>
<BODY>
<FORM>
<p>
<label>

value="Enviar" onClick="Saludo()">
</label>
</p>
</FORM>
</BODY>
</html>
Pg.
30
Ingeniera Web
SALUDOS CON PROMPT

<HTML>
<HEAD>
<TITLE>Ejemplo de bienvenida a partir de un nombre </TITLE>
<script language="javascript">
function Saludo()
{
var hh = prompt('Ingresa tu nombre','');
alert('Bravo ' +hh+ '! estas por hacer una visita a
un sitio estupendo... ');
parent.location='http://www.continental.edu.pe';
}
</script>
</HEAD>
<BODY bgcolor="white">
<CENTER><FORM>
<input name="Boton" type="button" onClick

="Saludo()" value="Bienvenida">
</FORM>
</CENTER>
</body>
</html>
Pg.
31
Ingeniera Web
SUMA CON PROMPT

<HTML>
<HEAD>
<TITLE>Ejemplo de bienvenida a partir de un nombre </TITLE>
function Suma()
{
var n1 = prompt('Ingresa primer numero','');
var n2 = prompt('Ingresa segundo numero','');
var s=parseInt(n1)+parseInt(n2);
alert('La suma de ' +n1+ ' y '+n2+' es: '+s);
}
</script>
</HEAD>
<CENTER><FORM>
<input name="Boton" type="button" onClick ="Suma()"

value="Sumar">
</FORM>
</CENTER>
</body>
</html>
Pg.
32
Ingeniera Web
SALUDO CON INGRESO DE NOMBRE
<html>
<head>
<title>Documento de salida</title>

function Saludo(a)
{
var a;
alert('Hola '+a);
}
</script>
</head>
<BODY>
<FORM name="formulario">
<p>Ingrese tu nombre
<label>
<input type="text" name="nombre" id="nombre">
</label>
</p>
<p>
<label>

value="Saludar"
onClick="Saludo(formulario.nombre.value)">
</label>
</p>
</FORM>
</BODY>
</html>
Pg.
33
Ingeniera Web
DOCUMENTO DE SALUDO Y DESPEDIDA
<html>
<head>
<title>Documento de salida</title>

function Saludo(a,b)
{
var a,b;
alert('Hola '+a+' '+b);
}
function Despedir(a,b)
{
var a,b;
alert('Adios '+a+' '+b);
}
</script>
</head>
<BODY>
<FORM name="formulario">
<p>Ingrese tu nombre
<label>
<input type="text" name="nombre" id="nombre">
</label>
</p>
<p>Ingrese tu apellido
<input type="text" name="nombre2" id="nombre2">
</p>
<p>
<label>

value="Saludar"
onClick="Saludo(formulario.nombre.value,formulario.
nombre2.value)">
</label>
<label>
<input type="submit" name="button" id="button"

value="Despedir"
onClick="Despedir(formulario.nombre.value,formulari
o.nombre2.value)">
</label>
</p>
</FORM>
</BODY>
</html>
Pg.
34
Ingeniera Web
ABRIR VENTANA EMERGENTE

<HTML>
<HEAD>
<TITLE>Abre ventana emergente </TITLE>
<script language="JavaScript">
function Abreventana() {
msg=open("","schermo","toolbar=no,directories=no,me
nubar=no,width=180,height=250,resizable=yes");
msg.document.write("<HEAD><TITLE>Enlaces</TITLE></H
EAD><body>");
msg.document.write("<B><CENTER><font
size=4>Enlaces Web</font></CENTER></B><BR><A
HREF=http://www.google.com.pe
target=home>Google</A><br>");
msg.document.write("<A HREF=http://www.yahoo.es
target=home>Yahoo</A><br>");
msg.document.write("<A
HREF=http://www.sunat.gob.pe
target=home>SUNAT</A><br>");
msg.document.write("<A
HREF=http://www.continental.edu.pe
target=home>Continental</A><BR>");
}
</script>
</HEAD>
<form>
<input type="button" value="Ver Enlaces en ventana

emergente" onClick="Abreventana()">
</form>
</body>
</html>
Pg.
35
Ingeniera Web
2.4 Estructuras de programacin Java Script

CONDICIONALES:
Operadores condicionales
Pg.
36
Ingeniera Web
Estructura de una condicional:
Ejemplo:
Pgina que pida dos nmeros y muestre el mayor de ellos:
<html>
<head>
<title>Mayor de dos nmeros</title>
function Mayor()
{
var a,b;
a= prompt('Ingrese primer nmero','');
b= prompt('Ingrese segundo nmero','');
if (a>b)
alert('El mayor es:'+a);
else
alert('El mayor es:'+b);
}
</script>
</head>
<BODY>
<FORM>
<p>
<label>
<input type="button" name="boton1" id="boton1" value="Mayor" onClick="Mayor()">
</label>
</p>
</FORM>
</BODY>
</html>
Pgina que pida tres nmeros y muestre el mayor de ellos:
<html>
<head>
<title>Mayor de tres nmeros</title>
function Mayor3()
{
var a,b,c;
a= prompt('Ingrese primer nmero','');
b= prompt('Ingrese segundo nmero','');
c= prompt('Ingrese tercer nmero','');
if (a>b && a>c)
alert('El mayor es:'+a);
Pg.
37
Ingeniera Web
if (b>a && b>c)
alert('El mayor es:'+b);
if (c>a && c>b)
alert('El mayor es:'+c);
}
</script>
</head>
<BODY>
<FORM>
<p>
<label>
<input type="button" name="boton1" id="boton1" value="Mayor" onClick="Mayor3()">
</label>
</p>
</FORM>
</BODY>
</html>
BUCLES:
Pgina que genera nmeros desde el cero hasta el nmero ingresado por prompt
<html>
<head>
<title>Generar numeros</title>
function Generanumero()
{
var i, num = prompt('Ingrese hasta que numero deseas generar desde el cero:','');
for (i=0; i<=parseInt(num);i++)
document.write(i+"<br>");
}
</script>
</head>
<BODY>
<FORM>
<p>
<label>
<input type="button" name="boton1" id="boton1" value="Generar numeros"
onClick="Generanumero()">
</label>
</p>
</FORM>
</BODY>
</html>
Pg.
38
Ingeniera Web
Pgina que genera nmeros pares el cero hasta el nmero ingresado por prompt
<html>
<head>
function Pares()
{
var i, num = prompt('Ingrese hasta que numero deseas generar desde el cero:','');
for (i=0; i<=parseInt(num);i+=2)
}
</script>
</head>
<BODY>
<FORM>
<p>
<label>
<input type="button" name="boton1" id="boton1" value="Pares" onClick="Pares()">
</label>
</p>
</FORM>
</BODY>
</html>
Realizar el mismo ejemplo con do:
<html>
<head>
{
var i=0, num = prompt('Ingrese hasta que numero deseas generar desde el cero:','');
do
{
i=i+1;
}
while(i<=parseInt(num));
}
</script>
</head>
<BODY>
<FORM>
<p>
<label>
</label>
Pg.
39
Ingeniera Web
</p>
</FORM>
</BODY>
Con while
<html>
<head>
{
var i=0, num = prompt('Ingrese hasta que numero deseas generar desde el cero:','');
while(i<=parseInt(num))
{
i=i+1;
}
}
</script>
</head>
<BODY>
<FORM>
<p>
<label>
</label>
</p>
</FORM>
</BODY>
</html>
2.5 Controles Web

2.5.1. CONTROL: LISTA/MENU
SELECT: Sintaxis bsica

<select name="nombre" size="3" multiple>
<option value="valor 1">Texto de opcin 1</option>
<option value="valor 2" selected>Texto de opcin 2</option>
</select>
Pg.
40
Ingeniera Web
Muestra (seleccin mltiple):

Texto de opcion 1
Texto de opcion 2
Texto de opcion 3
manteniendo apretada la tecla Ctrl (control) puede seleccionarse ms de una opcin
Muestra (seleccin simple):

Texto de opcion 1
Texto de opcion 2
Texto de opcion 3
valor de size "3"
Texto de opcion 4
valor de size "1"
solo puede seleccionarse una opcin en cualquiera de los dos casos
SELECT: Mtodos del objeto

mtodo descripcin
focus
coloca el foco en el select
SELECT: Eventos del objeto

evento
descripcin
onFocus
se produce al colocar el foco en el select
onBlur
se produce al abandonar el select (al quitar el foco)
onChange se produce al realizar un cambio de seleccin

OPTION: Propiedades principales
propiedad
descripcin
value
valor asociado a cada opcin del select. Es invisible al usuario pero es el

valor que se enva junto al formulario.
text
es el texto que ve el usuario que se encuentra contenido entre las etiquetas

<option> y </option>
selected
indica si una opcin est seleccionada.
selectedIndex Da acceso a la opcin (option) que ha seleccionado el usuario.
Pg.
41
Ingeniera Web
index
al igual que en form, o checkbox, este array contiene todas las opciones
pertenecientes a un select y tambien comienza por 0.
length
Cuenta la cantidad de opciones (option) que conforman un select
OPTION: Mtodos y eventos

El objeto option no posee mtodos ni eventos propios.
Sintaxis bsica general: llamando a las propiedades
En la siguiente lista veremos la forma correcta de llamar a cada propiedad en ambos
objetos.
PROPIEDAD OBJETO SINTAXIS
name
SELECT
nombre_formulario.nombre_select.name
size
SELECT
nombre_formulario.nombre_select.size
nombre_formulario.nombre_select.options[index]
se refiere a una opcin especfica
option
SELECT
formulario.select.options[formulario.select.selectedIndex].pr
opiedad
se refiere a la opcin seleccionada por el usuario
disabled
SELECT
nombre_formulario.nombre_select.disabled = true/false
multiple
SELECT
nombre_formulario.nombre_select.multiple = true/false
type
SELECT
nombre_formulario.nombre_select.type
nombre_formulario.nombre_select.options[index].value
se refiere a una opcin especfica
value
OPTION
formulario.select.options[formulario.select.selectedIndex].v
alue
se refiere a la opcin seleccionada por el usuario
text
OPTION
nombre_formulario.nombre_select.options[index].text
selected
OPTION
nombre_formulario.nombre_select.options[index].selected =
true/false
selectedIndex
OPTION
formulario.select.options[formulario.select.selectedIndex].pr
opiedad
index
OPTION
nombre_formulario.nombre_select.options[index]
length
OPTION
nombre_formulario.nombre_select.options.length
Pg.
42
Ingeniera Web
Ejemplos:
Elaborar la siguiente pgina:
La lista depleglar los nombres de las ciudades de Lima, Huancayo, Arequipa y Cusco.
<head>
<title>Ejemplo Select</title>
</head>
<script languaje="javascript">
function habilitar(formu1)
{
if (formu1.ciudad[0].selected == true)
{
formu1.mensaje.value=formu1.nombre.value+" vive en
"+formu1.ciudad[0].value;
}
{
}
{
}
{
}
}
Pg.
43
Ingeniera Web
</script>
<body>
<form id="form1" name="formu1" method="post" action="">
<table width="550" border="0" cellspacing="10">
<tr>
<td>Ingrese nombre:</td>
<td><label>
<input type="text" name="nombre" id="nombre" />
</label></td>
</tr>
<tr>
<td>Seleccione ciudad</td>
<td><label>
<select name="ciudad" size="1" id="ciudad" >
<option>Huancayo</option>
<option>Lima</option>
<option>Arequipa</option>
<option>Cusco</option>
</select>
</label></td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<input type="button" name="button" id="button" value="Mensaje"
onclick="habilitar(this.form)" />
</div>
</label></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<label>
<input name="mensaje" type="text" id="mensaje" size="100" />
</label>
</div></td>
</tr>
</table>
<label></label>
</form>
</body>
</html>
2.5.2. CONTROL: RADIO BUTTON/CHECKBOX
2.1 Propiedades de los objetos

propiedad descripcin
name
Es el nombre que identifica a un checkbox a un grupo de radio buttons. Para

que stos ltimos conserven la capacidad de seleccin nica, deben tener
todos el mismo nombre.
Pg.
44
Ingeniera Web
Es un valor asociado a cada checkbox o radio.
value
En el caso de los checkbox es til asignar a un grupo de stos con el mismo

name distintos valores. Pero si se quieres acceder a las propiedades de cada
checkbox separadamente mediante JavaScript, es mejor utilizar un name
diferente para cada checkbox, ya que de lo contrario (si todos tienen el
mismo name) la propiedad value resulta poco til.
En el caso de los radio buttons es una propiedad necesaria siempre al tener

todos el mismo name, aunque para su acceso mediante JavaScript, esta
propiedad no es muy til.
disabled
bloquea el checkbox o radio. Por lo tanto "No es enviado en el formulario" y

"acta como si no existiese".
checked
marca o comprueba si est marcado un checkbox o un radio. Es una

propiedad booleana (que solo admite verdadero o falso) en la cual su valor
ser "true" (verdadero) si el objeto est marcado y "false" (falso) en caso
que no lo est.
length
es la cantidad de radio buttons que existe en un grupo determinado con el

mismo name.
index
array que contiene todos los radio buttons que hay en un grupo con el
mismo nombre. Para un grupo de 5 radio buttons con mismo nombre y
diferente valor cada uno, para referirnos al cuarto de ellos se debe usar la
sintaxis:
formulario.nombre_radio[3]
2.2 Principales eventos
evento
descripcin
onFocus
Permite realizar una accin al poner el foco en el objeto.
onBlur
Permite realizar una accin cuando el foco ya no se encuentra en el objeto.
onClick
Permite realizar una accin cuando se hace click sobre el objeto.
onChange Evento que se produce al marcar/desmarcar un checkbox o un radio button.

2.3 Sintaxis bsica
Para un grupo de radio buttons (mismo nombre distinto valor)
<input type="radio" name="color" value="rojo">
Pg.
45
Ingeniera Web
<input type="radio" name="color" value="verde">

Para un grupo de checkbox (mismo nombre distinto valor)
<input type="checkbox" name="colores" value="rojo">
<input type="checkbox" name="colores" value="verde">
MUY IMPORTANTE:
El nombre de todos los controles de los radio buttons y los checkbox deben ser
lo mismo.
Ejemplo:

<head>
<title>Ejemplo Select</title>
</head>
<script languaje="javascript">
function Mensaje(formu1)
{
if (formu1.radio2[0].checked == true)
{
formu1.mensaje.value=formu1.nombre.value+" vive en Huancayo";
}
{
formu1.mensaje.value=formu1.nombre.value+" vive en Lima";
}
{
formu1.mensaje.value=formu1.nombre.value+" vive en Arequipa";
}
{
Pg.
46
Ingeniera Web
formu1.mensaje.value=formu1.nombre.value+" vive en Cusco";

}
}
</script>
<body>
<form id="form1" name="formu1" method="post" action="">
<tr>
<td>Ingrese nombre:</td>
<td><label>
<input type="text" name="nombre" id="nombre" />
</label></td>
</tr>
<tr>
<td>Seleccione ciudad</td>
<td><label>
<input type="radio" name="radio2" id="radio" value="radio1" />
Huancayo<br />
<input type="radio" name="radio2" id="radio2" value="radio2" />
Lima<br />
Arequipa<br />
Cusco
</label></td>
</tr>
<tr>
<td colspan="2"><label>
<div align="center">
<input type="button" name="button" id="button" value="Mensaje"

onclick="Mensaje(this.form)" />
</div>
</label></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<label>
<input name="mensaje" type="text" id="mensaje" size="100" />
</label>
</div></td>
</tr>
</table>
<label></label>
</form>
</body>
</html>
Pg.
47
Ingeniera Web
ACTIVIDAD:
1. Trabajando con la propiedad disabled

Veremos el caso en que un usuario debe elegir un producto de una lista y la
cantidad que desea comprar, de otra lista. Pero esto ltimo, solo podr hacerlo, si
ya ha seleccionado un producto.
2. Elabore la calculadora con 5 operaciones mediante listas desplegables.

3. Elabore la calculadora con 5 operaciones mediante Radios.
4. Elabore un formulario donde se habilitarn o deshabilitarn los checkbox dependiendo de
la opcin que seleccione el usuario de un grupo de dos radio buttons, por ejemplo al
presionar SI deber habilitarse los checkbox caso contrario debern deshabilitarse.
Pg.
48
Ingeniera Web
Disear el siguiente formulario:
Ver el cdigo:
<head>
<title>Formulario 1</title>
function Sumar(formulario1)
{
var a, b, s;
a=parseInt(formulario1.a1.value);
b=parseInt(formulario1.a2.value);
s=a+b;
formulario1.a4.value=s;
}
</script>
</head>
<body>
<form id="form1" name="formulario1" method="post" action="">
<tr>
<td>Ingrese primer nmero</td>
<td><label>
<input type="text" name="a1" id="a1" />
</label></td>
</tr>
<tr>
<td>Ingrese segundo nmero</td>
<td><label>
Pg.
49
Ingeniera Web
<input type="button" name="a3" id="a3" value="Sumar" onclick="Sumar(this.form)"/>
</label></td>
</tr>
<tr>
<td>Resultado</td>
<td><label>
</label></td>
</tr>
</table>
</form>
</body>
</html>
A partir de este formulario crear una calculadora con botones de resta, multiplicacin,
divisin, potencia y residuo.
Buscar por Internet, 10 aplicaciones JavaScript para pginas web: por ejemplo, que abra
ventanas emergentes, que cierren ventanas, que muestre mensajes en la barra de estado,
ttulos de pginas en movimientos, etc.
INFORMACIN
CLAVE:
Tecnologas de la web dinmica:
ACTIVIDAD:
1.
2.
3.
4.
5.
Pgina web que pida dos nmeros y muestre el menor de ellos

Pgina web que pida tres nmeros y muestre el menor de ellos
Pgina web que pida cuatro nmeros y muestre el menor de ellos
Pgina web que pida cuatro nmeros y muestre el mayor de ellos
Pgina web que pida tres nmeros y muestre el intermedio de ellos
Pg.
50
Ingeniera Web
6. Pgina web que pida un nmero entre 1 y 7 y muestre el da de la semana, por

ejemplo: al ingresar 1 que muestre hoy es lunes, al ingresar 2 que muestre hoy
es martes.
7. Pgina web que pida un nmero entre 1 y 12 y muestre el mes, por ejemplo: al
ingresar 1 que muestre estamos en enero, al ingresar 2 que muestre estamos
en febrero.
8. Pgina web que pida tres nmeros y muestre el intermedio en valor de ellos
9. Realizar una pgina web que genere nmeros impares
10. Pgina web que imprima del 100 al 0 en ese mismo orden
11. Realizar una pgina web que solicite un nmero y un nombre y repita el nombre el
nmero de veces.
12. Realizar una pgina web que genere nmeros mltiplos de 5 hasta el nmero
ingresado
13. Pgina web que muestre los mltiplos de 3 comprendidos entre los nmeros 1 y
20
14. Convertir todos los ejercicios anteriores en formularios
15. Realizar una pgina que genere nmeros pares
16. Realizar una pgina que genere nmeros impares
17. Pgina que imprima del 100 al 0 en ese mismo orden
18. Realizar una pgina que solicite un nmero y un nombre y repita el nombre el
nmero de veces.
19. Realizar una pgina que genere nmeros mltiplos de 5 hasta el nmero
ingresado
20. Mostrar los mltiplos de 3 comprendidos entre los nmeros 1 y 20
21. Pgina que pida colores en RBG y los convierta en hexadecimal
22. Pgina que pida un nmero y muestre la suma de sus dgitos
23. Pgina que calcule el factorial de un nmero, por ejemplo de 4 es 4x3x2x1=24
24. Pgina que solicite dos nmeros de dos dgitos y lo sume, en caso no sea de dos
dgitos que siga solicitando.
25. Una pgina que muestra el signo zodiacal de una persona. Para ello el usuario
debe introducir nicamente el da y el mes de nacimiento y el programa
determinar inmediatamente el signo zodiacal de la persona.
Pg.
51
Ingeniera Web
UNIDAD N II
SESIN I:
Mtodos de desarrollo de la Ingeniera Web: Desarrollo, metodologas, tcnicas. Pruebas y calidad.
Mtricas web
LOGRO:
Desarrolla una aplicaciones web con PHP y MySQL de una tienda virtual
INFORMACIN:
3.1 Instrucciones bsicas del PHP

EJERCICIO 01:
<?php
echo "Apache PHP MySQL<br>";
echo "Una gran alternativa";
?>
EJERCICIO 02:
<script language="PHP">
echo "Zend Studio<br>";
echo "Una gran herramienta";
</script>
EJERCICIO 03:
<?php
srand((double)microtime()*1000000);
$nota = rand(0,20);
echo "<h1>Nota: $nota</h1>";
if($nota<14){
?>
<h1>Estas Desaprobado.</h1>
<?php
}
else{
Pg.
52
Ingeniera Web
?>
<h1>Felicitaciones Aprobaste.</h1>
<?php
}
?>
EJERCICIO 04:
<?php
/*
* Este ejemplo ilustra el uso de Comentarios
* Como podemos observar son tres lo tipos
*/
echo "Ejemplos de Comentarios<br>";
echo "Feliz 2011<br>"; // Mensaje Ganador
echo "Per Campen"; # Esperanza de todos los peruanos
?>
EJERCICIO 05:
<?php
$nombre = "Miguel Cordova";
echo "Mi nombre es: ". $nombre;
?>
EJERCICIO 06:
<?php
echo "<font face=Verdana>";
echo "<H1>Software Libre</H1>";
echo "<H3>Es la Alternativa</H3>";
echo "</font>";
?>
EJERCICIO 07:
<?php
$A = 10; $B = 15.5; $C = "MySQL la BD ms rpida";
printf("El valor de A es: %d<br>", $A);
printf("Ahora relleno con ceros: %03d<br>", $A);
printf("El valor de B es: %f<br>", $B);
printf("Ahora relleno con ceros: %01.2f<br>", $B);
printf("El valor de C es: %s<br>", $C);
?>
EJERCICIO 08:
<?php
define("PI",3.141516);
$radio = 5;
$area = PI*$radio*$radio;
echo "PI: " . PI . "<br>";
echo "Radio: $radio<br>";
echo "Area: $area";
?>
Pg.
53
Ingeniera Web
EJERCICIO 09:
<font face="Helvetica">
<body bgcolor="Silver" text="Navy">
<table border="1" width="400">
<tr>
<th>Constante</th>
<th>Valor</th>
</tr>
<tr>
<td>PHP_VERSION</td>
<td><?php echo PHP_VERSION ?></td>
</tr>
<tr>
<td>PHP_OS</td>
<td><?php echo PHP_OS ?></td>
</tr>
</table>
</body>
</font>
EJERCICIO 10:
<?php
$output = `dir`;
echo "<pre>$output</pre>"
?>
</font>
EJERCICIO 11:
<?php
$cad1 = "PHP is ";
$cad2 = "PowerFull.";
echo $cad1.$cad2;
?>
</font>
3.2 Formularios HTML (GET POST)

Los documentos web que conforman una aplicacin Web necesitan comunicarse entre s, una de
las formas es utilizando formularios HTML que enva datos a un programa PHP, estos campos se
convierten en variables, razn por la que se les denomina variables externas.
Sintaxis en la pgina HTML:
<form method="POST/GET" action="destino">
Controles HTML
Pg.
54
Ingeniera Web
</form>
Sintaxis en la pgina PHP:

$_POST["NombreDelCampo"]
$_GET["NombreDelCampo"]
Habilitar en ON la directiva de REGISTER_GLOBALS en el archivo php.ini
Ejemplo:
Se tiene una pgina llamado calculosueldo.html que se muestra a continuacin
La cual debe procesar y mostrar la siguiente pgina sueldo.php. Impuesto a la renta 10% del total e
impuesto solidaridad 1.7% del total:
//clculo de sueldo
//calculosueldo.html
<body bgcolor="#D2EBF7">
<h1>Clculo de Sueldo</h1>
<form method="post"
action="sueldo.php">
<b>Dias
Trabajados:</b><input
type="text" name="dt"><br>
//sueldo.php
<?php
$total = $_POST["dt"] * $_POST["hd"] *
$_POST["ch"];
$ir = $total * 0.10; # Impuesto a la renta
$is = $total * 0.017; # Impuesto de
solidaridad
Pg.
55
Ingeniera Web
<b>Horas por
Da:</b><input type="text"
name="hd"><br>
<b>Costo por
Hora:</b><input type="text"
name="ch"><br>
<input
type="submit"
value="Enviar">
<input type="reset"
value="Limpiar">
</form>
</body>
$neto = $total - $ir - $is;

?>
<h1>Clculo de Sueldo</h1>
<table border=1 width=400>
<tr>
<th
align=center
colspan=2
border=0>Datos</th>
</tr>
<tr>
<td
width=70%><b>Das
trabajados</b></td>
<td><?php echo $_POST["dt"] ?></td>
</tr>
<tr>
<td><b>Horas por da</b></td>
<td><?php echo $_POST["hd"] ?></td>
</tr>
<tr>
<td><b>Costo por hora</b></td>
<td><?php echo $_POST["ch"] ?></td>
</tr>
<tr>
<th align=center colspan=2 border=0>
Resultado
</th>
</tr>
<tr>
<td><b>Total</b></td>
<td><?php echo $total ?></td>
</tr>
<tr>
<td><b>Impuesto Renta</b></td>
<td><?php echo $ir ?></td>
</tr>
<tr>
<td><b>Impuesto Solidaridad</b></td>
<td><?php echo $is ?></td>
</tr>
<tr>
<td><b>Neto</b></td>
<td><?php echo $neto ?></td>
</tr>
</table>
<input
type="button"
value="Back"
onClick="history.back()">
</body>
Ejercicio 12:
Con la supervariable $_GET desarrolle el ejercicio anterior
Pg.
56
Ingeniera Web
Ejercicio 13:
Con la supervariable $_POST desarrolle un formulario que solicite dos nmeros (nmeros.html)
para sumar en otra (suma.php)
3.3 Programas recursivos

Tambin es posible que el formulario (*.html) y el proceso (*.php) se encuentren en un mismo
documento a estas aplicaciones se les denomina PROGRAMAS RECURSOS. Para programas
recursivos, por medida de seguridad se recomienda emplear el mtodo POST aunque el posible
realizar mediante el mtodo GET. En este caso CONTROL sera un campo oculto al usuario y permite
verificar si se debe mostrar el formulario o procesar los datos.
<?php
if(!isset($_POST["control"])){
?>
<form method="post" action="destino.php">
// CODIGO DEL FORMULARIO EN HTML
</form>
<?php
}
else {
//PROCESO DE CDIGO PHP
}
?>
</body>
Pg.
57
Ingeniera Web
Ejemplo:
Desarrolle un formulario que calcule el rea de un tringulo, el formulario y la accin deben
programarse en el mismo formulario:
//triangulo.php
<?php
if(!isset($_POST["control"])){
?>
<h3>Calculo del Area de un Triangulo</h3>
<form method="post" action="triangulo.php">
<input type="hidden" name="control" value="12345">
Base:<input type="text" name="base"><br>
Altura:<input type="text" name="altura"><br>
<input type="submit" value="Enviar">
</form>
<?php
}
else {
$base = $_POST["base"];
$altura = $_POST["altura"];
$area = $base * $altura / 2;
echo "<h3>Resultado</h3>";
echo "\$base = $base <br>";
echo "\$altura = $altura <br>";
echo "\$area = $area <br>";
echo "<a href='triangulo.php'>Nuevo Calculo</a>";
}
?>
</body>
Ejercicio 14:
Desarrolle el ejercicio 12 como un programa recursivo en PHP
Ejercicio 15:
Desarrolle el ejercicio 13 como un programa recursivo en PHP
3.4 Estructuras del lenguaje de programacin PHP

Las sintaxis de las estructuras son muy similares a lenguajes como Java, C o C++, para el desarrollo
de las mismas se van a seguir el modelo de programacin recursiva, desarrollada en la clase
anterior.
Se recomienda en primer lugar realizar el diseo en HTML para luego incrustar los cdigos del PHP.
Las estructuras condicionales son:
Pg.
58
Ingeniera Web
CONDICIONALES:
If:
If-else:
Ifelse: Esta ltima prctica no es recommendable en la Ing. Web por la poca claridad en su
estructura.
Switch:
REPETITIVAS:
While:
Do-While:
For:
Similar a C++, es posible emplear las instrucciones break y continue.
Pg.
59
Ingeniera Web
3.5 Estrategias de programacin segn destino de resultados

Al programar en formularios web encontramos que los destinos de los resultados puede ser en el
mismo formulario, es decir en la misma pgina o en una nueva pgina.
RESULTADOS EN UNA MISMA PGINA:

Desarrollar las siguientes pginas y mostrar los resultados en una misma pgina
BLOQUE HTML
EJERCICIO 01:
Los resultados
se muestran en
un mismo
formulario
BLOQUE PHP
<?php
//Variables
$n1 = 0; $n2 = 0; $s = 0;
if(isset($_POST["btnCalcular"])) {
//Entrada
$n1 = (int)$_POST["txtn1"];
$n2 = (int)$_POST["txtn2"];
//Proceso
$s = $n1 + $n2;
}
?>
<html>
<head>
<title>Problema 01</title>
<style type="text/css">
<!-.TextoFondo {
background-color: #CCFFFF;
}
-->
</style>
</head>
<body>
<form method="post" action="Problema01.php">
<table width="241" border="0">
<tr>
<td colspan="2"><strong>Problema 01</strong> </td>
</tr>
<tr>
Pg.
60
Ingeniera Web
<td width="81">Numero 1 </td>
<td width="150">
<input name="txtn1" type="text" id="txtn1" value="<?=$n1?>" />
</tr>
<tr>
<td>Numero 2 </td>
<td>
<input name="txtn2" type="text" id="txtn2" value="<?=$n2?>"/>
</tr>
</td>
</td>
<tr>
<td>Suma</td>
<td>
<input name="txts" type="text" class="TextoFondo" id="txts" value="<?=$s?>"/> </td>
</tr>
<tr>
<td> </td>
<td>
<input name="btnCalcular" type="submit" id="btnCalcular" value="Calcular" /> </td>
</tr>
</table>
</form>
</body>
</html>
EJERCICIO 02:
<?php
//Variables
$n1 = 0; $n2 = 0; $m = 0;
//Entrada
$n1 = $_POST["txtn1"];
$n2 = $_POST["txtn2"];
//Proceso
if($n1 > $n2)
$m = $n1;
if($n2 > $n1)
$m = $n2;
Pg.
61
Ingeniera Web
}
?>
<html>
<head>
<!-.TextoFondo {
}
-->
</style>
</head>
<body>
<tr>
</tr>
<tr>
<td width="151">
<input name="txtn1" type="text" id="txtn1" value="<?=$n1?>" /> </td>
</tr>
<tr>
<td>Numero 2 </td>
<td>
<input name="txtn2" type="text" id="txtn2" value="<?=$n2?>"/> </td>
</tr>
<tr>
<td>Mayor</td>
<td><input name="txtm" type="text" class="TextoFondo" id="txtm" value="<?=$m?>"></td>
</tr>
<tr>
<td> </td>
<td>
</tr>
</table>
</form>
</body>
</html>
EJERCICIO 03:
Pg.
62
Ingeniera Web
<?php
//Variables
$d = 0; $m = 0; $e = "";
//Entrada
$d = (int)$_POST["txtd"];
$m = (int)$_POST["txtm"];
//Proceso
switch($m){
case 1:
case 2:
case 3:
$e = "VERANO";
if($m == 3 && $d > 20)
$e = "OTOO";
break;
case 4:
case 5:
case 6:
$e = "OTOO";
if($m == 6 && $d > 21)
$e = "INVIERNO";
break;
case 7:
case 8:
case 9:
$e = "INVIERNO";
if($m == 9 && $d > 22)
$e = "PRIMAVERA";
break;
case 10:
case 11:
case 12:
$e = "PRIMAVERA";
if($m == 12 && $d > 20)
$e = "VERANO";
break;
}
}
?>
<html>
<head>
<!-.TextoFondo {
Pg.
63
Ingeniera Web
}
-->
</style>
</head>
<body>
<tr>
</tr>
<tr>
<td width="81">Dia</td>
<td width="150">
<input name="txtd" type="text" id="txtd" value="<?=$d?>" /> </td>
</tr>
<tr>
<td>Mes</td>
<td><input name="txtm" type="text" id="txtm" value="<?=$m?>" /></td>
</tr>
<tr>
<td>Estacion</td>
<td><input name="txte" type="text" class="TextoFondo" id="txte" value="<?=$e?>"/></td>
</tr>
<tr>
<td> </td>
<td>
</tr>
</table>
</form>
</body>
</html>
EJERCICIO 04: Cuenta nmero de pares
<?php
//Variables
$i = 0;$ni = 0;$nf = 0; $cp = 0;
//Entrada
$ni = (int)$_POST["txtni"];
$nf = (int)$_POST["txtnf"];
Pg.
64
Ingeniera Web
//Proceso
$i = $ni + 1;
while($i < $nf){
if($i % 2 == 0){
$cp += 1;
}
$i++;
}
}
?>
<html>
<head>
<!-.TextoFondo {
}
-->
</style>
</head>
<body>
<tr>
</tr>
<tr>
<td width="87">Num. Inicial </td>
<td width="144">
<input name="txtni" type="text" id="txtni" value="<?=$ni?>" /> </td>
</tr>
<tr>
<td>Num. Final </td>
<td><input name="txtnf" type="text" id="txtnf" value="<?=$nf?>" /></td>
</tr>
<tr>
<td>Cant. Pares </td>
<td><input name="txtcp" type="text" class="TextoFondo" id="txtcp" value="<?=$cp?>"
/></td>
</tr>
<tr>
<td> </td>
<td>
</tr>
</table>
</form>
</body>
</html>
Pg.
65
Ingeniera Web
EJERCICIO 05:
<?php
//Variables
$nb = 0; $p = 0; $i = 0;
$r = "";
//Arreglos
$n = array();
//Entrada
$n[0] = (int)$_POST["txtn1"];
$nb = (int)$_POST["txtnb"];
//Proceso
$r = "NO EXISTE";
$p = -1;
for($i = 0 ; $i <= count($n) -1; $i++) {
if($n[$i] == $nb){
$r = "EXISTE";
$p = $i;
break;
}
}
}
?>
<html>
<head>
<!-Pg.
66
Ingeniera Web
.TextoFondo {
}
-->
</style>
</head>
<body>
<tr>
</tr>
<tr>
<td width="75">
<input name="txtn1" type="text" id="txtn1" value="<?=$n[0]?>" size="5" /> </td>
</tr>
<tr>
<td>Numero 2 </td>
<td><input name="txtn2" type="text" id="txtn2" value="<?=$n[1]?>" size="5" /></td>
</tr>
<tr>
<td>Numero 3 </td>
</tr>
<tr>
<td>Numero 4 </td>
</tr>
<tr>
<td>Numero 5 </td>
</tr>
<tr>
<td>Num. a buscar </td>
<td><input name="txtnb" type="text" id="txtnb" value="<?=$nb?>" size="5" /></td>
</tr>
<tr>
<td>Respuesta</td>
<td><input name="txtr" type="text" class="TextoFondo" id="txtr" value="<?=$r?>" size="10"
/></td>
</tr>
<tr>
<td>Posicion</td>
<td><input name="txtp" type="text" class="TextoFondo" id="txtp" value="<?=$p?>" size="5"
/></td>
</tr>
<tr>
<td> </td>
Pg.
67
Ingeniera Web
<td>
<input name="btnCalcular" type="submit" id="btnCalcular" value="Calcular" />
</tr>
</table>
</form>
</body>
</html>
</td>
EJERCICIO 06:
<?php
//Variables
$f = ""; $l = "";
$c = 0; $i = 0;
//Entrada
$f = $_POST["txtf"];
$l = $_POST["txtl"];
//Proceso
for($i = 0;$i<=strlen($f)-1;$i++){
if(substr(strtoupper($f),$i,1) == strtoupper($l))
$c++;
}
}
?>
<html>
<head>
<!-.TextoFondo {
}
-->
</style>
</head>
<body>
Pg.
68
Ingeniera Web
<tr>
</tr>
<tr>
<td width="86">Frase</td>
<td width="172"><textarea name="txtf" cols="40" rows="5"
id="txtf"><?=$f?></textarea></td>
</tr>
<tr>
<td>Letra</td>
<td><input name="txtl" type="text" id="txtl" value="<?=$l?>" /> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Cantidad</td>
<td><input name="txtc" type="text" class="TextoFondo" id="txtc" value="<?=$c?>" /></td>
</tr>
<tr>
<td> </td>
<td>
</tr>
</table>
</form>
</body>
</html>
</td>
EJEMPLO 7:
<?php
Pg.
69
Ingeniera Web
//Variables
$f1 = ""; $f2 = ""; $c = "";
$i = 0; $p = 0;
//Entrada
$f1 = $_POST["txtf1"];
//Proceso
$p = 0;
$f1 = trim($f1);
for($i = 0; $i<strlen($f1); $i++){
$c = substr($f1,$i,1);
if($c != " ") {
$c = chr(ord($c) + 1);
}
$f2 .= $c;
}
}
?>
<html>
<head>
<!-.TextoFondo {
}
-->
</style>
</head>
<body>
<tr>
</tr>
<tr>
<td width="86">Frase</td>
<td width="172"><textarea name="txtf1" cols="40" rows="5"
id="txtf1"><?=$f1?></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Frase encriptada </td>
<td><textarea name="txtf2" cols="40" rows="5" class="TextoFondo" id="txtf2"><?=$f2?>
</textarea></td>
Pg.
70
Ingeniera Web
</tr>
<tr>
<td> </td>
<td>
</tr>
</table>
</form>
</body>
</html>
</td>
RESULTADOS EN OTRA PGINA:

Desarrollar lo siguiente y mostrar los resultados en otra pgina los resultados. En este caso notar
la similitud con la estructura de la programacin recursiva, vista en la clase anterior.
BLOQUE PHP
Los resultados
se muestran en
una nueva
pgina
BLOQUE HTML
Ejemplo 8: Seleccionar la ciudad y deber mostrar en otra pgina un mensaje descriptivo de la

ciudad.
//ejemplo8.php
<?php
if(!isset($_POST["ciudad"])){
?>
<h3>Conoce el Per</h3>
<form method = "post" action = "ejemplo8.php">
<b>Ciudad a visitar:</b>
<select size="1" name="ciudad">
<option value="1">Chiclayo</option>
<option value="2">Trujillo</option>
<option value="3">Cajamarca</option>
<option value="4">Iquitos</option>
<option value="5">Huaraz</option>
<option value="6">Huancayo</option>
<option value="7">Arequipa</option>
<option value="8">Cuzco</option>
</select>
Pg.
71
Ingeniera Web
<br><input type="submit" value="Enviar">
</form>
<?php
}
else{
$ciudad = $_POST["ciudad"];
echo "Ciudad seleccionada: $ciudad<br>";
switch($ciudad){
case 1:
echo "Chiclayo, ciudad de la amistad.";
break;
case 2:
echo "Trujillo, ciudad de la eterna primavera.";
break;
case 3:
echo "Cajamarca, simplemente una ciudad espectacular.";
break;
case 4:
echo "Iquitos, no te podras olvidar de sus encantos";
break;
case 5:
echo "Huaraz, sus nevados son impresionantes.";
break;
case 6:
echo "Huancayo, ciudad INCONTRASTABLE.";
break;
case 7:
echo "Arequipa, lo mejor es su gente.";
break;
case 8:
echo "Cuzco, quedaras encantado.";
break;
}
echo "<br><a href='ejemplo8.php'>Nueva Seleccin</a>";
}
?>
</body>
Ejemplo 9:
//ejemplo9.php
<?php
if(!isset($_POST["seguro"])){
Pg.
72
Ingeniera Web
?>
<h2>Nmero Primo</h2>
Nmero <input type="text" name="n" size="2" maxlength="2">
<input type="hidden" name="seguro" value="12345">
</form>
<?php
}
else{
$n = (int)$_POST["n"];
$esPrimo = 1;
$k = 2;
while ($k < $n And $esPrimo == 1) {
if (($n % $k) == 0) { $esPrimo = 0; }
$k ++;
}
if ($esPrimo == 1){ $msg = "Primo"; }
else { $msg = "No es Primo"; }
echo "Nmero: $n <br>";
echo "Condicin: $msg <br>";
echo "<a href='ejemplo9.php'>Nueva Prueba</a>";
}
?>
</body>
Ejercicio 10
//ejemplo10.php
<h2>Serie de Fibonacci</h2>
<table>
<tr>
<td valign="top" width = "100">
N <input type="text" name="n" size="2" maxlength="2"><br>
</form>
</td>
<td valign="top" width="250">
<?php
if( isset($_POST["n"]) ) {
Pg.
73
Ingeniera Web
$n = $_POST["n"];
if ($n <= 2){ echo "Debe ingresar un nmero mayor que 2."; }
else {
$cad = "0 1"; $a = 0; $b = 1;
for( $k = 3; $k <= $n; $k++ ) {
$c = $a + $b;
$cad .= " $c";
$a = $b;
$b = $c;
}
echo "N: $n <br>";
echo "Serie: <br>";
echo "<textarea name='resultado' rows='4' cols='20' readonly='true'>";
echo $cad;
echo "</textarea>";
}
}
?>
</td>
</tr>
</table>
</body>
ACTIVIDAD:
Desarrollar las siguientes prcticas propuestas:

Prctica 01:
Prctica 02:
Pg.
74
Ingeniera Web
Prctica 03:
Prctica 04:
Prctica 05:
Pg.
75
Ingeniera Web
Prctica 06:
Prctica 07:
Prctica 08:
Pg.
76
Ingeniera Web
SESIN II:
Frameworks PHP y Gestores de Base de datos
LOGRO:
Identifica Frameworks de PHP

Gestiona bases de datos para la web
INFORMACIN:
4.1 FRAMEWORK
Mientras ms tiempo pasamos programando ms clases, funciones y herramientas vamos
acumulando, hasta llegar al punto en que tenemos un sistema que aplicamos a cualquier proyecto.
El problema con esto es que generalmente tenemos una especie de Frankestein que est hecho de
muchas partes (de terceros o programados por nosotros mismos), lo cual implica que sea difcil
tenerlo actualizado y funcionando en forma correcta y segura.
Los frameworks, como su nombre lo indica, nos entregan una estructura, armazn o marco para
desarrollar nuestros proyectos. En otras palabras, nos entregan una serie de clases, funciones o
libreras, que junto a convenciones comunes, se organizan bajo una estructura sobre la cual
desarrollamos nuestros proyectos.
Entre las ventajas de usar frameworks, se pueden contar:
Facilita integrar a otras personas a tus proyectos ya que se comparten convenciones de

desarrollo comunes.
No nos preocupamos de mantener actualizadas las distintas partes.
No reinventar la rueda, ya que aprovechamos los componentes existentes aumentando la
velocidad de desarrollo.
Como desventajas se pueden nombrar:
Agrega cdigo adicional que no es tuyo.

Hay que invertir tiempo en aprender a usarlos.
En algunos casos una aplicacin desarrollada con un framework puede ser ms lenta (en
cuanto a rendimiento) que una diseada y desarrollada desde cero.
Scripts y sistemas Framework creados en PHP, que permiten el desarrollo de nuevos

proyectos con la ayuda de programas, mdulos, libreras y lenguaje de scripting.
Zend Framework
http://framework.zend.com/
Symfony (recomendado)
http://www.symfony-project.org/
Pg.
77
Ingeniera Web
CakePHP
Saturn
http://www.saturncms.com/
Fusebox
http://php-fusebox.sourceforge.net/
Eclipse
http://www.eclipse.org/
Otros:
Yii
Codelgniter
PHPDevShell
Prado
Akelos
Zoop
QPHP
4.2 ZEND FRAMEWORK

Zend Framework se trata de un framework para desarrollo de aplicaciones Web y servicios Web
con PHP, te brinda soluciones para construir sitios web modernos, robustos y seguros. Adems es
Open Source y trabaja con PHP 5, a diferencia de otros framework que trabaja con PHp 4 y PHP 5
A Zend Framework le veo una ventaja y es que es desarrollado por Zend que es la empresa
que respalda comercialmente a PHP, pero repasemos sus principales caractersticas:
Trabaja con MVC (Model View Controller)

Cuenta con mdulos para manejar archivos PDF, canales RSS, Web Services
(Amazon, Flickr, Yahoo), etc
El Marco de Zend tambin incluye objetos de las diferentes bases de datos, por lo
que es extremadamente simple para consultar su base de datos, sin tener que escribir
ninguna consulta SQL.
Una solucin para el acceso a base de datos que balancea el ORM con eficiencia y
simplicidad. Podemos ver esta funcin en el futuro.
Completa documentacin y tests de alta calidad.
Soporte avanzado para i18n (internacionalizacin).
Un buscador compatible con Lucene.
Robustas clases para autenticacin y filtrado de entrada.
Clientes para servicios web, incluidos Google Data APIs y StrikeIron.
Muchas otras clases tiles para hacerlo tan productivo como sea posible.
En la actualidad, se dispone de varios framework, cada una con una serie de potencialidades
con respecto a la otra.
Algunos sitios donde podras revisar de comparativas:
http://pwneds.blogspot.com/2007/11/comparacion-de-10-frameworks-de-php.html
Pg.
78
Ingeniera Web
http://www.phpframeworks.com/top-10-php-frameworks/
http://www.phpframeworks.com/
4.3 Instalar Zend Framework

Para instalar, se descarga el archivo zip o gzip del Zend Framework, luego de ello copiamos el
directorio library dentro de c-xampp-helpdesk, directorio desde donde levantaremos todas las
librerias.
Luego de ello aadimos la siguiente lnea en el fichero de configuracin php.ini dentro del
servidor web APACHE, adems de los ficheros php.ini en php5.ini en PHP.
include_path=".;c:\xampp\htdocs\helpdesk\library\"
Para verificar que se est teniendo acceso a la librera del Zend Framework procederemos a crear
una pgina de ejemplo y lo guardaremos como index.php en c-xampp-helpdesk-public
<?php
require_once('Zend/Acl.php');
$acl = new Zend_Acl();
echo "Hola Mundo";
?>
Deber mostrar un resultado similar a este, para verificar su funcionamiento:
4.4 Paradigma de la Ingeniera Web - MVC

Los cdigos anteriores de consulta y acceso a base de datos realizados anteriormente, son
fcil de escribir y rpido de ejecutar, pero muy difcil de mantener y actualizar. Los
principales problemas del cdigo anterior son:
No existe proteccin frente a errores (qu ocurre si falla la conexin con la base de
datos?).
El cdigo HTML y el cdigo PHP estn mezclados en el mismo archivo e incluso en
algunas partes estn entrelazados.
Pg.
79
Ingeniera Web
El cdigo solo funciona si la base de datos es MySQL.
En vista de ello la Ingeniera Web ha previsto el Modelo Vista Controlador (MVC)

es un patrn de arquitectura que naci en Smalltalk por los aos 80 y se hizo muy
popular en las aplicaciones (y frameworks) webs de los ltimos aos. Consiste en
la separacin del sistema en tres partes el modelo, la vista y el controlador.
Modelo: es la parte que maneja los datos (teniendo en cuenta que los datos estn en una
base de datos) y el modelo de negocio de la aplicacin.
Vista: representa la interfaz de usuario. En la web seran los HTML o XML que se retornaran
del request.
Controlador: es la parte que gestiona que vista mostrar en cada pedido accediendo al
modelo para tomar los datos correspondientes.
Flujo
Aunque se pueden encontrar diferentes implementaciones de MVC, el flujo que sigue el
control generalmente es el siguiente:
1. El usuario interacta con la interfaz de usuario de alguna forma (por ejemplo, el
usuario pulsa un botn, enlace, etc.)
2. El controlador recibe (por parte de los objetos de la interfaz-vista) la notificacin de
la accin solicitada por el usuario. El controlador gestiona el evento que llega,
frecuentemente a travs de un gestor de eventos (handler) o callback.
3. El controlador accede al modelo, actualizndolo, posiblemente modificndolo de
forma adecuada a la accin solicitada por el usuario (por ejemplo, el controlador
actualiza el carro de la compra del usuario). Los controladores complejos estn a
menudo estructurados usando un patrn de comando que encapsula las acciones y
simplifica su extensin.
4. El controlador delega a los objetos de la vista la tarea de desplegar la interfaz de
usuario. La vista obtiene sus datos del modelo para generar la interfaz apropiada para
el usuario donde se reflejan los cambios en el modelo (por ejemplo, produce un
listado del contenido del carro de la compra). El modelo no debe tener conocimiento
Pg.
80
Ingeniera Web
directo sobre la vista. Sin embargo, se podra utilizar el patrn Observador para
proveer cierta indireccin entre el modelo y la vista, permitiendo al modelo notificar
a los interesados de cualquier cambio. Un objeto vista puede registrarse con el
modelo y esperar a los cambios, pero aun as el modelo en s mismo sigue sin saber
nada de la vista. El controlador no pasa objetos de dominio (el modelo) a la vista
aunque puede dar la orden a la vista para que se actualice. Nota: En algunas
implementaciones la vista no tiene acceso directo al modelo, dejando que el
controlador enve los datos del modelo a la vista.
5. La interfaz de usuario espera nuevas interacciones del usuario, comenzando el ciclo
nuevamente.
El controlador
ZF usa el patrn Front Controller para determinar que controlador tiene que ser
procesado. Nosotros nos tenemos que encargar de crear los distintos
controladores.
Crear un controlador es crear una clase con un nombre determinado que extienda
de Zend_Controller_Action y crear uno o varios mtodos que sern ejecutados.
La Vista
En el cdigo vimos que sin escribir nada en el controlador, se procesaba un
template. Esto lo hace ZF por defecto, usando un helper del controlador llamado
ViewRenderer. Ahora vamos a ver como se asigna desde el controlador a la vista.
Y el modelo?
El modelo de un sitio es quizas la parte ms compleja, lo veremos en el siguiente
ejemplo.
EJEMPLO 1:
ZF trata de no usar archivos de configuracin como XML, sino a travs de mtodos y otros recursos
de la programacin orientada a objetos. Van a notar que los cdigos no cierran con la etiqueta ?>,
esto es para no dejar ninguna salida al navegador sin querer. Esta es una de las buenas prcticas
que podemos aprender por ser la misma empresa que principalmente soporta ZF y PHP
Estructura de carpetas
Esta estructura es un ejemplo de lo que acabo de decir, puede ser configurada a
gusto.
Carpetas
app/
controllers/
IndexController.php
views/
Pg.
81
Ingeniera Web
scripts/
index/
index.phtml
lib/
Zend/
public/
.htaccess
index.php
Carpeta por carpeta
app/ Aqui van los cdigos PHP propios de la aplicacin y los scripts (templates) del HTML.
lib/ Librerias. El ZF se descomprime en esta carpeta (manteniendo la carpeta Zend).
public/ Este es el root del sitio. Aca se deberian poner las carpetas de imgenes,
JavaScripts, CSS, etctera.
app/controllers/ Los objetos controladores.
app/views/ Objetos y scripts de la vista.
app/views/scripts/ Scripts HTML.
Cdigos:
public/.htaccess
Un fichero .htaccess (hypertext access), tambin conocido como archivo
de configuracin distribuida, es un fichero especial, popularizado por
el Servidor Web Apache que nos permite definir diferentes directivas
de configuracin para cada directorio (con sus respectivos
subdirectorios) sin necesidad de editar el archivo de configuracin
principal de Apache.
RewriteEngine on
RewriteRule !\.(js|ico|gif|jpg|png|css)$ index.php
public/index.php
1. <?php
2.
3. // Agregamos el directorio donde se encuentra la carpeta Zend/ con todo el ZF
4. set_include_path(
5.
get_include_path() . PATH_SEPARATOR
6.
. '../lib/'
7. );
8.
9. // Dejamos que Zend maneje el include de las clases
10. // por que registra la funcion __autoload
11. require_once 'Zend/Loader.php';
12. Zend_Loader::registerAutoload();
13.
14. // Ejecutamos la app
15. Zend_Controller_Front::run('../app/controllers');
app/controllers/IndexController.php
1. <?php
2.
3.
class IndexController extends Zend_Controller_Action
4.
{
5.
public function indexAction()
6.
{
7.
// no ponemos nada, el Zend_Controller_Action se encarga de crear
Pg.
82
Ingeniera Web
8.
9.
10.
// la vista y el viewRenderer se encarga de ejecutarla

}
}
app/views/scripts/index/index.pthml
1. <!DOCTYPE html PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose

.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <title>ZF</title>
6. </head>
7. <body>
8. Bienvenido al ZF
9. </body>
10. </html>
Por ahora, podemos ejecutar el sitio sin modelo y con muy pocas lneas de
cdigo.
http://localhost/helpdesk/app/views/scripts/index/
5.1 SBGD MySQL
Listado y descripcin de los distintos tipos de datos de MySQL.

Por Carlos Luis Cuenca
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Despus de la fase de diseo de una base de datos, y una vez se ha realizado el paso a tablas
del mismo, en necesario crear las tablas correspondientes dentro de la base de datos. Para
cada campo de cada una de las tablas, es necesario determinar el tipo de datos que contiene,
para de esa forma ajustar el diseo de la base de datos, y conseguir un almacenamiento
ptimo con la menor utilizacin de espacio. El presente artculo describe cada uno de los
tipos de datos que puede tener un campo en Mysql, para la versin 4.xx.xx.
Los tipos de datos que puede haber en un campo, se pueden agrupar en tres grandes grupos:
1. Tipos numricos
2. Tipos de Fecha
3. Tipos de Cadena
1 Tipos numricos:
Existen tipos de datos numricos, que se pueden dividir en dos grandes grupos, los que
estn en coma flotante (con decimales) y los que no.
TinyInt: es un nmero entero con o sin signo. Con signo el rango de valores vlidos va
desde -128 a 127. Sin signo, el rango de valores es de 0 a 255
Pg.
83
Ingeniera Web
Bit Bool: un nmero entero que puede ser 0 1

SmallInt: nmero entero con o sin signo. Con signo el rango de valores va desde -32768 a
32767. Sin signo, el rango de valores es de 0 a 65535.
MediumInt: nmero entero con o sin signo. Con signo el rango de valores va desde 8.388.608 a 8.388.607. Sin signo el rango va desde 0 a16777215.
Integer, Int: nmero entero con o sin signo. Con signo el rango de valores va desde 2147483648 a 2147483647. Sin signo el rango va desde 0 a 429.4967.295
BigInt: nmero entero con o sin signo. Con signo el rango de valores va desde 9.223.372.036.854.775.808 a 9.223.372.036.854.775.807. Sin signo el rango va desde 0 a
18.446.744.073.709.551.615.
Float: nmero pequeo en coma flotante de precisin simple. Los valores vlidos van
desde -3.402823466E+38 a -1.175494351E-38, 0 y desde 1.175494351E-38 a
3.402823466E+38.
xReal, Double: nmero en coma flotante de precisin doble. Los valores permitidos van
desde -1.7976931348623157E+308 a -2.2250738585072014E-308, 0 y desde
2.2250738585072014E-308 a 1.7976931348623157E+308
Decimal, Dec, Numeric: Nmero en coma flotante desempaquetado. El nmero se
almacena como una cadena
Tamao de
Tipo de Campo
Almacenamiento
TINYINT
1 byte
SMALLINT
2 bytes
MEDIUMINT
3 bytes
INT
4 bytes
INTEGER
4 bytes
BIGINT
8 bytes
FLOAT(X)
4 8 bytes
FLOAT
4 bytes
DOUBLE
8 bytes
DOUBLE
PRECISION
8 bytes
REAL
8 bytes
M+2 bytes s D >

DECIMAL(M,D 0, M+1 bytes s D
=0
Pg.
84
Ingeniera Web
M+2 bytes if D >

NUMERIC(M,D) 0, M+1 bytes if D
=0
2 Tipos fecha:
A la hora de almacenar fechas, hay que tener en cuenta que Mysql no comprueba de una
manera estricta si una fecha es vlida o no. Simplemente comprueba que el mes esta
comprendido entre 0 y 12 y que el da esta comprendido entre 0 y 31.
Date: tipo fecha, almacena una fecha. El rango de valores va desde el 1 de enero del 1001
al 31 de diciembre de 9999. El formato de almacenamiento es de ao-mes-dia
DateTime: Combinacin de fecha y hora. El rango de valores va desde el 1 de enero del
1001 a las 0 horas, 0 minutos y 0 segundos al 31 de diciembre del 9999 a las 23 horas, 59
minutos y 59 segundos. El formato de almacenamiento es de ao-mes-dia
horas:minutos:segundos
TimeStamp: Combinacin de fecha y hora. El rango va desde el 1 de enero de 1970 al ao
2037. El formato de almacenamiento depende del tamao del campo:
Tamao
Formato
14
AoMesDiaHoraMinutoSegundo
aaaammddhhmmss
12
AoMesDiaHoraMinutoSegundo
aammddhhmmss
oMesDia aaaammdd
AoMesDia aammdd
AoMes aamm
Ao aa
Time: almacena una hora. El rango de horas va desde -838 horas, 59 minutos y 59
segundos a 838, 59 minutos y 59 segundos. El formato de almacenamiento es de
'HH:MM:SS'
Year: almacena un ao. El rango de valores permitidos va desde el ao 1901 al ao 2155.
El campo puede tener tamao dos o tamao 4 dependiendo de si queremos almacenar el
ao con dos o cuatro dgitos.
Tipo de
Tamao de
Campo
Almacenamiento
DATE
3 bytes
DATETIME
8 bytes
TIMESTAMP
4 bytes
TIME
3 bytes
YEAR
1 byte
Pg.
85
Ingeniera Web
3 Tipos de cadena:
Char(n): almacena una cadena de longitud fija. La cadena podr contener desde 0 a 255
caracteres.
VarChar(n): almacena una cadena de longitud variable. La cadena podr contener desde 0
a 255 caracteres.
Dentro de los tipos de cadena se pueden distinguir otros dos subtipos, los tipo Text y los
tipo BLOB (Binary large Object)
La diferencia entre un tipo y otro es el tratamiento que reciben a la hora de realizar
ordenamientos y comparaciones. Mientras que el tipo test se ordena sin tener en cuenta las
Maysculas y las minsculas, el tipo BLOB se ordena tenindolas en cuenta.
Los tipos BLOB se utilizan para almacenar datos binarios como pueden ser ficheros
incluyendo imgenes.
TinyText y TinyBlob: Columna con una longitud mxima de 255 caracteres.
Blob y Text: un texto con un mximo de 65535 caracteres.
MediumBlob y MediumText: un texto con un mximo de 16.777.215 caracteres.
LongBlob y LongText: un texto con un mximo de caracteres 4.294.967.295. Hay que
tener en cuenta que debido a los protocolos de comunicacin los paquetes pueden tener un
mximo de 16 Mb.
Enum: campo que puede tener un nico valor de una lista que se especifica. El tipo Enum
acepta hasta 65535 valores distintos
Set: un campo que puede contener ninguno, uno varios valores de una lista. La lista
puede tener un mximo de 64 valores.
Tipo de campo
Tamao de Almacenamiento
CHAR(n)
n bytes
VARCHAR(n)
n +1 bytes
TINYBLOB, TINYTEXT
Longitud+1 bytes
BLOB, TEXT
Longitud +2 bytes
MEDIUMBLOB,
MEDIUMTEXT
Longitud +3 bytes
LONGBLOB,
LONGTEXT
Longitud +4 bytes
ENUM('value1','value2',...)
1 dos bytes dependiendo del

nmero de valores
SET('value1','value2',...)
1, 2, 3, 4 8 bytes, dependiendo
del nmero de valores
Pg.
86
Ingeniera Web
Diferencia de almacenamiento entre los tipos Char y VarChar

Almace
Almace
Valor CHAR(4)
VARCHAR(4)
namiento
namiento
''
''
4 bytes
"
1 byte
'ab'
'ab '
4 bytes
'ab'
3 bytes
'abcd'
'abcd'
4 bytes
'abcd'
'abcdefgh'
'abcd'
4 bytes
'abcd'
5 bytes
5.2 Tipos de tablas usadas por MySQL

ISAM: es el formato de almacenaje ms antiguo, y posiblemente podra desaparecer en
futuras versiones. Presentaba limitaciones importantes como la no exportacin de ficheros
entre mquinas de distintas arquitecturas o que no poda usar mayores de 4 GigaBytes.
MYISAM: es el tipo de tabla por defecto en MySQL desde la versin 3.23. Optimizada para
sistemas operativos de 64 bits, permite ficheros de tamaos mayores que las ISAM. Los
datos se almacenan en un formato independiente, lo que permite pasar tablas entre distintas
plataformas. Los ndices se almacenan en un archivo con la extensin .MYI y los datos en
otro archivo con extensin .MYD. Ofrece la posibilidad de indexar campos BLOB y
TEXT. Adems este tipo de tablas soportan el tipo de dato VARCHAR.
Un inconveniente es que las tablas pueden llegar a corromperse, almacenando datos
incorrectos. Esto puede ser causado por:
- El proceso mysqld haya sido eliminado en el transcurso de una escritura.
- problemas de hardware.
- Una caida del sistema durante su utilizacin.
- Un gusano en el cdigo Mysql o MyISAM.
INNODB: InnoDB provee a MySQL con el soporte para trabajar con transacciones, adems
de hacer un mejor bloqueo de registros para las instrucciones SELECT muy parecido al
usado por Oracle, con lo que incrementa el rendimiento y la concurrencia en ambientes
multiusuario, por otro lado, InnoDB es el nico formato que tiene MySQL para soportar
llaves forneas (FOREING KEY). Adems de todo lo comentado, InnoDB ofrece unos
rendimientos superiores a la anterior tecnologa de tablas de MySQL (MyISAM).
InnoDB es un motor de bases de datos muy completo que ha sido integrado dentro de
MySQL.
Otras de sus caractersticas son:
- Recuperacin automtica ante fallas. Si MySQL se da de baja de una forma anormal,
InnoDB automticamente completar las transacciones que quedaron incompletas.
Pg.
87
Ingeniera Web
- Integridad referencial. Ahora se pueden definir llaves forneas entre tablas InnoDB
relacionadas para asegurarse de que un registro no puede ser eliminado de una tabla si an
est siendo referenciado por otra tabla.
- Bloqueo a nivel de filas. Al usar tablas MyISAM, y tener consultas muy grandes que
requieren de mucho tiempo, simplemente no se podan ejecutar ms consultas hasta que
terminarn las consultas que estaban en ejecucin. En cambio, las tablas InnoDB usan
bloqueo a nivel de filas para mejorar de manera impresionante el rendimiento.
- SELECTs sin bloqueo. El motor InnoDB usa una tcnica conocida como multi-versioning
(similar a PostgreSQL) que elimina la necesidad de hacer bloqueos en consultas SELECT
muy simples. Ya no ser necesario molestarse porque una simple consulta de slo lectura
est siendo bloqueada por otra consulta que est haciendo cambios en una misma tabla.
HEAP: Tablas en memoria. Son temporales y desaparecen cuando el servidor se cierra, a

diferencia de una tabla TEMPORARY, que solo puede ser accedida por el usuario que la
crea, una tabla HEAP puede ser utilizada por diversos usuarios. No soportan columnas de
autoincremento ni que haya valores nulos en los ndices. Los datos son almacenados en
pequeos bloques.
BDB: Base de datos Berkeley. TST(Transactions safe tables). Solo en MySQL
MAX: Este tipo de tablas permite la realizacin de transacciones (a partir de la versin
3.23.34), por lo que es posible la recuperacin de datos (COMMIT y ROLLBACK). Estas
tablas necesitan de una clave primaria en cada tabla, que ha de crear el administrador o de
lo contrario Mysql crear una oculta. Otra de sus caractersticas es que pueden ser
bloqueadas con el comando LOCK. Estas tablas sn almacenadas en archivos .DB.
El TST
'Transactions safe tables', o tablas para transacciones seguras. Son menos rpidas y ocupan
mas memoria, pero a cambio ofrecen mayor seguridad frente a fallos durante la consulta.
Las tablas TST permiten ir introduciendo consultas y finalizar con un COMMIT (que las
ejecuta) o ROLLBACK (que ignora los cambios). Disponbles a partir de la versin 4 de
MySQL.
Autor: Xavier Bernad i Millan
http://www.xlwebmasters.com/modules.php?d=doc&f=doc2&id=1079
5.3 MySQL
MySQL es un sistema de gestin de base de datos relacional, multihilo y multiusuario con
ms de seis millones de instalaciones. MySQL AB desde enero de 2008 una subsidiaria
de Sun Microsystems y sta a su vez de Oracle Corporation desde abril de 2009
desarrolla MySQL como software libre en un esquema de licenciamiento dual.
Por un lado se ofrece bajo la GNU GPL para cualquier uso compatible con esta licencia,
pero para aquellas empresas que quieran incorporarlo en productos privativos deben
comprar a la empresa una licencia especfica que les permita este uso.
Pg.
88
Ingeniera Web
Usuarios destacados: Actualmente (enero 2011) existen ms de 6 millones de copias de

MySQL la que le convierte en el SGBD de mayor base instalada. Entre los usuarios de este
SGBD se encuentran:
Amazon.com
Cox Communications - La cuarta televisin por cable ms importante de EEUU,
tienen ms de 3.600 tablas y aproximadamente dos millones de inserciones cada
hora.
Flickr, usa MySQL para gestionar millones de fotos y usuarios.
Google - Para el motor de bsqueda de la aplicacin AdWords.
Joomla!, con millones de usuarios.
Nokia, usa un cluster MySQL para mantener informacin en tiempo real sobre
usuarios de redes de mviles.
Wikipedia, sirve ms de 200 millones de consultas y 1,2 millones de actualizaciones
cada da, con picos de 11.000 consultas por segundo.
WordPress, con cientos de blogs alojados en l.
Yahoo! - para muchas aplicaciones crticas.
5.4 PHPMYADMIN
phpMyAdmin es una herramienta escrita en PHP con la intencin de manejar la administracin de
MySQL a travs de pginas web, utilizando Internet. Se realiza la gestin de base de datos de
manera ms prctica, est disponible en 62 idiomas. Se encuentra disponible bajo la licencia GPL.
Ingresando al Shell del MYSQL:
En la ventana de comandos digite cmd ingrese a C-Xampp-MySQL-bin, para verificar la versin digite
el siguiente comando que le dar acceso con el usuario por defecto root:
mysql u root
Importante!!! Todas las instrucciones deben terminar con ;
Pg.
89
Ingeniera Web
Ejercicio 1:
Empleando cdigo SQL crear una base de datos Facturacin en la cual se debe crear la tabla
producto que contenga los campos:
Tabla: Laboratorios
CodLab
Nombre
Direccin
JefeVentas
PagWeb
Tipo
Char(4)
Varchar(20)
Varchar(15)
Varchar(15)
Varchar(12)
Tabla: Productos
CodProd
NombreProd
Presentacion
Precio
Stock
CodLab
Los registros a ingresar son:

CodLab
Nombre
1 Abeefe
2 Glaxo
3 Halcn
4 Gen - Far
CodProd
1
2
3
4
5
6
7
8
NombreProd
Rintal
Ventolin
Optifree
Ampicilina
Dexacor
Rondec
Vecotide
Advantege
Null
Not Null
Not Null
Not Null
Tipo
Char(4)
Varchar(20)
Varchar(15)
Numeric(8,2)
Numeric(4)
Char(4)
Direccion
Lima
Lima
Callao
Lima
Presentacion
Gotas
Inhalador
Gotas
Cajas
Cajas
Gotas
Inhalador
Cajas
Null
Not Null
Not Null
Not Null
Not Null
Not Null
JefeVentas
Ing. Flores
Lic. Vargas
Sr. Herrera
Ing Pando
Laboratorio
1
4
3
1
2
3
4
1
PagWeb
www.abeefe.com
www.Glaxo.com
Precio
6.2
23.5
30
16.6
12.7
14.8
32.56
18.66
Stock
230
330
140
145
230
150
100
90
Pg.
90
Ingeniera Web
Instrucciones para crear base de datos (instruccin crate database) y ubicarnos en ella
(instruccin use). Verificamos la base de datos activa (con select dabase();)
Creamos la base de datos con create table

Mediante el siguiente comando SQL creamos la estructura de una tabla Laboratorios.
Notar que CONSTRAINT permite definir claves primarias y forneas.

De igual forma estructurar la tabla Productos
En caso de error puede modificar la tabla mediante ALTER TABLE.

Insertamos los registros mediante insert into y mostramos los resultados mediante select
Pg.
91
Ingeniera Web
Prctica 1:
Culminar la creacin y visualizacin de la base de datos Facturacin.
5.5 GUI para gestores de bases de datos MYSQL
SQL Buddy, es fcil de configurar, un config.php dnde solo tenemos que cambiar
el host de la BD y el nombre de usuario. Est liberado bajo una licencia MIT.
Mysql Quick Admin, es tan funcional como el phpMyAdmin, con un diseo mucho
ms amigable y ms sencillo de instalar.
phpMinAdmin. La menos funcional y atractiva, pero aun as es una opcin cuando

la usabilidad no es lo que ms buscamos.
phpMyAdmin es una herramienta escrita en PHP con la intencin de manejar la

administracin de MySQL a travs de pginas web, utilizando Internet. Es la ms
utilizada actualmente.
Visualizamos en PHPMyAdmin:
Nos dirigimos a localhost/phpmyadmin
En ella buscamos nuestra base de datos creados anteriormente Facturacion y lo visualizamos con
un diseador.
Pg.
92
Ingeniera Web
Tipo de tablas
Favor de revisar los tipos de tablas MySQL que se adjunta, en ella apreciar que el tipo InnoDB
destaca debido a que es una tecnologa de almacenamiento de datos de cdigo abierto para la base
de datos MySQL, incluidos como formato de tabla estndar en todas las distribuciones de MySQL a
partir de las versiones 4.0. Su caracterstica principal es que soporta transacciones y bloqueo de
registros e integridad referencial. InnoDB ofrece una fiabilidad y consistencia muy superior a
MyISAM.
Activar:
Ir a la carpeta mysql y luego a la que dice "bin", aparece un icono en forma de computador llamado
"my". brelo con bloc de notas, note pad o un editor de texto, como quieras y busca la lnea que
diga: skip-innodb, leer las instrucciones para habilitarlo. Reinicie el mysql
Verificar si actualmente soporta, creando una tabla de ejemplo:
UTF-8
UTF-8 (8-bit Unicode Transformation Format) es un formato de codificacin de
caracteres Unicode e ISO 10646 utilizando smbolos de longitud variable. UTF-8
fue creado por Robert C. Pike y Kenneth L. Thompson. Est definido como estndar
por la RFC 3629 de la Internet Engineering Task Force (IETF).
Pg.
93
Ingeniera Web
Prctica N 2
Implementar la base de datos Recursos Humanos mediante PhpMyAdmin, tener en cuenta que
debe ser de modo utf8 y el tipo de tablas debe ser Innodb para garantizar la integridad
referencial.
TABLA CARGO:
Ingresar los siguientes registros:
Pg.
94
Ingeniera Web
TABLA CONTROL
Registros de la tabla:
Pg.
95
Ingeniera Web
TABLA DEPARTAMENTO
Tabla: Ubicacin
Registros de la tabla:
Pg.
96
Ingeniera Web
Tabla empleado
Insertar codigo SQL

INSERT INTO èmpleado` (ìdempleado`, àpellido`, `nombre`, `fecingreso`, èmail`, `telefono`,
ìdcargo`, ìddepartamento`, `sueldo`, `comision`, `jefe`) VALUES
('E0001', 'Coronel', 'Gustavo', '2000-04-01', 'gcoronel@perudev.com', '9666-4457', 'C01', 100,
25000, NULL, NULL),
('E0002', 'Fernandez', 'Claudia', '2000-05-01', 'cfernandez@perudev.com', '9345-8365', 'C03', 100,
8000, NULL, 'E0001'),
('E0003', 'Matsukawa', 'Sergio', '2000-04-01', 'smatsukawa@perudev.com', '9772-8369', 'C02', 102,
15000, NULL, 'E0001'),
('E0004', 'Diaz', 'Mariela', '2000-04-10', 'mdiaz@perudev.com', '8654-6734', 'C06', 102, 1800, NULL,
'E0003'),
('E0005', 'Martinez', 'Roberto', '2000-04-05', 'rmartinez@perudev.com', NULL, 'C08', 102, 7000,
500, 'E0003'),
('E0006', 'Espinoza', 'Miguel', '2000-04-06', 'mespinoza@perudev.com', NULL, 'C08', 102, 7500, 500,
'E0003'),
('E0007', 'Ramos', 'Vanessa', '2002-04-06', 'vramos@perudev.com', '9456-3456', 'C08', 102, 7000,
500, 'E0003'),
('E0008', 'Flores', 'Julio', '2000-04-01', 'jflores@perudev.com', NULL, 'C07', 102, 3500, 1000,
'E0003'),
('E0009', 'Marcelo', 'Ricardo', '2000-04-01', 'rmarcelo@perudev.com', '9936-2966', 'C02', 101,
15000, NULL, 'E0001'),
('E0010', 'Barrios', 'Guisella', '2001-01-15', 'gbarrios@perudev.com', '9023-4512', 'C03', 101, 8000,
NULL, 'E0009'),
('E0011', 'Cuellar', 'Lucy', '2003-02-18', 'lcuellar@perudev.com', NULL, 'C06', 101, 2000, NULL,
'E0009'),
('E0012', 'Valencia', 'Hugo', '2000-05-01', 'hvalencia@perudev.com', '9732-5601', 'C02', 105, 15000,
NULL, 'E0001'),
('E0013', 'Veliz', 'Fortunato', '2000-05-05', 'fveliz@perudev.com', '9826-7603', 'C04', 105, 6000,
NULL, 'E0012'),
Pg.
97
Ingeniera Web
('E0014', 'Aguero', 'Octavio', '2000-05-15', 'oaguero@perudev.com', NULL, 'C07', 105, 3000, 300,
'E0012'),
('E0015', 'Rosales', 'Cesar', '2003-03-15', 'crosales@perudev.com', NULL, 'C07', 105, 2500, 300,
'E0012'),
('E0016', 'Villarreal', 'Nora', '2000-05-01', 'nvillarreal@perudev.com', '9371-3641', 'C02', 103,
15000, NULL, 'E0001'),
('E0017', 'Romero', 'Alejandra', '2000-05-03', 'aromero@perudev.com', '8345-9526', 'C03', 103,
7500, NULL, 'E0016'),
('E0018', 'Valdiviezo', 'Jennifer', '2000-06-12', 'jvaldiviezo@perudev.com', '9263-5172', 'C06', 103,
2000, NULL, 'E0016'),
('E0019', 'Muchotrigo', 'Omar', '2000-05-12', 'omuchotrigo@perudev.com', '9963-5542', 'C05', 103,
3500, 500, 'E0016'),
('E0020', 'Baltazar', 'Victor', '2000-05-18', 'vbaltazar@perudev.com', '9893-4433', 'C05', 103, 3000,
800, 'E0016'),
('E0021', 'Castillo', 'Ronald', '2001-05-18', 'rcastillo@perudev.com', '9234-3487', 'C05', 103, 3000,
800, 'E0016'),
('E0022', 'Espilco', 'Luis', '2002-04-17', 'lespilco@perudev.com', '9554-3456', 'C05', 103, 3000, 300,
'E0016');
5.6 Funciones de acceso a BD

mysql_connect: Abre una conexin a un servidor MySQL y retorna un identificador
positivo si tiene xito o false si hay error. Ejemplo:
<?php
$cn = mysql_connect("localhost","root","");
if($cn){
echo "Conexin: Ok";
} else {
echo "Conexin: Error";
}
?>
mysql_close: Cierra una conexin a un servidor MySQL y retorna un identificador
positivo si tiene xito o false si hay error.
<?php
if($cn){
echo "Conexin: Ok";
} else {
return;
Pg.
98
Ingeniera Web
}
echo "<br>";
$rpta = mysql_close();
if($rpta){
echo "Conexin: Cerrada";
} else {
}
?>
Mysql_select_db: Despus de con el servidor, necesitamos seleccionar la base de
datos con la cual vamos a trabajar, devuelve un identificador de conexin.
<?php
if($cn){
echo "Conexin: Ok";
} else {
return;
}
$rpta = mysql_select_db("rh");
echo "<br>";
if($rpta){
echo "Base de Datos: Ok";
} else {
echo "Base de Datos: Error";
}
$rpta = mysql_close();
echo "<br>";
if($rpta){
echo "Conexin: Cerrada";
} else {
Pg.
99
Ingeniera Web
}
?>
Crear una pgina en PHP que consulte bases de datos:
Consulta1.php
<?php require "libreria.php"; ?>
<link rel="stylesheet" href="estilo.css" type="text/css">
<body>
<h1>Consulta de un Empleado</h1>
<form method="POST" action="consulta1.php">
Cdigo
<input type="text" name="codigo">
</form>
<?php
// Verificar si existe la variable: codigo
if( !isset($_POST["codigo"]) ) {
say( "</body>" );
return;
}
// leer la variable: codigo
$codigo = $_POST["codigo"];
// Conexin con la base de datos
$cn = fnConnect( $msg );
// Verificar la conexin con la base de datos
if( !$cn ) {
fnShowMsg( "Error", $msg );
say( "</body>" );
return;
}
// Realizar consulta a la base de datos
$sql = "select * from empleado ";
$sql .= "where idempleado='$codigo'";
$rs = mysql_query( $sql );
// Verificar si retorna resultado
$rows = mysql_num_rows( $rs );
if( $rows == 0 ) {
$msg = "Cdigo " . $codigo . " no existe.";
fnShowMsg( "Mensaje", $msg );
Pg.
100
Ingeniera Web
say( "</body>" );
return;
}
// Mostrar resultado
say( "<h2>Resultado</h2>" );
say( "<table border=1>" );
say( "<tr>" );
say( "<td>Cdigo</td>" );
say( "<td>" . mysql_result($rs,0,"idempleado") . "</td>" );
say( "</tr>" );
say( "<tr>" );
say( "<td>Apellido</td>" );
say( "<td>" . mysql_result($rs,0,"apellido") . "</td>" );
say( "</tr>" );
say( "<tr>" );
say( "<td>Nombre</td>" );
say( "<td>" . mysql_result($rs,0,"nombre") . "</td>" );
say( "</tr>" );
say( "</table>" );
?>
</body>
Librera.php
<?php
function fnConnect( &$msg){

$cn=mysql_connect("localhost","root","");
if(!$cn){
$msg = "Error en la conexin";
return 0;
}
$rpta = mysql_select_db("rh",$cn);
Pg.
101
Ingeniera Web
if(!$rpta){
$msg = "BD no existe";
mysql_close($cn);
return 0;
}
return $cn;
}
function say($cad){
echo $cad . "\n";
}
function fnShowMsg($title,$msg){
say("<table width='250'>");
say("<tr>");
say("<th align=center valign=middle>$title</th>");
say("</tr>");
say("<tr>");
say("<td align=left valign=middle>".$msg."</td>");
say("</tr>");
say("</table>");
}
Pg.
102
Ingeniera Web
function fnLink($link,$target,$mouseover,$msg){
$cad = "<A href='$link' target='$target' ";
$cad .= "onmouseout=\"self.status='';return true\" ";
$cad .= "onmouseover=\"self.status='$mouseover' ;return true\">";
$cad .= "$msg</A>";
return $cad;
}
?>
Estilo.css
body {
color: #000099;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: 500;
background: #FFF8EC;
}
H1
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2em;
font-weight: 700;
Pg.
103
Ingeniera Web
H2
{
font-size: 1.75em;
font-weight: 700;
}
H3
{
font-size:
1.58em;
font-weight: 500;
}
TABLE {
background-color: #FFEFD5;
}
TH {
font-size: 0.9em;
color: White;
font-weight: 500;
font: bold;
Pg.
104
Ingeniera Web
background: #804D19;
}
TD {
font-size: 0.9em;
font-weight: 500;
color: Navy;
}
5.7 Consulta a bases de datos mysql desde aplicaciones PHP
FUNCIONES:
MYSQL_SELECT_DB
Selecciona una base de datos MySQL
int mysql_select_db ( cadena base_de_datos [, int identificador_de_enlace] )
Devuelve TRUE si todo se llev a cabo correctamente, FALSE en caso de fallo.
MYSQL_QUERY
Enva una sentencia SQL a MySQL
int mysql_query ( string sentencia [, int identificador_de_enlace])
Devuelve TRUE (no-cero) o FALSE para indicar si la sentencia se ha ejecutado correctamente o no. Un valor
TRUE significa que la sentencia era correcta y pudo ser ejecutada en el servidor.
MYSQL_NUM_ROWS
Devuelve el nmero de filas de un resultado
int mysql_num_rows ( int id_resultado )
Regresa el nmero de filas en un resultado. Este comando es vlido solo para las sentencias SELECT. Para
obtener el nmero de filas afectadas por las sentencias INSERT, UPDATE o DELETE, use
mysql_affected_rows().
MYSQL_RESULT
Devuelve datos de un resultado
int mysql_result ( int id_resultado, int numero_de_fila [, mixed campo])
Devuelve el contenido de una celda de un resultado MySQL. El campo argumento puede ser el nombre del
campo o el offset o tabla.nombre_del_campo. Si el nombre de la columna tiene un alias ('select foo as bar
from...'), utilice el alias en lugar del nombre de la columna.
Pg.
105
Ingeniera Web
MYSQL_FETCH_ROW
Devuelve una fila de resultado como matriz
array mysql_fetch_row ( int id_resultado )
Devuelve: Una matriz que corresponde a la fila seleccionada, o FALSE si no quedan ms filas. Selecciona una
fila de datos del resultado asociado al identificador de resultado especificado. La fila es devuelta como una
matriz. Cada columna del resultado es guardada en un offset de la matriz, empezando por el offset 0.
MYSQL_DATA_SEEK
Mueve el puntero interno
int mysql_data_seek ( int id_resultado, int numero_de_fila )
Mueve el puntero de fila interno a la fila especficada para el identificador de resultado. La prxima llamada
a mysql_fetch_row() devolver esa fila.
Devuelve TRUE si todo se llev a cabo correctamente, FALSE en caso de fallo. El nmero de fila inicia con
cero.
MYSQL_FETCH_ASSOC
Recupera una fila de resultado como una matriz asociativa
mysql_fetch_assoc ( resource resultado )
Devuelve una matriz asociativa que corresponde a la fila recuperada y mueve el apuntador de datos interno
hacia adelante. mysql_fetch_assoc() es equivalente a llamar mysql_fetch_array() con MYSQL_ASSOC como el
segundo parmetro opcional. nicamente devuelve una matriz asociativa.
MYSQL_ERRNO
Devuelve el nmero del mensaje de error de la ltima operacin MySQL
int mysql_errno ( [int identificador_de_enlace] )
Regresa el nmero de error de la ltima funcin, o 0 (cero) si no hay error.
Los errores que se obtienen de la base de datos MySQL ya no generan alertas. En lugar de eso, use
mysql_errno() para obtener el cdigo de error. Note que esta funcin solo regresa el cdigo de error de la
funcin MySQL ms recientemente executada (sin incluir mysql_error() y mysql_errno()), as que si quiere
usarla, asegrese de chequear el valor antes de llamar a otra funcin de MySQL.
MYSQL_ERROR
Devuelve el texto con error del mensaje de la anterior operacin MySQL
cadena mysql_error ( [int identificador_de_enlace] )
Regresa el texto del error de la ltima funcin MySQL o (cadena vaca) si no ocurri error. Si no se especfica
el identificador de enlace en la funcin se usa el ltimo enlace abierto exitosamente para obtener el mensaje
de error del servidor MySQL.
OPERACIONES TRANSACCIONES:
Es importante saber que las transacciones son soportadas solo para las tablas tipo innodb
Iniciar transaccin: BEGIN, BEGIN WORK, START TRANSACTION
mysql_query(BEGIN, $cn);
Confirmar transaccin:
mysql_query(COMMIT, $cn);
Cancelar transaccin:
mysql_query(ROLLBACK, $cn);
LIBRERIA.PHP
Para facilitar la programacin, utilizaremos una librera de funciones
Pg.
106
Ingeniera Web
<?php
function fnConnect( &$msg){
$cn=mysql_connect("localhost","root","");
if(!$cn){
$msg = "Error en la conexin";
return 0;
}
$rpta = mysql_select_db("rh",$cn);
if(!$rpta){
$msg = "BD no existe";
mysql_close($cn);
return 0;
}
return $cn;
}
function say($cad){
echo $cad . "\n";
}
function fnShowMsg($title,$msg){
say("<table width='250'>");
say("<tr>");
say("<th align=center valign=middle>$title</th>");
say("</tr>");
say("<tr>");
say("<td align=left valign=middle>".$msg."</td>");
say("</tr>");
say("</table>");
}
function fnLink($link,$target,$mouseover,$msg){
$cad = "<A href='$link' target='$target' ";
$cad .= "onmouseout=\"self.status='';return true\" ";
$cad .= "onmouseover=\"self.status='$mouseover' ;return true\">";
$cad .= "$msg</A>";
return $cad;
}
?>
ESTILO.CSS
Define el estilo de las pginas web que mostrarn los resultados.
body {
color: #000099;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: 500;
background: #FFF8EC;
Pg.
107
Ingeniera Web
}
H1
{
font-size: 2em;
font-weight: 700;
}
H2
{
font-size: 1.75em;
font-weight: 700;
}
H3
{
font-size:
1.58em;
font-weight: 500;
}
TABLE {
background-color: #FFEFD5;
}
TH {
font-size: 0.9em;
color: White;
font-weight: 500;
font: bold;
background: #804D19;
}
TD {
font-size: 0.9em;
font-weight: 500;
color: Navy;
}
CONSULTA1.PHP
Solicite ingreso del cdigo de un empleado y muestre los resultados de cdigo, apellido y
nombre.
Pg.
108
Ingeniera Web
INFORMACIN
CLAVE:
Arquitectura de vinculacin de tecnologas PHP + MySQL
Arquitectura MySQL
ACTIVIDAD:
Desarrolle un sistema web de consulta de empleado.
Pg.
109
Ingeniera Web
CONSULTA1.PHP
<body>
<h1>Consulta de un Empleado</h1>
Cdigo
<input type="text" name="codigo">
</form>
<?php
// Verificar si existe la variable: codigo
if( !isset($_POST["codigo"]) ) {
say( "</body>" );
return;
}
// leer la variable: codigo
$codigo = $_POST["codigo"];
if( !$cn ) {
say( "</body>" );
return;
}
// Realizar consulta a la base de datos
$sql = "select * from empleado ";
$sql .= "where idempleado='$codigo'";
if( $rows == 0 ) {
$msg = "Cdigo " . $codigo . " no existe.";
say( "</body>" );
return;
}
say( "<tr>" );
say( "<td>Cdigo</td>" );
say( "<td>" . mysql_result($rs,0,"idempleado") . "</td>" );
say( "</tr>" );
say( "<tr>" );
say( "<td>Apellido</td>" );
say( "<td>" . mysql_result($rs,0,"apellido") . "</td>" );
say( "</tr>" );
Pg.
110
Ingeniera Web
say( "<tr>" );
say( "<td>Nombre</td>" );
say( "<td>" . mysql_result($rs,0,"nombre") . "</td>" );
say( "</tr>" );
say( "</table>" );
?>
</body>
CONSULTA2.PHP
Consulta que muestre el registro de empleados por departamento, la cual debe ser
seleccionado desde una lista desplegable.

<body>
<?php
if( !$cn ) {
say( "</body>" );
return;
}
?>
<h1>Consulta de Empleados</h1>
Departamento
<select name="dept" size="1">
<?php
$sql = "select iddepartamento, nombre from departamento";
$rs = mysql_query( $sql, $cn );
while( $row = mysql_fetch_row( $rs ) ) {
Pg.
111
Ingeniera Web
$op = "<option value='" . $row[0] . "'>";
$op .= $row[1] . "</option>";
say( $op );
}
?>
</select>
</form>
<?php
// Verificar si existe la variable: dept
if( !isset($_POST["dept"]) ) {
say( "</body>" );
return;
}
// leer la variable: dept
$dept = $_POST["dept"];
// Leer el nombre del departamento
$sql = "Select nombre from departamento ";
$sql .= "where iddepartamento = $dept";
$nom = mysql_result( $rs, 0, 0 );
// Consultar los empleados del departamento
$sql = "select idempleado, apellido, nombre, sueldo from empleado ";
$sql .= "where iddepartamento=$dept";
if( $rows == 0 ) {
$msg = "Departamento $dept - $nom no tiene empleados.";
say( "</body>" );
return;
}
say( "Departamento: $dept - $nom" );
say( "<tr>" );
say( "<th>Cdigo</th>" );
say( "<th>Apellido</th>" );
say( "<th>Nombre</th>" );
say( "<th>Sueldo</th>" );
say( "</tr>" );
say( "<tr>" );
foreach ( $row as $celda) {
if( is_null( $celda ) ) { $celda = "None"; }
say( "<td>$celda</td>" );
}
say( "</tr>" );
}
Pg.
112
Ingeniera Web
say( "</table>" );
?>
</body>
CONSULTA3.PHP
Consulta del nmero de empleados por cargo, la cual debe ser seleccionado desde una lista
desplegable.

<body>
<?php
if( !$cn ) {
say( "</body>" );
return;
}
?>
<h1>Consulta de Empleados</h1>
Cargo
<select name="cargo" size="1">
<?php
$sql = "select idcargo, nombre from cargo";
while( $row = mysql_fetch_assoc( $rs ) ) {
$op = "<option value='" . $row["idcargo"] . "'>";
$op .= $row["nombre"] . "</option>";
say( $op );
}
?>
</select>
</form>
Pg.
113
Ingeniera Web
<?php
// Verificar si existe la variable: cargo
if( !isset($_POST["cargo"]) ) {
say( "</body>" );
return;
}
// leer la variable: cargo
$cargo = $_POST["cargo"];
// Leer el nombre del puesto de trabajo
$sql = "Select nombre from cargo where idcargo = '$cargo'";
$nom = mysql_result( $rs, 0, 0 );
// Consultar los empleados del departamento
$sql = "select iddepartamento as dept, count(*) as emps ";
$sql .= "from empleado ";
$sql .= "where idcargo = '$cargo' ";
$sql .= "group by iddepartamento ";
if( $rows == 0 ) {
$msg = "Cargo $cargo - $nom no tiene empleados.";
say( "</body>" );
return;
}
say( "Cargo: $cargo - $nom" );
say( "<table border=1 width=300>" );
say( "<tr>" );
say( "<th>Departamento</th>" );
say( "<th>Empleados</th>" );
say( "</tr>" );
say( "<tr>" );
say( "<td align='center'>" . $row["dept"] . "</td>" );
say( "<td align='center'>" . $row["emps"] . "</td>" );
say( "</tr>" );
}
say( "</table>" );
?>
</body>
CONSULTA4.PHP
Pgina que muestre los resultados en una pgina pero de 5 registros, los diversos resultados
deber paginarse.
Pg.
114
Ingeniera Web
<?php require( "libreria.php" ); ?>

<body>
<h1>Paginacin</h1>
<h2>Listado de Empleados</h2>
<?php
if( !$cn ) {
say( "</body>" );
return;
}
// Parmetros de Paginacin
$pagesize = 5;
$pageno = 1;
if( isset($_GET["pageno"]) ) { $pageno = $_GET["pageno"]; }
// Paginacin
$dezp = ($pageno - 1) * $pagesize;
$sql = "select count(*) from empleado ";
$rows = mysql_result( $rs, 0, 0 );
$pages = ceil( $rows / $pagesize );
say( "Pginas: " );
for( $i = 1; $i <= $pages; $i++ ) {
if($i != $pageno) {
$link = "<a href='consulta4.php?pageno=$i'>$i</a>";
} else {
$link = $i;
}
say( $link . " " );
}
// Listado
$sql = "select idempleado, apellido, nombre, email ";
$sql .= "from empleado limit $dezp, $pagesize";
Pg.
115
Ingeniera Web
say( "<table border='1'>" );
say( "<tr>" );
say( "<th>Cdigo</th>" );
say( "<th>Apellido</th>" );
say( "<th>Nombre</th>" );
say( "<th>Email</th>" );
say( "</tr>" );
while( $rec = mysql_fetch_row($rs) ) {
say( "<tr>" );
foreach ( $rec as $field ){
say( "<td>$field</td>" );
}
say( "</tr>" );
}
?>
</body>
CONSULTA5.PHP
Consulta que muestra cmo controlar errores, para eso muestra un formulario para el ingreso
de los parmetros necesarios para realizar una conexin, luego intenta realizar una nueva
conexin, de haber un error muestra el nmero de error y el mensaje respectivo.
En caso se ingrese correctamente:
Pg.
116
Ingeniera Web
En caso se ingrese incorrectamente:

<body>
<h1> Probar Conexin </h1>
<?php
if( !$_POST["seguro"] ) {
?>
<table width="300" border='1'>
<tr>
<td>Servidor</td>
<td> <input type="text" name="server"> </td>
</tr>
<tr>
<td>Usuario</td>
<td> <input type="text" name="user"> </td>
</tr>
<tr>
<td>Contrasea</td>
<td> <input type="password" name="pass"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="Limpiar">
</td>
</tr>
</table>
</form>
<?php
} else {
// Captura de Datos
$server = $_POST["server"];
Pg.
117
Ingeniera Web
$user = $_POST["user"];
$pass = $_POST["pass"];
// Probando conexin
$cn = mysql_connect( $server, $user, $pass );
$errno = mysql_errno();
if( $errno == 0 ) {
echo "Conexin Ok <br>";
} else {
echo "Nro. de Error: $errno <br>";
echo "Mensaje: " . mysql_error() . "<br>";
}
echo "<br><a href='consulta5.php'>Nueva Prueba</a>";
}
?>
</body>
CONSULTA6.PHP
Consulta que muestra cmo controlar errores, para eso muestra un formulario para el ingreso
de los parmetros necesarios para realizar una conexin, luego intenta realizar una nueva
conexin, de haber un error muestra el nmero de error y el mensaje respectivo.

Pg.
118
Ingeniera Web
<body>
<?php
if( !$cn ) {
say( "</body>" );
return;
}
say( "<h1>Nuevo Empleado</h1>" );
if( !$_POST["seguro"] ) {
// ******************************
// Formulario de Ingreso de Datos
// ******************************
?>
<table width="300" border='1'>
<tr>
<td> Apellido </td>
<td> <input type="text" name="apellido"> </td>
</tr>
<tr>
<td> Nombre </td>
<td> <input type="text" name="nombre"> </td>
</tr>
<tr>
<td> Email </td>
<td> <input type="text" name="email"> </td>
</tr>
<tr>
<td> Telfono </td>
<td> <input type="text" name="telefono"> </td>
</tr>
<tr>
<td> Departamento </td>
<td>
<select name="dept" size="1">
<?php
$sql = "select iddepartamento, nombre from departamento ";
$sql .= "where iddepartamento in ";
$sql .= "(select distinct iddepartamento from empleado)";
$op = "<option value='" . $row[0] . "'>" . $row[1] . "</option>";
say( $op );
}
?>
</select>
</td>
</tr>
Pg.
119
Ingeniera Web
<tr>
<td> Cargo </td>
<td>
<select name="cargo" size="1">
<?php
$sql = "select idcargo, nombre from cargo ";
$sql .= "where idcargo not in ('C01', 'C02')";
$op = "<option value='" . $row["idcargo"] . "'>";
$op .= $row["nombre"] . "</option>";
say( $op );
}
?>
</select>
</td>
</tr>
<tr>
<td> Sueldo </td>
<td> <input type="text" name="sueldo"> </td>
</tr>
<tr>
<td> Comisin </td>
<td> <input type="text" name="comision"> </td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="Limpiar">
</td>
</table>
</form>
<?php
} else {
// *******************
// Procesar Formulario
// *******************
// Captura de Datos
$ape = $_POST["apellido"];
$nom = $_POST["nombre"];
$email = $_POST["email"];
$tel = $_POST["telefono"];
$cargo = $_POST["cargo"];
$dept = $_POST["dept"];
$sueldo = $_POST["sueldo"];
$comm = $_POST["comision"];
// Inicio de Transaccion
mysql_query( "begin", $cn );
// Generar Codigo
$sql = "select valor from control ";
Pg.
120
Ingeniera Web
$sql .= "where parametro = 'Empleado'";
$cont = mysql_result( $rs, 0, 0 );
$sql = "update control set valor = valor + 1 ";
$sql .= "where parametro = 'Empleado'";
$rpta = mysql_query( $sql, $cn );
if( !rpta ) {
mysql_query( "rollback", $cn );
fnShowMsg( "Error", "No se puede generar el su cdigo." );
say( "</body>" );
return;
}
$codigo = "0000" . $cont ;
$codigo = "E" . substr( $codigo, strlen($codigo) - 4 );
// Determinar el codigo del jefe
$sql = "select idempleado from empleado ";
$sql .= "where iddepartamento = '$dept' ";
$sql .= "and idcargo in ( 'C01', 'C02' ) ";
if( $rows != 1 ) {
fnShowMsg( "Error", "No se pudo determinar el Jefe." );
say( "</body>" );
return;
}
$jefe = mysql_result( $rs, 0, 0 );
// Registrar el Empleado
$sql = "insert into empleado(idempleado, apellido, nombre,";
$sql .= "fecingreso, email, telefono, idcargo, iddepartamento,";
$sql .= "sueldo, comision, jefe ) values ( '$codigo', '$ape', ";
$sql .= "'$nom', curdate(), '$email', '$tel', '$cargo', $dept, ";
$sql .="$sueldo, $comm, '$jefe')";
$rpta = mysql_query( $sql, $cn );
if(!$rpta){
$msg = "Datos ingresados no son correctos.<br>";
$msg .= "SQL: $sql";
say( "</body>" );
return;
}
mysql_query( "commit", $cn );
$msg = "Empleado registrado correctamente.<br>";
$msg .= "Cdigo Generado: $codigo<br>";
say( fnLink( "ejm1509.php","","Nuevo Empleado", "Nuevo Empleado" ) );
}
?>
</body>
Pg.
121
Ingeniera Web
UNIDAD N III
SESIN I:
Servidor web en Windows y Linux: Arquitecturas y tecnologas
LOGRO:
Reconoce las Arquitecturas y tecnologas de servidores web
INFORMACIN:
6.1 Solucin LAMP
El acrnimo 'LAMP' se refiere a un conjunto de subsistemas de software necesarios para

alcanzar una solucin global, en este caso configurar sitios web o servidores dinmicos
con un esfuerzo reducido. En las tecnologas LAMP esto se consigue mediante la unin
de las siguientes tecnologas:
Linux, el sistema operativo; En algunos casos tambin se refiere a LDAP.
Apache, el servidor web;
MySQL, el gestor de bases de datos;
Perl, PHP, o Python, los lenguajes de programacin.
La combinacin de estas tecnologas es usada primariamente para definir la infraestructura

de un servidor web, utilizando un paradigma de programacin para el desarrollo. A pesar
de que el origen de estos programas de cdigo abierto no han sido especficamente
diseado para trabajar entre s, la combinacin se populariz debido a su bajo coste de
adquisicin y ubicuidad de sus componentes (ya que vienen pre-instalados en la mayora
de las distribuciones linux). Cuando son combinados, representan un conjunto de
soluciones que soportan servidores de aplicaciones.
Ampliamente promocionado por el editor de la editorial O'Reilly, Dale Dougherty, a
sugerencia de David Axmark y Monty Widenus desarrolladores de MySQL, la influencia de
la editorial O'Reilly en el mundo del software libre hizo que el trmino se popularizara
rpidamente en todo el mundo.
Pg.
122
Ingeniera Web
6.2 Servidor Apache
Instalar apache:
yum install httpd
Directorio de Apache
/etc/httpd/conf/httpd.conf
Instalar PHP:
yum install php
Luego procedemos con instalar el MySQL Server:
yum install php-mysql mysql mysql-server
/sbin/chkconfig --levels 235 mysqld on
/etc/init.d/mysqld start
Verificamos los servicios del servidor Web Apache:
service httpd start
Para reiniciar el comando es:
service httpd restart
Para detener el servidor:
service httpd stop
Verificar en:
http://localhost
Crear la siguiente pagina index.php
<?php phpinfo(); ?>
y guardar en /var/www/html
INFORMACIN
CLAVE:
Arquitectura web completa con servidor en la nube (ejm. Amazon) y CMS
Pg.
123
Ingeniera Web
ACTIVIDAD:
Identificar las caractersticas tcnicas de un servidor web

Remitir la proforma de un servidor web fsico
Remitir la proforma de un servidor web en la nube
Comparar y elegir un proveedor de hosting gratuito en la que desarrollar la
prctica.
Pg.
124
Ingeniera Web
SESIN II:
Content Management System (CMS):
Ingeniera inversa para aplicaciones de Portales web
Ingeniera inversa para aplicaciones de Webblog

Ingeniera inversa para sistemas de Informacin empresariales.
LOGRO:
Implementa CMS aplicados a portales y blogs
INFORMACIN:
6.3 CMS
Un sistema de gestin de contenidos (en ingls Content Management System, abreviado

CMS) es un programa que permite crear una estructura de soporte (framework) para la
creacin y administracin de contenidos, principalmente en pginas web, por parte de los
participantes.
Consiste en una interfaz que controla una o varias bases de datos donde se aloja el
contenido del sitio. El sistema permite manejar de manera independiente el contenido y el
diseo. As, es posible manejar el contenido y darle en cualquier momento un diseo
distinto al sitio sin tener que darle formato al contenido de nuevo, adems de permitir la
fcil y controlada publicacin en el sitio a varios editores. Un ejemplo clsico es el de
editores que cargan el contenido al sistema y otro de nivel superior (directorio) que permite
que estos contenidos sean visibles a todo el pblico (los aprueba).
Tipos de gestores de contenidos
Los gestores de contenido se pueden clasificar segn diferentes criterios:
Por sus caractersticas
Segn el lenguaje de programacin empleado, como por ejemplo Active Server

Pages, Java, PHP, ASP.NET, Ruby On Rails, Python
Segn la licencia: Cdigo abierto o Software privativo
Por su uso y funcionalidad
Blogs; pensados para pginas personales.
Foros; pensados para compartir opiniones.
Wikis; pensados para el desarrollo colaborativo.
Enseanza; plataforma para contenidos de enseanza on-line.
Comercio electrnico; plataforma de gestin de usuarios, catlogo, compras y

pagos.
Publicaciones digitales.
Pg.
125
Ingeniera Web
Difusin de contenido multimedia.
Iniciativas de estandarizacin
Dentro de los portales se han realizado procesos de estandarizacin encaminados a la
homogeneizacin en las interfaces de programacin de los mismos de tal manera que un
servicio desarrollado para un portal pueda ejecutarse en cualquier otro portal compatible
con el estndar. El objetivo es obtener portales interoperables evitando desarrollo
propietarios.
Las dos iniciativas ms importantes son la Portlet Specification API JSR-168, la Content
Repository API JSR-170
INFORMACIN
CLAVE:
Principales CMS del tipo Portal Web:
Pg.
126
Ingeniera Web
ACTIVIDAD:
Actividad 1: Implementar un portal blog basado en Wordpress la cual debe tener lo
siguiente:
El diseador crtico
BLOG WEB:
Desarrollar lo siguiente:
Instalar el Servidor Apache y el Gestor de base de datos MySQL a nivel local
Verificar que estn en funcionamiento
Descargar Wordpress
Instalar el Wordpress en una carpeta con el nombre blog, as por ejemplo su direccin de su portal
ser localhost/blog
Para instalar se requiere del archivo wp-config.php y deber cambiar el nombre del archivo wpconfig-sample.php
Dicho fichero editarlo con el Adobe Dreamweaver y modificar las siguientes lneas:
// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'database_name_here');
/** MySQL database username */
define('DB_USER', 'username_here');
/** MySQL database password */
define('DB_PASSWORD', 'password_here');
/** MySQL hostname */
define('DB_HOST', 'localhost');
Luego de ello proceder con la instalacin a nivel local de Wordpress al digital localhost/blog
Ingrese como administrador a su portal web
En settings (configuracin) ingresar la siguiente informacin:
Tagline: Crtico y perfeccionista
Timezone: UTC-5 horas
Date Format: elegir el formato de fecha que desea
Time Format: elegir el formato de hora que desea
No deseas que comenten tus opiniones? Si lo que quieres es ello pero rompe la naturaleza de los
blogs deber ir a settings y en Discussion desactivar
Allow people to post comments on new articles
Y se recomienda moderar las respuestas para que no sean ofensivas, para ello deber activar la
opcin: An administrator must always approve the comment
Definir los tamaos de imgenes al insertar en el blog, los tamaos son: miniatura, mediano y largo
Colocar las themes en wp-content y cambiar el theme del blog en apariencia-themes
Ingresar el primer post que reemplace el Hello World con la categora Crtica y los siguientes tags:
diseo, plagio, matiz y colocar la imagen plagio.jpg
El plagio en el diseo y sus matices

Todo diseo reconoce antecedentes, todo lo nuevo se basa en experiencias anteriores, y en ese proceso,
inevitable y legtimo, tambin hay lugar para la mala fe.
Comparto el siguiente artculo de Andr Ricard acerca del plagio en el diseo, espero les encante:
Me parece una buena costumbre consultar el diccionario para verificar el significado de ciertas palabras, incluso
de las que empleamos de un modo corriente. Descubro, a menudo, que no las usamos siempre en su ms
correcto sentido. Plagiar, por ejemplo, significa copiar en lo sustancial obras ajenas, dndolas como propias.
Verbo que proviene del latn plagiare que significa utilizar un siervo ajeno como si fuera propio. Me ha parecido
curiosa esa referencia a lo sustancial. Es un matiz que incita a la reflexin sobre lo que, habitualmente,
entendemos como plagios. Pues qu es lo sustancial en una obra creativa?, sus cualidades formales?, el
concepto en que se ampara?, las emociones que suscita? Si as fuera, el plagio llegara a ser inevitable en
Pg.
127
Ingeniera Web
cualquier creacin, pues es difcil que algo surja de la nada y siempre existir algo previo a relacionar con lo
nuevo.
En efecto, si como parece ser, las obras humanas siguen un proceso evolutivo paralelo al de las especies vivas,
todo lo que el Hombre ha ido creando a lo largo de su historia se inici con esos guijarros desportillados de la
prehistoria. De all parti el proceso evolutivo que, a lo largo de los siglos y a base de pequeas mejoras que
aporta a lo existente, nos ha llevado al inmenso bagaje de objetos y cosas de que disponemos hoy. As, toda
creacin tiene un precedente del que se diferencia ms o menos pero del que recibe siempre un legado, que es
como el testigo de esa carrera de relevos que viene a ser la evolucin de las cosas que el Hombre crea.
Quiero sealar que aun cuando lo expuesto pudiera aplicarse tambin a otras reas creativas, estas
consideraciones se refieren esencialmente a la creatividad en el mbito de los objetos tiles. De todo lo dicho
podra deducirse que el plagio es legtimo como prctica creativa, pero no es as. Sin embargo me pareca
necesario remarcar el hecho de que cualquier fenmeno creativo encierra forzosamente en s mismo una
referencia a algo anterior. Una referencia que es como la espora que necesitamos para fecundar nuestra
imaginacin pero que hemos de lograr transfigurar en algo distinto, para que el acto pueda ser calificado como
creativo. Y es en esta capacidad de transfiguracin que reside la diferencia entre un gesto autnticamente
creativo y el mero plagio.
La relacin entre lo nuevo y sus antecedentes
En efecto, si es cierto que lo nuevo le debe siempre algo a lo que ya exista, el nivel de relacin entre ambos
puede ser de muy distinto calibre segn el grado de analoga que mantengan, grados que pueden ir de la simple
sugerencia a la burda copia. Pueden as distinguirse varios niveles de menor a mayor grado de similitud.
En el nivel ms alto y ms noble de esta escala situara la capacidad de inspirar que tienen ciertas ideas y cosas
ya creadas que ejercen un fuerte estimulo para nuestra propia creatividad. Estas generan una incitacin creativa
que nos impulsa, no ya a copiarlas, sino a superarlas. En cierto modo, esa inspiracin nos embriaga y nos lleva
a sentirnos dioses capaces de rebasar los lmites de lo conocido y descubrir nuevos horizontes. Y es que el acto
creativo puro tiene siempre la arrogancia de un acto de soberbia.
En un nivel menor situara la recuperacin para un nuevo diseo de una solucin funcional de demostrada
fiabilidad creada por otro. Hay as ideas que por su alto nivel de acierto pasan a ser patrimonio colectivo. Pueden
entonces reutilizarse, sin reparos, donde sean necesarias. Peor sera que, para eludir tal adopcin, se
desarrollara un sistema nuevo pero de menor calidad funcional. Este acto de adopcin que incorpora ciertos
dispositivos ajenos en una obra personal resulta un saludable acto de humildad que en nada ha de desmerecer
la calidad y originalidad de conjunto de una nueva obra.
Tambin situara al nivel de lo permisible la copia sublimada que se halla, de hecho, a medio camino entre la
creacin y el plagio, pues perfecciona lo que imita hasta el extremo que en algunos casos vemos que ciertas
copias superan a la obra original. Quien osa as retomar una obra ajena se siente totalmente identificado, de
un modo activo con el autor original con quien, en cierto modo, colabora a distancia para elevar la idea inicial
hacia un nivel de mayor perfeccin.
El plagio como manifestacin de incapacidad
Hasta aqu quienes se inspiran en mayor o menor grado de una obra ajena siguen siendo creativos en el sentido
literal de la palabra, pues aportan ideas propias y se desmarcan, de un modo u otro, de lo que ya existe. En
cambio, si analizamos las motivaciones profundas que incitan al plagio veremos que este se produce, a menudo,
como consecuencia de la incapacidad creativa de quien lo comete. El plagiador se siente anonadado ante el
reto que supondra superar aquello que admira; pues slo se plagia lo que se admira. El plagio ha de ser
entendido como la manifestacin de la ms sublime admiracin. Al plagiar, la veneracin es tal que llega hasta
el extremo de paralizar la vena creativa del admirador que, irremediablemente cautivo de aquello que le atrae,
es incapaz de distanciarse del objeto de su pasin que aspira a hacer suyo. El plagio le permite saciar ese
incoercible deseo de posesin. Siendo as que, el creativo cuya obra ha sido plagiada, y al margen, claro est,
de las implicaciones econmicas que ello conlleva, habra de entender el plagio como un privilegio que slo
merecen las obras que destacan.
Pg.
128
Ingeniera Web
El plagio como mtodo de produccin
Al margen de estas consideraciones motivacionales desde el prisma creativo, existen otras motivaciones que
no pueden explicarse desde el prisma ntimo de la psicologa creativa, sino ms llanamente desde lo que llamara
la pillera comercial. Me refiero al plagio que ciertas industrias ejercen como poltica de empresa. Se trata
entonces de una descarada depredacin en terreno ajeno con fines de lucro, con pocos gastos y sin riesgo
alguno. All ya no es la admiracin la que incita las decisiones, sino el xito conseguido por un producto
competidor y la consecuente envidia que ello genera. Bajamos muchos escalones en la valoracin del fenmeno,
pues si el plagio al que se presta un creativo, como toda impotencia, nos mueve a cierta compasin o
comprensin; aquel que framente decide una empresa nos parece, por principio, ticamente inexcusable. Digo
por principio pues hay que reconocer que, a veces, este acto de piratera puede no ser tan nefasto para el
pblico consumidor si se enjuicia desde una perspectiva social.
Al margen de las implicaciones de ndole legal que este tipo de hurto supone, el plagio, la copia de un producto
comercial puede resultar perfectamente defendible desde un punto de vista del colectivo. En efecto, los plagios
suelen ofrecer productos ms econmicos y si bien son de una calidad inferior sta no deja de estar
proporcionada a su precio. Cuntos relojes made in Hong Kong idnticos en todo detalle al de una gran marca
se venden por cuatro cuartos y no por ello dejan de dar la hora con exactitud. Estos productos resultan as
asequibles a un sector de pblico ms amplio que no puede adquirir el producto original. Un producto que ha de
soportar los costes de creacin y promocin que supone abrir un mercado del que luego se beneficiarn sin
problema quienes le copien.
El plagio como aprendizaje
Otra constatacin histrica sera que el plagio ha sido uno de los medios ms habituales de aprendizaje de que
ha dispuesto el Hombre para adiestrarse. No slo en las academias de arte los alumnos noveles copian yesos
y pinturas originales para aprender de los maestros del pasado. Un mtodo que tambin sigue el aprendiz de
artesano. Quin no recuerda la poca en que los productos japoneses tenan fama de ser una copia literal de
productos occidentales? Esos plagios siguieron existiendo hasta el momento en que, habiendo aprendido todo
lo que podamos ensearles, empezaron ellos a mostrarnos lo que saban hacer por s mismos, mejorando
primero lo existente y abriendo luego paso a nuevas perspectivas. Ahora, en muchas reas, son ellos los que
ms innovan y nosotros los que les seguimos.
El plagio no es un aporte
De hecho, la crtica ms severa que puede hacerse al plagio es que, repitiendo lo existente, frena el natural
proceso evolutivo de las cosas. Quien plagia no aporta una nueva alternativa que venga a completar o suplir lo
conocido y de este modo retarda su progreso. Reeditar algo que existe sin aportar variacin alguna slo se
justifica cuando no se ve modo de mejorarlo. Y este es precisamente el reto que alienta al creativo: hallar siempre
otra solucin que superando lo conocido aporte algo al bagaje cultural de su poca.
Ingresar otro post que reemplace con la categora Diseadores y los siguientes tags: diseador,
verdad, responsabilidad y colocar la imagen milton.jpg
Diez cosas que aprend como diseador

Resumido del libro de Milton Glaser acerca de las cosas que aprendi como diseador a lo largo de los
aos, vale la pena leerlo.
1. Slo puedes trabajar para gente que te agrada.
Es una regla curiosa que me llev mucho tiempo aprender porque, de hecho, en los inicios de mi prctica senta
lo contrario. Ser profesional requera que no te gustara particularmente la gente para la cual trabajabas, o al
menos que mantuvieras una relacin distante, lo que significaba no almorzar con los clientes ni tener encuentros
sociales. Hace algunos aos me di cuenta de que lo opuesto era verdad. Descubr que todo el trabajo valioso y
significativo que haba producido, provena de relaciones afectivas con los clientes. No estoy hablando de
profesionalismo; estoy hablando de afecto. Estoy hablando de compartir con el cliente algunos principios
Pg.
129
Ingeniera Web
comunes. Que de hecho tu visin de la vida sea congruente con la del cliente. De otro modo la lucha es amarga
y sin esperanzas.
2. Si puedes elegir, no tengas un empleo
Una noche estaba sentado en mi auto fuera de la Universidad de Columbia, donde mi esposa Shirley estudiaba
antropologa. Mientras esperaba escuchaba la radio y o a un periodista preguntar: Ahora que lleg a los setenta
y cinco, tiene algn consejo para nuestra audiencia sobre cmo prepararse para la vejez?. Una voz irritada
dijo: Por qu ltimamente todos me preguntan sobre la vejez?. Reconoc la voz de John Cage. Estoy seguro
que muchos saben quin fue el compositor y filsofo que influenci a gente como Jasper Johns y Merce
Cunningham y al mundo de la msica en general. Apenas lo conoc y admir su contribucin a nuestro tiempo.
Sabes, no se cmo prepararme para la vejez, dijo. Nunca tuve un empleo, porque si tienes un empleo, algn
da alguien te lo sacar y entonces no estars preparado para la vejez. Para mi ha sido lo mismo cada da desde
los doce. Me levanto a la maana y trato de darme una idea de cmo llevar el pan a la mesa hoy. Es lo mismo
a los setenta y cinco: me levanto cada maana y pienso cmo voy a llevar el pan a la mesa hoy. Estoy
excelentemente bien preparado para la vejez.
3. Alguna gente es txica, mejor evitarla
(Este es un apartado del punto 1) En los sesenta haba un hombre llamado Fritz Perls que era psiclogo
gestltico. La terapia Gestalt, derivada de la historia del arte, propone que debes comprender el todo antes
de los detalles. Lo que debes observar es la cultura entera, la familia completa, y la comunidad, etc. Perls
propona que en todas las relaciones la gente puede ser tanto txica como enriquecedora entre s. No es
necesariamente cierto que la misma persona ser txica o enriquecedora en todas sus relaciones, pero la
combinacin de dos personas puede producir consecuencias txicas o enriquecedoras. Y lo importante que
puedo contar es que hay un test para determinar si alguien es txico o enriquecedor en su relacin contigo. Aqu
va el test: tienes que pasar algn tiempo con la persona, as sea tomar un trago, ir a cenar o ir a ver un juego
deportivo. No importa demasiado, pero al final observa si te sientes con ms o menos energa, si estas cansado
o si ests fortalecido. Si estas ms cansado, entonces te han envenenado. Si tienes ms energa, te han
enriquecido. El test es casi infalible y sugiero usarlo toda la vida.
4. El profesionalismo no alcanza, o lo bueno es enemigo de lo genial
Cuando comenc mi carrera quera ser profesional. Esa era mi aspiracin porque los profesionales pareca
saber todo sin mencionar que adems les pagan por eso. Ms tarde, despus de trabajar un tiempo, descubr
que el profesionalismo en si mismo era una limitante. Despus de todo, lo que profesionalismo significa en la
mayora de los casos es reduccin de riesgos. As, si quieres arreglar tu auto vas a un mecnico que sepa
como lidiar con el problema que tiene. Supongo que si necesitas ciruga del cerebro no querrs tener cerca a
un doctor tonto inventando una nueva forma de conectar tus terminaciones nerviosas. Por favor hazlo de la
forma que ha funcionado bien en el pasado.
Desafortunadamente nuestro campo, el as llamado creativo (odio esa palabra porque se suele usar mal, odio
el hecho de que se la use como sustantivo, te imaginas llamar a alguien creativo?), cuando haces algo en
forma recurrente para reducir riesgos o lo haces de la misma forma en que lo has hecho antes, se vuelve claro
por qu el profesionalismo no es suficiente. Despus de todo, lo que ser requiere en nuestro campo, ms que
cualquier otra cosa, es la transgresin continua. El profesionalismo no da lugar a la transgresin porque sta
incluye la posibilidad de error, y si eres profesional tu instinto te dicta no fallar, sino repetir el xito. Entonces el
profesionalismo como aspiracin de vida es una meta limitada.
5. Menos no necesariamente es ms
Al ser hijo del modernismo escuch este mantra toda mi vida: menos es ms. Una maana, antes de
levantarme, me di cuenta de que era un sinsentido total, un asunto absurdo y bastante vaco. Pero suena
importante porque contiene dentro de s una paradoja resistente a la razn. Sin embargo no funciona cuando
pensamos en la historia visual del mundo. Si observas una alfombra persa, no puedes decir que menos es ms
porque te das cuenta de que cada parte de esa alfombra, cada cambio de color, cada cambio de forma es
absolutamente esencial para su calidad esttica. No se puede probar de ninguna manera que una alfombra lisa
Pg.
130
Ingeniera Web
es superior. Lo mismo con el trabajo de Gaud, las miniaturas persas, el art nouveau y muchas otras cosas.
Tengo una mxima alternativa que creo que es ms apropiada: suficiente es ms.
6. El estilo no es confiable
Creo que esta idea se me ocurri por primera vez cuando miraba una maravillosa acuarela de un toro de Picasso.
Era una ilustracin para un cuento de Balzac llamado La obra maestra desconocida. Es un toro expresado en
doce estilos diferentes, desde una versin muy naturalista a una abstraccin reducida a una simple lnea, con
todos los pasos intermedios. Lo que surge con claridad al observar este impreso es que el estilo es irrelevante.
En cada uno de esos casos, desde la abstraccin extrema al naturalismo fiel, todos son extraordinarios ms all
del estilo. Es absurdo ser leal a un estilo. No merece tu lealtad. Debo decir que para los viejos profesionales del
diseo es un problema, porque el campo est manejado ms que nunca por intereses econmicos. El cambio
de estilo suele estar ligado a factores econmicos, como todos los que leyeron a Marx saben. Tambin se
produce cansancio cuando la gente ve demasiado de lo mismo todo el tiempo. Entonces, cada diez aos ms o
menos se produce un cambio estilstico y las cosas se vuelven diferentes. Las tipografas van y vienen y el
sistema visual cambia un poco. Si tienes aos de trabajo como diseador tienes el problema esencial de qu
hacer. Quiero decir, despus de todo, has desarrollado un vocabulario, una forma que te es propia. Es uno de
los modos de distinguirte de tus pares y establecer tu identidad en el campo del diseo. Mantener tus creencias
y preferencias se vuelve un acto de equilibrio. La duda entre perseguir el cambio o mantener tu propia forma
distintiva se vuelve complicado. Todos hemos conocido casos de ilustres mdicos cuyo trabajo repentinamente
se pas de moda o, ms precisamente, se qued en el tiempo. Y all hay historias tristes como la de Casandre,
indiscutidamente el ms grande diseador grfico de la dcada del 20 del siglo XX, que no pudo ganarse la vida
en sus ltimos aos y se suicid.
7. En la medida en que vives, tu cerebro cambia
El cerebro es el rgano ms activo del cuerpo. De hecho es el rgano ms susceptible de cambiar y regenerarse
de todos los rganos. Tengo un amigo llamado Gerard Edelman que es un gran erudito en estudios del cerebro,
que dice que la analoga del cerebro con la computadora es lamentable. El cerebro es ms como un jardn
silvestre que constantemente est creciendo y esparciendo semillas, regenerndose, etc. Y l cree que el
cerebro es susceptible en una forma de la cual no somos totalmente concientes a toda experiencia y a todo
encuentro que tengamos en nuestra vida.
Me fascin una historia en un peridico hace pocos aos acerca de la bsqueda del odo absoluto. Un grupo de
cientficos decidi que descubrira por qu alguna gente tiene odo absoluto. Son los que pueden escuchar una
nota con precisin y replicarla exactamente en el tono correcto. Alguna gente tiene un odo muy fino, pero el
odo absoluto es raro incluso entre los msicos. Los cientficos descubrieron no s cmo que en la gente
con odo absoluto el cerebro era diferente. Ciertos lbulos del cerebro haban experimentado algn cambio o
deformacin recurrente entre quienes tenan odo absoluto. Esto fue suficientemente interesante en s mismo,
pero entonces descubrieron algo an ms fascinante: si tomas un grupo de nios de cuatro o cinco aos de
edad y les enseas a tocar el violn, luego de unos aos algunos de ellos habrn desarrollado el odo absoluto,
y en todos esos casos su estructura cerebral habr cambiado. Bien qu podra significar eso para el resto
de nosotros? Tendemos a creer que la mente afecta al cuerpo y el cuerpo afecta la mente, pero generalmente
no creemos que todo lo que hacemos afecte el cerebro. Estoy convencido de que si alguien me gritara desde el
otro lado de la calle mi cerebro podra ser afectado y mi vida podra cambiar. Es por eso que mi madre siempre
deca: no te juntes con esos chicos malos. Mam tena razn. El pensamiento cambia nuestra vida y nuestro
comportamiento.
Tambin creo que el dibujo funciona de la misma manera. Soy un gran defensor del dibujo, no por haberme
convertido en ilustrador, sino porque creo que el dibujo cambia el cerebro de la misma forma en que encontrar
la nota correcta cambia la vida de un violinista. El dibujo te vuelve atento, te hace prestar atencin a lo que ves,
lo cual no es tan fcil.
8. La duda es mejor que la certeza
Todo el mundo habla siempre de tener confianza, de creer en lo que haces. Recuerdo una vez en clase de yoga,
el profesor dijo que, espiritualmente hablando, si tu crees que has alcanzado la iluminacin apenas has
alcanzado tus lmites. Pienso que es verdad en un sentido prctico. Las creencias profundamente arraigadas
Pg.
131
Ingeniera Web
de cualquier tipo evitan que te abras a experimentar, y es por eso que encuentro cuestionable a toda posicin
ideolgica sostenida con firmeza. Me pone nervioso cuando alguien cree demasiado en algo. Ser escptico y
cuestionar toda conviccin arraigada es esencial. Por supuesto hay que tener clara la diferencia entre
escepticismo y cinismo, porque el cinismo es tan restrictivo a la propia apertura al mundo como las convicciones
apasionadas: son como gemelos. En definitiva, resolver cualquier problema es ms importante que tener razn.
Existe una sensacin de autosuficiencia tanto en el mundo del arte como en el del diseo. Tal vez comienza en
la escuela. Las escuelas de arte a menudo comienzan con el modelo de personalidad singular de Ayn Rand,
resistiendo a las ideas de la cultura que la rodeaba. La teora de las vanguardias es que como individuo tu
puedes transformar el mundo, lo cual es verdad hasta cierto punto. Uno de los signos del ego daado es la
certeza absoluta.
Las escuelas alientan la idea de no ceder y defender tu trabajo a toda costa. Bien, el asunto es que nuestro
trabajo consiste en lograr ponerse de acuerdo. Slo tienes que saber en qu ceder. La bsqueda ciega de tus
propios fines a costas de excluir la posibilidad de que otros puedan tener razn, no tiene en cuenta el hecho de
que en diseo siempre lidiamos con una trada: el cliente, la audiencia y tu mismo. Lo ideal sera que mediante
alguna clase de negociacin todas las partes ganaran, pero la autosuficiencia suele ser el enemigo. El
narcisismo generalmente proviene de alguna clase de trauma de la infancia que no debe profundizarse. Se trata
de un aspecto muy difcil en las relaciones humanas. Hace algunos aos le una cosa muy notable sobre el
amor, que tambin aplica a la naturaleza de la relacin con los otros. Era una cita de Iris Murdoch en su
obituario. Deca: El amor es el hecho extremadamente difcil de darse cuenta de que el otro, que no es uno,
es real. No es fantstico?! La mejor conclusin sobre el tema del amor que se pueda imaginar.
9. Sobre la edad
El ao pasado alguien me regalo para mi cumpleaos un libro encantador de Roger Rosenblatt, llamado Ageing
Gracefully (Envejeciendo con gracia). No me di cuenta del ttulo en el momento, pero contiene una serie de
reglas para envejecer con gracia. La primera regla es la mejor: No importa. No importa lo que pienses. Sigue
esta regla y agregars dcadas a tu vida. No importa si es tarde o temprano, si ests aqu o all, si lo dijiste o
no, si eres inteligente o estpido. Si saliste despeinado o calvo o si tu jefe te mira cruzado o tu novio o novia te
mira cruzado, si tu ests cruzado. Si consigues o no que te den ese ascenso o premio o casa no importa.
Sabidura al fin. Entonces escuch un maravilloso cuento que pareca relacionada con la regla nmero diez: Un
carnicero estaba abriendo su negocio una maana y mientras lo haca un conejo asom su cabeza a travs de
la puerta. El carnicero se sorprendi cuando el conejo pregunt: Tiene repollo?. El carnicero dijo: Esta es
una carnicera, vendemos carne, no vegetales. El conejo se fue saltando. Al da siguiente el carnicero estba
abriendo su negocio y el conejo asom su cabeza y pregunt: Tiene repollo?. El carnicero ahora enojado le
respondi: Escchame pequeo roedor, te dije ayer que vendemos carne, no vegetales, y la prxima vez que
vengas por aqu te voy a agarrar del cogote y clavar esas orejas flojas al suelo. El conejo desapareci
precipitadamente y nada sucedi durante una semana. Entonces una maana el conejo asom su cabeza desde
la esquina y pregunt: tiene clavos?. El carnicero dijo: No. Entonces el conejo dijo: Tiene repollo.
10. Decir la verdad
El cuento del conejo es importante porque se me ocurri que buscar repollo en una carnicera sera como buscar
tica en el campo del diseo. No parece ser el lugar ms adecuado para encontrarla tampoco. Es interesante
observar que en el nuevo cdigo de tica de la AIGA (American Institute of Graphic Arts) aparece una cantidad
importante de informacin sobre conductas para con los clientes y para con otros diseadores, pero ni una
palabra acerca de la relacin del diseador con el pblico. Lo que se espera del carnicero es que venda carne
que se pueda comer y no mercadera engaosa. Recuerdo haber ledo que durante los aos de Stalin en Rusia,
todo lo que llevaba la etiqueta de ternera en realidad era pollo. No me quiero imaginar qu sera lo que llevaba
la etiqueta pollo. Podemos aceptar algn nivel mnimo de engao, como que nos mientan a cerca del tenor
graso de sus hamburguesas, pero cuando el carnicero nos vende carne podrida nos vamos a otra parte. Como
diseadores tenemos menos responsabilidad con nuestro pblico que un carnicero? Quien est interesado en
matricular el diseo grfico, debera notar que la razn de ser de una matrcula es proteger al pblico, no a los
diseadores ni a los clientes. No hacer dao es una advertencia a los doctores que tiene que ver con la
relacin con sus pacientes, no con sus colegas o con los laboratorios. Si furamos matriculados, decir la verdad
se convertira en algo ms importante en nuestra actividad.
Para editar ms fcilmente el Stylesheet.css se debe instalar el pluging Tweaker, para lo cual
deber copiar la carpeta descomprimido en: wp-content/plugins y activar dicho pluging.
Pg.
132
Ingeniera Web
Por ejemplo activar la plantilla paint-job y cambiar los colores en la opcin apariencia-themestweaker cambiar el fondo de color negro por un verde claro #80EB07
Realizar los siguientes cambios de color:
Comparar los cambios:
Cambiar el archivo header.jpg en paint-job image, para que quede de esta forma:
Pg.
133
Ingeniera Web
Crear una seccin para links (borrar las actuales) en links del panel del administrador y colocar 2
enlaces relacionados al blog (se sugiere de tipo blank):
Ejemplo: Adventures Graphics http://www.adventuregraphs.com/?p=11792#
Lo mejor del diseo http://foroalfa.org/
No olvide activarlo en Appearance-widget
Canal RSS, ello no es necesario con un pluging, Wordpress ya tiene un Widget para ello. Por
ejemplo agragar un Canal RSS del diario El Pais (Espaa) respecto al Arte en:
http://www.elpais.com/rss/feed.html?feedId=17060 ms detalles de otros canales RSS
http://www.elpais.com/rss/
Desde Plugings instalar y activar el pluging Clocky para gestionarlo Ud. deber ir a AppearanceWidget y colocar en el bloque sidebar para realizar la configuracin.
Instalar SimpleCountDown, colocar como fecha de conteo 16/08/2010 Faltan . para culminar mis
estudios de Diseo Grfico en la CONTI y colocar en la parte superior del sidebar.
En pages editar la pgina principal About y colocar informacin de bienvenida al Blog y pegar:
Bienvenidos al blog del Crtico en Diseo, porque no basta con los productos finales, nuestra
preocupacin son los procesos, la tica y responsabilidad del profesional en diseo grfico.
<object width="560" height="340"><param name="movie"
value="http://www.youtube.com/v/0V6ZjFtV4Hk&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&fe
ature=player_embedded&fs=1"></param><param name="allowFullScreen"
value="true"></param><param name="allowScriptAccess" value="always"></param><embed
src="http://www.youtube.com/v/0V6ZjFtV4Hk&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&featu
re=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true"
allowScriptAccess="always" width="640" height="385"></embed></object>
Instalar el pluging flickr-widget y en appareance-widget configurar y colocar la URL, por ejemplo:
http://api.flickr.com/services/feeds/geo/?id=25476574@N03&lang=es-us&format=rss_200
advertencia, no se trata de la URL sino de la Feed
Instalar el pluging para Google AdSense e ir a la opcin settings- Google Adsense Ads para pegar el
cdigo que de la cuenta de GoogleAdSense se nos ha proporcionado:
https://www.google.com/adsense que es un cdigo JavaScript y copiarlo en los cuadros
respectivos, esperar al menos 10 minutos para que haga efecto en un host pero a nivel local no se
garantiza que se coloca la publicidad por medidas de seguridad. Con su cuenta adems podr
verificar el total de ingresos generado por publicidad, deber aparecer algo as:
Pg.
134
Ingeniera Web
UNIDAD N IV
SESIN I:
Negocios en la Web
LOGRO:
Identifica los Modelos de negocio por Internet

Implementar una tienda virtual
INFORMACIN:
Modelos de negocio
Un modelo de negocio en Internet nos dice cmo conseguir que una empresa funcione, es decir,
que consiga beneficios. Un modelo de negocios es la "forma de hacer negocios, mediante la
cual una empresa genera su sustento, esto es, genera ingresos. La rpida evolucin de Internet
ha permitido el surgimiento de nuevos modelos de negocios que se han ido superponiendo y
cohabitando al mismo tiempo.
Ejemplos: el negocio de los videos juegos en donde el modelo se basa en la venta de juegos y
no de consolas, las impresoras y cartuchos de tinta; del muy famoso modelo cebo anzuelo,
Herbalife, y Omnilife (marketing multinivel).
Cmo saber cul es el modelo de negocio?
En las portales vemos reflejados estos modelos de negocios.
Los modelos de negocio en Internet van a ir adquiriendo mayor importancia con el paso del
tiempo como ya se viene demostrando
Toda empresa sea fsica o virtual tiene algn modelo de negocios, por ejemplo:
Modelo 1: Basados en la publicidad

Aunque los servicios en su gran mayora son gratuitos, normalmente sus modelos de
negocio se basan en la publicidad y en los patrocinios, es decir, es un negocio de
audiencias. Otra de las posibilidades de obtencin de ingresos que se quiere explotar
es la de establecer comisiones en comercio electrnico.
Portal vertical
Portal horizontal
Programa de incentivos
Comunidad virtual
Modelos 2: Basados en la intermediacin
Consiguen poner en contacto a compradores y vendedores y facilitan la
realizacin de transacciones entre ellos.
Obtienen sus ingresos de la comisin que perciben de las transacciones que
logran cerrar.
Pg.
135
Ingeniera Web
Bsicamente las comisiones se derivan de dos tipos de situaciones: cuando se

direcciona un usuario hacia otra sede, en la que efecta una compra o se hace
una visita; y cuando se efecta una compraventa en la misma sede, pero sin
que sta opere como vendedora del producto, sino como mera facilitadora de la
transaccin.
Modelo 3: Explotacin de la informacin

Internet es un excelente proveedor de informacin precisa sobre los gustos,
comportamientos y hbitos de compra de los usuarios.
En el caso de ser capturada eficientemente, puede ser de gran valor para
muchas empresas, a los efectos de aplicar un marketing personalizado que les
puede ayudar a ahorrar centenares de millones en campaas tradicionales
(abiertas).
Algunos sites bsicamente ofrecen servicio que sirven para atrapar estas
informaciones y venderlas a estas empresas.
Estos agentes de inteligencia que se nutren de informacin para sobrevivir
son un sntoma inequvoco de que se est realmente avanzando a una llamada
Sociedad de la Informacin.
Modelo 4: Basados en la venta
Al igual que en la venta clsica, los ingresos se derivan del desembolso del
consumidor a cambio de productos o servicios.
Puede que se trate tanto de un fabricante que ha decidido utilizar la Red para
ahorrarse intermediarios o de un intermediario que opera a travs de la Red.
Ventas on line: Kotear, Alibaba
Programas de afiliacin: Amazon.com
fraganzia.zom
Ventas por catlogo: Venca.es
Landsend.com
Ventas on y off: Virtualexito.com hersheys.com
Ventas de bits: Forrester Research
weblisten.com
Modelo 5: Basados en la suscripcin
Los usuarios pagan para acceder al contenido del site, pudiendo ser tanto a
travs de suscripciones regulares o por visita/consulta.
Los modelos basados en esta fuente de ingresos tienen que enfrentarse a la
fuerte reticencia de los usuarios a pagar por los contenidos.
Segn una encuesta de Jupiter Communications, 46% de los usuarios no estn
dispuestos a pagar por este concepto ya que estaban acostumbrados a
accederlos en forma gratuita.
De all que este modelo enfrente algunos problemas cuando el contenido no es
sumamente especializado.
Otras formas de financiacin de estas sedes son la publicidad y la explotacin
de la informacin con el contenido.
Ejem: Wsj.com
ConsumerReports.org Fifatv.com
Algunos
fracasaron: Peru21.com
Modelo 6: Basados en la sindicacin de contenidos
La necesidad de conseguir volmenes de trfico por parte de los principales
portales ha llevado a muchas empresas digitales a comercializar sus
contenidos.
Por lo general, esta venta o cesin de contenidos se acompaa con un
cobranding en las pginas del web del que las compra.
Las modalidades de pago pueden ser bien diversas: desde un fee mensual, un
fee ms un variable segn las impresiones que generan, hasta la reparticin de
la publicidad obtenida.
No obstante, en el sector profesional cada vez ms se vern ejemplos de pago
por suscripcin por acceso a contenidos y servicios.
Pg.
136
Ingeniera Web
Lo que muchas empresas hacen para superar este freno inicial es combinar una
parte de contenido gratis (con el objetivo de aumentar el trfico y los ingresos
provenientes de otras fuentes como publicidad o explotacin de la informacin)
con el contenido premium ofrecido slo a suscriptores.
Modelo 7: basados en las franquicias

El modelo de franquicias online es un sistema que pocos estn sabiendo
aprovechar pero muestra como en modelos de negocio todava tenemos mucho
que aprender.
El franquiciador basa parte de su modelo en la comercializacin del sistema, la
marca y el know-how que ha generado en su proyecto.
Ejemplo: portaldetuciudad.com
INFORMACIN
CLAVE:
ACTIVIDAD:
Actividad 1: Exponer acerca de la lectura del libro las 11 leyes inmutables para la
creacin de marcas por Internet.
Actividad 2: Implementar una tienda virtual basada en el modelo de ventas.
ETIENDA
TIENDA VIRTUAL:
Desarrollar lo siguiente:
Instalar el servidor web a nivel local e instalar el OsCommerce, usted observar que cuenta con dos
frentes: catlogo y el panel de administrador
Pg.
137
Ingeniera Web
Ingrese al catlogo: Por medidas de seguridad elimine:

C:/xampp/htdocs/etienda/catalog/install
Proteger el fichero C:/xampp/htdocs/etienda/catalog/includes/configure.php
Ingrese al panel de administrador http://localhost/etienda/catalog/admin (Observe que ya no es
administrator)
Para la prctica el orden de los idiomas son: alemn, ingls
Crear la categora metalistera (Metalwork, Metallteile) y tapices (Hangings, Wandbehnge).
En metalistera crear los siguientes productos:
Pictografias bandas nmades
Fabricante: Indamira Adanto
Fecha disponibilidad: 15 de agosto 2011
Precio: $US 25.00
Detalles del producto:
Medidas Aproximadas:
Tamao Grande ( 30 cm x 20 cm)
Tamao Chico ( 17 cm x 23 cm)
Diseo: Indamira Adanto
Cantidad: 100 unidades
Peso: 5 kg
Pictographs nomadic bands
Manufacturer: Indamiro Adanto
Availability Date: August 15, 2011
Price: $ U.S. 25.00
Product Details:
Approximate measures:
Size Large (30 cm x 20 cm)
Small size (17 cm x 23 cm)
Design: Indamiro Adanto
Quantity: 100 units
Weight: 5 kg
Piktogramme nomadischen Banden
Hersteller: Indamiro Adanto
Verfgbarkeit Datum: 15. August 2011
Preis: US $ 25,00
Produktdetails:
Ungefhre Manahmen:
Gre Large (30 cm x 20 cm)
Geringe Gre (17 cm x 23 cm)
Design: Indamiro Adanto
Menge: 100 Stck
Gewicht: 5 kg
En tapices ingresar los siguientes productos:
El Sury
Fabricante: Bernarda Ladetto
Fecha disponibilidad: 23 de agosto 2011
Precio: $US 85.00
Medidas Aproximadas (0,80 mts x 0,40 mts)
Significado: Fragmento del sombolo de la tierra fecunda.
Peso: 2 kg
Pg.
138
Ingeniera Web
The Sury
Manufacturer: Bernarda Ladetto
Availability Date: August 23, 2011
Price: $ U.S. 85.00
Product Details:
Approximate measures (0,80 m x 0,40 m)
Meaning: sombolo Fragment of fertile land.
Quantity: 30 units
Weight: 2 kg
Die Sury
Hersteller: Bernarda Ladetto
Erscheinungsdatum: 23. August 2011
Preis: US $ 85,00
Produktdetails:
Ungefhre Manahmen (0,80 m x 0,40 m)
Bedeutung: sombolo Fragment des fruchtbaren Bodens.
Menge: 30 Einheiten
Gewicht: 2 kg
Ingresar otro producto de la categora tapices, traducirla al ingls y espaol:
La vida de una Cultura
Fabricante: Bernarda Ladetto
Fecha disponibilidad: 2 de octubre 2011
Precio: $US 315.00
Medidas Aproximadas (1,60 mts x 1,40 mts)
Significado: En el centro la imagen sostiene su peso sobre frgiles construcciones abstractas.
Encuadran el tapiz fragmentos de elementos culturales que marcan el movimiento de la vida.
Peso: 2 kg
Crear una oferta para el tapiz de El Suri de $US 85.00 a $US 79.99
Instalar mdulo de pago
Configurar el impuesto a 19% de IGV
Crear la opcin monedas en nuevos soles para algunos productos que se van a vender en esa
moneda.
NS
Cdigo: NS
S/.
Punto decimal .
Separador de miles ,
Lugares decimales 2
Valor: 1.00000000
Visualizar el informe de productos ms vistos o los ms vendidos.
Revisar plugings y themes
Revise acerca de los mdulos de pago (Cul recomendara?)
Leer acerca de la Ley AntiSpam
Pg.
139
Ingeniera Web
SESIN II:
Desarrollo de aplicaciones mviles
LOGRO:
Reflexiona el estado de los sistemas operativos y aplicaciones mviles

Desarrolla aplicaciones mviles con el AppInventor
INFORMACIN:
A continuacin se muestra una recopilacin de la web respecto al tema.
Primeros pasos
App Inventor es un entorno de desarrollo de aplicaciones para dispositivos Android. Para desarrollar aplicacio
tlefono o tablet Android (si no lo tienes podrs probar tus aplicaciones en un emulador). App Inventor se bas
ayudar a realizar un seguimiento de sus proyectos.
Se trata de una herramienta de desarrollo visual muy fcil de usar, con la que incluso los no programadores po
Al construir las aplicaciones para Android trabajars con dos herramientas: App Inventor Designer y App Inven
eligiendo y situando los elementos con los que interactuar el usuario y los componentes que utilizar la aplic
componentes de tu aplicacin.
Pg.
140
Ingeniera Web
Configuracin de App Inventor 2
Puedes configurar la aplicacin Inventor y empezar a crear aplicaciones en cuestin de minutos. El
Diseador y Editor de bloques se ejecutan ahora por completo en el navegador (la nube!). Para
ver tu aplicacin en un dispositivo mientras lo construyes (tambin llamada "Probando en vivo"),
tendrs que seguir los pasos que se muestran a continuacin.
Tienes tres opciones para configurar las pruebas en vivo, mientras construyes aplicaciones.
1.- Si ests utilizando un dispositivo Android y tienes una conexin inalmbrica a Internet
(WiFi), puedes comenzar la creacin de aplicaciones sin necesidad de descargar ningn software
en su ordenador. Eso s, tendrs que instalar la aplicacin Companion App Inventor en tu
dispositivo. Elige la opcin uno. Esta opcin se recomienda encarecidamente.
2.- Si no tienes un dispositivo Android, tendrs que instalar el software en su ordenador para que
pueda utilizar el emulador de Android en la pantalla del mismo. Elige la opcin dos.
3.- Si no tienes una conexin inalmbrica a Internet (WiFi), tendrs que instalar el software en tu
computadora de modo que puedas conectar a su dispositivo Android a travs de USB. Elige la
opcin de tres. La opcin de conexin USB puede ser complicada, especialmente en Windows.
Usa esto como un ltimo recurso.
Opcin 1 - RECOMENDADO
Construir aplicaciones con un dispositivo Android y conexin WiFi
Si tienes una computadora, un dispositivo Android, y una conexin Wi-Fi, esta es la manera ms
fcil para probar tus aplicaciones.
Opcin 2
Todava no tienes un dispositivo Android? Utiliza el emulador:
Si no tienes un telfono Android o tableta a mano, puedes seguir utilizando la aplicacin
Inventor. Tienes una clase de 30 alumnos? Pueden trabajar principalmente en emuladores y
Pg.
141
Ingeniera Web
compartir unos pocos dispositivos.
Opcin 3
No WiFi? Construir aplicaciones con un dispositivo Android y Cable USB:
Algunos servidores de seguridad dentro de las escuelas y las organizaciones no permiten el tipo
de conexin Wi-Fi necesario. Si WiFi no funciona, usa la conexin USB.
Requisitos del sistema

Nota: Internet Explorer no es soportado todava. Recomendamos Chrome o Firefox.
Pg.
142
Ingeniera Web
Ordenador y el sistema operativo
Macintosh (con procesador Intel): Mac OS X 10.5 o superior

De Windows: Windows XP, Windows Vista, Windows 7
GNU / Linux: Ubuntu 8 o superior, Debian 5 o superior
Navegador
Mozilla Firefox 3.6 o superior

Nota: Si est utilizando Firefox con la extensin NoScript, usted necesita dar vuelta a la
extensin fuera. Ver la nota en la pgina de solucin de problemas.
Apple Safari 5.0 o superior
Google Chrome 4.0 o superior
Microsoft Internet Explorer no es soportado
Telfono o la tableta (o utilizar el emulador en pantalla)
Sistema operativo Android 2.3 ("Gingerbread") o superior

ACTIVIDAD:
Ejercicio 1: Elabore la siguiente aplicacin mvil
Pg.
143
Ingeniera Web
Pg.
144
Ingeniera Web
Ejercicio 2: Desarrollar la siguiente aplicacin mvil que muestre la fecha e incluya un contador.
Pg.
145
Ingeniera Web
Pg.
146
Ingeniera Web
Ejercicio 3: Desarrollar la siguiente aplicacin
Pg.
147
Ingeniera Web
BIBLIOGRAFA
1. Carles Mateu. Desarrollo de Aplicaciones web. Editorial UOC. ISBN: 849788-118-4. Espaa, 2009
2. Conallen Jim. Development Application web. 2da.ed. New York. AddisonWesley Iberoamericana. 2004.
3. Doug Rosenberg-Kendall Scott . Applying Use Case Driven Object Modeling
with UML An Annotated e-Commerce Example 1ra.ed. Mxico. AddisonWesley Iberoamericana. 2001.
4. Pressman Roger. Ingeniera de software: un enfoque prctico. 6ta.ed.
Mxico. McGraw-Hill. 2005.
5. Suh Woojong. Web engineering: principles and techniques. 1ra.ed. London.
Idea group publishing. 2005.
6. Tutoriales diversos de los CMS a estudiar, las mismas que se colocarn en
el aula virtual.
7. Tutoriales
sobre
programacin
con
Android
https://sites.google.com/site/appinventormegusta/archivo
Pg.
148

Texto Universitario IngWeb

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Texto Universitario IngWeb

Cargado por

Copyright:

Formatos disponibles

ASIGNATURA

Exigencia acadmica para grandes cambios!

como las buenas prcticas en estrategias y metodologas para la evaluacin y promocin de

Miguel ngel Crdova Sols

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Discrimina los elementos web y aplica CSS.

1.1 La WWW como servicio de Internet

1.2 Fundamentos de la web

1.3 El lenguaje HTML

Exigencia acadmica para grandes cambios!

1.4 Formularios Web

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

EL HTML es el lenguaje de las pginas web

PREGUNTA 1: Elabore la pgina web que se muestra a continuacin, considerando las

Exigencia acadmica para grandes cambios!

CSS redirige aqu. Para otras acepciones, vase CSS (desambiguacin).

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Sitios web dinmicos

Ejecuta funcionalidades a los formularios web mediante JavaScript.

2.1 HTML Dinmico

2.2 JAVA Script

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

2.3 Funciones y programacin orientada a objetos

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

Exigencia acadmica para grandes cambios!

<script language="javascript" >

<input type="button" name="boton1" id="boton1"

Exigencia acadmica para grandes cambios!

<script language="javascript" >

<input type="button" name="boton1" id="boton1"

Exigencia acadmica para grandes cambios!

SALUDOS CON PROMPT

<input name="Boton" type="button" onClick

Exigencia acadmica para grandes cambios!

SUMA CON PROMPT

<input name="Boton" type="button" onClick ="Suma()"

Exigencia acadmica para grandes cambios!

<script language="javascript" >

<input type="button" name="boton1" id="boton1"

Exigencia acadmica para grandes cambios!

<script language="javascript" >

<input type="button" name="boton1" id="boton1"

<input type="submit" name="button" id="button"

Exigencia acadmica para grandes cambios!

ABRIR VENTANA EMERGENTE

<input type="button" value="Ver Enlaces en ventana