Está en la página 1de 13

Taller de Programación Web

100000S09T
Carreras para Gente que Trabaja

GUIA DE LABORATORIO
SEMANA 1:

Los estudiantes construyen una página web con el editor Sublime Text 2 y utilizan los recursos
aprendidos en la semana.

La página web debe cumplir los siguientes requerimientos

a) El tema para la página web será “El internet de la cosas”.


b) Debe tener un título principal, definición, aplicaciones, características y conclusiones.
c) La página web debe tener la estructura básica

d) En el <HEAD> debe tener los siguientes metadatos:


a. Titulo (Title) (no pasar de 60 caracteres)
• <title>titulo pensado </title>
b. Dirección de la página web
• <base href="http://www.example.com/page.html">
c. Descripción (Description) - Este contenido debe ser un resumen de lo que se
incluye en la página web (No pasar de 160 caracteres)
• <META name="description" content="Esta es la descripción general
de la página">
d. Palabras Clave (Keywords) - Es un recurso que acelera la búsqueda de tu página
web.
• <META name="keywords" content="Palabras clave separadas por
comas">
• <META name="keywords"
content="empresarial,instrucciones,catálogos">
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

e) En el <BODY> debe tener las siguientes estructura:

a. Encabezado
b. Contenido
i. Titulo
ii. Subtitulo
iii. Párrafo
iv. Imagen

SEMANA 2:

Los estudiantes construyen una página web basándose en las indicaciones del docente.

Formulario.

Crea una página web que contenga un formulario con los siguientes campos de información:

• El nombre, con un control de tipo texto.


• Los apellidos, con un control de tipo texto.
• El sexo, con dos opciones excluyentes hombre o mujer.
• El correo electrónico, con un control de tipo texto.
• Una casilla de verificación con el texto "Deseo recibir información sobre novedades y
ofertas".
• Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones
generales del programa y la normativa sobre protección de datos".
• Un botón de envío.

Además, tienes que tener en cuenta los siguientes requisitos:

• El título de la página debe ser Formulario de registro - Mi web.


• El método de envío del formulario debe ser GET.
• El destino del envío del formulario debe ser "".
• La longitud máxima de entrada de datos de los controles para el nombre y los apellidos
debe ser 50 caracteres.
• La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas"
debe estar activada por defecto.

Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

SEMANA 3:

Los estudiantes construyen una página web utilizando la hoja de estilo CSS.

a) A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que la
página resultante tenga el mismo aspecto que el de la siguiente imagen:
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

b) Definir las reglas CSS que permiten mostrar los enlaces con los siguientes estilos:

1. En su estado normal, los enlaces se muestran de color rojo #CC0000.


2. Cuando el usuario pasa su ratón sobre el enlace, se muestra con un color de fondo rojo
#CC0000 y la letra de color blanco #FFF.
3. Los enlaces visitados se muestran en color gris claro #CCC.
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

SEMANA 4:

Realizar un menú desplegable con css y javaScript

Debe cumplir las siguientes especificaciones:

Estructura del menú

• Debe tener 3 secciones


o Inicio
o Colaboradores
o Contáctenos
• Debe tener las siguientes sub secciones
o Sección: Colaboradores
 Subsección: Colaborador 1
 Subsección: Colaborador 2
o Sección: Contáctenos
 Subsección: Reportar un error
 Subsección: Servicio de soporte

Funcionalidad del menú

Al pasar el cursor sobre las secciones deben aparecer las subsecciones

Estética del menú

Usar CSS tema libre


Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

SEMANA 5:

Los estudiantes configuran páginas web a nivel de servidor usando XAMPP.

Realizar los siguientes pasos:

• Descargar el XAMPP
• Instalar el XAMPP
• Iniciar Panel de Control XAMPP
• Ejecutar Página de Inicio.
• Gestionar paginas mediante PHPMyAdmin
• Crear una página web con nombre: miprimeraweb.php
• Guardar la carpeta \XAMPP\htcdocs
• Abrimos desde firefox la siguiente direccion localhost\miprimeraweb.php

Los estudiantes construyen una página dinámica con operaciones matemáticas básicas u otras.

Las operaciones aritméticas las básicas son la suma, la resta, multiplicación, división, residuo,
incremento y decremento.

Operaciones Aritméticas
Operación Símbolo
Suma +
Resta –
Multiplicación *
División /
Residuo o Modulo %
Incremento ++
Decremento —

Ejemplo

<HEAD>
<TITLE>OPERADORES ARITMÉTICAS</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#BBBBBB" TOPMARGIN=100>
<CENTER>
<H1>OPERACIONES ARITMÉTICAS</H1>
<?php
$n1=100;
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

$n2=50;
$suma=$n1+$n2;
$resta=$n1-$n2;
$mult=$n1*$n2;
$div=$n1/$n2;
$residuo=$n1%2;
$increment=$n1;
$increment++;
$decrement=$n2;
$decrement--;
echo "<hr>"."LA SUMA DE ".$n1." + ".$n2." = ".$suma;
echo "<hr>"."LA RESTA DE ".$n1." - ".$n2." = ".$resta;
echo "<hr>"."LA MULTIPLICACIÓN DE ".$n1." * ".$n2." = ".$mult;
echo "<hr>"."LA DIVISIÓN DE ".$n1." / ".$n2." = ".$div;
echo "<hr>"."EL RESIDUO DE ".$n1." % 2 = ".$residuo;
echo "<hr>"."EL INCREMENTO ".$n1." ES: ".$increment;
echo "<hr>"."EL DECREMENTO ".$n2." ES: ".$decrement;
?>
</CENTER>
</BODY>

Lo guardamos en la carpeta \XAMPP\htcdocspor ejemplo: operarit.php y lo abrimos en el


navegador de firefox.
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

SEMANA 6:

Los estudiantes realizan un ejercicio sobre formularios en PHP.

Realizar un formulario que conste de dos textBox, la primera para escribir los apellidos y la
segunda el nombre.

Además se le agregara un botón que realice el envío de los datos de apellidos y nombre.

Estos datos se observaran en una página de php.

Si el usuario no escribe en alguno de los textBox, se deberá notificar mediante un texto “Faltan
datos”.

Utilizar el método GET. Realizarlo en un único documento.

SEMANA 7:

Los estudiantes realizan ejercicios sobre sesiones y cookies

1. Creación de sesiones en php

En este ejercicio se pide crear un formulario de inicio de sesión.


Deberá crear tres páginas:
Pagina1: Donde estará el formulario de inicio de sesión (donde solo se ingresara el nombre
del usuario).
Pagina2: Esta página será vista solo a los usuarios que estén logeados.
Pagina3: Esta página será para cerrar la sesión.
Solución:
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

Pagina1
< ?php
session_start();
?>
< !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Pagina 1</title>
</head>
<body>
< ?php
if(isset($_SESSION['nombre'])){
echo "<p>Has iniciado sesion: " .
$_SESSION['nombre'] . "";
echo "<p><a href='pagina3.php'>Cerrar
Sesion</a></p>";
}else {
?>
<form action="pagina2.php" method="POST">
<p>Nombre:<input type="text" placeholder="Tu
Nombre!" name="nombre" required/></p><br />
<input type="submit" value="Enviar" />
</form>
< ?php}
?>
<a href="pagina2.php">Ir a pagina 2</a>
</body>
</html>
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

Pagina2
< ?php
session_start();
?>
< !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Pagina 2</title>
</head>
<body>
< ?php
if(isset($_POST['nombre'])){
$_SESSION['nombre'] = $_POST['nombre'];
echo "Bienvenido! Has iniciado sesion:
".$_POST['nombre'];
}else{
if(isset($_SESSION['nombre'])){
echo "Has iniciado Sesion:
".$_SESSION['nombre'];
}else{
echo "Acceso Restringido";
}
}
?>
<br /><a href="pagina1.php">Ir a pagina 1</a>
</body>
</html>
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

Pagina3

< ?php
session_start();
session_destroy();
?>
< !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Pagina 3</title>
</head>
<body>
<p>Has Cerrado Sesion</p>
<br /><a href="pagina1.php">Ir a pagina 1</a>
</body>
</html>

2. Creación de Cookies
Escriba una página que permita crear una cookie de duración limitada, comprobar el
estado de la cookie y destruirla. La duración de la cookie es de máximo 60 segundos.

SEMANA 8:

Los estudiantes crean aplicaciones con conexión a base de datos.

Realizar un programa de autenticación de usuarios con sesiones en PHP y MySQL

Para ello será necesario:

Servidor: localhost

Usuario: usuario de mysql

Password: clave de mysql

Nombre de la base de datos: usuariosdb

Realizar la siguiente tabla:


Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

Usuarios

Campo Tipo
nombre VARCHAR(50)
clave VARCHAR(50)

En esta tabla deben registrar a los usuarios con sus respectivas claves.

Tenemos que crear el archivo funciones.php el cual tendrá las siguientes funciones:

• Conexión a base de datos


• Consulta de existencia de registros
• Verificación de sesión iniciada con nombre de usuario.

Para utilizar este archivo solo bastaría poner include (‘funciones.php’) para incluirlo en cualquier
script de php.

Luego de terminado el archivo antes citado se tendrá que crear otro archivo el cual tendrá el
formulario de entrada index.php. Este formulario debe tener los siguientes datos:

• Usuario
• Password

Este formulario debe enviar los valores (usuario y clave) hacia el archivo index2.php

Este archivo tendrá la función de verificar si los usuarios están registrados y si pueden acceder a la
página ingreso.php, en caso no este registrado envía nuevamente al usuario a la página de inicio
index.php.

La página ingreso.php es una página que mostrara el siguiente mensaje “usuario admitido”
Taller de Programación Web
100000S09T
Carreras para Gente que Trabaja

Los estudiantes realizan ejercicios usando las librerías GD de PHP

• Realizar la fig1:

(90,90)
Datos:

Línea continua de grosor 1 y color


negro, usar la función imageline.

Fondo de color blanco

(10,10)

Fig1

• Realizar la fig2:

Datos:

Elipse de grosor 1 y amarilla, usar la


función imageellipse.
50 100 Fondo de color celeste
(0,0)

Fig. 2

• Crear un captcha propio para comprobar que quien entra a la página es una persona y no
una máquina

También podría gustarte