Unidad 3. Desarrollo de Sitios Web

Programación web I Unidad 3. Desarrollo de sitios web

Ciencias Exactas, Ingeniería y Tecnología | Desarrollo de Software 1

Ingeniería en Desarrollo de Software 7º Semestre

Programa de la asignatura: Programación web I

Unidad 3. Desarrollo de sitios web

Clave: 15144738

Universidad Abierta y a Distancia de México



Índice Unidad 3. Desarrollo de sitios web ..................................................................................... 3

Presentación de la unidad ................................................................................................. 3

Propósitos .......................................................................................................................... 4

Competencia específica ..................................................................................................... 4

3.1. Estructura JavaScript .................................................................................................. 4

Foro de dudas para el desarrollo de un sitio web ............................................................... 5

3.1.1. Objetos, funciones y métodos sobre JavaScript ....................................................... 6

3.1.2. Eventos sobre JavaScript ........................................................................................ 9

3.1.3. JavaScript combinado con HTML........................................................................... 13

3.1.4. JavaScript y PHP ................................................................................................... 20

Actividad 1. Desarrollo de aplicaciones web con JavaScript ............................................ 28

3.2. Estructura ASP ......................................................................................................... 28

3.2.1. Contenidos básicos ASP ........................................................................................ 29

3.2.2. Objetos y funciones de ASP ................................................................................... 31

3.3. Base de datos para Web ........................................................................................... 35

3.3.1. Tipos de base de datos .......................................................................................... 36

3.3.2. Instaladores de servidores web .............................................................................. 38

Actividad 2. Instalación de servidor web .......................................................................... 39

3.3.3. Conectividad de base de datos con PHP ............................................................... 39

3.3.4. Inserción, consulta, edición y eliminación de registros ........................................... 39

Actividad 3. Conexión de base de datos .......................................................................... 40

Autoevaluación ................................................................................................................ 40

Evidencia de aprendizaje. Construcción del sitio web. Parte 2 ......................................... 40

Autorreflexiones ............................................................................................................... 41

Cierre de la unidad .......................................................................................................... 41

Fuentes de consulta ........................................................................................................ 43



Unidad 3. Desarrollo de sitios web

Presentación de la unidad Es muy importante tener presente que en el proceso de desarrollo de un sitio web se deben integrar recursos que lo hagan atractivo, y que faciliten la interactividad con los usuarios que estén navegando en el sitio mediante las páginas web. Es importante que sea más factible para realizar la administración del sitio y que se consideren las nuevas tecnologías que permitan integrar los principios de usabilidad en el diseño y desarrollo de los sitios web, tales como la evidencia, velocidad, retroalimentación, exactitud, etcétera, y así facilitar el acceso y utilización de los sitios en la vida cotidiana del usuario. Para ello, es recomendable utilizar el lenguaje de programación JavaScript, que permite integrar más recursos a las páginas, dependiendo de los requerimientos de los usuarios y de la organización para la cual se desarrolle el sitio.

Como futuro ingeniero en Desarrollo de Software puedes proponer que tu sitio web tenga una mejor presentación, añadiendo creatividad con el uso JavaScript, para realizar varias acciones tales como animaciones, combinación de colores, entre otros. Para programar en JavaScript debes de contar con conocimientos de HTML, ya que JavaScript se inserta en código HTML de forma que el código queda reflejado en la propia página, y no es necesario cargarlo o llamarlo para su utilización. Esto quiere decir que JavaScript no necesita compilación, tiene la ventaja de que determinadas acciones quedan en estado de espera hasta que el usuario realiza cierta acción; por ejemplo, pasar el puntero del ratón sobre una imagen y que cambie a otra. Cabe mencionar que JavaScript puede trabajar con PHP, con el fin de que se pueda:

Enviar información de un sitio web a un correo electrónico.

Generar un documento en PDF.

Almacenar la información que integre el usuario en los formularios para guardarse en la base datos.

Estas acciones se pueden realizar en una sola con la ayuda de JavaScript. También es importante tener conocimiento de ASP, porque permite hacer una página más interactiva y funcional. Como ya se ha explicado anteriormente, ASP es una tecnología de Microsoft por lo que es más exigente para trabajar con ella. Por otro lado, permite obtener de forma simple y variada información específica a los requerimientos. Ya no es necesario crear nuevas páginas cada vez que se desee subir nueva información, ni estar remodelando páginas publicadas, con la finalidad de tenerla al día. En la actualidad, con las páginas web ASP, se pueden crear plantillas, conectarse a base de datos y mostrar así un contenido distinto para cada requerimiento o necesidad que solicite el dueño del sitio web. Otro punto muy importante es saber cómo se crean las bases de datos y se conectan en las páginas web. En la actualidad, los sitios tienen de más de una base de datos; esto es porque permiten saber información de los usuarios, realizar trámites más rápidos, hacer pagos, etcétera. Todo para que sean más fáciles y más factibles para la empresa que tiene su sitio web.

Algunas marcas que se mencionan en esta unidad son las siguientes:



JavaScript, marca registrada de Sun Microsystems Inc. CuteFTP, aplicación para la transferencia de archivos por FTP, de GlobalSCAPE Inc.

Propósitos Al término de esta unidad lograrás:

Identificar la estructura de JavaScript de un sitio web.

Integrar interactividad en las páginas web creando objetos de JavaScript.

Identificar la combinación de JavaScript con HTML.

Comprender la utilidad de JavaScript en PHP.

Comprender el concepto básico de ASP.

Identificar bases de datos.

Crear bases de datos en la construcción del sitio web.

Competencia específica

Implementar un sitio web en un servidor de prueba para posibilitar la manipulación de registros mediante la conexión de bases de datos.

3.1. Estructura JavaScript En este tema se expondrá lo referente a la estructura de JavaScript, que es un lenguaje interpretado y usado para múltiples propósitos, pero sólo considerado como un complemento en la construcción de sitios web. “Se presenta como un lenguaje de desarrollo de aplicaciones cliente/servidor a través de Internet […]. Es un lenguaje compacto, y basado en objetos, diseñado para el desarrollo de aplicaciones cliente-servidor a través de Internet” (Sánchez, 2001, pp. 9-10). Como se explicó en la Unidad 1. Fundamentos web, gracias a JavaScript es posible

desarrollar programas que se ejecuten directamente en el navegador, de manera que pueda efectuar determinadas operaciones o tomar decisiones sin necesidad de acceder al servidor. Por ejemplo, al desarrollar un programa que verifique una clave de acceso a una página web, JavaScript debe comprobar la información dada por el usuario, corroborar que sea correcta y actuar en consecuencia. El código de JavaScript va incluido o embebido, como se suele decir, dentro de un documento HTML. Se recomienda que dicho código vaya insertado en la cabecera del documento; es decir, entre las etiquetas <head> y </head>. De esta manera, se posibilita que se cargue el script antes de ser llamado dentro del cuerpo del documento con las etiquetas <body></body>; si fuera al revés, es muy posible que la llamada se realice a un elemento que aún no ha sido declarado y no habría nada a qué referirse. La estructura de JavaScript genérica es la siguiente (Sánchez, 2001, p. 16):

http://www.alegsa.com.ar/Dic/aplicacion.php

http://www.alegsa.com.ar/Dic/transferencia.php

http://www.alegsa.com.ar/Dic/archivo.php

http://www.alegsa.com.ar/Dic/ftp.php

http://www.alegsa.com.ar/Dic/globalscape.php



3.1.1. Objetos, funciones y métodos sobre JavaScript En la creación de una página web donde se requieran recursos de interactividad y funcionalidades diversas, es posible utilizar objetos, funciones y métodos de JavaScript. En JavaScript se identifican una serie de objetos sobre los que se puede interactuar, tales como las ventanas, las páginas, las imágenes o los formularios, por ejemplo, el objeto ventana tendrá, entre otras, una propiedad que sea el de su ancho. Un método funciones, en el caso de JavaScript, asociado a este objeto será la que abre una nueva ventana. Es posible crear objetos propios o utilizar los implementados por el lenguaje JavaScript. Esto quiere decir que tiene una serie de propiedades asociadas a él. Para acceder a ellas, según Goodman (2007), se declara de la siguiente manera: nombre_objeto.nombre_método (argumentos) nombre_objeto.nombre_propiedad Se expone a continuación un ejemplo para entender el funcionamiento de los objetos de JavaScript. Se asignará como nombre de objeto Profesor, con tres propiedades: nombre, año de nacimiento y nacionalidad: profesor.nombre = “Monserrat Millán” profesor.anio_nacimiento = 1986 profesor.nacionalidad = “Mexicana” Según este ejemplo, para acceder a las distintas propiedades del objeto se deberá indicar el nombre del dicho objeto y de la propiedad, ambos separados por un punto. Se puede decir, con base en Gutiérrez (2009), que “las funciones sobre JavaScript son una serie de instrucciones que realizan una determinada tarea. A las funciones se le inserta un nombre que luego puede ser utilizado en el código de la página web. Esto quiere decir que las funciones son la base JavaScript por lo cual una función es un conjunto de sentencias de JavaScript que realizan algunas tareas específicas” (p. 92). Antes de utilizar una función de JavaScript en el código de la página, se explicará qué operaciones son las que debe hacer la función. La función en JavaScript se define y se representa de la siguiente manera:

function nombredelafunción (argumento1, argumento2,...) { instrucciones que debe realizar la función }

Función en JavaScript. Fuente: Gutiérrez, 2009.



A continuación, se muestra un ejemplo sencillo en el que se define una función llamada bienvenidos, que posteriormente mostrará la siguiente cadena de texto:

function bienvenidos () { document.write (“ Se les da la bienvenida a los alumnos de la carrera en Ingeniería en Desarrollo de Software”); }

Ejemplo de función en JavaScript

En este ejemplo, lo que se hace es llamar a la función. Basta con poner el nombre seguido de los paréntesis. En este caso, se define una función que muestra texto en la posición actual del cursor. Como expresa Goodman (2007). “Un método es una función asociada a un objeto y particular a los objetos del tipo que la define. Los métodos se define en el mismo sitio que las funciones y de las misma manera, asociándolos posteriormente a un objeto existente” (p. 85). Significa que un método es una acción que se ejecuta sobre los datos de un objeto. La sintaxis para definir un método en JavaScript es la siguiente:

Objeto.nombremetodo = nombre función

Sintaxis para definir un método en JavaScript. Fuente: Goodman, 2007.

La llamada del método, se hace de la siguiente forma:

Objeto.nombremetodo (parametro1, parametro2, parametro3…)

Sintaxis para hacer la llamada del método en JavaScript. Fuente: Goodman, 2007.

A continuación, se expone un ejemplo con base en objetos, funciones y métodos en JavaScript. Para crear objetos propios, se mostrará un ejemplo en dos formas diferentes: Ejemplo1 En éste, sólo se declara el nombre de la función y las variables que la compondrán.



Donde: this hace siempre referencia al objeto actual. Ejemplo 2 Aquí se creará una instancia del objeto usando new, atributo del objeto de JavaScript.

Para ello se le asigna una función al objeto que calcule la edad del profesor. Para hacerlo más simple, sólo se restará al año actual el año de nacimiento. Un objeto document permite que se proporcione propiedades y métodos para poder acceder a otros objetos dentro de todo el código de JavaScript. Claro está, esto depende de lo que se necesite. La estructura para saber la edad del profesor con base en el objeto document es la siguiente: function calcula_edad( ) { var edad = 2014 - this.anio_nacimiento; document.write(“Su edad es: <b>“ + edad + “</b>) } La función se podría escribir en una línea, pero de esta forma puedes observar cómo declarar una variable, explícitamente. El tipo se les asigna implícitamente, con base en el objeto document.



La utilización de los objetos, funciones y métodos sobre JavaScript en la realización de la paginas web permite que sea más interactivo tu sitio web; por ejemplo, cuando se requiere enviar un formulario y un campo obligatorio no está lleno, se genera un aviso indicando que hace falta llenarlo antes del envío, y sólo se pueden enviar los datos cuando se está conectado a una base de datos.

3.1.2. Eventos sobre JavaScript En este subtema se revisarán los eventos de JavaScript. Es muy importante pues permite que la página web pueda realizar varias acciones. Como expresa Remoaldo (2008), “los eventos son acciones que suceden cuando el usuario realiza alguna acción sobre algún control de la página web, como hacer un clic para activar un link, etcétera. También son eventos, desplazar el ratón, teclear algo en una caja de edición, etcétera” (p. 187). A continuación, se explican los objetos y propiedades de JavaScript que se integran en una página web, según lo expuesto por Orós (2011):

Windows: es el objeto de más alto nivel, contiene las propiedades de la ventana, trabaja con frames, un objeto Windows es generado para cada frame. Document: agrupa las propiedades del documento actual, tales como el título, formularios, imágenes, colores de texto o fondo. History: objeto que contiene las propiedades que representan a las URL que el usuario ha visitado anteriormente. Location: contiene las propiedades de la URL activa. (p. 121)

JavaScript trabaja con eventos gracias a los manipuladores o manejadores de eventos que incorpora. Los eventos son sucesos que ocurren en el sistema cuando un usuario ejecuta algún tipo de acción. A continuación se muestran los tipos de eventos de JavaScript:

Tipos de eventos en Java Script

Recursos donde se aplican

Funcionalidad Controlador de eventos

Abort Imágenes El usuario cancela la carga de una imagen (por ejemplo, hace clic en un enlace o en el botón Stop).

OnAbort



Blur Ventanas y todos los elementos de un formulario

El usuario quita el foco (el punto de inserción) de entrada de ventana o formulario de elemento.

OnBlur

Change Se utiliza en los elementos que componen un formulario ( text fields, textareas, select) lists

El usuario cambia el valor del elemento que compone un formulario.

OnChange

Clic Se utiliza en buttons, radio

buttons, checkboxes, submit buttons, reset buttons, links

El usuario da clic en el elemento de formulario o enlace. Esto para mostrar un cuadro de diálogo con un mensaje de información, o una confirmación antes de ser enviada a la base de datos.

OnClick

DragDrop Ventanas El usuario suelta un objeto en la ventana del navegador, como la caída de un archivo en un navegador.

OnDragDrop

Error Imágenes, Ventanas

Permite la carga de un documento o imágenes que causan un error.

OnError

Focus Ventanas y todos los elementos de los formularios

Permite la entrada en la ventana o elemento de formulario.

OnFocus

KeyDown Documentos, Imágenes, enlaces, áreas de texto.

Permite que el usuario presione la tecla abajo.

OnKeyDown



KeyPress Documentos, imágenes, enlaces, áreas de texto

Permite que el usuario presione la tecla arriba.

OnKeyPress

KeyUp Documentos,

imágenes, enlaces, áreas de texto

Permite que el usuario libere una tecla. OnKeyUp

Load Documentos El usuario carga la página en el navegador.

OnLoad

MouseDown Documentos, botones, enlaces

El usuario pulsa un botón del ratón. OnMouseDown

MouseMove Nada, esto es por default

El usuario mueve el cursor. OnMouseMove

MouseOut Áreas y enlances Desplaza el cursor del usuario o de un cliente al lado de la imagen del mapa o enlace.

OnMouseOut

MouseOver Enlaces El usuario mueve el cursor sobre un Enlace.

OnMouseOver

MouseUp Documentos El usuario libera un botón del ratón. OnMouseUp

Eventos de JavaScript. Fuente: Sánchez, 2001.



A continuación, se expone una lista de los eventos de los JavaScript más comunes y se menciona cuándo se producen. La diferencia de estos eventos es que, sobre las etiquetas, pueden actuar más específicamente con HTML.

Evento Se produce al… Etiqueta HTML

onLoad Cargar el documento HTML. BODY

onUnload Abandonar el documento HTML. BODY

onMouseOver Pasar el ratón por encima del enlace. A

onMouseOut Sacar el ratón de encima del enlace. A

onClick Dar clic sobre un link o un campo de formulario.

A, FORM

onSubmit Enviar el formulario. FORM

onFocus Activar un campo de edición de un formulario. INPUT

onSelect Seleccionar un campo de edición de un formulario.

INPUT

onBlur Deseleccionar un campo de edición de un formulario.

INPUT

onChange Cambiar el contenido de un campo de edición, o de selección de un formulario.

INPUT, SELECT

Eventos de JavaScript que actúan sobre las etiquetas HTML. Fuente: Sánchez, 2001. Estos eventos se utilizan, por ejemplo, si el usuario da clic sobre el botón de la página web. El correspondiente manejador del evento clic, en este caso Onclick, registrará la acción y realizará las tareas que se le hayan asignado. A continuación se muestra un ejemplo de la forma en que se programa onClick en JavaScript:

Ejemplo de programación del evento onClick en JavaScript



En este ejemplo se utiliza el evento onClick, lo que hace que el usuario cuando da clic en el elemento llamado Entrar se abra una venta que dice Bienvenidos alumnos de Ingeniería en Desarrollo de Software. En la imagen se muestra el resultado del código evento onClick

Ejemplo de aplicación onClick. Basado en: Sánchez, 2001.

Es posible visualizar en todos los navegadores web los eventos programados en las páginas mediante JavaScript. Por último, es muy importante considerar que también existen los objetos del navegador. Son lo que permiten controlar la navegación de una página web de manera dinámica. Se utilizan cuando se carga una página web en el navegador y se crea un número de objetos característicos, según el contenido de dicha página (Sánchez, 2001). Los eventos sobre JavaScript son utilizados para ejecutar funciones que no serán iniciadas hasta que el evento se ejecute; por lo tanto, te ayudarán en la realización de tus formularios; por ejemplo, cuando el usuario llena un formulario y da clic en enviar, lo que hace el evento es hacer que se guarde la información en la base de datos, y se genere un formato en PDF integrando o almacenando la información con la que fue llenado el formulario, en este caso el evento realizó dos acciones:

Almacenar la base de datos

Generar un formato PDF

3.1.3. JavaScript combinado con HTML



En este subtema revisarás la importancia que tiene JavaScript combinado con HTML. Como se ha dicho en las unidades anteriores, HTML es el lenguaje principal para el funcionamiento de los demás lenguajes de programación web; en este caso, con JavaScript permite que se visualice lo que se introdujo de código. Se podrá visualiza la interfaz gráfica en lo navegadores web. JavaScript es un sencillo lenguaje de programación que presenta una característica especial: sus programas, llamados comúnmente scripts en las páginas HTML, se ejecutan en todos los navegadores. Estos scripts normalmente consisten en funciones que son llamadas desde el propio HTML cuando algún evento se acciona. A continuación, se exponen ejemplos de la combinación de JavaScript con HTML. En el siguiente ejemplo se mostrará la utilización de onClick y de funciones de JavaScript con HTML (Brito, N. 2009):

Ejemplo del funcionamiento del evento onClick

Para consultar el resultado código anterior, así como el funcionamiento que tiene el evento onClick y la función, revisa el video Ejemplo de aplicación del evento onClick y explicación de su funcionamiento.

http://youtu.be/SzqQa8LT68E




Para consultar el recurso de video Ejemplo de aplicación del evento onClick y explicación de su funcionamiento da clic en la imagen de la izquierda (es recomendable que descargues el recurso para una mejor visualización).

En el siguiente ejemplo se expone el uso del evento JavaScript window.print (), según lo expuesto por Brito, (2009):

Ejemplo de uso del evento JavaScript window.print ()

Para observar el resultado de este código y la explicación del funcionamiento del evento JavaScript window.print (), observa el video Ejemplo de aplicación del evento window.print() y explicación de su funcionalidad. Para consultar el recurso de video Ejemplo de aplicación del evento window.print() y explicación de su funcionalidad, da clic en la imagen de la derecha (es recomendable que descargues el recurso para una mejor visualización).

JavaScript puede programarse en un documento aparte del propio de HTML, pero esto no quiere decir que no deba utilizarse en un HTML. Cuando se programa sólo en JavaScript se guarda con la extensión .js. Una vez que se guardó con esta extensión, se construye la página web en HTML y se manda llamar el documento, por ejemplo calendario.js, dentro de la página web HTML como a continuación se muestra, según lo expuesto por Gutiérrez (2009):

http://youtu.be/ErgcHXosLqk




<!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" lang="en" xml:lang="en"> <head> <title>CAPTURA CONTROL COLABORADOR</title>  <script language="JavaScript" src="calendar_us.js"></script>  </style> </head> <body> <div id="Layer1"> <form name="testform"> <input type="text" name="testinput2" id="myOtherInput" /> <script language="JavaScript"> // whole calendar template can be redefined per individual calendar var A_CALTPL = { 'weekdays' : ['do', 'lu', 'ma', 'mi', 'ju', 'vi', 'sa'], 'yearscroll': true, 'months' : ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'], 'weekstart': 0, 'centyear' : 70, 'imgpath' : 'img/' } new tcal ({ // if referenced by ID then form name is not required 'controlname': 'myOtherInput' }, A_CALTPL); </script> </form>



</div> </body> </HTML> En el ejemplo anterior se muestra cómo se utiliza la sintaxis siguiente: <script language="JavaScript" src="calendar_us.js"></script> La sintaxis anterior permite llamar la estructura del calendario (Gutiérrez, 2009). El archivo calendar_us.js tiene código de JavaScript. Para revisar el ejemplo anterior, observa el video Ejemplo de aplicación de ficheros externos con JavaScript, donde observarás cómo se elabora un calendario mediante un fichero en JavaScript con la combinación de HTML. Es decir, observarás el resultado del código anterior y una explicación sobre la funcionalidad del fichero calendar_us.js:

Para consultar el recurso de video Ejemplo de aplicación de ficheros externos con JavaScript, da clic en la imagen de la izquierda (es recomendable que descargues el recurso para una mejor visualización).

A continuación se muestra un ejercicio con el evento onMouseOver y la función de JavaScript, específicamente con HTML, de acuerdo con Brito (2009): <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function carga(nom) { nombo = nom + "2.jpg"; document.images[nom].src = nombo; } function descarga(nom) { nombo = nom + ".jpg"; document.images[nom].src = nombo; } </SCRIPT> </HEAD> <BODY bgcolor="red"> <a href="ejer1.HTML" onmouseover="carga('dos.jpg')" onmouseout="descarga('dos.jpg')";> <img src="unad.jpg" name="unad" border=0></a> <p> <a href="ejercicio2.HTML" onmouseover="carga('unad')" onmouseout="descarga('unad')";> <img src="dos.jpg" name="dos" border=0></a>

http://youtu.be/lI-CFPW34u4




</BODY> </HTML> Para observar el resultado del ejemplo anterior respecto a la función de JavaScript, específicamente con HTML, se mostrará el resultado con el evento onMouseOver. Revisa el recurso de video Ejemplo de aplicación de código con el evento onMouseOver. Para consultar el recurso de video Ejemplo de aplicación de código con el evento onMouseOver da clic en la imagen de la derecha (es recomendable que descargues el recurso para una mejor visualización).

Se realizará otro ejercicio de JavaScript con combinación HTML. En el siguiente código se utiliza la condición IF, según lo planteado por Remoaldo (2008): <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xHTML"> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" /> <title>Ejercicio 5 - Estructuras de control, IF</title> <script type="text/JavaScript"> var numero1 = 5; var numero2 = 8; if(numero1 <= numero2) { alert("número1 no es mayor que número2"); } if(numero2 >= 0) { alert("número2 es positivo"); } if(numero1 < 0 || numero1 != 0) { alert("número1 es negativo o distinto de cero"); } if(++numero1 < numero2) { alert("Incrementar en 1 unidad el valor de número1 no lo hace mayor o igual que número2"); } </script> </head> <body> <p>Esta página muestra el uso básico de la estructura de control IF</p> </body> </HTML>

http://youtu.be/COkm2Y8tzik




Para observar el resultado del ejemplo anterior, revisa el video Condición IF en JavaScript y HTML.

Para consultar el recurso de video Condición IF en JavaScript y HTML da clic en la imagen de la derecha (es recomendable que descargues el recurso para una mejor visualización).

En el siguiente ejemplo, se expone un cuadro de mensajes utilizando métodos de alerta, según lo expuesto por Goodman (2007). <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xHTML"> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" /> <title>Mostrar mensajes complejos</title> <script type="text/JavaScript"> var mensaje = "¡Recuerda actualizar tu antivirus cada 30 días! \UnadMexico \'septimo semestre\' \n alert(mensaje); </script> </head> <body> <p>Esta página muestra mensajes de UNADM</p> </body> </HTML> Para visualizar el resultado del cuadro de mensajes utilizando los métodos de alerta que se exponen en el ejemplo anterior, revisa el video Ejemplo de aplicación del método de Alert. Para consultar el recurso de Ejemplo de aplicación del método de Alert, da clic en la imagen de la derecha (es recomendable que descargues el recurso para una mejor visualización).

En este subtema, se expuso la importancia de la utilización del lenguaje de programación de HTML para JavaScript. Es recomendable que, para la construcción de tu sitio web, ingreses códigos de JavaScript a tus páginas web, ya que hará que tu sitio sea más interactivo. Recuerda que el código de programa de JavaScript, llamado script, se introduce directamente en el documento de HTML y no necesita ser compilado. Es el propio navegador el que se encarga de traducirlo.



http://youtu.be/PwLPCNNxLzU






3.1.4. JavaScript y PHP JavaScript es un lenguaje de programación que permite realizar funcionalidades específicas dentro las páginas web del lado del cliente, y PHP es un lenguaje que se basa en la creación y conectividad de las bases de datos del lado del servidor. Esto quiere decir que el valor no pasa de JavaScript a PHP, lo que realizan estos dos lenguajes de programación web consiste en presentar el resultado en pantalla como formato de texto (Sánchez, 2001). JavaScript facilita acciones tales como enviar un error al usuario cuando se esté realizando o llenando un formulario y no esté completo o listo para ser almacenado en la base de datos elaborada en PHP. Al dar clic en enviar, aparecerá un cuadro de diálogo con la indicación de que no está completo el formulario. JavaScript permitirá al usuario avisarle que no ha completado el formulario en su totalidad. Otro ejemplo: en un formulario que pida la fecha se introduce el calendario que está hecho en JavaScript, ahí el usuario sólo busca la fecha y se almacena cuando se la envía a la base de datos.



Trabajar con estos dos lenguajes de programación web depende de la creación de la lógica de cada programador. En este caso tú, como ingeniero en Desarrollo de Software, tendrás la facilidad para trabajar con estos lenguajes y hacer infinidades de páginas, ya que tienes los conocimientos necesarios de programación. También dependerá de lo que solicite la empresa. A continuación, se muestra un código de programación web utilizando los dos lenguajes: PHP y JavaScript. El siguiente código tiene la finalidad de permitir que, cuando el usuario llene el formulario, los datos se almacenen en la base y puedan ser enviados a una dirección de correo electrónico, ya definida desde el código (Goodman, 2007).

<!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>:::::LINEA DE COMPRAS:::::</title>  <script type="text/JavaScript" src="validar.js"></script>  <style type="text/css"> body,td,th { font-family: "Arial Black"; font-size: 18px; color: #56006A; } a:link { color: #56006A; } a:visited { color: #56006A; } a:hover { color: #56006A; } a:active { color: #56006A; } </style> <script type="text/JavaScript">  </script> </head> <body> <P align="right"><a href="<?php echo $logoutAction ?>">CERRAR</a></P> <p align="center"><img src="imagenes/NEZA1.jpg" width="230" height="314" /></p>

Este código está elaborado en

JavaScript. Es una función con un

método. Esto permite que el formulario

en PHP sea contestado por el usuario,

pueda ser enviado a la base de datos

y, al mismo momento, abrir el correo

electrónico con los datos que se

capturaron al rellenar el formulario

PHP.



<form id="form1" name="form1" method="post" action=""> <p> <label for="id"></label> </p> <fieldset> <p> <label for="textfield">Número de orden</label> : <input name="num_orden" type="text" id="num_orden"value="<?php echo $next_id; ?>" disabled /> </p></fieldset> <p> </p> <blockquote> <blockquote> <blockquote> <blockquote> <blockquote> <blockquote> <fieldset> <marquee> <p>:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: </p></marquee> </fieldset> <fieldset> <legend align="left"><font color="#FFE000">Línea de compras</font></legend> <form> <p> Clase de producto: <select name="id" id="id" onchange="submit()"> <option value=""> </option> <?php do { ?> <option value="<?php echo $row_Recordset1['id']?>"<?php if (!(strcmp($row_Recordset1['id'], $_POST['id']))) {echo "selected=\"selected\"";} ?>><?php echo $row_Recordset1['cod_depa']?></option> <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); $rows = mysql_num_rows($Recordset1); if($rows > 0) { mysql_data_seek($Recordset1, 0); $row_Recordset1 = mysql_fetch_assoc($Recordset1); } ?> </select></p>



Producto: <select name="id_producto" id="id_producto" onchange="submit()"> <option value="">Seleccione una opcion:</option> <?php do { ?> <option value="<?php echo $row_Recordset2['id_producto']?>"<?php if (!(strcmp($row_Recordset2['id_producto'], $_POST['id_producto']))) {echo "selected=\"selected\"";} ?>><?php echo $row_Recordset2['nombreproducto']?></option> <?php } while ($row_Recordset2 = mysql_fetch_assoc($Recordset2)); $rows = mysql_num_rows($Recordset2); if($rows > 0) { mysql_data_seek($Recordset2, 0); $row_Recordset2 = mysql_fetch_assoc($Recordset2); } ?> </select> </form> <form action="mailto:[email protected]?subject= ORDEN DE COMPRAS&body=Se requiere autorizar la Orden Numero: <?php echo $next_id; ?> con fecha de <?php include('fecha.php')?>-<?php include('hora.php') ?> " enctype="multipart/form-data" method="post" onsubmit="doubleSubmit(this);"> <input name="id_producto" type="hidden" id="id_producto" value="<?php echo $id; ?>" /> <label for="nombreproducto"></label> <select name="nombreproducto" id="nombreproducto"> <option value="">Seleccione otra vez el producto:</option> <?php do { ?> <option value="<?php echo $row_Recordset4['nombreproducto']?>"<?php if (!(strcmp($row_Recordset4['nombreproducto'], $_POST['nombreproducto']))) {echo "selected=\"selected\"";} ?>><?php echo $row_Recordset4['nombreproducto']?></option> <?php } while ($row_Recordset4 = mysql_fetch_assoc($Recordset4)); $rows = mysql_num_rows($Recordset4); if($rows > 0) { mysql_data_seek($Recordset4, 0); $row_Recordset4 = mysql_fetch_assoc($Recordset4); } ?> </select> Proveedor: <select name="proveedor" id="proveedor"> <option value="">Seleccione una opcion:</option> <?php

En esta parte del código, se observa la forma en que se declaran los

correos electrónicos a donde será enviada la información que se

introduzca al llenar el formulario elaborado con PHP.



do { ?> <option value="<?php echo $row_Recordset3['proveedor']?>"<?php if (!(strcmp($row_Recordset3['proveedor'], $_POST['proveedor']))) {echo "selected=\"selected\"";} ?>><?php echo $row_Recordset3['proveedor']?></option> <?php } while ($row_Recordset3 = mysql_fetch_assoc($Recordset3)); $rows = mysql_num_rows($Recordset3); if($rows > 0) { mysql_data_seek($Recordset3, 0); $row_Recordset3 = mysql_fetch_assoc($Recordset3); } ?> </select> <p>Otro Producto/Productos Varios** : <textarea name="otro_producto" id="otro_producto"></textarea> <label for="comprar"></label> <label for="cotizar"></label> Cantidad: <input name="cantidad" type="text" id="cantidad" size="15" /> </p> <h6>**(En caso si no se encuentra el Producto)</h6> <p>Unidad: <select name="unidad" size="1" id="unidad" value="<?php echo $_POST[departamento] ?>" > <option value="Bolsa(s)">Bolsas(s)</option> <option value="Caja(s)">Caja(s)</option> <option value="Galon(es)">Galon(es)</option> <option value="Litro(s)">Litro(s)</option> <option value="Metro(s)">Metro(s)</option> <option value="Milimetro(s)">Milimetro(s)</option> <option value="Pieza(s)">Pieza(s)</option> <option value="Paquete(s)">Paquete(s)</option> </select> Solicitar autorización: <input name="autorizacion" type="checkbox" id="autorizacion" value="Solicito Autorización" /> </p> <p> Solicitante: <label for="requisitor"></label> <input name="requisitor" type="text" id="requisitor" size="40" /> <input name="estado" type="hidden" id="estado" value="Nuevo" /> </p> <p>Departamento: <label for="select2"></label>



<select name="departamento" size="1" value="<?php echo $_POST[departamento] ?>" > <option value=" " ></option> <option value="AD-Administracion">AD-Administración</option> <option value="AF-Atencion Familiar">AF-Atención familiar</option> <option value="AP-Atencion al Publico">AP-Atencion al público</option> <option value="DG-Direccion General">DG-Dirección general</option> <option value="DH-Desarrollo Humano">DH-Desarrollo humano</option> <option value="DM-Direccion Medica" selected="selected">DM-Direccion Medica</option> <option value="DO-Direccion de Operaciones">DO-Direccion de Operaciones</option> <option value="EN-Enfermeria">EN-Enfermeria</option> <option value="IN-Inter Consultantes">IN-Inter Consultantes</option> <option value="IS-Integracion Social">IS-Integración social</option> <option value="MA-Medico Acompañante">MA-Médico acompañante</option> <option value="PE-Proyectos Especiales">PE-Proyectos especiales</option> <option value="PS-Psicologia">PS-Psicología</option> <option value="RM-Recursos Materiales">RM-Recursos materiales</option> <option value="RP-Relaciones Publicas">RP-Relaciones públicas</option> <option value="SI-Sistemas">SI-Sistemas</option> <option value="TF-Terapia Fisica">TF-Terapia física</option> <option value="TO-Terapia Ocupacional">TO-Terapia ocupacional</option> <option value="TP-Terapia de Lenguage">TL-Terapia de lenguage</option> <option value="VO-Voluntaria">VO-Voluntaria</option> </select> Fecha de orden: <label for="textfield"></label> <input type="text" name="fecha_orden" readonly="readonly" style="width:auto" value="<?php include('fecha.php')?>-<?php include('hora.php')?>" size="22" > </p> <blockquote> <blockquote> <p> Observación:</p> <blockquote> <blockquote> <p align="left"> <label for="otro_producto"> <textarea name="observacion" id="observacion" cols="45" rows="5"></textarea> </label> </p> </blockquote> <p align="center" id="observacion" name="observacion" cols="45" rows="5"> </p> <blockquote> <p align="left"> <label for="textfield"></label> </p>



</blockquote> </blockquote> </blockquote> </blockquote> <p align="center"> <label for="id_producto"></label> <input type="hidden" name="num_orden" value="<?php echo $next_id; ?>"/> <input type="submit" name="enviar" id="enviar" value="Enviar" onclick="check(this.value)"/> <INPUT type="reset" name="borrar" value="Borrar"> </p> <p> <label for="id_proveedor"></label> </p> </form></form> </fieldset> <fieldset> <marquee> <p>:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: </p></marquee> </fieldset> <fieldset> <p> </p> <p> </p> </fieldset> </body> </HTML> <?php mysql_free_result($Recordset1); mysql_free_result($Recordset2); mysql_free_result($Recordset3); mysql_free_result($Recordset4); ?> Revisa el resultado del ejemplo anterior en el video Ejemplo de combinación de JavaScript con PHP .

Para consultar el recurso de video Ejemplo de combinación de JavaScript con PHP, da clic en la imagen de la izquierda (es recomendable que descargues el recurso para una mejor visualización). .

Se muestra el código de

JavaScript donde se utilizó

el método para realizar las

dos acciones utilizando el

evento onclick.

http://youtu.be/uCo8SpIL31Y





Como observaste, realizar páginas web con JavaScript y PHP es muy interesante, sólo tiene como límite tu creatividad y lógica para hacer que tus páginas web cuenten con los estándares de calidad y capten cada vez más usuarios. En este tema visualizaste que trabajar con JavaScript no es complicado, pues algunos de sus códigos ya los aplicaste en otros lenguajes de programación, pues sólo cambió la manera de declarar. También observaste que, para ver si es correcto el código, es necesario que se trabaje con HTML, lo que permitirá visualizar el navegador web. JavaScript no se compila como otros lenguajes de programación, con esto tú podrás agregar código de JavaScript en las páginas ya desarrolladas en tu proyecto de sitio web en la Unidad 2. Diseño de sitios web, y hacer que se vuelvan más interactivas.

Actividad 1. Desarrollo de aplicaciones web con JavaScript Realiza la actividad siguiendo las instrucciones de la misma y las indicaciones del Docente en línea.

3.2. Estructura ASP En este subtema se explicará el lenguaje de programación web ASP. El objetivo de usar ASP es que permite obtener, de forma simple y variada, información específica de los requerimientos de la creación de páginas web. Ya no es necesario crear nuevas páginas cada vez que se desee subir nueva información, ni remodelar páginas publicadas, con la finalidad de lograr tener al día toda la información. En la actualidad, con ASP se crean plantillas para cualquier sitio web en general. ASP no es más que páginas en HTML con algunos cambios; por ejemplo, la conexión de base de datos. Recuerda que HTML no hace conectividad con el servidor web para lo conexión de la bases de datos, y con ASP sí. Normalmente, las paginas ASP tiene la extensión .asp y pueden contener comandos de HTML, pero aprender ASP se vuelve más interesante cuando se integra en la página funciones adicionales; esto es, a la líneas de programas que el usuario no ve ni detecta en su navegador porque se procesan en el servidor. El término ASP son las siglas de active server page, método para crear programas que se ejecutan en un servidor de Web. Como sucede en otros lenguajes de programación, ASP tiene su estructura de código. Dado que se encuentra dentro del código de HTML, es necesario indicarle al servidor qué partes están escritas en un lenguaje y cuales en otro. Al igual que HTML, el código ASP tiene su etiqueta de inicio y fin, por lo cual en ASP se declara de la siguiente forma:

<% línea de código %> Esta sintaxis es muy importante, ya que con saber cómo va estructurada se podrá identificar que es una página web ASP; por otro lado, se podrá trabajar con bases de datos. En este tema se verán los siguientes subtemas:



En el subtema 3.2.1. Contenidos básicos ASP, se visualizará que ASP es un archivo de texto con extensión .asp, que contiene cualquier combinación de los siguientes elementos: HTML y lenguaje del servidor web (Wenz, Rennhaus y Kordwing, 2001).

En el subtema 3.2.2. Objetos y Funciones de ASP, se aprenderá que en ASP hay algunos objetos estándar predefinidos, que juegan un papel determinante en la aplicación de las posibilidades de ASP y sus funciones. Hay algunas prácticas para manejar arrays, subtipos y datos de fecha y hora para aplicarlas a tus páginas web (Wenz, Rennhaus y Kordwing, 2001).

3.2.1. Contenidos básicos ASP Las necesidades de la empresas están siendo cambiadas por los continuos avances tecnológicos y exigencia actuales. Estos cambios posibilitan un diseño y la maximización de recursos y herramientas para el desarrollo de aplicaciones más activas y poderosas. Facilitan el desarrollo del aprendizaje y creatividad de los programadores en un tiempo mucho menor, permiten una interacción más funcional con sus clientes. El lenguaje de programación ASP, en todos los ámbitos actuales desde empresariales hasta educativos, ha tomado una enorme relevancia por tener una gran facilidad y mucho poder para su utilización, así como permitir la creación de aplicaciones más potentes y funcionales para las organizaciones (Wenz, Rennhaus y Kordwing, 2001). A continuación se muestra un ejercicio pequeño con ASP. Este código muestra un mensaje: <!DOCTYPE HTML> <HTML> <body> <% ="Bienvenidos alumnos de Ingeniería en Desarrollo de software" %> </body> </HTML> De acuerdo con Valenzuela (s. f.):

¿En qué aplicaciones se puede obtener los mejores resultados con las páginas ASP? Pues básicamente, son 2 los tipos de aplicaciones que se le pueden dar de manera importante. Una, son las llamadas Listas de correo donde los usuarios ingresan sus Emails y se les envían información de forma periódica. Estas listas, suelen solicitar información adicional del usuario y todo esto conforma una Base de Datos realmente importante. En este caso, se manejan los conceptos de Alta y de Baja, es decir, de ingreso y eliminación de un registro. Además de



esto, si en el formulario de inscripción, se solicita, por ejemplo, una dirección URL del usuario, la configuración de su PC, sus hobbies, etcétera, todo esto representa un cúmulo de información que puede ser utilizada por todos, previa Búsqueda según criterios propios. (p. 1)

ASP utiliza principalmente el lenguaje visualbasicscript que no es más que una derivación del Visual Basic. Sin embargo, es posible programar páginas ASP en JavaScript, su declaración de la utilización de JavaScript o Visual Basic son las siguientes: (Valenzuela, s. f.). <% language=”vbscript” %> si se utiliza visual basic sript en servidor para programa en ASP. <% language=”jscript” %> si se utiliza JavaScript en servidor para programa en ASP. Es muy importante tener presente estas sentencias de ASP, ya que permiten realizar las plantillas para las páginas web con la conectividad del servidor; por lo particular, con el que se trabaja más es con visualbasicscript. A continuación se muestra un ejemplo de aplicación del código con VBScript: <% language=”vbscript” %> <HTML> <body> Hola ingeniero en Desarrollo de Software la UnADM te da la bienvenida el día de hoy: <%=now( )%> </HTML> </body>) En este ejemplo con la etiqueta <%=now( )%> se está llamado la fecha y la hora, por lo tanto el resultado es:

Hola ingeniero en Desarrollo de Software, La UnADM te da la bienvenida el día de hoy: 16/4/2014 20:00 PM

Como se observa en el ejemplo anterior, el cliente no recibe el código ASP, sino el resultado de la ejecución. Es muy importante tener el conocimiento básico de ASP, ya que permitirá saber cómo se trabaja con ASP para realizar plantillas, y que se tenga comunicación con el servidor web. Por otro lado, ASP trabaja con HTML. El único cambio es que tiene una sintaxis específica para trabajar con dos lenguajes de programación Visual Basic y JavaScript. Tú, como ingeniero en Desarrollo de Software, no tendrás complicación en trabajar con ASP, ya que tienes conocimientos de varios lenguajes de programación. El punto importante y que se ha mencionado es que tengas creatividad y lógica, para que realices infinidades de sitios web. Por lo tanto, ASP no permite que se pueda ingresar texto, etiquetas HTML ni scripts, a menos que estén en un archivo ASP que se ejecuta en el servidor.



3.2.2. Objetos y funciones de ASP Los objetos definen y realizan funciones complejas. Su aplicación representa una forma de normalizar la programación en ASP. Los objetos y funciones son muy importantes para la realización de las páginas web. En ASP, hay algunos objetos estándar predefinidos que juegan un papel determinante en la aplicación de sus posibilidades, y son los siguientes:

Objetos Concepto

Objeto Request Permite obtener información de un visitante.

Objeto Response Permite enviar la salida para el usuario desde el servidor.

Objeto Session Permite almacenar información o cambiar la configuración de una sesión de usuario.

Objeto Server Se utiliza para acceder a las propiedades y métodos en el servidor.

Objeto Application Permite almacenar y acceder a las variables desde cualquier página, al igual que el objeto Session.

Objeto Drive Permite obtener información acerca de una unidad de disco local o en un recurso compartido de red.

Objetos integrados de ASP. Fuente: Wenz, Rennhaus y Kordwing, 2001.

Ejemplo de aplicación del objeto Response: <!DOCTYPE HTML> <HTML> <body> <% response.write("<h2>Programación Web 1 de la carrera de la Ingeniería en Desarrollo de Software!</h2>") %> <% response.write("<p style='black'></p>") %> </body> </HTML> El resultado del código anterior se caracteriza con el objeto response, porque sólo manda llamar en la interface lo que fue declarado con response.write, tal como se muestra a continuación:



Ejemplo de uso de response.write

Ejemplo de objeto Response de ASP: <!DOCTYPE HTML> <HTML> <body> <% randomize() r=rnd() if r>0.5 then response.write("<a href='http://www.unadmexico.mx/'>UnadMexico!</a>") else response.write("<a href='https://www.facebook.com/UnAdMexico?ref=ts&fref=ts'>facebook UnadMexico!</a>") end if %> <p> Este ejemplo muestra un enlace, cada vez que se carga la página, se mostrará uno de los dos enlaces: UnadMexico! o facebook UnadMexico! Hay una probabilidad del 50% para cada uno de ellos. </p> </body> </HTML> El resultado del código anterior se muestra a continuación:



Ejemplo de uso de objeto response de ASP

A continuación se expone un ejemplo de objeto Server de ASP: <!DOCTYPE HTML> <HTML> <body> <% Set fs = Server.CreateObject("Scripting.FileSystemObject") Set rs = fs.GetFile(Server.MapPath("demo_lastmodified.asp")) modified = rs.DateLastModified %> Último archivo modificado: <%response.write(modified) Set rs = Nothing Set fs = Nothing %> </body> </HTML> Se expone en la siguiente imagen el resultado del ejemplo anterior:



Ejemplo de objeto server de ASP

Por otro lado, las funciones en ASP facilitan las tareas de la programación de las páginas, ya que se puede agrupar el código y ser reutilizado en la misma página. Las funciones de ASP más utilizadas son: fecha y hora: Fecha y hora en ASP pone a disposición sencillas rutinas para consultar la fecha actual del sistema y la hora del sistema. Dependiendo de código, se ejecuta en el servidor dentro de las rutinas ASP, o en el cliente. El resultado obtenido será la fecha y la hora del servidor, o estos mismos datos relativos al cliente. A continuación se muestra el código (Wenz, Rennhaus y Kordwing, 2001): <!DOCTYPE HTML> <HTML> <body> Fecha de Hoy: <%response.write(date())%>. <br> La Hora es: <%response.write(time())%>. </body> </HTML> El resultado del ejemplo anterior es:



Fecha de hoy: 16/04/2014 La hora es: 22:00 pm En este tema se habló del concepto básico del lenguaje y de los lenguajes de programación específicos que ya tienen una sintaxis básica; por otro lado, se visualizaron los objetos y funciones básicas y más utilizadas para la construcción de páginas web. ASP se visualiza en el navegador IE. Recuerda que ASP es una tecnología de Microsoft. Este lenguaje se utiliza dependiendo las necesidades de la empresa, y si ya tienes plantillas elaboradas por ti, se te hará más fácil realizar tu sitio web.

3.3. Base de datos para Web En la actualidad, las bases de datos son muy utilizadas en el mundo de la web ya sea para ser visualizadas en Internet o intranet. Las bases de datos pueden ser utilizadas para cosas tan sencillas como mantener un registro de tu agenda personal de teléfono, o tan complicado como llevar toda la gestión de una gran empresa u organización. Una base de datos se define como un conjunto de datos relacionados entre sí, organizados o estructurados con información referente de algo. Como expresa Meloni (2009), “las bases de datos son tratadas utilizando los sistemas gestores de bases de datos SGBD o también llamados DBMS data base management system que proporciona un conjunto de programas que acceden y gestionan esos datos” (p. 10). Por lo tanto, se define una base de datos como información almacenada en una computadora para que cualquier persona o programa autorizado pueda acceder a ella, independientemente de su procedencia y del uso que haga. Marín, Medina, Carrillo y Pons (2008), expresan que un gestor de base de datos “es un conjunto de elementos software con capacidad para definir, mantener y utilizar una base de datos” (p. 7). Para la creación de bases de datos, el gestor de base de datos que se utilizará es MYSQL. Éste crea un directorio o carpeta que contendrá los archivos de datos de esa base, al igual que sucede en la relación entre carpetas y archivos. Por sí sola, la base no significa nada, es similar a una carpeta, un simple contenedor, lo que guarda la información son los objetos que tiene almacenados dentro, pues la información dentro de la bases de datos se guarda en tablas, por lo que la base de datos es un conjunto de tablas. Para crear bases de datos dentro de un sitio web, como ya se había mencionado en las unidades anteriores, se necesita un servidor. Esto es de acuerdo con qué lenguaje de programación web sea utilizando y qué sistema operativo. El servidor más recomendado y utilizado por varios programadores es Apache, ya que es más factible para trabajar con las bases de datos y estar administrando el sitio web. Para tener Apache se necesitan los instaladores web AppServ o Xampp.



En el subtema 3.3.1 Tipo de bases de datos, aprenderás las diferentes bases de datos que existen, porque las bases de datos pueden clasificarse de muchas maneras, depende del manejo del contexto o a la utilidad de la misma, esto significa que depende de los diferente datos almacenados (Spona, 2010). En el subtema 3.3.2 Instaladores de servidores web, aprenderás a utilizar los instaladores web, ya que AppServ y Xampp tiene los mismo pasos para poder crear bases datos con sus respectivas tablas. El subtema 3.3.3. Conectividad de base de datos con PHP es muy importante, ya que de aquí depende la construcción de las bases de datos para el sitio web. Una vez que se cuente con el formulario de PHP, se hará la conectividad con la base de datos. En el subtema 3.3.4. Inserción, consulta, edición y eliminación de registro, verás la forma cómo se juega o se gestionan las bases de datos, esto facilitará la administración de las mismas en tu sitio web, así como la accesibilidad por parte del usuario.

3.3.1. Tipos de base de datos Es muy importante tener claro que las bases de datos pueden clasificarse de varias formas, y se utilizan de acuerdo con las necesidades que sean solicitadas por el usuario, de acuerdo a la variabilidad de los datos que se requieran almacenar en los mismos. De tal forma que exista la posibilidad de utilizar cualquier tipo de base de datos de acuerdo con los requerimientos del sitio web a desarrollar. Existen dos tipos de bases de datos: Estática. Es primordial para almacenar datos pasados. Sólo es lectura. Quiere decir que no permite hacer modificaciones (Spona, 2010). Dinámica. Como su nombre lo indica es dinámica, quiere decir que se pueden realizar modificaciones, actualizaciones, realizar consultas y estar jugando con las bases de datos, claro está, de acuerdo con las necesidades de la empresa. En la actualidad, es la más usada. Un ejemplo de una base de datos es el de carrito de compras, que permite hacer, modificar y cancelar las compras (Spona, 2010). Un punto importante de esta base de datos dinámica consiste en que tiene un modelo de base datos. Se define como modelo de base datos a la forma en que se guarda la información en las bases de datos. A continuación se mencionan brevemente los tipos de modelos de bases de datos dinámicas existentes:

Modelo de base de datos jerárquicas. Como su nombre lo dice, se encarga de almacenar la información en una estructura jerárquica. Esto quiere decir que es un



orden de elementos de acuerdo con su valor (Marín, Medina, Carrillo y Pons, 2008).

Modelo de base de datos relacionales. Se encarga de administrar datos más interactivos. Quiere decir que hay comunicación con diferentes tablas, ya sea de la misma base de datos o de otras, lo cual hace que facilite la administración de las base de datos. En la actulidad, este modelo es muy usado (Marín, Medina, Carrillo y Pons, 2008).

Modelo de base de datos red. Es la renovación del modelo jerárquico, ya que ofrece una solución eficiente para la modificación de datos, por lo cual permite la adminitración de la información.

A continuación, se muestra un esquema donde se exponen los modelos de base de datos relacionales, red y jerárquico:

Ejemplo de modelo de base de datos. Fuente: Spona, 2010.



Modelo de base de datos documentales, este modelo permite que se almacene un texto completo y permite realizar búsquedas de forma más rápida (Marín, Medina, Carrillo y Pons, 2008). La importancia de conocer los tipos de base de datos permitirá identificar aquélla con que se está trabajando o con la que se requiere trabajar, y así proponer soluciones para la adminitración y creación de base de datos. Como ya se mencionó, la creación de una base de datos debe ser adecuada a los requerimientos del sitio web de la empresa u organización.

3.3.2. Instaladores de servidores web En este subtema es muy importante tener conocimiento de la funcionalidad de los servidores e instaladores de servidores web, los instaladores permiten utilizar el servidor web Apache, mediante el cual es posible administrar, crear y conectar las bases de datos. También permite administrar varios sitios web, como ya se hablado en la unidad 2, los dos instaladores de servidor web más recomendados son AppServ y Xampp. La diferencia de uno y otro es que Xampp tiene compatibilidad con el sistema operativo Linux, y AppServ no. Estos dos instaladores trabajan con el gestor de base de datos MYSQL, que permitirá crear las bases de datos. Físicamente, cada nueva base de datos en MYSQL crea un directorio o carpeta que contendrá los archivos. Lo que guarda la información son los objetos que tiene almacenados (Beati, 2011). La estructura de una tabla se define por la cantidad de campos en que se fraccione la información que guarda. Los posibles campos se pueden imaginar como columnas de una plantilla de cálculo para una tabla. Por ejemplo, se crea una tabla con el nombre de producto. Sus campos serán el nombre del producto, descripción, categoría, precio, etcétera. Por lo cual, se definirían como tipo de datos alfanuméricos y numéricos; también se definirá la longitud de caracteres de cada campo. Para consultar cómo se crean las bases de datos con los instaladores de servidor web AppServ y Xampp, revisa el video Utilización de los instaladores de servidor web AppServ y XAMPP. Para consultar el recurso de video Utilización de los instaladores de servidor web AppServ y XAMPP, da clic en la imagen de la derecha (es recomendable que descargues el recurso para una mejor visualización).

Como observaste en este video, la creación de las base de datos de las tablas son muy fáciles de realizar. Es muy importante que tengas claro que así como declaraste el nombre de los campos de las tablas, cuando vincules el formulario de PHP los nombres de los campos del formulario sean iguales, para que no tengas problema alguno con la conexión de la base de datos.

http://youtu.be/gvBplyl7X8k





A continuación, en el siguiente subtema podrás visualizar cómo se vinculan las bases de datos con PHP. Con esto podrás empezar a crear tus bases de datos de tu sitio web sin problema alguno.

Actividad 2. Instalación de servidor web Realiza la actividad siguiendo las instrucciones de la misma y las indicaciones del Docente en línea.

3.3.3. Conectividad de base de datos con PHP Para vincular las bases de datos y las tablas que están dentro de las bases de datos en una página web en PHP, debe haber una vinculación con el instalador del servidor web. Con la ayuda del editor web podrás hacer la vinculación sin problema alguno aunque, como se mencionó en el subtema anterior, tal como se declaran los nombres de los campos en el instalador web debe de ser igual en PHP. Observa los pasos para realizar la conectividad de base de datos con PHP en el siguiente video Ejemplo de creación de conectividad de bases de datos con PHP.

Para consultar el recurso de video Ejemplo de creación de conectividad de bases de datos con PHP, da clic en la imagen de la izquierda (es recomendable que descargues el recurso para una mejor visualización).

Como puedes observar en el video, los pasos para hacer la conectividad de base de datos con PHP son muy sencillos; por lo tanto, para complementar tu construcción de sitio web con la bases de datos no tendrás problema alguno. En el siguiente subtema se explicarán los pasos que posibilitan jugar con las bases de datos.

3.3.4. Inserción, consulta, edición y eliminación de registros Una vez comprendida la forma en que se hace la conexión de las bases de datos con el instalador web y con el lenguaje de programación PHP, es muy importante saber cómo se puede jugar con las bases de datos en la página web. Con jugar con las bases de datos se hace referencia a las funcionalidades de gestión de información tales como inserción, consulta, edición y eliminación de registros. Esto facilita que no se necesite entrar directamente al instalador web para hacer modificaciones a los registros que se estén ingresando por los usuarios que están navegando en el sitio web. Para observar cómo se crea la inserción y la consulta de registros en una página web, revisa el siguiente video Inserción y consulta de registros en una página web

http://youtu.be/6PgEEd8Bq_I

http://youtu.be/Dj13q5O9jvI




Para consultar el recurso de video Inserción y consulta de registros en una página web, da clic en la imagen de la derecha (es recomendable

que descargues el recurso para una mejor visualización).

Para observar cómo se crea la edición y la eliminación de registros en una página web, observa el video Editar y eliminar registros de una página web (UnADM, 2014b; basado en Beati, 2011):

Para consultar el recurso de video Editar y eliminar registros de una página web, da clic en la imagen de la izquierda (es recomendable que descargues el recurso para una mejor visualización).

En el video mencionado anteriormente, se muestra el procedimiento para hacer ediciones

y eliminaciones en los registros, lo que permite la gestión de los datos o información.

Cabe mencionar que, una vez elaboradas las bases de datos y la construcción de las

páginas web, dependiendo de si el sitio sólo será vía Intranet o por Internet. Si es por

Intranet sólo se podrá visualizar por el nombre del dominio o por dirección IP, pero si es

por vía Internet se necesitará de un software donde permita levantar el sitio web completo,

sin problema alguno. Lo único que pedirá este software es el nombre del dominio y la

contraseña que da el proveedor, quien renta el espacio en Internet. El software

recomendado es CuteFTP, aplicación para la transferencia de archivos por FTP. Es un

software cuya licencia se tiene que adquirir pero también te permite utilizar una versión de

pruebas por 30 días.

Actividad 3. Conexión de base de datos

Realiza la actividad siguiendo las instrucciones de la misma y las indicaciones del

Docente en línea.

Autoevaluación El propósito de esta actividad es que puedas conocer los aprendizajes logrados y las áreas de oportunidad producto del estudio de esta tercera unidad. Para realizar la autoevaluación, ingresa al listado de actividades en el aula.

Evidencia de aprendizaje. Construcción del sitio web. Parte 2 Realiza la evidencia siguiendo las instrucciones de la misma y las indicaciones del Docente en línea.

http://youtu.be/PIoKga77CAY





Autorreflexiones

Además de enviar tu trabajo de la evidencia de aprendizaje, ingresa al foro Preguntas

de Autorreflexión y consulta las preguntas que tu Docente en línea presente. A partir de

ellas, elabora tu autorreflexión en un archivo de texto llamado DPW1_U3_ATR_XXYZ.

Posteriormente, envía tu archivo mediante la herramienta Autorreflexiones.

Cierre de la unidad

En esta unidad aprendiste y visualizaste la estructura de JavaScript. Observaste que en

JavaScript se necesita trabajar con HTML para así poder interactuar con su código;

además, JavaScript permite obtener páginas web más interactivas y realizar diferentes

acciones, claro está, dependiendo de las necesidades y requerimientos que se deban

considerar para la elaboración del sitio web; así como la creatividad del programador web.

También se mencionó que JavaScript y PHP pueden trabajar juntos, con lo cual es posible integrar funcionalidades de gestión de información en una página web con conexión a bases de datos. Respecto al lenguaje ASP, se expusieron las reglas de sintaxis y que trabaja con el lenguaje Visual Basic Script y JavaScript mediante una sintaxis fija. ASP, al igual que JavaScript, debe integrarse con el lenguaje de programación HTML, sólo que ASP trabaja en forma más directa con el servidor web. Recuerda que ASP es una tecnología de Microsoft, por lo cual se rige por ciertas reglas para trabajar en los sistemas operativos. ASP trabaja con los servidores web IIS y Apache, y permite realizar plantillas propias de sitios web, posibilita también utilizar esas plantillas para otro sitio web. Se revisó brevemente lo que es una base de datos, en relación con la forma en que crean y conectan a un sitio web, ya que en la actualidad es posible realizar este tipo de conexión de sitios web a bases de datos. Se recordó que una base de datos es un paquete que contiene toda la información necesaria para el funcionamiento de un sistema o un proyecto completo. Una base de datos está compuesta por tablas, y las tablas por campos que son el intermediario entre las bases de datos y las páginas, en las cuales se mostrarán o se proporcionará eso datos que serán capaces de abrir la conexión, escribir, leer, editar, etcétera, facilitando la interacción de información almacenada.

Para saber más Si te interesa saber más sobre JavaScript, ingresa a los siguientes sitios:

JavaScriptya. (s. f.). Recuperado de http://www.JavaScriptya.com.ar/

Librosweb. (s. f.). Recuperado de http://librosweb.es/JavaScript/

http://www.javascriptya.com.ar/

http://librosweb.es/javascript/



Si te interesa saber más de objetos, funciones y métodos de JavaScript, visita el siguiente sitio:

Hscripts. (s. f.). Recuperado de http://www.es.hscripts.com/tutoriales/JavaScript/string-funciones.php

Si te interesa saber más de JavaScript y PHP acerca de la forma en que se conjugan, se recomienda visitar el siguiente sitio:

Jhosuepardo. (s. f.). Recuperado de http://jhosuepardo.com/diseno-web/como-pasar-variables-de-JavaScript-a-php-y-viceversa/

Para saber más de ASP se recomienda el siguiente sitio web:

Desarrolloweb (s. f.). Recuperado de http://www.desarrolloweb.com/manuales/8/

Aspya. (s. f.). Recuperado de http://www.aspya.com.ar/ Si te interesa saber más de modelos de bases de datos, consulta los siguientes documentos:

Arcos Muñoz, V., Escribano Santamaría, A., López Utrilla, S., Peña Gallego, R., Susín Martínez, S., Utrilla Requena, F.A. (2008). Recuperado de http://www.itescam.edu.mx/principal/sylabus/fpdb/recursos/r88166.PDF

Rosa Rosario, M. G. (s.f). Recuperado de http://agu.inter.edu/mrosa/notas%20badm6030/MODELOS_DE_BASES_DE_DATOS.pdf

Si deseas saber más sobre aplicación de bases de datos en otras áreas consulta los siguientes documentos:

Origel Gutiérrez, S. (2006). Recuperado de

http://www.revista.unam.mx/vol.7/num8/art68/int68.htm

http://www.revista.unam.mx/biblioteca/masterorigel.pps

Hernández Cervantes, L., Santillán González, A., y González-Ponce, A.R. (2009).

Recuperado de http://www.revista.unam.mx/vol.10/num10/art62/int62-3.htm

Si te interesa saber más sobre bases de datos, consulta el siguiente sitio donde

encontrarás algunos tutoriales sobre la conexión a bases de datos:

Aulaclic. (s. f.). Recuperado de http://www.aulaclic.es/dreamweaver-cs4/b_19_1_1.htm

http://www.es.hscripts.com/tutoriales/javascript/string-funciones.php

http://jhosuepardo.com/diseno-web/como-pasar-variables-de-javascript-a-php-y-viceversa/

http://jhosuepardo.com/diseno-web/como-pasar-variables-de-javascript-a-php-y-viceversa/

http://www.desarrolloweb.com/manuales/8/

http://www.aspya.com.ar/

http://agu.inter.edu/mrosa/notas%20badm6030/MODELOS_DE_BASES_DE_DATOS.pdf

http://agu.inter.edu/mrosa/notas%20badm6030/MODELOS_DE_BASES_DE_DATOS.pdf

http://www.revista.unam.mx/vol.7/num8/art68/int68.htm

http://www.revista.unam.mx/biblioteca/masterorigel.pps

http://www.aulaclic.es/dreamweaver-cs4/b_19_1_1.htm

http://www.aulaclic.es/dreamweaver-cs4/b_19_1_1.htm



Fuentes de consulta

Beati, H. (2011). PHP de creación de páginas web. México: Alfaomega.

Brito, N. (2009). Manual de desarrollo web con Grails. Madrid: Imaginaworks.

Goodman, D. (2007). JavaScript Biblie. Indianapolis: Wiley Publishing.

Gutiérrez, E. (2009). Recursos informáticos JavaScript. Conceptos básicos y avanzados. Barcelona: Ediciones ENI

Marín, N. Medina, J. Carrillo y S. Pons, O. (2008). Introducción a las bases de datos. Madrid. Paraninfo

Meloni, J. (2009). PHP, MySQL y Apache. Madrid: Anaya Multimedia.

Orós, J. C. (2011). Diseño de páginas web con XHTML, JavaScript y CSS, 3a. ed. México: Alfaomega.

Remoaldo, P. (2008). Guia prático do Dreamweaver CS3 con PHP, JavaScript e Ajax. Lisboa: Centro Atlántico.

Sánchez Maza, M. A. (2001). JavaScript. Málaga: IC Innovación y Cualificación,

S.L.

Spona, H. (2010). Programación de bases de datos con MySQL y PHP. México: Alfaomega/Marcombo.

Valenzuela, V. (s. f.). Curso práctico de ASP. Recuperado de http://proton.ucting.udg.mx/tutorial/asp/cursoASP.pdf

Vara Mesa, J. M., López Sanz, M., Granada, D., Irrazábal, E., Jiménez Hernández, J. J., Verde Marín, J.. (2012). Guía didáctica del profesor de Desarrollo web en entornos servidor. Madrid: Ra-Ma.

Wenz, C., Rennhaus, C. y Kordwing, A. (2001). ASP: Active Server Pages. Programación fácil de páginas web dinámicas. Barcelona: Marcombo.

Videografía:

UnADM. Universidad Abierta y a Distancia de México. (2014a). Condición IF en JavaScript y HTML [Archivo de video]. Recuperado de http://youtu.be/liXxmeeoAfQ

_________________________________________. (2014b). Editar y eliminar registros de una página web [Archivo de video]. Recuperado de


http://proton.ucting.udg.mx/tutorial/asp/cursoASP.pdf

http://youtu.be/liXxmeeoAfQ




_________________________________________. (2014c). Ejemplo de

aplicación de código con el evento onMouseOver [Archivo de video]. Recuperado de http://youtu.be/COkm2Y8tzik

_________________________________________. (2014d). Ejemplo de

aplicación de ficheros externos con JavaScript [Archivo de video]. Recuperado de http://youtu.be/lI-CFPW34u4

_________________________________________. (2014e). Ejemplo de combinación de JavaScript con PHP [Archivo de video]. Recuperado de http://youtu.be/uCo8SpIL31Y

_________________________________________. (2014f). Ejemplo de creación de conectividad de bases de datos con PHP [Archivo de video]. Recuperado de http://youtu.be/6PgEEd8Bq_I

_________________________________________. (2014g). Ejemplo de aplicación del evento window.print() y explicación de su funcionalidad [Archivo de video]. Recuperado de http://youtu.be/ErgcHXosLqk

_________________________________________. (2014h). Ejemplo de aplicación del método de Alert [Archivo de video]. Recuperado de http://youtu.be/PwLPCNNxLzU

_________________________________________. (2014i). Ejemplo de aplicación del evento onClick y explicación de su funcionamiento [Archivo de video]. Recuperado de http://youtu.be/SzqQa8LT68E

_________________________________________. (2014j). Inserción y consulta de registros en una página web [Archivo de video]. Recuperado de http://youtu.be/Dj13q5O9jvI

_________________________________________. (2014k). Utilización de los instaladores de servidor web AppServ y XAMPP [Archivo de video]. Recuperado de http://youtu.be/gvBplyl7X8k










Unidad 3. Desarrollo de Sitios Web

Documents

Transcript of Unidad 3. Desarrollo de Sitios Web