Texto Universitario IngWeb
-
Upload
domingo-lizana-chauca -
Category
Documents
-
view
17 -
download
4
description
Transcript of Texto Universitario IngWeb
ASIGNATURA
INGENIERÍA WEB
Ingeniería Web
Pág. 2
¡Exigencia académica para grandes cambios!
Docente
Miguel Ángel Córdova Solís
Material publicado con fines de estudio
Tercera Edición
Huancayo, 2014
MISIÓN
Somos una universidad privada, innovadora y
comprometida con el desarrollo del Perú, que
se dedica a formar personas competentes, íntegras y emprendedoras, con visión
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 valoración
mutua entre todos los grupos de interés.
VISIÓN
Ser una de las 10 mejores universidades
privadas del Perú al año 2020,
reconocidos por nuestra excelencia académica y vocación de servicio, líderes
en formación integral, con perspectiva
global; promoviendo la competitividad del
país.
Ingeniería Web
Pág. 3
¡Exigencia académica para grandes cambios!
PRESENTACIÓN
La ingeniería web es una asignatura que le permitirá al alumno la aplicación de
metodologías sistemáticas, disciplinadas y cuantificables al desarrollo eficiente, operación y
evolución 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
métodos de procesos de software, métodos de desarrollo, métricas e indicadores,
características y atributos de calidad y reingeniería en el desarrollo de aplicaciones Web así
como las buenas prácticas en estrategias y metodologías para la evaluación y promoción de
sitios web mostrando perseverancia y responsabilidad en las actividades académicas.
En general, los contenidos que se dividen son: Introducción a la Ingeniería Web: ¿Cómo
elaboramos un sitio web?, Procesos Ingeniería de Software en la Ingeniería Web: Del
Análisis y diseño a las aplicaciones web, Métodos de desarrollo de la Ingeniería Web:
Desarrollo, metodologías, técnicas. Pruebas y calidad. Métricas web, Ingeniería web reversa
y Comercio Electrónico: E-commerce.
Es recomendable que el estudiante desarrolle una permanente lectura de estudio junto a una
minuciosa investigación de campo, vía internet, la consulta a expertos y los resúmenes. 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 Córdova Solís
Docente
Ingeniería Web
Pág. 4
¡Exigencia académica para grandes cambios!
ÍNDICE
Presentación. .................................................................................................................................... 3
Índice. ............................................................................................................................................... 4
PRIMERA SEMANA:. ............................................................................................................... 5
Introducción a la Ingeniería Web: ¿Cómo elaboramos un sitio web?. .............................................. 5
Actividades. ..................................................................................................................................... 12
SEGUNDA SEMANA:. ............................................................................................................ 16
Sitios web dinámicos. ...................................................................................................................... 16
Actividades. ..................................................................................................................................... 48
TERCERA SEMANA:. .............................................................................................................. 52
Métodos de desarrollo de la Ingeniería Web: Desarrollo, metodologías, técnicas. Pruebas
y calidad. Métricas 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 tecnologías. .................................................. 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 móviles. .............................................................................................. 140
Actividades. ................................................................................................................................... 143
Bibliografía. .................................................................................................................................. 148
Ingeniería Web
Pág. 5
¡Exigencia académica para grandes cambios!
UNIDAD N° I
Introducción a la Ingeniería Web: ¿Cómo elaboramos un sitio web?
Discrimina los elementos web y aplica CSS.
1.1 La WWW como servicio de Internet
La WWW (World Wide Web) o, de forma más coloquial, la web, se ha convertido, junto con
el correo electrónico, en el principal caballo
de batalla de Internet. Ésta ha dejado de ser una inmensa “biblioteca” de páginas estáticas
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 implementación simple y sencilla de un sistema de
comunicaciones que nos permite enviar cualquier tipo de ficheros de una forma fácil,
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
composición de páginas enlazadas simple y fácil, 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 elaboración de páginas web. Es usado para
SESIÓN I:
LOGRO:
INFORMACIÓN:
Ingeniería Web
Pág. 6
¡Exigencia académica para grandes cambios!
describir la estructura y el contenido en forma de texto, así como para complementar el
texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas
por corchetes angulares (<,>).HTML también es usado para referirse al contenido del tipo
de MIME text/html o todavía más ampliamente como un término genérico 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 básico:
1.4 Formularios Web
Ingeniería Web
Pág. 7
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 8
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 9
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 10
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 11
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 12
¡Exigencia académica para grandes cambios!
EL HTML es el lenguaje de las páginas web
PREGUNTA 1: Elabore la página web que se muestra a continuación, considerando las recomendaciones Ingenieriles indicados en clase, las imágenes se desplazan dentro de su celda.
HTMLHTML +
XML (HTML)
HTML 5
INFORMACIÓN
CLAVE:
ACTIVIDAD:
Ingeniería Web
Pág. 13
¡Exigencia académica para grandes cambios!
PREGUNTA 2: Elabore el siguiente sitio web empleando CSS como archivo adjunto.
Define los estilos (index):
Hojas de estilo en cascada
«CSS» redirige aquí. Para otras acepciones, véase CSS (desambiguación).
Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la
presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C
(World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que
servirán de estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su
presentación.
Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más
importante que un bloque etiquetado como <H2>. Versiones más antiguas de HTML permitían atributos
extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante,
cada etiqueta <H1> debía disponer de la información si se deseaba un diseño consistente para una página y,
además, una persona que lea esa página con un navegador pierde totalmente el control sobre la
visualización del texto.
Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre como va a ser
visualizado, solamente marca la estructura del documento.
La información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <H1>:
color, fuente, alineación del texto, tamaño y otras características no visuales como definir el
volumen de un sintetizador de voz (véase Sintetización del habla), por ejemplo.
La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo
documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o
en cada etiqueta particular mediante el atributo "style".
DESDE LA PÁGINA 2 ASIGNAR LAS CLASES CSS
Página 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 elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML
Título
SubTítulo
Contenido1
Contenido2
Contenido1
Ingeniería Web
Pág. 14
¡Exigencia académica para grandes cambios!
se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también 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 también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico 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).
Página 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 tecnologías sobre las que se basa la Web.
Organización de la W3C
Fue creada el 1 de octubre de 1994 por Tim Berners-Lee en el MIT, actual sede central del consorcio. Uniéndose posteriormente en abril de 1995 INRIA en Francia, reemplazado por el ERCIM en el 2003 como el huésped europeo del consorcio y Universidad de Keiō (Shonan Fujisawa Campus) en Japón en septiembre de 1996 como huésped 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, España, Finlandia, Grecia, Hong Kong, Hungría, India, Israel, Italia, Marruecos, Suecia y Reino Unido e Irlanda (oficina conjunta) (Oficinas W3C.)
La oficina española del W3C, establecida en el 2003, está albergada por la Fundación CTIC en el Parque Científico Tecnológico de Gijón (Principado de Asturias).
PREGUNTA 3: Crear el sitio web de “Mundo Verde” organización que concientiza acerca la ecología y la conservación del Medio Ambiente en la ciudad de Huancayo, las imágenes lo encontrará en el aula virtual. Está página será creada en marcos en la disposición que Ud. considere necesario, además debe contener al menos una animación. Los diseños tales tipos de letras, colores, tamaños; serán a criterios del estudiante.
El menú de los contenidos es:
1. Presentación (Colocar información general de Mundo Web)
2. Noticias
2.1 Noticia 1
2.2 Noticia 2
Ingeniería Web
Pág. 15
¡Exigencia académica para grandes cambios!
2.3 Noticia 3
2.4 Noticia 4
3. Galería de afiches
4. Video
5. Formulario de consulta: Nombre, Email, Ciudad, Comentario, Botón Enviar
Ingeniería Web
Pág. 16
¡Exigencia académica para grandes cambios!
Sitios web dinámicos
Ejecuta funcionalidades a los formularios web mediante JavaScript.
2.1 HTML Dinámico
2.2 JAVA Script
SESIÓN II:
LOGRO:
INFORMACIÓN:
Ingeniería Web
Pág. 17
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 18
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 19
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 20
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 21
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 22
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 23
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 24
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 25
¡Exigencia académica para grandes cambios!
2.3 Funciones y programación orientada a objetos
Ingeniería Web
Pág. 26
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 27
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 28
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 29
¡Exigencia académica para grandes cambios!
Ejemplos:
BOTÓN 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>
Ingeniería Web
Pág. 30
¡Exigencia académica para grandes cambios!
SALUDO DOCUMENT.WRITE <!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>Documento sin título</title>
<script language="javascript" >
function Saludo()
{
document.write('Hola');
}
</script> </head>
<BODY>
<FORM>
<p>
<label>
<input type="button" name="boton1" id="boton1"
value="Enviar" onClick="Saludo()"> </label>
</p>
</FORM>
</BODY>
</html>
Ingeniería Web
Pág. 31
¡Exigencia académica para grandes cambios!
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>
Ingeniería Web
Pág. 32
¡Exigencia académica para grandes cambios!
SUMA CON PROMPT <HTML>
<HEAD>
<TITLE>Ejemplo de bienvenida a partir de un nombre </TITLE>
<script language="javascript">
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>
<BODY bgcolor="white">
<CENTER><FORM>
<input name="Boton" type="button" onClick ="Suma()"
value="Sumar"> </FORM>
</CENTER>
</body>
</html>
Ingeniería Web
Pág. 33
¡Exigencia académica para grandes cambios!
SALUDO CON INGRESO DE NOMBRE <html>
<head>
<title>Documento de salida</title>
<script language="javascript" >
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>
<input type="button" name="boton1" id="boton1"
value="Saludar"
onClick="Saludo(formulario.nombre.value)"> </label>
</p>
</FORM>
</BODY>
</html>
Ingeniería Web
Pág. 34
¡Exigencia académica para grandes cambios!
DOCUMENTO DE SALUDO Y DESPEDIDA <html>
<head>
<title>Documento de salida</title>
<script language="javascript" >
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>
<input type="button" name="boton1" id="boton1"
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>
Ingeniería Web
Pág. 35
¡Exigencia académica para grandes cambios!
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>
<BODY bgcolor="white">
<form>
<input type="button" value="Ver Enlaces en ventana
emergente" onClick="Abreventana()"> </form>
</body>
</html>
Ingeniería Web
Pág. 36
¡Exigencia académica para grandes cambios!
2.4 Estructuras de programación Java Script CONDICIONALES: Operadores condicionales
Ingeniería Web
Pág. 37
¡Exigencia académica para grandes cambios!
Estructura de una condicional:
Ejemplo: Página que pida dos números y muestre el mayor de ellos: <html> <head> <title>Mayor de dos números</title> <script language="javascript" > function Mayor() { var a,b; a= prompt('Ingrese primer número',''); b= prompt('Ingrese segundo número',''); 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> Página que pida tres números y muestre el mayor de ellos: <html> <head> <title>Mayor de tres números</title> <script language="javascript" > function Mayor3() { var a,b,c; a= prompt('Ingrese primer número',''); b= prompt('Ingrese segundo número',''); c= prompt('Ingrese tercer número',''); if (a>b && a>c) alert('El mayor es:'+a);
Ingeniería Web
Pág. 38
¡Exigencia académica para grandes cambios!
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:
Página que genera números desde el cero hasta el número ingresado por prompt <html> <head> <title>Generar numeros</title> <script language="javascript" > 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>
Ingeniería Web
Pág. 39
¡Exigencia académica para grandes cambios!
Página que genera números pares el cero hasta el número ingresado por prompt <html> <head> <title>Generar numeros</title> <script language="javascript" > function Pares() { var i, num = prompt('Ingrese hasta que numero deseas generar desde el cero:',''); for (i=0; i<=parseInt(num);i+=2) document.write(i+"<br>"); } </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> <title>Generar numeros</title> <script language="javascript" > function Generanumero() { var i=0, num = prompt('Ingrese hasta que numero deseas generar desde el cero:',''); do { document.write(i+"<br>"); i=i+1; } while(i<=parseInt(num)); } </script> </head> <BODY> <FORM> <p> <label> <input type="button" name="boton1" id="boton1" value="Generar numeros" onClick="Generanumero()"> </label>
Ingeniería Web
Pág. 40
¡Exigencia académica para grandes cambios!
</p> </FORM> </BODY> Con while <html> <head> <title>Generar numeros</title> <script language="javascript" > function Generanumero() { var i=0, num = prompt('Ingrese hasta que numero deseas generar desde el cero:',''); while(i<=parseInt(num)) { document.write(i+"<br>"); i=i+1; } } </script> </head> <BODY> <FORM> <p> <label> <input type="button" name="boton1" id="boton1" value="Generar numeros" onClick="Generanumero()"> </label> </p> </FORM> </BODY> </html>
2.5 Controles Web
2.5.1. CONTROL: LISTA/MENU
SELECT: Sintaxis básica
<select name="nombre" size="3" multiple>
<option value="valor 1">Texto de opción 1</option>
<option value="valor 2" selected>Texto de opción 2</option>
<option value="valor 3">Texto de opción 3</option>
<option value="valor 4">Texto de opción 4</option>
</select>
Ingeniería Web
Pág. 41
¡Exigencia académica para grandes cambios!
Muestra (selección múltiple):
Texto de opcion 1
Texto de opcion 2
Texto de opcion 3
manteniendo apretada la tecla Ctrl (control) puede seleccionarse más de una opción
Muestra (selección 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 opción en cualquiera de los dos casos
SELECT: Métodos del objeto
método descripción
focus coloca el foco en el select
SELECT: Eventos del objeto
evento descripción
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 selección
OPTION: Propiedades principales
propiedad descripción
value valor asociado a cada opción del select. Es invisible al usuario pero es el
valor que se envía 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 opción está seleccionada.
selectedIndex Da acceso a la opción (option) que ha seleccionado el usuario.
Ingeniería Web
Pág. 42
¡Exigencia académica para grandes cambios!
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: Métodos y eventos
El objeto option no posee métodos ni eventos propios.
Sintaxis básica 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
option SELECT
nombre_formulario.nombre_select.options[index]
se refiere a una opción específica
formulario.select.options[formulario.select.selectedIndex].pr
opiedad
se refiere a la opción 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
value OPTION
nombre_formulario.nombre_select.options[index].value
se refiere a una opción específica
formulario.select.options[formulario.select.selectedIndex].v
alue
se refiere a la opción 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
Ingeniería Web
Pág. 43
¡Exigencia académica para grandes cambios!
Ejemplos: Elaborar la siguiente página:
La lista depleglará los nombres de las ciudades de Lima, Huancayo, Arequipa y Cusco. <!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>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; } if (formu1.ciudad[1].selected == true) { formu1.mensaje.value=formu1.nombre.value+" vive en "+formu1.ciudad[1].value; } if (formu1.ciudad[2].selected == true) { formu1.mensaje.value=formu1.nombre.value+" vive en "+formu1.ciudad[2].value; } if (formu1.ciudad[3].selected == true) { formu1.mensaje.value=formu1.nombre.value+" vive en "+formu1.ciudad[3].value; } }
Ingeniería Web
Pág. 44
¡Exigencia académica para grandes cambios!
</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 descripción
name
Es el nombre que identifica a un checkbox a un grupo de radio buttons. Para
que éstos últimos conserven la capacidad de selección única, deben tener
todos el mismo nombre.
Ingeniería Web
Pág. 45
¡Exigencia académica para grandes cambios!
value
Es un valor asociado a cada checkbox o radio.
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
"actúa 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 descripción
onFocus Permite realizar una acción al poner el foco en el objeto.
onBlur Permite realizar una acción cuando el foco ya no se encuentra en el objeto.
onClick Permite realizar una acción cuando se hace click sobre el objeto.
onChange Evento que se produce al marcar/desmarcar un checkbox o un radio button.
2.3 Sintaxis básica
Para un grupo de radio buttons (mismo nombre distinto valor)
<input type="radio" name="color" value="rojo">
Ingeniería Web
Pág. 46
¡Exigencia académica para grandes cambios!
<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:
<!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>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"; } if (formu1.radio2[1].checked == true) { formu1.mensaje.value=formu1.nombre.value+" vive en Lima"; } if (formu1.radio2[2].checked == true) { formu1.mensaje.value=formu1.nombre.value+" vive en Arequipa"; } if (formu1.radio2[3].checked == true) {
Ingeniería Web
Pág. 47
¡Exigencia académica para grandes cambios!
formu1.mensaje.value=formu1.nombre.value+" vive en Cusco"; } } </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>
<input type="radio" name="radio2" id="radio" value="radio1" />
Huancayo<br />
<input type="radio" name="radio2" id="radio2" value="radio2" />
Lima<br />
<input type="radio" name="radio2" id="radio3" value="radio3" />
Arequipa<br />
<input type="radio" name="radio2" id="radio4" value="radio4" />
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>
Ingeniería Web
Pág. 48
¡Exigencia académica para grandes cambios!
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 habilitarán o deshabilitarán los checkbox dependiendo de
la opción que seleccione el usuario de un grupo de dos radio buttons, por ejemplo al presionar SI deberá habilitarse los checkbox caso contrario deberán deshabilitarse.
ACTIVIDAD:
Ingeniería Web
Pág. 49
¡Exigencia académica para grandes cambios!
Diseñar el siguiente formulario:
Ver el código: <!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>Formulario 1</title> <script language="javascript"> 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=""> <table width="550" border="0" cellspacing="10"> <tr> <td>Ingrese primer número</td> <td><label> <input type="text" name="a1" id="a1" /> </label></td> </tr> <tr> <td>Ingrese segundo número</td> <td><label>
Ingeniería Web
Pág. 50
¡Exigencia académica para grandes cambios!
<input type="text" name="a2" id="a2" /> <input type="button" name="a3" id="a3" value="Sumar" onclick="Sumar(this.form)"/> </label></td> </tr> <tr> <td>Resultado</td> <td><label> <input type="text" name="a4" id="a4" /> </label></td> </tr> </table> </form> </body> </html>
A partir de este formulario crear una calculadora con botones de resta, multiplicación, división, potencia y residuo.
Buscar por Internet, 10 aplicaciones JavaScript para páginas web: por ejemplo, que abra ventanas emergentes, que cierren ventanas, que muestre mensajes en la barra de estado, títulos de páginas en movimientos, etc.
Tecnologías de la web dinámica:
1. Página web que pida dos números y muestre el menor de ellos 2. Página web que pida tres números y muestre el menor de ellos 3. Página web que pida cuatro números y muestre el menor de ellos 4. Página web que pida cuatro números y muestre el mayor de ellos 5. Página web que pida tres números y muestre el intermedio de ellos
INFORMACIÓN
CLAVE:
ACTIVIDAD:
Ingeniería Web
Pág. 51
¡Exigencia académica para grandes cambios!
6. Página web que pida un número entre 1 y 7 y muestre el día de la semana, por ejemplo: al ingresar 1 que muestre “hoy es lunes”, al ingresar 2 que muestre “hoy es martes”.
7. Página web que pida un número 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. Página web que pida tres números y muestre el intermedio en valor de ellos 9. Realizar una página web que genere números impares 10. Página web que imprima del 100 al 0 en ese mismo orden 11. Realizar una página web que solicite un número y un nombre y repita el nombre el
número de veces. 12. Realizar una página web que genere números múltiplos de 5 hasta el número
ingresado 13. Página web que muestre los múltiplos de 3 comprendidos entre los números 1 y
20 14. Convertir todos los ejercicios anteriores en formularios 15. Realizar una página que genere números pares 16. Realizar una página que genere números impares 17. Página que imprima del 100 al 0 en ese mismo orden 18. Realizar una página que solicite un número y un nombre y repita el nombre el
número de veces. 19. Realizar una página que genere números múltiplos de 5 hasta el número
ingresado 20. Mostrar los múltiplos de 3 comprendidos entre los números 1 y 20 21. Página que pida colores en RBG y los convierta en hexadecimal 22. Página que pida un número y muestre la suma de sus dígitos 23. Página que calcule el factorial de un número, por ejemplo de 4 es 4x3x2x1=24 24. Página que solicite dos números de dos dígitos y lo sume, en caso no sea de dos
dígitos que siga solicitando. 25. Una página que muestra el signo zodiacal de una persona. Para ello el usuario
debe introducir únicamente el día y el mes de nacimiento y el programa determinará inmediatamente el signo zodiacal de la persona.
Ingeniería Web
Pág. 52
¡Exigencia académica para grandes cambios!
UNIDAD N° II
Métodos de desarrollo de la Ingeniería Web: Desarrollo, metodologías, técnicas. Pruebas y calidad.
Métricas web
Desarrolla una aplicaciones web con PHP y MySQL de una tienda virtual
3.1 Instrucciones básicas 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{
SESIÓN I:
LOGRO:
INFORMACIÓN:
Ingeniería Web
Pág. 53
¡Exigencia académica para grandes cambios!
?> <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ú Campeón"; # 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 más rápida"; 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"; ?>
Ingeniería Web
Pág. 54
¡Exigencia académica para grandes cambios!
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: <font face="Helvetica"> <?php $output = `dir`; echo "<pre>$output</pre>" ?> </font> EJERCICIO 11: <font face="Helvetica"> <?php $cad1 = "PHP is "; $cad2 = "PowerFull."; echo $cad1.$cad2; ?> </font>
3.2 Formularios HTML (GET ó POST)
Los documentos web que conforman una aplicación Web necesitan comunicarse entre sí, una de las formas es utilizando formularios HTML que envía datos a un programa PHP, estos campos se convierten en variables, razón por la que se les denomina “variables externas”. Sintaxis en la página HTML:
<form method="POST/GET" action="destino">
Controles HTML
Ingeniería Web
Pág. 55
¡Exigencia académica para grandes cambios!
</form>
Sintaxis en la página PHP: $_POST["NombreDelCampo"] $_GET["NombreDelCampo"]
Habilitar en ON la directiva de REGISTER_GLOBALS en el archivo php.ini
Ejemplo: Se tiene una página llamado calculosueldo.html que se muestra a continuación
La cual debe procesar y mostrar la siguiente página sueldo.php. Impuesto a la renta 10% del total e impuesto solidaridad 1.7% del total:
//cálculo de sueldo
//calculosueldo.html
<body bgcolor="#D2EBF7">
<h1>Cálculo de Sueldo</h1>
<form method="post"
action="sueldo.php">
<b>Dias
Trabajados:</b><input
type="text" name="dt"><br>
//sueldo.php <body bgcolor="#D2EBF7"> <?php $total = $_POST["dt"] * $_POST["hd"] * $_POST["ch"]; $ir = $total * 0.10; # Impuesto a la renta $is = $total * 0.017; # Impuesto de solidaridad
Ingeniería Web
Pág. 56
¡Exigencia académica para grandes cambios!
<b>Horas por
Día:</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>Cálculo de Sueldo</h1> <table border=1 width=400> <tr> <th align=center colspan=2 border=0>Datos</th> </tr> <tr> <td width=70%><b>Días trabajados</b></td> <td><?php echo $_POST["dt"] ?></td> </tr> <tr> <td><b>Horas por día</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
Ingeniería Web
Pág. 57
¡Exigencia académica para grandes cambios!
Ejercicio 13: Con la supervariable $_POST desarrolle un formulario que solicite dos números (números.html) para sumar en otra (suma.php)
3.3 Programas recursivos
También 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 método POST aunque el posible realizar mediante el método GET. En este caso CONTROL sería 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 CÓDIGO PHP } ?> </body>
Ingeniería Web
Pág. 58
¡Exigencia académica para grandes cambios!
Ejemplo: Desarrolle un formulario que calcule el área de un triángulo, el formulario y la acción deben programarse en el mismo formulario:
//triangulo.php <body bgcolor="#D2EBF7">
<?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 programación 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 programación recursiva, desarrollada en la clase anterior. Se recomienda en primer lugar realizar el diseño en HTML para luego incrustar los códigos del PHP. Las estructuras condicionales son:
Ingeniería Web
Pág. 59
¡Exigencia académica para grandes cambios!
CONDICIONALES: If:
If-else:
Ifelse: Esta última práctica 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.
Ingeniería Web
Pág. 60
¡Exigencia académica para grandes cambios!
3.5 Estrategias de programación según 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 página o en una nueva página.
RESULTADOS EN UNA MISMA PÁGINA: Desarrollar las siguientes páginas y mostrar los resultados en una misma página EJERCICIO 01:
<?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>
BLOQUE PHP
BLOQUE HTML
Los resu
ltado
s
se mu
estran en
un
mism
o
form
ulario
Ingeniería Web
Pág. 61
¡Exigencia académica para grandes cambios!
<td width="81">Numero 1 </td> <td width="150"> <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>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; if(isset($_POST["btnCalcular"])) { //Entrada $n1 = $_POST["txtn1"]; $n2 = $_POST["txtn2"]; //Proceso if($n1 > $n2) $m = $n1; if($n2 > $n1) $m = $n2;
Ingeniería Web
Pág. 62
¡Exigencia académica para grandes cambios!
} ?> <html> <head> <title>Problema 11</title> <style type="text/css"> <!-- .TextoFondo { background-color: #CCFFFF; } --> </style> </head> <body> <form method="post" action="Problema02.php"> <table width="236" border="0"> <tr> <td colspan="2"><strong>Problema 11</strong> </td> </tr> <tr> <td width="75">Numero 1 </td> <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> <input name="btnCalcular" type="submit" id="btnCalcular" value="Calcular" /> </td> </tr> </table> </form> </body> </html> EJERCICIO 03:
Ingeniería Web
Pág. 63
¡Exigencia académica para grandes cambios!
<?php //Variables $d = 0; $m = 0; $e = ""; if(isset($_POST["btnCalcular"])) { //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 = "OTOÑO"; break; case 4: case 5: case 6: $e = "OTOÑO"; 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> <title>Problema 32</title> <style type="text/css"> <!-- .TextoFondo {
Ingeniería Web
Pág. 64
¡Exigencia académica para grandes cambios!
background-color: #CCFFFF; } --> </style> </head> <body> <form method="post" action="Problema03.php"> <table width="241" border="0"> <tr> <td colspan="2"><strong>Problema 32</strong> </td> </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> <input name="btnCalcular" type="submit" id="btnCalcular" value="Calcular" /> </td> </tr> </table> </form> </body> </html>
EJERCICIO 04: Cuenta número de pares
<?php //Variables $i = 0;$ni = 0;$nf = 0; $cp = 0; if(isset($_POST["btnCalcular"])) { //Entrada $ni = (int)$_POST["txtni"]; $nf = (int)$_POST["txtnf"];
Ingeniería Web
Pág. 65
¡Exigencia académica para grandes cambios!
//Proceso $i = $ni + 1; while($i < $nf){ if($i % 2 == 0){ $cp += 1; } $i++; } } ?> <html> <head> <title>Problema 43</title> <style type="text/css"> <!-- .TextoFondo { background-color: #CCFFFF; } --> </style> </head> <body> <form method="post" action="Problema04.php"> <table width="288" border="0"> <tr> <td colspan="2"><strong>Problema 43</strong> </td> </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> <input name="btnCalcular" type="submit" id="btnCalcular" value="Calcular" /> </td> </tr> </table> </form> </body> </html>
Ingeniería Web
Pág. 66
¡Exigencia académica para grandes cambios!
EJERCICIO 05:
<?php //Variables $nb = 0; $p = 0; $i = 0; $r = ""; //Arreglos $n = array(); if(isset($_POST["btnCalcular"])) { //Entrada $n[0] = (int)$_POST["txtn1"]; $n[1] = (int)$_POST["txtn2"]; $n[2] = (int)$_POST["txtn3"]; $n[3] = (int)$_POST["txtn4"]; $n[4] = (int)$_POST["txtn5"]; $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> <title>Problema 75</title> <style type="text/css"> <!--
Ingeniería Web
Pág. 67
¡Exigencia académica para grandes cambios!
.TextoFondo { background-color: #CCFFFF; } --> </style> </head> <body> <form method="post" action="Problema05.php"> <table width="184" border="0"> <tr> <td colspan="2"><strong>Problema 75</strong> </td> </tr> <tr> <td width="99">Numero 1 </td> <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> <td><input name="txtn3" type="text" id="txtn3" value="<?=$n[2]?>" size="5" /></td> </tr> <tr> <td>Numero 4 </td> <td><input name="txtn4" type="text" id="txtn4" value="<?=$n[3]?>" size="5" /></td> </tr> <tr> <td>Numero 5 </td> <td><input name="txtn5" type="text" id="txtn5" value="<?=$n[4]?>" size="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>
Ingeniería Web
Pág. 68
¡Exigencia académica para grandes cambios!
<td> <input name="btnCalcular" type="submit" id="btnCalcular" value="Calcular" /> </td> </tr> </table> </form> </body> </html> EJERCICIO 06:
<?php //Variables $f = ""; $l = ""; $c = 0; $i = 0; if(isset($_POST["btnCalcular"])) { //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> <title>Problema 93</title> <style type="text/css"> <!-- .TextoFondo { background-color: #CCFFFF; } --> </style> </head> <body>
Ingeniería Web
Pág. 69
¡Exigencia académica para grandes cambios!
<form method="post" action="Problema06.php"> <table width="344" border="0"> <tr> <td colspan="2"><strong>Problema 93</strong> </td> </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> <input name="btnCalcular" type="submit" id="btnCalcular" value="Calcular" /> </td> </tr> </table> </form> </body> </html> EJEMPLO 7:
<?php
Ingeniería Web
Pág. 70
¡Exigencia académica para grandes cambios!
//Variables $f1 = ""; $f2 = ""; $c = ""; $i = 0; $p = 0; if(isset($_POST["btnCalcular"])) { //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> <title>Problema 95</title> <style type="text/css"> <!-- .TextoFondo { background-color: #CCFFFF; } --> </style> </head> <body> <form method="post" action="Problema95.php"> <table width="344" border="0"> <tr> <td colspan="2"><strong>Problema 95</strong> </td> </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>
Ingeniería Web
Pág. 71
¡Exigencia académica para grandes cambios!
</tr> <tr> <td> </td> <td> <input name="btnCalcular" type="submit" id="btnCalcular" value="Calcular" /> </td> </tr> </table> </form> </body> </html>
RESULTADOS EN OTRA PÁGINA: Desarrollar lo siguiente y mostrar los resultados en otra página los resultados. En este caso notará la similitud con la estructura de la programación recursiva, vista en la clase anterior. Ejemplo 8: Seleccionar la ciudad y deberá mostrar en otra página un mensaje descriptivo de la ciudad.
//ejemplo8.php <body bgcolor="#D2EBF7"> <?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>
BLOQUE HTML
BLOQUE PHP
Los resu
ltado
s
se mu
estran en
un
a nu
eva
págin
a
Ingeniería Web
Pág. 72
¡Exigencia académica para grandes cambios!
<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 Selección</a>"; } ?> </body> Ejemplo 9:
//ejemplo9.php <body bgcolor="#D2EBF7"> <?php if(!isset($_POST["seguro"])){
Ingeniería Web
Pág. 73
¡Exigencia académica para grandes cambios!
?> <h2>Número Primo</h2> <form method = "post" action = "ejemplo9.php"> Número <input type="text" name="n" size="2" maxlength="2"> <input type="hidden" name="seguro" value="12345"> <input type="submit" value="Enviar"> </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 "Número: $n <br>"; echo "Condición: $msg <br>"; echo "<a href='ejemplo9.php'>Nueva Prueba</a>"; } ?> </body> Ejercicio 10
//ejemplo10.php <body bgcolor="#D2EBF7"> <h2>Serie de Fibonacci</h2> <table> <tr> <td valign="top" width = "100"> <form method = "post" action = "ejemplo10.php"> N <input type="text" name="n" size="2" maxlength="2"><br> <input type="submit" value="Enviar"> </form> </td> <td valign="top" width="250"> <?php if( isset($_POST["n"]) ) {
Ingeniería Web
Pág. 74
¡Exigencia académica para grandes cambios!
$n = $_POST["n"]; if ($n <= 2){ echo "Debe ingresar un número 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>
Desarrollar las siguientes prácticas propuestas: Práctica 01:
Práctica 02:
ACTIVIDAD:
Ingeniería Web
Pág. 75
¡Exigencia académica para grandes cambios!
Práctica 03:
Práctica 04:
Práctica 05:
Ingeniería Web
Pág. 76
¡Exigencia académica para grandes cambios!
Práctica 06:
Práctica 07:
Práctica 08:
Ingeniería Web
Pág. 77
¡Exigencia académica para grandes cambios!
Frameworks PHP y Gestores de Base de datos
Identifica Frameworks de PHP
Gestiona bases de datos para la web
4.1 FRAMEWORK
Mientras más tiempo pasamos programando más 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 difícil tenerlo actualizado y funcionando en forma correcta y segura.
Los frameworks, como su nombre lo indica, nos entregan una estructura, armazón o marco para desarrollar nuestros proyectos. En otras palabras, nos entregan una serie de clases, funciones o librerías, 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 código adicional que no es tuyo. Hay que invertir tiempo en aprender a usarlos. En algunos casos una aplicación desarrollada con un framework puede ser más lenta (en
cuanto a rendimiento) que una diseñada y desarrollada desde cero.
Scripts y sistemas Framework creados en PHP, que permiten el desarrollo de nuevos proyectos con la ayuda de programas, módulos, librerías y lenguaje de scripting.
Zend Framework http://framework.zend.com/ Symfony (recomendado) http://www.symfony-project.org/
SESIÓN II:
LOGRO:
INFORMACIÓN:
Ingeniería Web
Pág. 78
¡Exigencia académica para grandes cambios!
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. Además 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 características:
Trabaja con MVC (Model View Controller)
Cuenta con módulos para manejar archivos PDF, canales RSS, Web Services
(Amazon, Flickr, Yahoo), etc
El Marco de Zend también 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 solución para el acceso a base de datos que balancea el ORM con eficiencia y
simplicidad. Podemos ver esta función en el futuro.
Completa documentación y tests de alta calidad.
Soporte avanzado para i18n (internacionalización).
Un buscador compatible con Lucene.
Robustas clases para autenticación 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 podrías revisar de comparativas:
http://pwneds.blogspot.com/2007/11/comparacion-de-10-frameworks-de-php.html
Ingeniería Web
Pág. 79
¡Exigencia académica para grandes cambios!
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 añadimos la siguiente línea en el fichero de configuración php.ini dentro del servidor web APACHE, además 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 librería del Zend Framework procederemos a crear una página 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 Ingeniería Web - MVC
Los códigos anteriores de consulta y acceso a base de datos realizados anteriormente, son
fácil de escribir y rápido de ejecutar, pero muy difícil de mantener y actualizar. Los
principales problemas del código anterior son:
No existe protección frente a errores (¿qué ocurre si falla la conexión con la base de
datos?).
El código HTML y el código PHP están mezclados en el mismo archivo e incluso en
algunas partes están entrelazados.
Ingeniería Web
Pág. 80
¡Exigencia académica para grandes cambios!
El código solo funciona si la base de datos es MySQL.
En vista de ello la Ingeniería Web ha previsto el Modelo Vista Controlador (MVC)
es un patrón de arquitectura que nació en Smalltalk por los años 80 y se hizo muy
popular en las aplicaciones (y frameworks) webs de los últimos años. Consiste en
la separación 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 están en una base de datos) y el modelo de negocio de la aplicación.
Vista: representa la interfaz de usuario. En la web serían 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 interactúa con la interfaz de usuario de alguna forma (por ejemplo, el
usuario pulsa un botón, enlace, etc.)
2. El controlador recibe (por parte de los objetos de la interfaz-vista) la notificación de
la acción solicitada por el usuario. El controlador gestiona el evento que llega,
frecuentemente a través de un gestor de eventos (handler) o callback.
3. El controlador accede al modelo, actualizándolo, posiblemente modificándolo de
forma adecuada a la acción solicitada por el usuario (por ejemplo, el controlador
actualiza el carro de la compra del usuario). Los controladores complejos están a
menudo estructurados usando un patrón de comando que encapsula las acciones y
simplifica su extensión.
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
Ingeniería Web
Pág. 81
¡Exigencia académica para grandes cambios!
directo sobre la vista. Sin embargo, se podría utilizar el patrón Observador para
proveer cierta indirección 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 envíe 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 patrón 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 métodos que serán ejecutados.
La Vista
En el código 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 más compleja, lo veremos en el siguiente
ejemplo.
EJEMPLO 1: ZF trata de no usar archivos de configuración como XML, sino a través de métodos y otros recursos de la programación orientada a objetos. Van a notar que los códigos no cierran con la etiqueta ?>, esto es para no dejar ninguna salida al navegador sin querer. Esta es una de las buenas prácticas 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/
Ingeniería Web
Pág. 82
¡Exigencia académica para grandes cambios!
scripts/
index/
index.phtml
lib/
Zend/
public/
.htaccess
index.php
Carpeta por carpeta
app/ Aqui van los códigos PHP propios de la aplicación 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 imágenes,
JavaScripts, CSS, etcétera. app/controllers/ Los objetos controladores. app/views/ Objetos y scripts de la vista. app/views/scripts/ Scripts HTML.
Códigos: public/.htaccess
Un fichero .htaccess (hypertext access), también conocido como archivo
de configuración distribuida, es un fichero especial, popularizado por
el Servidor Web Apache que nos permite definir diferentes directivas
de configuración para cada directorio (con sus respectivos
subdirectorios) sin necesidad de editar el archivo de configuración
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
Ingeniería Web
Pág. 83
¡Exigencia académica para grandes cambios!
8. // la vista y el viewRenderer se encarga de ejecutarla
9. }
10. }
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 líneas de
código.
http://localhost/helpdesk/app/views/scripts/index/
5.1 SBGD MySQL
Listado y descripción de los distintos tipos de datos de MySQL.
Por Carlos Luis Cuenca Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Después de la fase de diseño 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 diseño de la base de datos, y conseguir un almacenamiento
óptimo con la menor utilización de espacio. El presente artículo describe cada uno de los
tipos de datos que puede tener un campo en Mysql, para la versión 4.xx.xx.
Los tipos de datos que puede haber en un campo, se pueden agrupar en tres grandes grupos:
1. Tipos numéricos
2. Tipos de Fecha
3. Tipos de Cadena
1 Tipos numéricos:
Existen tipos de datos numéricos, que se pueden dividir en dos grandes grupos, los que
están en coma flotante (con decimales) y los que no.
TinyInt: es un número entero con o sin signo. Con signo el rango de valores válidos va
desde -128 a 127. Sin signo, el rango de valores es de 0 a 255
Ingeniería Web
Pág. 84
¡Exigencia académica para grandes cambios!
Bit ó Bool: un número entero que puede ser 0 ó 1
SmallInt: número 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: número 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: número 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: número 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: número pequeño en coma flotante de precisión simple. Los valores válidos van
desde -3.402823466E+38 a -1.175494351E-38, 0 y desde 1.175494351E-38 a
3.402823466E+38.
xReal, Double: número en coma flotante de precisión 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: Número en coma flotante desempaquetado. El número se
almacena como una cadena
Tipo de Campo Tamaño de
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
DECIMAL(M,D
M+2 bytes sí D >
0, M+1 bytes sí D
= 0
Ingeniería Web
Pág. 85
¡Exigencia académica para grandes cambios!
NUMERIC(M,D)
M+2 bytes if 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 válida o no. Simplemente comprueba que el mes esta
comprendido entre 0 y 12 y que el día 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 año-mes-dia
DateTime: Combinación 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 año-mes-dia
horas:minutos:segundos
TimeStamp: Combinación de fecha y hora. El rango va desde el 1 de enero de 1970 al año
2037. El formato de almacenamiento depende del tamaño del campo:
Tamaño Formato
14 AñoMesDiaHoraMinutoSegundo
aaaammddhhmmss
12 AñoMesDiaHoraMinutoSegundo
aammddhhmmss
8 ñoMesDia aaaammdd
6 AñoMesDia aammdd
4 AñoMes aamm
2 Año 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 año. El rango de valores permitidos va desde el año 1901 al año 2155.
El campo puede tener tamaño dos o tamaño 4 dependiendo de si queremos almacenar el
año con dos o cuatro dígitos.
Tipo de
Campo
Tamaño de
Almacenamiento
DATE 3 bytes
DATETIME 8 bytes
TIMESTAMP 4 bytes
TIME 3 bytes
YEAR 1 byte
Ingeniería Web
Pág. 86
¡Exigencia académica para grandes cambios!
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
Mayúsculas y las minúsculas, el tipo BLOB se ordena teniéndolas en cuenta.
Los tipos BLOB se utilizan para almacenar datos binarios como pueden ser ficheros
incluyendo imágenes.
TinyText y TinyBlob: Columna con una longitud máxima de 255 caracteres.
Blob y Text: un texto con un máximo de 65535 caracteres.
MediumBlob y MediumText: un texto con un máximo de 16.777.215 caracteres.
LongBlob y LongText: un texto con un máximo de caracteres 4.294.967.295. Hay que
tener en cuenta que debido a los protocolos de comunicación los paquetes pueden tener un
máximo 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 máximo de 64 valores.
Tipo de campo Tamaño 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
número de valores
SET('value1','value2',...) 1, 2, 3, 4 ó 8 bytes, dependiendo
del número de valores
Ingeniería Web
Pág. 87
¡Exigencia académica para grandes cambios!
Diferencia de almacenamiento entre los tipos Char y VarChar
Valor CHAR(4) Almace
namiento VARCHAR(4)
Almace
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 más antiguo, y posiblemente podría desaparecer en
futuras versiones. Presentaba limitaciones importantes como la no exportación de ficheros
entre máquinas de distintas arquitecturas o que no podía usar mayores de 4 GigaBytes.
MYISAM: es el tipo de tabla por defecto en MySQL desde la versión 3.23. Optimizada para
sistemas operativos de 64 bits, permite ficheros de tamaños 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 extensión” .MYI” y los datos en
otro archivo con extensión “.MYD”. Ofrece la posibilidad de indexar campos BLOB y
TEXT. Además 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 utilización.
- Un gusano en el código Mysql o MyISAM.
INNODB: InnoDB provee a MySQL con el soporte para trabajar con transacciones, además
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 foráneas (FOREING KEY). Además de todo lo comentado, InnoDB ofrece unos
rendimientos superiores a la anterior tecnología 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 características son:
- Recuperación automática ante fallas. Si MySQL se da de baja de una forma anormal,
InnoDB automáticamente completará las transacciones que quedaron incompletas.
Ingeniería Web
Pág. 88
¡Exigencia académica para grandes cambios!
- Integridad referencial. Ahora se pueden definir llaves foráneas entre tablas InnoDB
relacionadas para asegurarse de que un registro no puede ser eliminado de una tabla si aún
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 podían ejecutar más consultas hasta que
terminarán las consultas que estaban en ejecución. 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 técnica 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 sólo 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
pequeños bloques.
BDB: Base de datos Berkeley. TST(Transactions safe tables). Solo en MySQL
MAX: Este tipo de tablas permite la realización de transacciones (a partir de la versión
3.23.34), por lo que es posible la recuperación 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 características es que pueden ser
bloqueadas con el comando LOCK. Estas tablas són almacenadas en archivos “.DB”.
El TST
'Transactions safe tables', o tablas para transacciones seguras. Son menos rápidas 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 versión 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 gestión de base de datos relacional, multihilo y multiusuario con
más 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 específica que les permita este uso.
Ingeniería Web
Pág. 89
¡Exigencia académica para grandes cambios!
Usuarios destacados: Actualmente (enero 2011) existen más 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 televisión por cable más importante de EEUU,
tienen más 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 búsqueda de la aplicación AdWords.
Joomla!, con millones de usuarios.
Nokia, usa un cluster MySQL para mantener información en tiempo real sobre
usuarios de redes de móviles.
Wikipedia, sirve más de 200 millones de consultas y 1,2 millones de actualizaciones
cada día, con picos de 11.000 consultas por segundo.
WordPress, con cientos de blogs alojados en él.
Yahoo! - para muchas aplicaciones críticas.
5.4 PHPMYADMIN
phpMyAdmin es una herramienta escrita en PHP con la intención de manejar la administración de MySQL a través de páginas web, utilizando Internet. Se realiza la gestión de base de datos de manera más práctica, 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 versión digite el siguiente comando que le dará acceso con el usuario por defecto root:
mysql –u root Importante!!! Todas las instrucciones deben terminar con ;
Ingeniería Web
Pág. 90
¡Exigencia académica para grandes cambios!
Ejercicio 1: Empleando código SQL crear una base de datos “Facturación” en la cual se debe crear la tabla producto que contenga los campos:
Tabla: Laboratorios Tipo Null
CodLab Char(4) Not Null
Nombre Varchar(20) Not Null
Dirección Varchar(15) Not Null
JefeVentas Varchar(15)
PagWeb Varchar(12)
Tabla: Productos Tipo Null
CodProd Char(4) Not Null
NombreProd Varchar(20) Not Null
Presentacion Varchar(15) Not Null
Precio Numeric(8,2) Not Null
Stock Numeric(4)
CodLab Char(4) Not Null
Los registros a ingresar son:
CodLab Nombre Direccion JefeVentas PagWeb
1 Abeefe Lima Ing. Flores www.abeefe.com
2 Glaxo Lima Lic. Vargas www.Glaxo.com
3 Halcón Callao Sr. Herrera
4 Gen - Far Lima Ing Pando
CodProd NombreProd Presentacion Laboratorio Precio Stock
1 Rintal Gotas 1 6.2 230
2 Ventolin Inhalador 4 23.5 330
3 Optifree Gotas 3 30 140
4 Ampicilina Cajas 1 16.6 145
5 Dexacor Cajas 2 12.7 230
6 Rondec Gotas 3 14.8 150
7 Vecotide Inhalador 4 32.56 100
8 Advantege Cajas 1 18.66 90
Ingeniería Web
Pág. 91
¡Exigencia académica para grandes cambios!
Instrucciones para crear base de datos (instrucción créate database) y ubicarnos en ella (instrucción 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 foráneas. 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
Ingeniería Web
Pág. 92
¡Exigencia académica para grandes cambios!
Práctica 1: Culminar la creación y visualización de la base de datos Facturación.
5.5 GUI para gestores de bases de datos MYSQL
SQL Buddy, es fácil de configurar, un config.php dónde 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 diseño mucho
más amigable y más sencillo de instalar.
phpMinAdmin. La menos funcional y atractiva, pero aun así es una opción cuando
la usabilidad no es lo que más buscamos.
phpMyAdmin es una herramienta escrita en PHP con la intención de manejar la
administración de MySQL a través de páginas web, utilizando Internet. Es la más
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 diseñador.
Ingeniería Web
Pág. 93
¡Exigencia académica para grandes cambios!
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 tecnología de almacenamiento de datos de código abierto para la base de datos MySQL, incluidos como formato de tabla estándar en todas las distribuciones de MySQL a partir de las versiones 4.0. Su característica 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 línea 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 codificación de
caracteres Unicode e ISO 10646 utilizando símbolos de longitud variable. UTF-8
fue creado por Robert C. Pike y Kenneth L. Thompson. Está definido como estándar
por la RFC 3629 de la Internet Engineering Task Force (IETF).
Ingeniería Web
Pág. 94
¡Exigencia académica para grandes cambios!
Práctica 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:
Ingeniería Web
Pág. 95
¡Exigencia académica para grandes cambios!
TABLA CONTROL
Registros de la tabla:
Ingeniería Web
Pág. 96
¡Exigencia académica para grandes cambios!
TABLA DEPARTAMENTO
Tabla: Ubicación
Registros de la tabla:
Ingeniería Web
Pág. 97
¡Exigencia académica para grandes cambios!
Tabla empleado
Insertar codigo SQL INSERT INTO `empleado` (`idempleado`, `apellido`, `nombre`, `fecingreso`, `email`, `telefono`, `idcargo`, `iddepartamento`, `sueldo`, `comision`, `jefe`) VALUES ('E0001', 'Coronel', 'Gustavo', '2000-04-01', '[email protected]', '9666-4457', 'C01', 100, 25000, NULL, NULL), ('E0002', 'Fernandez', 'Claudia', '2000-05-01', '[email protected]', '9345-8365', 'C03', 100, 8000, NULL, 'E0001'), ('E0003', 'Matsukawa', 'Sergio', '2000-04-01', '[email protected]', '9772-8369', 'C02', 102, 15000, NULL, 'E0001'), ('E0004', 'Diaz', 'Mariela', '2000-04-10', '[email protected]', '8654-6734', 'C06', 102, 1800, NULL, 'E0003'), ('E0005', 'Martinez', 'Roberto', '2000-04-05', '[email protected]', NULL, 'C08', 102, 7000, 500, 'E0003'), ('E0006', 'Espinoza', 'Miguel', '2000-04-06', '[email protected]', NULL, 'C08', 102, 7500, 500, 'E0003'), ('E0007', 'Ramos', 'Vanessa', '2002-04-06', '[email protected]', '9456-3456', 'C08', 102, 7000, 500, 'E0003'), ('E0008', 'Flores', 'Julio', '2000-04-01', '[email protected]', NULL, 'C07', 102, 3500, 1000, 'E0003'), ('E0009', 'Marcelo', 'Ricardo', '2000-04-01', '[email protected]', '9936-2966', 'C02', 101, 15000, NULL, 'E0001'), ('E0010', 'Barrios', 'Guisella', '2001-01-15', '[email protected]', '9023-4512', 'C03', 101, 8000, NULL, 'E0009'), ('E0011', 'Cuellar', 'Lucy', '2003-02-18', '[email protected]', NULL, 'C06', 101, 2000, NULL, 'E0009'), ('E0012', 'Valencia', 'Hugo', '2000-05-01', '[email protected]', '9732-5601', 'C02', 105, 15000, NULL, 'E0001'), ('E0013', 'Veliz', 'Fortunato', '2000-05-05', '[email protected]', '9826-7603', 'C04', 105, 6000, NULL, 'E0012'),
Ingeniería Web
Pág. 98
¡Exigencia académica para grandes cambios!
('E0014', 'Aguero', 'Octavio', '2000-05-15', '[email protected]', NULL, 'C07', 105, 3000, 300, 'E0012'), ('E0015', 'Rosales', 'Cesar', '2003-03-15', '[email protected]', NULL, 'C07', 105, 2500, 300, 'E0012'), ('E0016', 'Villarreal', 'Nora', '2000-05-01', '[email protected]', '9371-3641', 'C02', 103, 15000, NULL, 'E0001'), ('E0017', 'Romero', 'Alejandra', '2000-05-03', '[email protected]', '8345-9526', 'C03', 103, 7500, NULL, 'E0016'), ('E0018', 'Valdiviezo', 'Jennifer', '2000-06-12', '[email protected]', '9263-5172', 'C06', 103, 2000, NULL, 'E0016'), ('E0019', 'Muchotrigo', 'Omar', '2000-05-12', '[email protected]', '9963-5542', 'C05', 103, 3500, 500, 'E0016'), ('E0020', 'Baltazar', 'Victor', '2000-05-18', '[email protected]', '9893-4433', 'C05', 103, 3000, 800, 'E0016'), ('E0021', 'Castillo', 'Ronald', '2001-05-18', '[email protected]', '9234-3487', 'C05', 103, 3000, 800, 'E0016'), ('E0022', 'Espilco', 'Luis', '2002-04-17', '[email protected]', '9554-3456', 'C05', 103, 3000, 300, 'E0016');
5.6 Funciones de acceso a BD
mysql_connect: Abre una conexión 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 "Conexión: Ok";
} else {
echo "Conexión: Error";
}
?>
mysql_close: Cierra una conexión a un servidor MySQL y retorna un identificador
positivo si tiene éxito o false si hay error.
<?php
$cn = mysql_connect("localhost","root","");
if($cn){
echo "Conexión: Ok";
} else {
echo "Conexión: Error";
return;
Ingeniería Web
Pág. 99
¡Exigencia académica para grandes cambios!
}
echo "<br>";
$rpta = mysql_close();
if($rpta){
echo "Conexión: Cerrada";
} else {
echo "Conexión: Error";
}
?>
Mysql_select_db: Después de con el servidor, necesitamos seleccionar la base de
datos con la cual vamos a trabajar, devuelve un identificador de conexión.
<?php
$cn = mysql_connect("localhost","root","");
if($cn){
echo "Conexión: Ok";
} else {
echo "Conexión: Error";
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 "Conexión: Cerrada";
} else {
echo "Conexión: Error";
Ingeniería Web
Pág. 100
¡Exigencia académica para grandes cambios!
}
?>
Crear una página 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">
Código
<input type="text" name="codigo">
<input type="submit" value="Enviar">
</form>
<?php
// Verificar si existe la variable: codigo
if( !isset($_POST["codigo"]) ) {
say( "</body>" );
return;
}
// leer la variable: codigo
$codigo = $_POST["codigo"];
// Conexión con la base de datos
$cn = fnConnect( $msg );
// Verificar la conexión 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 = "Código " . $codigo . " no existe.";
fnShowMsg( "Mensaje", $msg );
Ingeniería Web
Pág. 101
¡Exigencia académica para grandes cambios!
say( "</body>" );
return;
}
// Mostrar resultado
say( "<h2>Resultado</h2>" );
say( "<table border=1>" );
say( "<tr>" );
say( "<td>Código</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>
Librería.php
<?php
function fnConnect( &$msg){
$cn=mysql_connect("localhost","root","");
if(!$cn){
$msg = "Error en la conexión";
return 0;
}
$rpta = mysql_select_db("rh",$cn);
Ingeniería Web
Pág. 102
¡Exigencia académica para grandes cambios!
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>");
}
Ingeniería Web
Pág. 103
¡Exigencia académica para grandes cambios!
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;
Ingeniería Web
Pág. 104
¡Exigencia académica para grandes cambios!
}
H2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.75em;
font-weight: 700;
}
H3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.58em;
font-weight: 500;
}
TABLE {
background-color: #FFEFD5;
}
TH {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: White;
font-weight: 500;
font: bold;
Ingeniería Web
Pág. 105
¡Exigencia académica para grandes cambios!
background: #804D19;
}
TD {
font-family: Verdana, Arial, Helvetica, sans-serif;
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 Envía 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 número de filas de un resultado int mysql_num_rows ( int id_resultado ) Regresa el número de filas en un resultado. Este comando es válido solo para las sentencias SELECT. Para obtener el número 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.
Ingeniería Web
Pág. 106
¡Exigencia académica para grandes cambios!
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 más 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 específicada para el identificador de resultado. La próxima llamada a mysql_fetch_row() devolverá esa fila.
Devuelve TRUE si todo se llevó a cabo correctamente, FALSE en caso de fallo. El número 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 parámetro opcional. Únicamente devuelve una matriz asociativa. MYSQL_ERRNO Devuelve el número del mensaje de error de la última operación MySQL int mysql_errno ( [int identificador_de_enlace] ) Regresa el número de error de la última función, 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 código de error. Note que esta función solo regresa el código de error de la función MySQL más recientemente executada (sin incluir mysql_error() y mysql_errno()), así que si quiere usarla, asegúrese de chequear el valor antes de llamar a otra función de MySQL. MYSQL_ERROR Devuelve el texto con error del mensaje de la anterior operación MySQL cadena mysql_error ( [int identificador_de_enlace] ) Regresa el texto del error de la última función MySQL o ‘’(cadena vacía) si no ocurrió error. Si no se específica el identificador de enlace en la función 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 transacción: BEGIN, BEGIN WORK, START TRANSACTION mysql_query(“BEGIN”, $cn); Confirmar transacción: mysql_query(“COMMIT”, $cn); Cancelar transacción: mysql_query(“ROLLBACK”, $cn);
LIBRERIA.PHP Para facilitar la programación, utilizaremos una librería de funciones
Ingeniería Web
Pág. 107
¡Exigencia académica para grandes cambios!
<?php function fnConnect( &$msg){ $cn=mysql_connect("localhost","root",""); if(!$cn){ $msg = "Error en la conexión"; 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 páginas web que mostrarán los resultados.
body { color: #000099; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; font-weight: 500; background: #FFF8EC;
Ingeniería Web
Pág. 108
¡Exigencia académica para grandes cambios!
} H1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 2em; font-weight: 700; } H2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.75em; font-weight: 700; } H3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.58em; font-weight: 500; } TABLE { background-color: #FFEFD5; } TH { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; color: White; font-weight: 500; font: bold; background: #804D19; } TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.9em; font-weight: 500; color: Navy; }
CONSULTA1.PHP Solicite ingreso del código de un empleado y muestre los resultados de código, apellido y nombre.
Ingeniería Web
Pág. 109
¡Exigencia académica para grandes cambios!
Arquitectura de vinculación de tecnologías PHP + MySQL
Arquitectura MySQL
Desarrolle un sistema web de consulta de empleado.
INFORMACIÓN
CLAVE:
ACTIVIDAD:
Ingeniería Web
Pág. 110
¡Exigencia académica para grandes cambios!
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"> Código <input type="text" name="codigo"> <input type="submit" value="Enviar"> </form> <?php // Verificar si existe la variable: codigo if( !isset($_POST["codigo"]) ) { say( "</body>" ); return; } // leer la variable: codigo $codigo = $_POST["codigo"]; // Conexión con la base de datos $cn = fnConnect( $msg ); // Verificar la conexión 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 = "Código " . $codigo . " no existe."; fnShowMsg( "Mensaje", $msg ); say( "</body>" ); return; } // Mostrar resultado say( "<h2>Resultado</h2>" ); say( "<table border=1>" ); say( "<tr>" ); say( "<td>Código</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>" );
Ingeniería Web
Pág. 111
¡Exigencia académica para grandes cambios!
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.
<?php require "libreria.php"; ?> <link rel="stylesheet" href="estilo.css" type="text/css"> <body> <?php // Conexión con la base de datos $cn = fnConnect( $msg ); // Verificar la conexión con la base de datos if( !$cn ) { fnShowMsg( "Error", $msg ); say( "</body>" ); return; } ?> <h1>Consulta de Empleados</h1> <form method="POST" action="consulta2.php"> Departamento <select name="dept" size="1"> <?php $sql = "select iddepartamento, nombre from departamento"; $rs = mysql_query( $sql, $cn ); while( $row = mysql_fetch_row( $rs ) ) {
Ingeniería Web
Pág. 112
¡Exigencia académica para grandes cambios!
$op = "<option value='" . $row[0] . "'>"; $op .= $row[1] . "</option>"; say( $op ); } ?> </select> <input type="submit" value="Enviar"> </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"; $rs = mysql_query( $sql, $cn ); $nom = mysql_result( $rs, 0, 0 ); // Consultar los empleados del departamento $sql = "select idempleado, apellido, nombre, sueldo from empleado "; $sql .= "where iddepartamento=$dept"; $rs = mysql_query( $sql ); // Verificar si retorna resultado $rows = mysql_num_rows( $rs ); if( $rows == 0 ) { $msg = "Departamento $dept - $nom no tiene empleados."; fnShowMsg( "Mensaje", $msg ); say( "</body>" ); return; } // Mostrar resultado say( "<h2>Resultado</h2>" ); say( "Departamento: $dept - $nom" ); say( "<table border=1>" ); say( "<tr>" ); say( "<th>Código</th>" ); say( "<th>Apellido</th>" ); say( "<th>Nombre</th>" ); say( "<th>Sueldo</th>" ); say( "</tr>" ); while( $row = mysql_fetch_row( $rs ) ) { say( "<tr>" ); foreach ( $row as $celda) { if( is_null( $celda ) ) { $celda = "None"; } say( "<td>$celda</td>" ); } say( "</tr>" ); }
Ingeniería Web
Pág. 113
¡Exigencia académica para grandes cambios!
say( "</table>" ); ?> </body>
CONSULTA3.PHP Consulta del número de empleados por cargo, la cual debe ser seleccionado desde una lista desplegable.
<?php require "libreria.php"; ?> <link rel="stylesheet" href="estilo.css" type="text/css"> <body> <?php // Conexión con la base de datos $cn = fnConnect( $msg ); // Verificar la conexión con la base de datos if( !$cn ) { fnShowMsg( "Error", $msg ); say( "</body>" ); return; } ?> <h1>Consulta de Empleados</h1> <form method="POST" action="consulta3.php"> Cargo <select name="cargo" size="1"> <?php $sql = "select idcargo, nombre from cargo"; $rs = mysql_query( $sql, $cn ); while( $row = mysql_fetch_assoc( $rs ) ) { $op = "<option value='" . $row["idcargo"] . "'>"; $op .= $row["nombre"] . "</option>"; say( $op ); } ?> </select> <input type="submit" value="Enviar"> </form>
Ingeniería Web
Pág. 114
¡Exigencia académica para grandes cambios!
<?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'"; $rs = mysql_query( $sql, $cn ); $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 "; $rs = mysql_query( $sql ); // Verificar si retorna resultado $rows = mysql_num_rows( $rs ); if( $rows == 0 ) { $msg = "Cargo $cargo - $nom no tiene empleados."; fnShowMsg( "Mensaje", $msg ); say( "</body>" ); return; } // Mostrar resultado say( "<h2>Resultado</h2>" ); say( "Cargo: $cargo - $nom" ); say( "<table border=1 width=300>" ); say( "<tr>" ); say( "<th>Departamento</th>" ); say( "<th>Empleados</th>" ); say( "</tr>" ); while( $row = mysql_fetch_assoc( $rs ) ) { say( "<tr>" ); say( "<td align='center'>" . $row["dept"] . "</td>" ); say( "<td align='center'>" . $row["emps"] . "</td>" ); say( "</tr>" ); } say( "</table>" ); ?> </body>
CONSULTA4.PHP Página que muestre los resultados en una página pero de 5 registros, los diversos resultados deberá paginarse.
Ingeniería Web
Pág. 115
¡Exigencia académica para grandes cambios!
<?php require( "libreria.php" ); ?> <link rel="stylesheet" href="estilo.css" type="text/css"> <body> <h1>Paginación</h1> <h2>Listado de Empleados</h2> <?php // Conexión con la base de datos $cn = fnConnect( $msg ); // Verificar la conexión con la base de datos if( !$cn ) { fnShowMsg( "Error", $msg ); say( "</body>" ); return; } // Parámetros de Paginación $pagesize = 5; $pageno = 1; if( isset($_GET["pageno"]) ) { $pageno = $_GET["pageno"]; } // Paginación $dezp = ($pageno - 1) * $pagesize; $sql = "select count(*) from empleado "; $rs = mysql_query( $sql, $cn ); $rows = mysql_result( $rs, 0, 0 ); $pages = ceil( $rows / $pagesize ); say( "Páginas: " ); 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"; $rs = mysql_query( $sql, $cn );
Ingeniería Web
Pág. 116
¡Exigencia académica para grandes cambios!
say( "<table border='1'>" ); say( "<tr>" ); say( "<th>Código</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 cómo controlar errores, para eso muestra un formulario para el ingreso de los parámetros necesarios para realizar una conexión, luego intenta realizar una nueva conexión, de haber un error muestra el número de error y el mensaje respectivo.
En caso se ingrese correctamente:
Ingeniería Web
Pág. 117
¡Exigencia académica para grandes cambios!
En caso se ingrese incorrectamente:
<link rel="stylesheet" href="estilo.css" type="text/css"> <body> <h1> Probar Conexión </h1> <?php if( !$_POST["seguro"] ) { ?> <form method="POST" action="consulta5.php"> <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>Contraseña</td> <td> <input type="password" name="pass"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="hidden" name="seguro" value="12345"> <input type="reset" value="Limpiar"> <input type="submit" value="Enviar"> </td> </tr> </table> </form> <?php } else { // Captura de Datos $server = $_POST["server"];
Ingeniería Web
Pág. 118
¡Exigencia académica para grandes cambios!
$user = $_POST["user"]; $pass = $_POST["pass"]; // Probando conexión $cn = mysql_connect( $server, $user, $pass ); $errno = mysql_errno(); if( $errno == 0 ) { echo "Conexión 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 cómo controlar errores, para eso muestra un formulario para el ingreso de los parámetros necesarios para realizar una conexión, luego intenta realizar una nueva conexión, de haber un error muestra el número de error y el mensaje respectivo.
<?php require "libreria.php"; ?> <link rel="stylesheet" href="estilo.css" type="text/css">
Ingeniería Web
Pág. 119
¡Exigencia académica para grandes cambios!
<body> <?php // Conexión con la base de datos $cn = fnConnect( $msg ); // Verificar la conexión con la base de datos if( !$cn ) { fnShowMsg( "Error", $msg ); say( "</body>" ); return; } say( "<h1>Nuevo Empleado</h1>" ); if( !$_POST["seguro"] ) { // ****************************** // Formulario de Ingreso de Datos // ****************************** ?> <form method="POST" action="consulta6.php"> <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> Teléfono </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)"; $rs = mysql_query( $sql, $cn ); while( $row = mysql_fetch_row( $rs ) ) { $op = "<option value='" . $row[0] . "'>" . $row[1] . "</option>"; say( $op ); } ?> </select> </td> </tr>
Ingeniería Web
Pág. 120
¡Exigencia académica para grandes cambios!
<tr> <td> Cargo </td> <td> <select name="cargo" size="1"> <?php $sql = "select idcargo, nombre from cargo "; $sql .= "where idcargo not in ('C01', 'C02')"; $rs = mysql_query( $sql, $cn ); while( $row = mysql_fetch_assoc( $rs ) ) { $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> Comisión </td> <td> <input type="text" name="comision"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="hidden" name="seguro" value="12345"> <input type="reset" value="Limpiar"> <input type="submit" value="Enviar"> </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 ";
Ingeniería Web
Pág. 121
¡Exigencia académica para grandes cambios!
$sql .= "where parametro = 'Empleado'"; $rs = mysql_query( $sql, $cn ); $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 código." ); 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' ) "; $rs = mysql_query( $sql, $cn ); $rows = mysql_num_rows( $rs ); if( $rows != 1 ) { mysql_query( "rollback", $cn ); 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){ mysql_query( "rollback", $cn ); $msg = "Datos ingresados no son correctos.<br>"; $msg .= "SQL: $sql"; fnShowMsg( "Error", $msg ); say( "</body>" ); return; } mysql_query( "commit", $cn ); $msg = "Empleado registrado correctamente.<br>"; $msg .= "Código Generado: $codigo<br>"; fnShowMsg( "Mensaje", $msg ); say( fnLink( "ejm1509.php","","Nuevo Empleado", "Nuevo Empleado" ) ); } ?> </body>
Ingeniería Web
Pág. 122
¡Exigencia académica para grandes cambios!
UNIDAD N° III
Servidor web en Windows y Linux: Arquitecturas y tecnologías
Reconoce las Arquitecturas y tecnologías de servidores web
6.1 Solución LAMP
El acrónimo 'LAMP' se refiere a un conjunto de subsistemas de software necesarios para alcanzar una solución global, en este caso configurar sitios web o servidores dinámicos con un esfuerzo reducido. En las tecnologías LAMP esto se consigue mediante la unión de las siguientes tecnologías:
Linux, el sistema operativo; En algunos casos también se refiere a LDAP.
Apache, el servidor web;
MySQL, el gestor de bases de datos;
Perl, PHP, o Python, los lenguajes de programación.
La combinación de estas tecnologías es usada primariamente para definir la infraestructura de un servidor web, utilizando un paradigma de programación para el desarrollo. A pesar de que el origen de estos programas de código abierto no han sido específicamente diseñado para trabajar entre sí, la combinación se popularizó debido a su bajo coste de adquisición y ubicuidad de sus componentes (ya que vienen pre-instalados en la mayoría 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 término se popularizara rápidamente en todo el mundo.
SESIÓN I:
LOGRO:
INFORMACIÓN:
Ingeniería Web
Pág. 123
¡Exigencia académica para grandes cambios!
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
Arquitectura web completa con servidor en la nube (ejm. Amazon) y CMS
INFORMACIÓN
CLAVE:
Ingeniería Web
Pág. 124
¡Exigencia académica para grandes cambios!
Identificar las características técnicas de un servidor web
Remitir la proforma de un servidor web físico
Remitir la proforma de un servidor web en la nube
Comparar y elegir un proveedor de hosting gratuito en la que desarrollará la práctica.
ACTIVIDAD:
Ingeniería Web
Pág. 125
¡Exigencia académica para grandes cambios!
Content Management System (CMS):
Ingeniería inversa para aplicaciones de Portales web
Ingeniería inversa para aplicaciones de Webblog Ingeniería inversa para sistemas de Información empresariales.
Implementa CMS aplicados a portales y blogs
6.3 CMS
Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es un programa que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, principalmente en páginas 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 diseño. Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. Un ejemplo clásico 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 público (los aprueba).
Tipos de gestores de contenidos
Los gestores de contenido se pueden clasificar según diferentes criterios:
Por sus características
Según el lenguaje de programación empleado, como por ejemplo Active Server Pages, Java, PHP, ASP.NET, Ruby On Rails, Python
Según la licencia: Código abierto o Software privativo
Por su uso y funcionalidad
Blogs; pensados para páginas personales.
Foros; pensados para compartir opiniones.
Wikis; pensados para el desarrollo colaborativo.
Enseñanza; plataforma para contenidos de enseñanza on-line.
Comercio electrónico; plataforma de gestión de usuarios, catálogo, compras y pagos.
Publicaciones digitales.
SESIÓN II:
LOGRO:
INFORMACIÓN:
Ingeniería Web
Pág. 126
¡Exigencia académica para grandes cambios!
Difusión de contenido multimedia.
Iniciativas de estandarización
Dentro de los portales se han realizado procesos de estandarización encaminados a la homogeneización en las interfaces de programación de los mismos de tal manera que un servicio desarrollado para un portal pueda ejecutarse en cualquier otro portal compatible con el estándar. El objetivo es obtener portales interoperables evitando desarrollo propietarios.
Las dos iniciativas más importantes son la Portlet Specification API JSR-168, la Content Repository API JSR-170
Principales CMS del tipo Portal Web:
INFORMACIÓN
CLAVE:
Ingeniería Web
Pág. 127
¡Exigencia académica para grandes cambios!
Actividad 1: Implementar un portal blog basado en Wordpress la cual debe tener lo siguiente:
BLOG WEB: El diseñador crítico
Desarrollar lo siguiente:
Instalar el Servidor Apache y el Gestor de base de datos MySQL a nivel local
Verificar que estén en funcionamiento
Descargar Wordpress
Instalar el Wordpress en una carpeta con el nombre blog, así por ejemplo su dirección de su portal será localhost/blog
Para instalar se requiere del archivo wp-config.php y deberá cambiar el nombre del archivo wp-config-sample.php
Dicho fichero editarlo con el Adobe Dreamweaver y modificar las siguientes líneas: // ** 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 instalación a nivel local de Wordpress al digital localhost/blog
Ingrese como administrador a su portal web
En settings (configuración) ingresar la siguiente información: Tagline: Crítico 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 opción: An administrator must always approve the comment
Definir los tamaños de imágenes al insertar en el blog, los tamaños 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 categoría Crítica y los siguientes tags: diseño, plagio, matiz y colocar la imagen plagio.jpg
El plagio en el diseño y sus matices Todo diseño reconoce antecedentes, todo lo nuevo se basa en experiencias anteriores, y en ese proceso, inevitable y legítimo, también hay lugar para la mala fe.
Comparto el siguiente artículo de André Ricard acerca del plagio en el diseño, 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 más correcto sentido. Plagiar, por ejemplo, significa «copiar en lo sustancial obras ajenas, dándolas como propias». Verbo que proviene del latín 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 reflexión 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 llegaría a ser inevitable en
ACTIVIDAD:
Ingeniería Web
Pág. 128
¡Exigencia académica para grandes cambios!
cualquier creación, pues es difícil 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 pequeñas mejoras que aporta a lo existente, nos ha llevado al inmenso bagaje de objetos y cosas de que disponemos hoy. Así, toda creación tiene un precedente del que se diferencia más o menos pero del que recibe siempre un legado, que es como el «testigo» de esa carrera de relevos que viene a ser la evolución de las cosas que el Hombre crea. Quiero señalar que aun cuando lo expuesto pudiera aplicarse también a otras áreas creativas, estas consideraciones se refieren esencialmente a la creatividad en el ámbito de los objetos útiles. De todo lo dicho podría deducirse que el plagio es legítimo como práctica creativa, pero no es así. Sin embargo me parecía necesario remarcar el hecho de que cualquier fenómeno creativo encierra forzosamente en sí mismo una referencia a algo anterior. Una referencia que es como la espora que necesitamos para fecundar nuestra imaginación pero que hemos de lograr transfigurar en algo distinto, para que el acto pueda ser calificado como creativo. Y es en esta capacidad de «transfiguración» que reside la diferencia entre un gesto auténticamente creativo y el mero plagio.
La relación entre lo nuevo y sus antecedentes
En efecto, si es cierto que lo nuevo le debe siempre algo a lo que ya existía, el nivel de relación entre ambos puede ser de muy distinto calibre según el grado de analogía 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 más alto y más noble de esta escala situaría la capacidad de inspirar que tienen ciertas ideas y cosas ya creadas que ejercen un fuerte estimulo para nuestra propia creatividad. Estas generan una incitación creativa que nos impulsa, no ya a copiarlas, sino a superarlas. En cierto modo, esa inspiración nos embriaga y nos lleva a sentirnos dioses capaces de rebasar los límites 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 situaría la recuperación para un nuevo diseño de una solución 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 sería que, para eludir tal adopción, se desarrollara un sistema nuevo pero de menor calidad funcional. Este acto de adopción 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.
También situaría al nivel de lo permisible la copia sublimada que se halla, de hecho, a medio camino entre la creación 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 perfección.
El plagio como manifestación 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 supondría superar aquello que admira; pues sólo se plagia lo que se admira. El plagio ha de ser entendido como la manifestación de la más sublime admiración. Al plagiar, la veneración 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 pasión que aspira a hacer suyo. El plagio le permite saciar ese incoercible deseo de posesión. Siendo así que, el creativo cuya obra ha sido plagiada, y al margen, claro está, de las implicaciones económicas que ello conlleva, habría de entender el plagio como un privilegio que sólo merecen las obras que destacan.
Ingeniería Web
Pág. 129
¡Exigencia académica para grandes cambios!
El plagio como método de producción
Al margen de estas consideraciones motivacionales desde el prisma creativo, existen otras motivaciones que no pueden explicarse desde el prisma íntimo de la psicología creativa, sino más llanamente desde lo que llamaría la pillería comercial. Me refiero al plagio que ciertas industrias ejercen como política de empresa. Se trata entonces de una descarada depredación en terreno ajeno con fines de lucro, con pocos gastos y sin riesgo alguno. Allí ya no es la admiración 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 valoración del fenómeno, pues si el plagio al que se presta un creativo, como toda impotencia, nos mueve a cierta compasión o comprensión; aquel que fríamente decide una empresa nos parece, por principio, éticamente inexcusable. Digo «por principio» pues hay que reconocer que, a veces, este acto de piratería puede no ser tan nefasto para el público 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 más económicos y si bien son de una calidad inferior ésta no deja de estar proporcionada a su precio. Cuántos relojes «made in Hong Kong» idénticos 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 público más amplio que no puede adquirir el producto original. Un producto que ha de soportar los costes de creación y promoción que supone abrir un mercado del que luego se beneficiarán sin problema quienes le copien.
El plagio como aprendizaje
Otra constatación histórica sería que el plagio ha sido uno de los medios más habituales de aprendizaje de que ha dispuesto el Hombre para adiestrarse. No sólo en las academias de arte los alumnos noveles copian yesos y pinturas originales para aprender de los maestros del pasado. Un método que también sigue el aprendiz de artesano. ¿Quién no recuerda la época en que los productos japoneses tenían fama de ser una copia literal de productos occidentales? Esos plagios siguieron existiendo hasta el momento en que, habiendo aprendido todo lo que podíamos enseñarles, empezaron ellos a mostrarnos lo que sabían hacer por sí mismos, mejorando primero lo existente y abriendo luego paso a nuevas perspectivas. Ahora, en muchas áreas, son ellos los que más innovan y nosotros los que les seguimos.
El plagio no es un aporte
De hecho, la crítica más 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 variación alguna sólo se justifica cuando no se ve modo de mejorarlo. Y este es precisamente el reto que alienta al creativo: hallar siempre otra solución que superando lo conocido aporte algo al bagaje cultural de su época.
Ingresar otro post que reemplace con la categoría Diseñadores y los siguientes tags: diseñador, verdad, responsabilidad y colocar la imagen milton.jpg
Diez cosas que aprendí como diseñador Resumido del libro de Milton Glaser acerca de las cosas que aprendió como diseñador a lo largo de los años, vale la pena leerlo.
1. Sólo 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 práctica sentía lo contrario. Ser profesional requería que no te gustara particularmente la gente para la cual trabajabas, o al menos que mantuvieras una relación distante, lo que significaba no almorzar con los clientes ni tener encuentros sociales. Hace algunos años me di cuenta de que lo opuesto era verdad. Descubrí que todo el trabajo valioso y significativo que había producido, provenía de relaciones afectivas con los clientes. No estoy hablando de profesionalismo; estoy hablando de afecto. Estoy hablando de compartir con el cliente algunos principios
Ingeniería Web
Pág. 130
¡Exigencia académica para grandes cambios!
comunes. Que de hecho tu visión 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 antropología. Mientras esperaba escuchaba la radio y oí a un periodista preguntar: «Ahora que llegó a los setenta y cinco, ¿tiene algún consejo para nuestra audiencia sobre cómo 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 quién fue —el compositor y filósofo que influenció a gente como Jasper Johns y Merce Cunningham y al mundo de la música en general. Apenas lo conocí y admiré su contribución a nuestro tiempo. «Sabes, no se cómo prepararme para la vejez», dijo. «Nunca tuve un empleo, porque si tienes un empleo, algún día alguien te lo sacará y entonces no estarás preparado para la vejez. Para mi ha sido lo mismo cada día desde los doce. Me levanto a la mañana y trato de darme una idea de cómo llevar el pan a la mesa hoy. Es lo mismo a los setenta y cinco: me levanto cada mañana y pienso cómo voy a llevar el pan a la mesa hoy. Estoy excelentemente bien preparado para la vejez».
3. Alguna gente es tóxica, mejor evitarla
(Este es un apartado del punto 1) En los sesenta había un hombre llamado Fritz Perls que era psicólogo gestáltico. 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 proponía que en todas las relaciones la gente puede ser tanto tóxica como enriquecedora entre sí. No es necesariamente cierto que la misma persona será tóxica o enriquecedora en todas sus relaciones, pero la combinación de dos personas puede producir consecuencias tóxicas o enriquecedoras. Y lo importante que puedo contar es que hay un test para determinar si alguien es tóxico o enriquecedor en su relación contigo. Aquí va el test: tienes que pasar algún 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 más o menos energía, si estas cansado o si estás fortalecido. Si estas más cansado, entonces te han envenenado. Si tienes más energía, 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 quería ser profesional. Esa era mi aspiración porque los profesionales parecía saber todo —sin mencionar que además les pagan por eso. Más tarde, después de trabajar un tiempo, descubrí que el profesionalismo en si mismo era una limitante. Después de todo, lo que profesionalismo significa en la mayoría de los casos es «reducción de riesgos». Así, si quieres arreglar tu auto vas a un mecánico que sepa como lidiar con el problema que tiene. Supongo que si necesitas cirugía del cerebro no querrás 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. Después de todo, lo que ser requiere en nuestro campo, más que cualquier otra cosa, es la transgresión continua. El profesionalismo no da lugar a la transgresión 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 aspiración de vida es una meta limitada.
5. Menos no necesariamente es más
Al ser hijo del modernismo escuché este mantra toda mi vida: «menos es más». Una mañana, antes de levantarme, me di cuenta de que era un sinsentido total, un asunto absurdo y bastante vacío. Pero suena importante porque contiene dentro de sí una paradoja resistente a la razón. Sin embargo no funciona cuando pensamos en la historia visual del mundo. Si observas una alfombra persa, no puedes decir que menos es más 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 estética. No se puede probar de ninguna manera que una alfombra lisa
Ingeniería Web
Pág. 131
¡Exigencia académica para grandes cambios!
es superior. Lo mismo con el trabajo de Gaudí, las miniaturas persas, el art nouveau y muchas otras cosas. Tengo una máxima alternativa que creo que es más apropiada: «suficiente es más».
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 ilustración para un cuento de Balzac llamado «La obra maestra desconocida». Es un toro expresado en doce estilos diferentes, desde una versión muy naturalista a una abstracción reducida a una simple línea, 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 abstracción extrema al naturalismo fiel, todos son extraordinarios más allá del estilo. Es absurdo ser leal a un estilo. No merece tu lealtad. Debo decir que para los viejos profesionales del diseño es un problema, porque el campo está manejado más que nunca por intereses económicos. El cambio de estilo suele estar ligado a factores económicos, como todos los que leyeron a Marx saben. También se produce cansancio cuando la gente ve demasiado de lo mismo todo el tiempo. Entonces, cada diez años más o menos se produce un cambio estilístico y las cosas se vuelven diferentes. Las tipografías van y vienen y el sistema visual cambia un poco. Si tienes años de trabajo como diseñador tienes el problema esencial de qué hacer. Quiero decir, después 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 diseño. 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 médicos cuyo trabajo repentinamente se pasó de moda o, más precisamente, se quedó en el tiempo. Y allí hay historias tristes como la de Casandre, indiscutidamente el más grande diseñador gráfico de la década del 20 del siglo XX, que no pudo ganarse la vida en sus últimos años y se suicidó.
7. En la medida en que vives, tu cerebro cambia
El cerebro es el órgano más activo del cuerpo. De hecho es el órgano más 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 analogía del cerebro con la computadora es lamentable. El cerebro es más como un jardín silvestre que constantemente está creciendo y esparciendo semillas, regenerándose, 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 periódico hace pocos años acerca de la búsqueda del oído absoluto. Un grupo de científicos decidió que descubriría por qué alguna gente tiene oído absoluto. Son los que pueden escuchar una nota con precisión y replicarla exactamente en el tono correcto. Alguna gente tiene un oído muy fino, pero el oído absoluto es raro incluso entre los músicos. Los científicos descubrieron —no sé cómo— que en la gente con oído absoluto el cerebro era diferente. Ciertos lóbulos del cerebro habían experimentado algún cambio o deformación recurrente entre quienes tenían oído absoluto. Esto fue suficientemente interesante en sí mismo, pero entonces descubrieron algo aún más fascinante: si tomas un grupo de niños de cuatro o cinco años de edad y les enseñas a tocar el violín, luego de unos años algunos de ellos habrán desarrollado el oído absoluto, y en todos esos casos su estructura cerebral habrá cambiado. Bien… ¿qué podría 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 podría ser afectado y mi vida podría cambiar. Es por eso que mi madre siempre decía: «no te juntes con esos chicos malos». Mamá tenía razón. El pensamiento cambia nuestra vida y nuestro comportamiento.
También 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 atención a lo que ves, lo cual no es tan fácil.
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 iluminación apenas has alcanzado tus límites. Pienso que es verdad en un sentido práctico. Las creencias profundamente arraigadas
Ingeniería Web
Pág. 132
¡Exigencia académica para grandes cambios!
de cualquier tipo evitan que te abras a experimentar, y es por eso que encuentro cuestionable a toda posición ideológica sostenida con firmeza. Me pone nervioso cuando alguien cree demasiado en algo. Ser escéptico y cuestionar toda convicción 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 más importante que tener razón. Existe una sensación de autosuficiencia tanto en el mundo del arte como en el del diseño. 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 teoría 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 dañado 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. Sólo tienes que saber en qué ceder. La búsqueda ciega de tus propios fines a costas de excluir la posibilidad de que otros puedan tener razón, no tiene en cuenta el hecho de que en diseño siempre lidiamos con una tríada: el cliente, la audiencia y tu mismo. Lo ideal sería que mediante alguna clase de negociación 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 difícil en las relaciones humanas. Hace algunos años leí una cosa muy notable sobre el amor, que también aplica a la naturaleza de la relación con los otros. Era una cita de Iris Murdoch en su obituario. Decía: «El amor es el hecho extremadamente difícil de darse cuenta de que el otro, que no es uno, es real». ¡¿No es fantástico?! La mejor conclusión sobre el tema del amor que se pueda imaginar.
9. Sobre la edad
El año pasado alguien me regalo para mi cumpleaños un libro encantador de Roger Rosenblatt, llamado «Ageing Gracefully» (Envejeciendo con gracia). No me di cuenta del título 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 agregarás décadas a tu vida. No importa si es tarde o temprano, si estás aquí o allá, si lo dijiste o no, si eres inteligente o estúpido. Si saliste despeinado o calvo o si tu jefe te mira cruzado o tu novio o novia te mira cruzado, si tu estás cruzado. Si consigues o no que te den ese ascenso o premio o casa —no importa». Sabiduría al fin. Entonces escuché un maravilloso cuento que parecía relacionada con la regla número diez: Un carnicero estaba abriendo su negocio una mañana y mientras lo hacía un conejo asomó su cabeza a través de la puerta. El carnicero se sorprendió cuando el conejo preguntó: «¿Tiene repollo?». El carnicero dijo: «Esta es una carnicería, vendemos carne, no vegetales». El conejo se fue saltando. Al día siguiente el carnicero estába abriendo su negocio y el conejo asomó su cabeza y preguntó: «¿Tiene repollo?». El carnicero ahora enojado le respondió: «Escúchame pequeño roedor, te dije ayer que vendemos carne, no vegetales, y la próxima 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 mañana 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 carnicería sería como buscar ética en el campo del diseño. No parece ser el lugar más adecuado para encontrarla tampoco. Es interesante observar que en el nuevo código de ética de la AIGA (American Institute of Graphic Arts) aparece una cantidad importante de información sobre conductas para con los clientes y para con otros diseñadores, pero ni una palabra acerca de la relación del diseñador con el público. Lo que se espera del carnicero es que venda carne que se pueda comer y no mercadería engañosa. Recuerdo haber leído que durante los años de Stalin en Rusia, todo lo que llevaba la etiqueta de «ternera» en realidad era pollo. No me quiero imaginar qué sería lo que llevaba la etiqueta «pollo». Podemos aceptar algún nivel mínimo de engaño, 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 diseñadores ¿tenemos menos responsabilidad con nuestro público que un carnicero? Quien esté interesado en matricular el diseño gráfico, debería notar que la razón de ser de una matrícula es proteger al público, no a los diseñadores ni a los clientes. «No hacer daño» es una advertencia a los doctores que tiene que ver con la relación con sus pacientes, no con sus colegas o con los laboratorios. Si fuéramos matriculados, decir la verdad se convertiría en algo más importante en nuestra actividad.
Para editar más fácilmente 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.
Ingeniería Web
Pág. 133
¡Exigencia académica para grandes cambios!
Por ejemplo activar la plantilla paint-job y cambiar los colores en la opción apariencia-themes-tweaker 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:
Ingeniería Web
Pág. 134
¡Exigencia académica para grandes cambios!
Crear una sección 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 diseño 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 (España) respecto al Arte en: http://www.elpais.com/rss/feed.html?feedId=17060 más detalles de otros canales RSS http://www.elpais.com/rss/
Desde Plugings instalar y activar el pluging Clocky para gestionarlo Ud. deberá ir a Appearance-Widget y colocar en el bloque sidebar para realizar la configuración.
Instalar SimpleCountDown, colocar como fecha de conteo 16/08/2010 Faltan …. “para culminar mis estudios de Diseño Gráfico en la CONTI” y colocar en la parte superior del sidebar.
En pages editar la página principal About y colocar información de bienvenida al Blog y pegar: Bienvenidos al blog del Crítico en Diseño, porque no basta con los productos finales, nuestra preocupación son los procesos, la ética y responsabilidad del profesional en diseño gráfico. <object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/0V6ZjFtV4Hk&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=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&feature=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 opción settings- Google Adsense Ads para pegar el código que de la cuenta de GoogleAdSense se nos ha proporcionado: https://www.google.com/adsense que es un código 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 además podrá verificar el total de ingresos generado por publicidad, deberá aparecer algo así:
Ingeniería Web
Pág. 135
¡Exigencia académica para grandes cambios!
UNIDAD N° IV
Negocios en la Web
Identifica los Modelos de negocio por Internet
Implementar una tienda virtual
Modelos de negocio Un modelo de negocio en Internet nos dice cómo 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 rápida evolución 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).
¿Cómo saber cuál 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 física o “virtual” tiene algún modelo de negocios, por ejemplo:
Modelo 1: Basados en la publicidad
Aunque los servicios en su gran mayoría 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 obtención de ingresos que se quiere explotar
es la de establecer comisiones en comercio electrónico.
Portal vertical
Portal horizontal Programa de incentivos
Comunidad virtual
Modelos 2: Basados en la intermediación Consiguen poner en contacto a compradores y vendedores y facilitan la
realización de transacciones entre ellos.
Obtienen sus ingresos de la comisión que perciben de las transacciones que
logran cerrar.
SESIÓN I:
LOGRO:
INFORMACIÓN:
Ingeniería Web
Pág. 136
¡Exigencia académica para grandes cambios!
Básicamente las comisiones se derivan de dos tipos de situaciones: cuando se
direcciona un usuario hacia otra sede, en la que efectúa una compra o se hace
una visita; y cuando se efectúa una compraventa en la misma sede, pero sin que ésta opere como vendedora del producto, sino como mera facilitadora de la
transacción.
Modelo 3: Explotación de la información
Internet es un excelente proveedor de información precisa sobre los gustos,
comportamientos y hábitos 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 campañas tradicionales
(abiertas).
Algunos “sites” básicamente ofrecen servicio que sirven para atrapar estas
informaciones y venderlas a estas empresas. Estos “agentes de inteligencia” que se nutren de información para sobrevivir
son un síntoma inequívoco de que se está realmente avanzando a una llamada
“Sociedad de la Información”.
Modelo 4: Basados en la venta
Al igual que en la venta clásica, 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 través de la Red. Ventas on line: Kotear, Alibaba
Programas de afiliación: Amazon.com fraganzia.zom
Ventas por catálogo: Venca.es Landsend.com
Ventas on y off: Virtualexito.com hersheys.com Ventas de bits: Forrester Research weblisten.com
Modelo 5: Basados en la suscripción
Los usuarios pagan para acceder al contenido del “site”, pudiendo ser tanto a través 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.
Según una encuesta de Jupiter Communications, 46% de los usuarios no están 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 financiación de estas sedes son la publicidad y la explotación de la información con el contenido.
Ejem: Wsj.com ConsumerReports.org Fifatv.com Algunos
fracasaron: Peru21.com
Modelo 6: Basados en la sindicación de contenidos
La necesidad de conseguir volúmenes de tráfico por parte de los principales
portales ha llevado a muchas empresas digitales a comercializar sus
contenidos. Por lo general, esta venta o cesión de contenidos se acompaña con un
cobranding en las páginas del web del que las compra.
Las modalidades de pago pueden ser bien diversas: desde un fee mensual, un
fee más un variable según las impresiones que generan, hasta la repartición de
la publicidad obtenida. No obstante, en el sector profesional cada vez más se verán ejemplos de pago
por suscripción por acceso a contenidos y servicios.
Ingeniería Web
Pág. 137
¡Exigencia académica para grandes cambios!
Lo que muchas empresas hacen para superar este freno inicial es combinar una
parte de contenido gratis (con el objetivo de aumentar el tráfico y los ingresos
provenientes de otras fuentes como publicidad o explotación de la información) con el contenido “premium” ofrecido sólo a suscriptores.
Modelo 7: basados en las franquicias
El modelo de franquicias online es un sistema que pocos están sabiendo
aprovechar pero muestra como en modelos de negocio todavía tenemos mucho
que aprender.
El franquiciador basa parte de su modelo en la comercialización del sistema, la marca y el know-how que ha generado en su proyecto.
Ejemplo: portaldetuciudad.com
Actividad 1: Exponer acerca de la lectura del libro las “11 leyes inmutables para la
creación de marcas por Internet”.
Actividad 2: Implementar una tienda virtual basada en el modelo de ventas.
TIENDA VIRTUAL: ETIENDA Desarrollar lo siguiente:
Instalar el servidor web a nivel local e instalar el OsCommerce, usted observará que cuenta con dos frentes: catálogo y el panel de administrador
INFORMACIÓN
CLAVE:
ACTIVIDAD:
Ingeniería Web
Pág. 138
¡Exigencia académica para grandes cambios!
Ingrese al catálogo: 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 práctica el orden de los idiomas son: alemán, inglés
Crear la categoría metalistería (Metalwork, Metallteile) y tapices (Hangings, Wandbehänge). En metalistería crear los siguientes productos:
Pictografias bandas nómades Fabricante: Indamira Adanto Fecha disponibilidad: 15 de agosto 2011 Precio: $US 25.00 Detalles del producto:
Medidas Aproximadas:
Tamaño Grande ( 30 cm x 20 cm)
Tamaño Chico ( 17 cm x 23 cm)
Diseño: 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 Verfügbarkeit Datum: 15. August 2011 Preis: US $ 25,00 Produktdetails: • Ungefähre Maßnahmen: • Größe Large (30 cm x 20 cm) • Geringe Größe (17 cm x 23 cm) • Design: Indamiro Adanto Menge: 100 Stück Gewicht: 5 kg
En tapices ingresar los siguientes productos: El Sury Fabricante: Bernarda Ladetto Fecha disponibilidad: 23 de agosto 2011 Precio: $US 85.00 Detalles del producto:
Medidas Aproximadas (0,80 mts x 0,40 mts)
Significado: Fragmento del sombolo de la tierra fecunda. Cantidad: 30 unidades Peso: 2 kg
Ingeniería Web
Pág. 139
¡Exigencia académica para grandes cambios!
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: • Ungefähre Maßnahmen (0,80 m x 0,40 m) • Bedeutung: sombolo Fragment des fruchtbaren Bodens. Menge: 30 Einheiten Gewicht: 2 kg
Ingresar otro producto de la categoría tapices, traducirla al inglés y español:
La vida de una Cultura Fabricante: Bernarda Ladetto Fecha disponibilidad: 2 de octubre 2011 Precio: $US 315.00 Detalles del producto:
Medidas Aproximadas (1,60 mts x 1,40 mts)
Significado: En el centro la imagen sostiene su peso sobre frágiles construcciones abstractas.
Encuadran el tapiz fragmentos de elementos culturales que marcan el movimiento de la vida. Cantidad: 10 unidades Peso: 2 kg
Crear una oferta para el tapiz de El Suri de $US 85.00 a $US 79.99
Instalar módulo de pago
Configurar el impuesto a 19% de IGV
Crear la opción monedas en nuevos soles para algunos productos que se van a vender en esa moneda. NS Código: NS S/. Punto decimal . Separador de miles , Lugares decimales 2 Valor: 1.00000000
Visualizar el informe de productos más vistos o los más vendidos.
Revisar plugings y themes
Revise acerca de los módulos de pago (¿Cuál recomendaría?)
Leer acerca de la Ley AntiSpam
Ingeniería Web
Pág. 140
¡Exigencia académica para grandes cambios!
Desarrollo de aplicaciones móviles
Reflexiona el estado de los sistemas operativos y aplicaciones móviles
Desarrolla aplicaciones móviles con el AppInventor
A continuación se muestra una recopilación de la web respecto al tema.
Primeros pasos
App Inventor es un entorno de desarrollo de aplicaciones para dispositivos Android. Para desarrollar aplicaciones con App Inventor sólo necesitas un navegador web y un
télefono o tablet Android (si no lo tienes podrás probar tus aplicaciones en un emulador). App Inventor se basa en un servicio web que te permitirá almacenar tu trabajo y te
ayudará a realizar un seguimiento de sus proyectos.
Se trata de una herramienta de desarrollo visual muy fácil de usar, con la que incluso los no programadores podrán desarrollar sus aplicaciones.
Al construir las aplicaciones para Android trabajarás con dos herramientas: App Inventor Designer y App Inventor Blocks Editor. En Designer construirás el Interfaz de Usuario,
eligiendo y situando los elementos con los que interactuará el usuario y los componentes que utilizará la aplicación. En el Blocks Editor definirás el comportamiento de los
componentes de tu aplicación.
SESIÓN II:
LOGRO:
INFORMACIÓN:
Ingeniería Web
Pág. 141
¡Exigencia académica para grandes cambios!
Configuración de App Inventor 2
Puedes configurar la aplicación Inventor y empezar a crear aplicaciones en cuestión de minutos. El
Diseñador y Editor de bloques se ejecutan ahora por completo en el navegador (la nube!). Para
ver tu aplicación en un dispositivo mientras lo construyes (también llamada "Probando en vivo"),
tendrás que seguir los pasos que se muestran a continuación.
Tienes tres opciones para configurar las pruebas en vivo, mientras construyes aplicaciones.
1.- Si estás utilizando un dispositivo Android y tienes una conexión inalámbrica a Internet
(WiFi), puedes comenzar la creación de aplicaciones sin necesidad de descargar ningún software
en su ordenador. Eso sí, tendrás que instalar la aplicación Companion App Inventor en tu
dispositivo. Elige la opción uno. Esta opción se recomienda encarecidamente.
2.- Si no tienes un dispositivo Android, tendrás que instalar el software en su ordenador para que
pueda utilizar el emulador de Android en la pantalla del mismo. Elige la opción dos.
3.- Si no tienes una conexión inalámbrica a Internet (WiFi), tendrás que instalar el software en tu
computadora de modo que puedas conectar a su dispositivo Android a través de USB. Elige la
opción de tres. La opción de conexión USB puede ser complicada, especialmente en Windows.
Usa esto como un último recurso.
Opción 1 - RECOMENDADO
Construir aplicaciones con un dispositivo Android y conexión WiFi Si tienes una computadora, un dispositivo Android, y una conexión Wi-Fi, esta es la manera más
fácil para probar tus aplicaciones.
Opción 2
¿Todavía no tienes un dispositivo Android? Utiliza el emulador:
Si no tienes un teléfono Android o tableta a mano, puedes seguir utilizando la aplicación
Inventor. Tienes una clase de 30 alumnos? Pueden trabajar principalmente en emuladores y
Ingeniería Web
Pág. 142
¡Exigencia académica para grandes cambios!
compartir unos pocos dispositivos.
Opción 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 conexión Wi-Fi necesario. Si WiFi no funciona, usa la conexión USB.
Requisitos del sistema
Nota: Internet Explorer no es soportado todavía. Recomendamos Chrome o Firefox.
Ingeniería Web
Pág. 143
¡Exigencia académica para grandes cambios!
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 extensión NoScript, usted necesita dar vuelta a la
extensión fuera. Ver la nota en la página de solución de problemas.
Apple Safari 5.0 o superior
Google Chrome 4.0 o superior
Microsoft Internet Explorer no es soportado
Teléfono o la tableta (o utilizar el emulador en pantalla)
Sistema operativo Android 2.3 ("Gingerbread") o superior
Ejercicio 1: Elabore la siguiente aplicación móvil
ACTIVIDAD:
Ingeniería Web
Pág. 144
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 145
¡Exigencia académica para grandes cambios!
Ejercicio 2: Desarrollar la siguiente aplicación móvil que muestre la fecha e incluya un contador.
Ingeniería Web
Pág. 146
¡Exigencia académica para grandes cambios!
Ingeniería Web
Pág. 147
¡Exigencia académica para grandes cambios!
Ejercicio 3: Desarrollar la siguiente aplicación
Ingeniería Web
Pág. 148
¡Exigencia académica para grandes cambios!
BIBLIOGRAFÍA
1. Carles Mateu. Desarrollo de Aplicaciones web. Editorial UOC. ISBN: 84-
9788-118-4. España, 2009
2. Conallen Jim. Development Application web. 2da.ed. New York. Addison-
Wesley Iberoamericana. 2004.
3. Doug Rosenberg-Kendall Scott . Applying Use Case Driven Object Modeling
with UML An Annotated e-Commerce Example 1ra.ed. México. Addison-
Wesley Iberoamericana. 2001.
4. Pressman Roger. Ingeniería de software: un enfoque práctico. 6ta.ed.
México. 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 colocarán en
el aula virtual.
7. Tutoriales sobre programación con Android
https://sites.google.com/site/appinventormegusta/archivo