Guia de Laboratorio

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">
100000S09T
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:
100000S09T
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:
100000S09T
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.
100000S09T
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

100000S09T
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;
100000S09T
$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.
100000S09T
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:
100000S09T
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>
100000S09T
Pagina2
< ?php
session_start();
?>
< !DOCTYPE html>
<html>
<head>
</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>
100000S09T
Pagina3
< ?php
session_start();
session_destroy();
?>
< !DOCTYPE html>
<html>
<head>
</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:

100000S09T
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”
100000S09T
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

Guia de Laboratorio

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guia de Laboratorio

Загружено:

Авторское право:

Доступные форматы

Taller de Programación Web

La página web debe cumplir los siguientes requerimientos

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

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

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

• El nombre, con un control de tipo texto.

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

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

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

Realizar un menú desplegable con css y javaScript

Debe cumplir las siguientes especificaciones:

Estructura del menú

• Debe tener 3 secciones

Funcionalidad del menú

Al pasar el cursor sobre las secciones deben aparecer las subsecciones

Estética del menú

Usar CSS tema libre

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

Realizar los siguientes pasos:

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

Los estudiantes realizan un ejercicio sobre formularios en PHP.

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

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

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.

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:

Usuario: usuario de mysql

Password: clave de mysql

Nombre de la base de datos: usuariosdb

Realizar la siguiente tabla:

• Conexión a base de datos

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

Línea continua de grosor 1 y color

Fondo de color blanco

Elipse de grosor 1 y amarilla, usar la

Вам также может понравиться