manual de asignatura basado en competencias ...tecnologias de la informacion y comunicacion 5 3.6 al...

TECNOLOGIAS DE LA INFORMACION

Y COMUNICACION

1

Manual de Asignatura

Basado en Competencias Profesionales

APOYO PARA LA ELABORACIÓN DEL DISEÑO DEL PROYECTO FINAL DE LA

MATERIA DESARROLLO DE APLICACIONES WEB.

Mayo de 2011 ELABORÓ: UNIVERSIDAD TECNOLÓGICA REVISÓ: UNIVERSIDAD(ES) TECNOLÓGICA(S)

AUTORES: MTRA. RUBICELL PINEDA TÉLLEZ REVISORES:

APROBÓ: COMISION NACIONAL ACADÉMICA DE TIC

FECHA DE ENTRADA EN VIGOR :Mayo de 2011


Y COMUNICACION

2

USO DE INCLUDE PARA EVITAR REPETIR UN MISMO

CÓDIGO HTML EN VARIAS PAGINAS DEL SITIO

Generar las carpetas del proyecto final

PASO1:

Ingresar a:

C:/wamp/www

PASO2:

Generar el siguiente esquema de directorio. Ver Figura 1.

Figura1. Esquema de directorio .

ELABORAR PLANTILLA PARA EL SITIO WEB

PASO1:

1.1 Diseñar una página con extensión “.php” llamada encabezado.php dentro de la carpeta “includes”.

1.2 Diseñar una página con extensión “.php” llamada pie.php dentro de la carpeta “includes”.

1.3 Diseñar una página con extensión “.php” llamada cuerpo.php dentro de la carpeta “ProyectoXicotepec”. Ver Figura 2.

Figura2. Esquema de directorio y paginas “.php”.

PASO2:

2.1 En la pagina “cabecera.php” ingrese el siguiente código. Ver Figura 3.


Y COMUNICACION

3

Figura3. Código de la página cabecera.php

2.2 En la pagina “pie.php” ingrese el siguiente código. Ver Figura 4.

Figura4. Código de la página pie.php.

2.3 En la pagina “inicio.php” ingrese el siguiente código. Ver Figura 5.

Figura5. Código de la página inicio.php.

2.4 Abra un navegador web y escriba la siguiente URL:

http://localhost/ProyectoXicotepec/inicio.php

2.5 La página deberá visualizarse de la siguiente manera. Ver Figura 6.

Figura6. Pagina web mostrada en el navegador.

PASO3:

3.1 En la pagina “inicio.php” SUSTITUIR el siguiente código en el lugar del cuerpo de la página. Ver Figura 7.

Figura7. Sección de código a sustituir en la página inicio.php.



Y COMUNICACION

4

3.2 Diseñar página con extensión “.php” llamada pag1.php dentro de la carpeta “pag”. Ver la Figura 8.

Figura8. Nuevo esquema de directorio y pag1.php.

3.3 En la página pag1.php ingresar el siguiente código. Ver Figura 9.

Figura9. Código de la página pag1.php.

NOTA. Observe la diferencia entre usar ./ que me indica que desde la ubicación actual (raíz del proyecto)necesito entrar a una

carpeta para encontrar el documento citado en la referencia y ../ se usa cuando el documento en el que estoy citando la referencia

se encuentra dentro de una carpeta y necesita salir de esa carpeta para encontrar el archivo citado.







Y COMUNICACION

5

3.6 Al dar clic en el link “Ir a pagina 1” deberá visualizarse de la siguiente manera. Ver Figura 11.


NOTA. Observe como la cabecera y el pie son los mismos en ambas páginas: inicio.php y pag1.php, y se incluyen desde los mismos únicos documentos con el método include( ) o include_once( ) que tiene la misma función pero el segundo método realiza una verificación en el documento buscando que los documentos no se hayan incluido ya. Si los documentos ya han sido incluidos, no los vuelve a incluir a diferencia del primer método .

PASO4

4.1 En la pagina “inicio.php” AÑADIR las siguientes líneas de código en el lugar del cuerpo de la página. Ver Figura 12.

Figura12. Sección de código a añadir en la página inicio.php.

4.2 En la pagina “pag1.php” AÑADIR las siguientes líneas de código en el lugar del cuerpo de la página 1. Ver Figura 13.

Figura13. Sección de código a añadir en la página pag1.php.

4.3 Diseñar página con extensión “.php” llamada pag2.php dentro de la carpeta “pag”. Ver la Figura 14.


Y COMUNICACION

6

Figura14. Nuevo esquema de directorio y pag2.php.









Y COMUNICACION

7

4.7 Al dar clic en el link “Ir a la pagina 1” deberá visualizarse de la siguiente manera. Ver Figura 17.





Y COMUNICACION

8

GENERACION DE LA PLANTILLA PARA UN SITIO WEB CON CABECERA Y PIE

PASO1:

1.1 Agregar a la carpeta “img” del proyecto una imagen llamada cereza.jpg.

1.2 En la página cabecera.php ingresar el siguiente código. Ver Figura 19.

Figura19. Código de la página cabecera.php.








Y COMUNICACION

9




NOTA. Observe como imagen en la página de inicio no se muestra, esto se debe a la línea de código que se muestra en la Figura 19 sombreada de color gris. La instrucción está indicando que las páginas se encuentran dentro de una subcarpeta del proyecto y por lo tanto para insertar la imagen en pag1.php y pag2.php debemos utilizar la sintaxis ..// . Sin embargo para la pagina inicio que se encuentra en la raíz de la carpeta de nuestro proyecto deberíamos estar insertando la imagen con ./.

PASO2

Para dar solución a lo anterior tendremos que generar una variable php de tipo cadena, que contenga la cadena de acceso a directorios o subdirectorios del proyecto, dependiendo de donde se encuentre nuestro documento en edición

2.1. En la pagina “inicio.php” AÑADIR las líneas de código sombreada en gris. Ver Figura 23.

Figura23. Sección de código a añadir en la página inicio.php.

2.2 En la pagina “pag1.php” AÑADIR las siguientes líneas de código sombreada en gris. Ver Figura 24.


Y COMUNICACION

10

Figura24. Sección de código a añadir en la página pag1.php.



2.4 En la página cabecera.php sustituir el siguiente código. Ver Figura 26.


Con estos cambios en el código lo que estamos haciendo es declarar variables php en nuestras páginas del sitio justo antes del include de nuestra cabecera y estas variables van a adquirir la cadena donde se especifica de que manera a acceder a los archivos citado. Como podemos observar son cadenas diferentes por lo que la instrucción img src="<?php echo $ref;?>img/cereza.jpg" estamos permitiendo que de manera dinámica se imprima también con código PHP la cadena adquirida de la pagina en ejecución.

2.5 Ahora vuelva a abrir un navegador web y escriba la siguiente URL:





Y COMUNICACION

11


PASO3

3.1 Agregar a la carpeta “img” del proyecto una imagen llamada xico1.png.

3.2 En la página pie.php ingresar el siguiente código. Ver Figura 28.






NOTA: Observe nuevamente como imprimimos la cadena de acceso a los directorios con la misma variable $ref;

ACTIVIDAD: Genere el código “php” necesario para que de manera dinámica las páginas adquieran el valor para la etiqueta <TITLE></TITLE> y LA CADENA para pasar como parámetro a la función INCLUDE_ONCE( ) validando si existe un variable con la cadena necesaria o si no.



Y COMUNICACION

12

PASO4

4.1 Agregar a la carpeta “img” del proyecto imágenes con los siguientes nombres:

Nombre Extensión

B1 .jpg

B2 .jpg

B3 .jpg

B4 .jpg

k1 .jpg

k2 .jpg

k3 .jpg

k4 .jpg

v1 .jpg

v2 .jpg

v3 .jpg

v4 .jpg


<div>

<h1>Esta es la primera página de nuestro Sitio Xicotepec Digital</h1>

<table width="50%" border="1" cellspacing="0" bordercolor="#ff00ff">

<tr bgcolor="pink">

<td colspan="4" scope="col">

<div align="center">

<p class="Estilo1">Catálogo</p>

<p>

<strong>¡Bienvienidos a nuestro catálogo!</strong>

<br>

<br>

</p>

</div>

</td>

</tr>

<tr>

<th scope="row">

<div align="center"><img src="<?php echo $ref;?>img/k1.jpg" width="100"


Y COMUNICACION

13

height="100"></div>

</th>

<td>

<div align="center"><img src="<?php echo $ref;?>img/k2.jpg" width="100" height="100"></div>

</td>

<td>


</td>

<td>


</td>

</tr>

<tr bgcolor="pink">

<td scope="row">


<p><strong>Kimono 1</strong></p>

<p>Precio</p>

<p>$ 135</p>

</div>

</td>

<td>



<p>Precio</p>

<p>$ 135</p>

</div>

</td>

<td>



<p>Precio</p>

<p>$ 135</p>

</div>

</td>

<td>




Y COMUNICACION

14

<p>Precio</p>

<p>$ 135</p>

</div>

</td>

</tr>

<tr bgcolor="#ffffff">



<p class="Estilo1"></p>

<p>

<strong> a</strong>

<br>

<br>

</p>

</div>

</td>

</tr>

</table>

</div>

<a href="pag2.php">Ir a la pagina 2 </a>

<a href="<?php echo $ref;?>inicio.php">Regresar al inicio </a>



<div>

<h1>Esta es la segunda página de nuestro Sitios Xicotepec Digital</h1>

<table width="50%" border="1" cellspacing="0" bordercolor="#00ff40">

<tr>

<th scope="row">

<div align="center"><img src="<?php echo $ref;?>img/v1.jpg" width="100" height="100"></div>

</th>

<td>


</td>

<td>

<div align="center"><img src="<?php echo $ref;?>img/v3.jpg" width="100"


Y COMUNICACION

15

height="100"></div>

</td>

<td>


</td>

</tr>

<tr bgcolor="#ff8040">

<td scope="row">


<p><strong>Vestido 1</strong></p>

<p>Precio</p>

<p>$ 135</p>

</div>

</td>

<td>



<p>Precio</p>

<p>$ 135</p>

</div>

</td>

<td>



<p>Precio</p>

<p>$ 135</p>

</div>

</td>

<td>



<p>Precio</p>

<p>$ 135</p>

</div>

</td>

</tr>

<tr bgcolor="#ffffff">



Y COMUNICACION

16


<p class="Estilo1"></p>

<p>

<strong> a</strong>

<br>

<br>

</p>

</div>

</td>

</tr>

</table>

</div>

<a href="pag1.php">Regresar a la p´gina 1</a>

<a href="../inicio.php">Regresar al inicio</a>


4.4 En la página inicio.php ingresar el siguiente código. Ver Figura 32.

<div id="cuerpo">

<h1>Esta es la página de Bienvenida de nuestro Sitios Xicotepec Digital</h1>

<table border="1">

<tr >

<th colspan="4" scope="row" align="center">

<div>

<p>Bienvenidos a Xicotepec Digital </p>

<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="100">

<param name="movie" value="<?php echo $ref;?>mus/wamba.swf">

<param name="quality" value="high">

<embed src="<?php echo $ref;?>mus/wamba.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="100" loop="false"></embed>

</object>

</div>

</th>

</tr>

<tr>

<td>Categoría 1</td>


Y COMUNICACION

17




</tr>

<tr>

<td><img src="<?php echo $ref;?>img/B1.jpg" width="70" height="70"/></td>




</tr>

</table>

<a href="<?php echo $ref;?>pag/pag1.php">Ir a la página 1</a>

<a href="<?php echo $ref;?>pag/pag2.php">Ir a la página 2</a>

</div>

Figura32. Código de la página inicio.php.






Y COMUNICACION

18




Y COMUNICACION

19




Y COMUNICACION

20


ACTIVIDAD: Tomando en cuenta que cada una de las páginas del sitio empieza siempre con Titular mediante la etiqueta <H1></H1> y que el contenido de estas etiquetas es siempre igual al <TITLE> de la página, se considera también como código repetido por lo tanto sería recomendable que fuera parte de la cabecera de los documentos ¿Cómo se haría este procedimiento?. Tome en cuenta que también debe hacerse una validación de existencia de variable con el contenido necesario para dar valor a H1 es decir que pasa si no existe una variable con dicho contenido (Utilice una sentencia IF-ELSE).


Y COMUNICACION

21

APLICACIÓN DE UNA UNICA HOJA DE ESTILOS A TODAS LAS

PAGINAS DE NUESTRO SITIO DESDE UN ARCHIVO

INDEPENDIENTE CON EXTENSION .CSS.

PASO1:

1.1 Verifique que en los <DIV> de los documentos cabecera.php y pie.php existan:

<div id=”contenedor”> Dibuja una capa general que abarca todo lo alto de la pagina y que contendrá a los objetos de las otras cuatro (cabecera, navegador, cuerpo y pie).

<div id=”cabecera” > Dibuja una capa que contendrá la imagen del logotipo.

<div id=”navegador” > Dibuja la barra en la que colocaran los links del menú.

<div id=”cuerpo” > Dibuja la capa que contendrá los objetos del cuerpo para las diferentes páginas.

<div id=”pie” > Dibuja una barra que contendrá la imagen y el Copyright del sitio hasta el final de la página.

Ver Figura 36.


NOTA: Cabe mencionar que por el momento en las páginas no se puede distingue la distribución ni los colores indicados por los estilos puesto que apenas los vamos a programar. La imagen anterior muestra como quedo la división de mis objetos dentro de la pagina web con cada uno d los DIVs que colocamos tanto en cabecera como en pie. Ahora solo falta aplicarles estilos CSS desde un documento externo para que se puedan visualizar así.


Y COMUNICACION

22

1.2 Agregar a la carpeta “css” del proyecto un documento llamado estilo.css.

1.3 Para dar estilo paso a paso a la capa contenedor de nuestra página, añadir el siguiente código al documento estilo.css. Ver Figura 37.

Figura37. Código del documento estilo.css.

Lo anterior solo indica que la capa contenedor tendrá un ancho de 700 pixeles, que el texto contenido será alineado a la izquierda y puesto que no sabemos la altura y el contenido de las demás capas que serán contenidas por “contenedor” le indicamos que ajuste automáticamente la altura y los márgenes.

1.4 Veamos cómo aplicar estos estilos a nuestras páginas web. Tomando en cuenta que todas las páginas de nuestro sitio web mantendrán el mismo estilo, se tendría que repetir la misma línea de código en todas las páginas, pero ya vimos en temas anteriores que eso no es necesario, bastará con colocar esa línea de código en el documento cabecera.php para que mediante los include() sea aplicado a cada una de las paginas. Ver Figura 38.

Figura38. Código en la página cabecera.php.



1.6 La página deberá visualizarse de la siguiente manera Ver Figura 39.

Podemos observar que aun no se aplican colores, estilos de textos, efectos de animación y alineaciones para ciertos objetos. Esto se debe a que el código de la Figura 37 solo afecta a la capa “contenedor”, en especial la propiedad margin: auto; que ajusta automáticamente los márgenes entre los bordes de la pantalla y el objeto al mismo tamaño, por lo que el objeto “contenedor” queda centrado junto con todos los objetos que contiene en relación a los bordes de la pantalla, pero no en relación a los bordes de la capa que los contiene.



Y COMUNICACION

23


1.7 Ahora para dar estilo a nuestra capa cabecera insertemos estas otras líneas de código en nuestro documento estilo.css. Ver Figura 40.


1.8 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que se le dio color de fondo a la capa “cabecera” Ver Figura 41.


Y COMUNICACION

24


1.9 Ahora insertemos estas otras líneas de código en nuestro documento estilo.css. Ver Figura 42.


1.10 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que le dibujamos los márgenes a la imagen de la cabecera Ver Figura 43.


PASO2:

2.1 Para dar estilo paso a paso a la capa navegador de nuestra página, añadir el siguiente código al documento estilo.css. Ver Figura 44.


Y COMUNICACION

25


2.2 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que se le dio color de fondo a la capa “navegador”. Ver Figura 45.




2.4 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que se le cambio el color a los links de la capa “navegador” Ver Figura 47.


Y COMUNICACION

26




2.6 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que al colocar nuestro mouse sobre los links el texto cambia a mayúsculas y aumenta de tamaño. Ver Figura 49.


Y COMUNICACION

27


PASO3:

3.1 Para dar estilo paso a paso a la capa cuerpo de nuestra página, añadir el siguiente código al documento estilo.css. Ver Figura 50.


3.2 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que se le dio imagen de fondo al cuerpo del documento<body>. Ver Figura 51.




Y COMUNICACION

28


3.4 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que se le dio color de fondo a la capa “cuerpo”. Ver Figura 52.




3.6 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que el estilo del texto de nuestro encabezado <H1> ha cambiado. Ver Figura 54.


Y COMUNICACION

29




3.8 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que el estilo de la tabla ha cambiado a centrado. Ver Figura 56.




Y COMUNICACION

30


3.10 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que el estilo de los links debajo de la tabla ha cambiado de tal forma que los links, links activos, links seleccionados mediante la tecla TAB, y los links visitados serán del mismo color siempre. Ver Figura 58.


NOTA: Observe en la figura 57 como los links eran de color purpura puesto que ya habían sido visitados y después de aplicar el estilo para la etiqueta <A> volvieron a ser azules.

3.11 Ahora insertemos este otro código en nuestro documento estilo.css. Ver Figura 59.


3.12 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que el estilo del link sobre el cual coloco el mouse cambia a color naranja. Ver Figura 60.


Y COMUNICACION

31


PASO4:

4.1 Para dar estilo paso a paso a la capa cuerpo de nuestra página, añadir el siguiente código al documento estilo.css. Ver Figura 61.


4.2 Al actualizar nuestra página deberá visualizarse de la siguiente manera. Podemos observar que se le dio imagen de fondo al cuerpo del documento<body>. Ver Figura 62.


Y COMUNICACION

32


ACTIVIDAD: Observe detalladamente como al aplicar estilos dibujando los márgenes de la imagen de la cabecera, a la imagen del pie no se le aplicaron los mismos estilos:

1.-Explique porque no ocurrió lo expuesto anteriormente.

2.- Elabora una segunda tabla para la pagina y aplique diferentes estilos para ambas tablas, anotando en su cuaderno como quedaría el código necesario para el documento estilo.css


Y COMUNICACION

33

USO DE FUNCIONES COMUNES PARA EVITAR REPETIR UN

MISMO CÓDIGO PHP EN VARIAS PAGINAS DEL SITIO

PASO1:

1.1 Recuerde el código PHP que utilizamos para obtener de manera dinámica los <TITLE> y los <H1> de cada una de las páginas de nuestro sitio, y que también lo podemos utilizar para obtener valores dinámicos para otras ETIQUETAS HTML. Ver Figura 63.

Figura63. Código repetido varias veces en el documento cabecera.php.

Observe como es exactamente el mismo código, la única diferencia es el nombre de la variable que va a proporcionar las cadenas necesarias. Y para evitar la repetición de código y que al mismo tiempo nuestros documentos se vean más limpios y abreviados, recurriremos al uso de FUNCIONES.

1.2 Agregue un documento llamado funcionescomunes.php a la carpeta fun . Ver Figura 64.

Figura64. Documento “funcionescomunes.php” en la carpeta fun.


Y COMUNICACION

34

1.3 Ahora insertemos estas líneas de código en nuestro documento funcionescomunes.php. Ver Figura 65.

Figura65. Código del documento funcionescomunes.php.

1.4 Ahora vayamos a nuestro documento cabecera.php y en todas las partes donde se repetía este código, lo sustituiremos por el nombre de la función y su parámetro de entrada será el identificador de nuestras variables pero como cadenas, es decir sin el signo de $ y entre “ ”. Ver Figura 66.

Figura66. Sustitución del código php repetido en el documento

cabecera.php con la función parámetro_plantilla .

3.5 Como incluir el documento funciones comunes a nuestras páginas del sitio. Vayamos a todas nuestras páginas de la carpeta pag y agreguemos la siguiente línea de código sombreada en gris en la imagen. Ver Figura 67.

Figura67. Inclusión del documento funcionescomunes.php

en cada página del sitio .

Observe que ya teníamos declaradas arriba de nuestro último include las variables que necesitamos pasar como parámetro tipo cadena a nuestra función. Obviamente lo mismo será para todas nuestras páginas del sitio de la carpeta pag.


Y COMUNICACION

35

3.6 Para comprobar que nuestra función realmente se eta ejecutando con éxito, bastará con que nuestras páginas se carguen como deben sin generar cambios en la estructura. Aquí mostraremos un ejemplo del funcionamiento en cuanto a la sustitución de los valores para el content de DESCRIPTION de nuestra etiqueta <META>. Ver Figura 68.

Figura68. Ejemplo de cómo lo que se ingresa en una variable se pasa

como parámetro dependiendo de la pagina que se esté ejecutando.

ACTIVIDAD: Elabora una TERCERA PAGINA llamada pag3.php para el sitio que aplique los mismos estilos de las páginas anteriores y los includes necesarios para su funcionamiento como parte del sitio web Xicotepec Digital. Anotando en su cuaderno como quedaría el código necesario para ésta página que debe tener la siguiente presentación. Ver Figura 69

Figura 69. Tercera página del sitio.

manual de asignatura basado en competencias ...tecnologias de la informacion y comunicacion 5 3.6 al...

Documents