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


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


Í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


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


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


Ingeniería Web

Pág. 8


Ingeniería Web

Pág. 9


Ingeniería Web

Pág. 10


Ingeniería Web

Pág. 11


Ingeniería Web

Pág. 12


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


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


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

http://es.wikipedia.org/wiki/Consorcio

http://es.wikipedia.org/wiki/Normalizaci%C3%B3n

http://es.wikipedia.org/wiki/World_Wide_Web

http://es.wikipedia.org/wiki/Tim_Berners-Lee

http://es.wikipedia.org/wiki/URL

http://es.wikipedia.org/wiki/HTTP

http://es.wikipedia.org/wiki/HTML

Ingeniería Web

Pág. 15


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


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


Ingeniería Web

Pág. 18


Ingeniería Web

Pág. 19


Ingeniería Web

Pág. 20


Ingeniería Web

Pág. 21


Ingeniería Web

Pág. 22


Ingeniería Web

Pág. 23


Ingeniería Web

Pág. 24


Ingeniería Web

Pág. 25


2.3 Funciones y programación orientada a objetos

Ingeniería Web

Pág. 26


Ingeniería Web

Pág. 27


Ingeniería Web

Pág. 28


Ingeniería Web

Pág. 29


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


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>


function Saludo()

{

document.write('Hola');

}

</script> </head>

<BODY>

<FORM>

<p>

<label>


value="Enviar" onClick="Saludo()"> </label>

</p>

</FORM>

</BODY>

</html>

Ingeniería Web

Pág. 31


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


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>


<CENTER><FORM>

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

value="Sumar"> </FORM>

</CENTER>

</body>

</html>

Ingeniería Web

Pág. 33


SALUDO CON INGRESO DE NOMBRE <html>

<head>

<title>Documento de salida</title>


function Saludo(a)

{

var a;

alert('Hola '+a);

}

</script> </head>

<BODY>

<FORM name="formulario">

<p>Ingrese tu nombre

<label>

<input type="text" name="nombre" id="nombre">

</label>

</p>

<p>

<label>


value="Saludar"

onClick="Saludo(formulario.nombre.value)"> </label>

</p>

</FORM>

</BODY>

</html>

Ingeniería Web

Pág. 34


DOCUMENTO DE SALUDO Y DESPEDIDA <html>

<head>

<title>Documento de salida</title>


function Saludo(a,b)

{

var a,b;

alert('Hola '+a+' '+b);

}

function Despedir(a,b)

{

var a,b;

alert('Adios '+a+' '+b);

}

</script> </head>

<BODY>

<FORM name="formulario">

<p>Ingrese tu nombre

<label>

<input type="text" name="nombre" id="nombre">

</label>

</p>

<p>Ingrese tu apellido

<input type="text" name="nombre2" id="nombre2">

</p>

<p>

<label>


value="Saludar"

onClick="Saludo(formulario.nombre.value,formulario.

nombre2.value)"> </label>

<label>

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

value="Despedir"

onClick="Despedir(formulario.nombre.value,formulari

o.nombre2.value)"> </label>

</p>

</FORM>

</BODY>

</html>

Ingeniería Web

Pág. 35


ABRIR VENTANA EMERGENTE <HTML>

<HEAD>

<TITLE>Abre ventana emergente </TITLE>

<script language="JavaScript">

function Abreventana() {

msg=open("","schermo","toolbar=no,directories=no,me

nubar=no,width=180,height=250,resizable=yes");

msg.document.write("<HEAD><TITLE>Enlaces</TITLE></H

EAD><body>");

msg.document.write("<B><CENTER><font

size=4>Enlaces Web</font></CENTER></B><BR><A

HREF=http://www.google.com.pe

target=home>Google</A><br>");

msg.document.write("<A HREF=http://www.yahoo.es

target=home>Yahoo</A><br>");

msg.document.write("<A

HREF=http://www.sunat.gob.pe

target=home>SUNAT</A><br>");

msg.document.write("<A

HREF=http://www.continental.edu.pe

target=home>Continental</A><BR>");

}

</script> </HEAD>


<form>

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

emergente" onClick="Abreventana()"> </form>

</body>

</html>

Ingeniería Web

Pág. 36


2.4 Estructuras de programación Java Script CONDICIONALES: Operadores condicionales

Ingeniería Web

Pág. 37


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


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


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


</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>



</select>

Ingeniería Web

Pág. 41


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


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


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


</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


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


<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


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 />


Arequipa<br />


Cusco </label></td> </tr> <tr> <td colspan="2"><label> <div align="center">

<input type="button" name="button" id="button" value="Mensaje" onclick="Mensaje(this.form)" /> </div> </label></td> </tr> <tr> <td colspan="2"><div align="center"> <label> <input name="mensaje" type="text" id="mensaje" size="100" /> </label> </div></td> </tr> </table> <label></label> </form> </body> </html>

Ingeniería Web

Pág. 48


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


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


<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


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


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


?> <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


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


</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


<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


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


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


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


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">  </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


<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


} ?> <html> <head> <title>Problema 11</title> <style type="text/css">  </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


<?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


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


//Proceso $i = $ni + 1; while($i < $nf){ if($i % 2 == 0){ $cp += 1; } $i++; } } ?> <html> <head> <title>Problema 43</title> <style type="text/css">  </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


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


.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


<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">  </style> </head> <body>

Ingeniería Web

Pág. 69


<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


//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">  </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


</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


<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


?> <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


$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


Práctica 03:

Práctica 04:

Práctica 05:

Ingeniería Web

Pág. 76


Práctica 06:

Práctica 07:

Práctica 08:

Ingeniería Web

Pág. 77


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:

http://framework.zend.com/

http://www.symfony-project.org/

Ingeniería Web

Pág. 78


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

http://www.saturncms.com/

http://php-fusebox.sourceforge.net/

http://www.eclipse.org/

http://pwneds.blogspot.com/2007/11/comparacion-de-10-frameworks-de-php.html

Ingeniería Web

Pág. 79


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.

http://www.phpframeworks.com/top-10-php-frameworks/

http://www.phpframeworks.com/

Ingeniería Web

Pág. 80


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


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


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


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

http://localhost/helpdesk/app/views/scripts/index/

Ingeniería Web

Pág. 84


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


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


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


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


- 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.

http://www.xlwebmasters.com/modules.php?d=doc&f=doc2&id=1079

Ingeniería Web

Pág. 89


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


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

http://www.abeefe.com/

http://www.glaxo.com/

Ingeniería Web

Pág. 91


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


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


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


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


TABLA CONTROL

Registros de la tabla:

Ingeniería Web

Pág. 96


TABLA DEPARTAMENTO

Tabla: Ubicación

Registros de la tabla:

Ingeniería Web

Pág. 97


Tabla empleado

Insertar codigo SQL INSERT INTO èmpleado` (ìdempleado`, àpellido`, `nombre`, `fecingreso`, èmail`, `telefono`, ìdcargo`, ìddepartamento`, `sueldo`, `comision`, `jefe`) VALUES ('E0001', 'Coronel', 'Gustavo', '2000-04-01', '[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


('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


if($cn){


} else {


return;

Ingeniería Web

Pág. 99


}

echo "<br>";

$rpta = mysql_close();

if($rpta){

echo "Conexión: Cerrada";

} else {


}

?>

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


if($cn){


} else {


return;

}

$rpta = mysql_select_db("rh");

echo "<br>";

if($rpta){

echo "Base de Datos: Ok";

} else {

echo "Base de Datos: Error";

}

$rpta = mysql_close();

echo "<br>";

if($rpta){

echo "Conexión: Cerrada";

} else {


Ingeniería Web

Pág. 100


}

?>

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


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


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


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


}

H2 {


font-size: 1.75em;

font-weight: 700;

}

H3 {


font-size: 1.58em;

font-weight: 500;

}

TABLE {

background-color: #FFEFD5;

}

TH {


font-size: 0.9em;

color: White;

font-weight: 500;

font: bold;

Ingeniería Web

Pág. 105


background: #804D19;

}

TD {


font-size: 0.9em;

font-weight: 500;

color: Navy;

}

5.7 Consulta a bases de datos mysql desde aplicaciones PHP

FUNCIONES: MYSQL_SELECT_DB Selecciona una base de datos MySQL int mysql_select_db ( cadena base_de_datos [, int identificador_de_enlace] ) Devuelve TRUE si todo se llevó a cabo correctamente, FALSE en caso de fallo. MYSQL_QUERY 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


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


<?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


} 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


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


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


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


$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


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


<?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


<?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


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


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


$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


<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


<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


$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


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


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:

http://localhost/

Ingeniería Web

Pág. 124


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


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


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


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


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


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


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


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


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


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


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í:

http://www.adventuregraphs.com/?p=11792

http://foroalfa.org/

http://www.elpais.com/rss/feed.html?feedId=17060

http://www.elpais.com/rss/

http://api.flickr.com/services/feeds/geo/?id=25476574@N03&lang=es-us&format=rss_200

https://www.google.com/adsense

Ingeniería Web

Pág. 135


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


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


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


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


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


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:

https://sites.google.com/site/appinventormegusta/primeros-pasos/App Inventor_Esquema.png?attredirects=0

Ingeniería Web

Pág. 141


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

https://sites.google.com/site/appinventormegusta/instalacion/conectart-tu-telefono-o-tableta-sobre-wifi

Ingeniería Web

Pág. 142


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.

https://sites.google.com/site/appinventormegusta/instalacion/instalar-y-ejecutar-el-emulador-en-ai2

https://sites.google.com/site/appinventormegusta/instalacion/conexion-a-un-telefono-o-tableta-con-un-cable-usb

Ingeniería Web

Pág. 143


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:

http://appinventor.mit.edu/explore/ai2/support/troubleshooting.html#blocks

Ingeniería Web

Pág. 144


Ingeniería Web

Pág. 145


Ejercicio 2: Desarrollar la siguiente aplicación móvil que muestre la fecha e incluya un contador.

Ingeniería Web

Pág. 146


Ingeniería Web

Pág. 147


Ejercicio 3: Desarrollar la siguiente aplicación

Ingeniería Web

Pág. 148


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

Texto Universitario IngWeb

Documents

Transcript of Texto Universitario IngWeb