UNIVERSIDAD CESAR VALLEJO

Escuela Profesional de Ingeniera de Sistemas

Sesin 01: Definicin de conceptos Bsicos de Tecnologas Web

Mg. Orleans Moiss Glvez Tapia

CIP: 171497

CURSO: INGENIERA WEB UCV 1

 PGINA WEB ESTTICA vs DINMICA

pgina web esttica

(Informativa)

Alto grado de interactividad

pgina web dinmica

(interactiva)

pgina web dinmica

(interactiva)

CURSO: INGENIERA WEB UCV 2

 PGINA WEB ESTTICA vs DINMICA

Lenguajes del
Lenguajes del
lado del Servidor
lado del cliente

Las pginas web ESTTICAS se refieren a las pginas web cuyo contenido es exactamente el mismo
sea cual sea el usuario que lo vea.
No cambia, es el mismo que el webmaster ha subido. Es decir, que si quieres cambiar una pgina
web esttica debes bajarte los archivos del servidor, hacer los cambios y subir el resultado de nuevo
al servidor.

CURSO: INGENIERA WEB UCV 3

 PGINA WEB ESTTICA vs DINMICA

En las pginas web DINMICAS :

Dos usuarios de una misma aplicacin web pueden estar viendo contenidos diferentes.
El contenido de las pginas es asignado por una BASE DE DATOS.

CURSO: INGENIERA WEB UCV 4

 EJEMPLOS DE PGINA WEB DINMICA
url: url:
SIMULACION PEDIDO ON LINE

Se construyen haciendo uso de otros lenguajes de programacin,
siendo el ms utilizado de todos el PHP.
Ofrecen una mayor interactividad con los usuarios que la visiten.
Otras funcionalidades que se pueden crear mediante las web
dinmicas son las aplicaciones como encuestas y votaciones, foros
de soporte, libros de visita, envo de e-mails inteligentes, reserva de
productos, pedidos on-line, atencin al cliente de manera
personalizada, entre otros.

CURSO: INGENIERA WEB UCV 6

 EJEMPLOS DE PGINA WEB DINMICA
url: url:
SIMULACION PEDIDO ON LINE

Una pgina dinmica tiene asociada una Base de Datos desde la que
se permite visualizar la informacin contenida en ella.
Permiten almacenar y hacer actualizaciones de la informacin
contenida en la misma, as cmo tambin modificaciones dinmicas
de la estructura y del diseo por parte de su propietario (ejemplo
los CMS).

Otros ejemplos

CURSO: INGENIERA WEB UCV 7

QU OCURRE CUANDO SE SOLICITA UNA PGINA DINMICA?

CURSO: INGENIERA WEB UCV 8

QU HERRAMIENTAS NECESITAMOS PARA DESARROLLAR APLICACIONES WEB EN NUESTRO
PROPIO PC?

Necesitamos:
I. Construir un Servidor local
con XAMPP.

II. Construir un Servidor local

con WAMPSERVER.

Como programadores siempre tendremos la necesidad de crear pginas web dinmicas en nuestro
ordenador. Para ello hemos de configurar un servidor Apache, MySQL y PHP utilizando WAMP
XAMPP en nuestro propio PC.

CURSO: INGENIERA WEB UCV 9

 I. Cmo instalar un servidor local XAMPP en Windows?

XAMPP es el acrnimo de Cualquier Plataforma (X), Apache (A), MySQL (M), PHP (P) y Perl (P). Es una
distribucin de Apache sencilla y ligera que facilita enormemente a los desarrolladores crear un servidor web
local para realizar pruebas. Se lo puede descargar de: https://www.apachefriends.org/es/index.html

Tutorial de Instalacin

CURSO: INGENIERA WEB UCV 10

 I. Cmo instalar un servidor local XAMPP en Windows?

XAMPP es el acrnimo de Cualquier Plataforma (X), Apache (A), MySQL (M), PHP (P) y Perl (P). Es una
distribucin de Apache sencilla y ligera que facilita enormemente a los desarrolladores crear un servidor web
local para realizar pruebas. Se lo puede descargar de: https://www.apachefriends.org/es/index.html

c:/xampp/htdocs es el directorio raz

de nuestro localhost.

Tutorial de Instalacin

CURSO: INGENIERA WEB UCV 11

 II. Cmo instalar un servidor local WAMPSERVER en Windows?

WampServer es un ambiente de desarrollo web popular para Windows que permite la creacin
de aplicaciones que se sustentan en Apache, PHP y bases de datos MySQL. . Se lo puede
descargar de la siguiente url: http://www.wampserver.com/en/

c:/wamp/www es el directorio raz de nuestro localhost.

Ejemplo:
Si nosotros queremos crear un sitio web
denominado misitioweb, deberemos crear en
la carpeta www otra con denominacin
misitioweb y ah depositar todos los ficheros
y estructura de directorios que se precisen para
montar el sitio.
Ahora si queremos entrar en nuestro propio
sitio web, y en concreto en nuestro ejemplo en
el sitio web que hemos denominado
misitioweb, lo que tendremos que escribir en
la barra de direcciones del navegador con el
que estemos trabajando es lo siguiente:
http://localhost/misitioweb/

CURSO: INGENIERA WEB UCV 12

 Insertando cdigo php dentro de un archivo html

ejemplo01.html

<html>
<head></head>
<body>
ejemplo01.php <?php
echo "Mis primeros pasos en php";
?>
</body>
</html>

Para ejecutar este primer programa, en una ventana del

navegador, tecleamos http://localhost/ejemplo01.php

CURSO: INGENIERA WEB UCV 13

 Introduccin a las pginas interactivas (PHP)

Mostrar informacin : print / echo $Profesion = "Arquitecto";

Aadir comentarios a una lnea: // echo "Marcelo";
Sentencias terminan con ; echo "" . "Profesin: " . $Profesion;

<html> Tambin se podra haber escrito:

<head>
<title>PHP Hello World</title> $Profesion = "Arquitecto";
</head> print "Marcelo";
<body> print "" . "Profesin: " . $Profesion;
<?php
// echo y print son equivalentes En ambos casos mostrar:
echo "Hello World!";
?>
</body>
Marcelo Profesin: Arquitecto
</html>

CURSO: INGENIERA WEB UCV 14

 Introduccin a las pginas interactivas (PHP)

Las cadenas pueden estar encerradas entre comillas
simples o dobles.
Cuando una frase encerrada entre comillas dobles
contiene una variable en su interior, esta se trata
como tal, por lo tanto se utilizar su contenido para el
almacenamiento.
Ejemplo:
$dia = 21;
$fecha = "Hoy es $dia de Septiembre";
Si una variable se encuentra dentro de una
cadena encerrada entre comillas simples
(o apstrofes), la misma pierde el carcter
de variable y se convierte en elemento de
la cadena.
Ejemplo:
$dia = 21;
$fecha = 'Hoy es $dia de Setiembre';

Qu valor se almacena en $fecha? Qu valor se almacena en $fecha?

Hoy es 21 de Setiembre. Hoy es $dia de Setiembre.

CURSO: INGENIERA WEB UCV 15

Operadores Lgicos y Aritmticos en PHP

CURSO: INGENIERA WEB UCV 16

 Ejemplo 02

saludo2.php
<Html>
<Title> Ejemplo </Title> http://localhost/saludo2.php
<Body>
<?PHP
$nombre = "Ana";
print ("<p>Hola, $nombre</p>");
?>
</Body>
</Html>
Para ejecutar este primer programa, en una
ventana del navegador, tecleamos:

http://localhost/saludo2.php

CURSO: INGENIERA WEB UCV 17

 Ejemplo 03

if (Condicion 1)
{
Instruccin 1;
Instruccin 2;
}
else if (Condicion 2)
{
Instruccin A;
Instruccin B;
}
else
{
Instruccin X;
Instruccin Z;
}

CURSO: INGENIERA WEB UCV 18

 Ejemplo 04

<html> Para obtener el da de la fecha del servidor web

<head></head> debemos llamar a la funcin date:
<body>
$dia=date("d");
<?php
$dia=date("d"); Si queremos la fecha completa:
if ($dia<=10) $fecha=date("Y:m:d")
{ Se utiliza la funcin rand para generar nmeros
echo "sitio activo"; aleatorios entre un rango de valores.
}
else $valor=rand(2,50);
{
echo "sitio fuera de servicio";
}
?>
</body>
</html>
Introduccin al Creacin de mi primer
Funcionamiento de PHP programa con PHP

CURSO: INGENIERA WEB UCV 19

Ejemplo 05 (pizarra)

Crear una pgina php que genere un

valor aleatorio entre 1 y 100 y
muestre la cantidad de dgitos de
dicho nmero:

CURSO: INGENIERA WEB UCV 20

 Ejemplo 06 (pizarra)

Crear una pgina php que permita mostrar los nmeros del 1 al 100 (usar FOR)

CURSO: INGENIERA WEB UCV 21

 Ejemplo 07 (pizarra)

Crear una pgina php que permita mostrar los nmeros del 1 al 100 (usar WHILE)

CURSO: INGENIERA WEB UCV 22

 Ejemplo 08 (pizarra)

Un pintor necesita 0,1 litros de pintura por metro cuadrado. Tiene que pintar una pared de
10m. x 4m. Cada lata de pintura de 1 litro vale $ 42. Crear una pgina PHP que calcule
cunto dinero debe gastar el pintor para pintar la pared.

Sugerencia: Cada dato del enunciado debe almacenarlo en una variable, luego haga los clculos.

Ejemplo 09: Dado un nmero entero positivo (aleatorio) determine si es par o impar.
Ejemplo 10: Obtener el mayor de dos nmeros enteros positivos (aleatorios).

CURSO: INGENIERA WEB UCV 23