Proyecto

“WifiCloudCan – eCastro21”

CURSO:

Introducción a la programación en
HTML - PHP y al Desarrollo Web
INDICE

Introducción

Lenguaje de etiquetas HTML

Herramientas necesarias
para diseñar una página Web
con HTML

Mi primera página Web
INDICE

Estructura de una pagina Web

Hojas de Estilo ( CSS )

Lenguaje PHP

Esqueleto de la página inicial

WifiCloudCan
- Index. PHP
- Procesos. PHP
- Inicio. PHP
INDICE

- Ejemplo de Hoja de Estilos

( wificloudcan. CSS )
- Pie. PHP
- Menus. PHP

Bases de Datos (mySQL)

INTRODUCCIÓN:

Este curso pretende enseñar la

utilización de las herramientas
necesarias para poder diseñar
páginas web sencillas.

Y también pretende una introducción
en el uso del lenguaje de marcado
web (HTML) ,del lenguaje de
programación web (PHP) y el uso de
las hojas de estilo (CSS).
 INTRODUCCIÓN:

Estas herramientas son:

- un lenguaje de marcado web
basado en etiquetas, llamado HTML
- un editor de textos (ej. bloc de
notas, word, etc…)
- un navegador Web (ej. Google
Chrome, Internet Explorer, Firefox,
etc…)
 INTRODUCCIÓN:

Y además de estas herramientas

básicas, veremos:
- la utilización de un lenguaje de
programación llamado PHP, que
permite la generación dinámica de
contenidos en un servidor web
- la utilización de hojas de estilo
(CSS) que darán forma a la página
web que desarrollemos
 INTRODUCCIÓN:

Conceptos Básicos en Informática

- Programa:
Un programa informático es un conjunto de
instrucciones que una vez ejecutadas realizarán una
o varias tareas en una computadora.

Y a un conjunto general de programas, se le

denomina software, es decir, el soporte lógico de
una computadora.
INTRODUCCIÓN:

- Instrucción o Sentencia:
conjunto de datos insertados en una secuencia
estructurada o específica que el procesador
interpreta y ejecuta.

- Ejecutar un programa:
es la acción de iniciar la carga de un programa o
de cualquier archivo ejecutable. En otras palabras,
el proceso mediante el cual una computadora lleva a
cabo las instrucciones de un programa informático.
INTRODUCCIÓN:

- Lenguaje de programación:
es un lenguaje formal diseñado para expresar
procesos que pueden ser llevados a cabo por
máquinas como las computadoras.
Puede usarse para crear programas que controlen el
comportamiento físico y lógico de una máquina.
Está formado por un conjunto de símbolos y reglas
sintácticas y semánticas que definen su estructura y
el significado de sus elementos y expresiones. Al
proceso por el cual se escribe, se prueba, se depura,
y se mantiene el código fuente de un programa
informático se le llama programación.
 Lenguaje de etiquetas HTML

En informática, la World
Wide Web (WWW) o Red informática
mundial es un sistema de
distribución de información, basado
en el lenguaje HTML, en el que
conviven infinidad de páginas web
World  mundial
Wide  anchura
Web  Red, malla o telaraña
 Lenguaje de etiquetas HTML

Una página web es un archivo o

documento con extensión .html que
se crea con un lenguaje estandarizado
denominado HTML
(HyperText Markup Language –
Lenguaje de marcas de texto )
Lenguaje de etiquetas HTML

HTML hace referencia al lenguaje de

marcado predominante para la elaboración
de páginas web que se utiliza para describir
y traducir la estructura y la información en
forma de texto, así como para
complementar el texto con objetos tales
como imágenes.

Por tanto, una página web puede contener

imágenes, textos y otros elementos.
Lenguaje de etiquetas HTML

HTML es un lenguaje sencillo,

estructurado en etiquetas o marcas,
que permite aglutinar y combinar
textos, sonidos e imágenes.

HTML además, permite la
introducción de referencias a otras
páginas por medio de los enlaces
hipertexto que llevan a otros fuentes
de información relacionadas.
Lenguaje de etiquetas HTML

Un archivo HTML no es más que
texto y etiquetas que indican cómo
visualizar una página web.

Recordamos, una página web es un

documento o archivo, con extensión
.html que puede contener texto,
imágenes, sonidos y enlaces a otras
páginas.
 Herramientas Necesarias para
diseñar páginas web con HTML
Como hemos visto antes,necesitaremos:

Un editor de textos: Podemos usar el
Bloc de notas, el Word , u otros
editores de textos como el Eclipse
(software libre) para escribir el
lenguaje HTML.

Un visualizador o navegador web:
Netscape, Microsoft Explorer, Mozilla
Firefox, Google Chrome, etc…
Mi primera página Web

Vamos a ver cómo diseñar nuestra

primera página web:

Lo primero:

Ir a Inicio Programas 
Accesorios  Bloc de Notas (o
notepad).
Mi primera página Web

El lenguaje utilizado para escribir

páginas web ya hemos dicho que
es un lenguaje basado en etiquetas.

Por tanto el código de nuestra
página estará delimitado por las
etiquetas: <html> ……. </html>.
Mi primera página Web

Ejemplo:
Escribimos en el bloc de notas:
<html>
hola mundo
</html>

Guardar el archivo con extensión
.html para que el navegador web lo
abra como una página web.
Mi primera página Web

Una vez guardado el archivo, éste

se crea como icono de web y con
doble clic abrimos este archivo y
automáticamente el navegador web
nos mostrará nuestra primera
página web.
Mi primera página Web
Añadir Etiquetas a la página Web
Si queremos, por ejemplo, insertar
negrita en un documento HTML
tendríamos que:

Abrir de nuevo nuestro archivo
.html (hacemos clic con el botón
derecho del ratón y abrir con
notepad (bloc de notas)

Añadir al texto la etiqueta<strong>

Guardar el archivo .html

Añadir etiquetas a la página Web
Añadir etiquetas a la página Web
ESTRUCTURA DE UNA PÁGINA WEB

Una página Web, que es un

documento HTML ,delimitado por
las etiquetas <html> y </html> se
divide en tres partes:
- Encabezado o Cabecera
- Cuerpo o parte principal
- Pie de pagina
Cada una de estas partes se puede dividir
en secciones o divisiones (div)
ESTRUCTURA DE UNA PÁGINA WEB

Encabezado o cabecera: Viene

delimitada por las etiquetas <head>
y </head>.

Dentro de la cabecera colocaremos
etiquetas de carácter informativo.
En el encabezado habrá datos del
documento como:
Titulo,palabras,clave, etc…
ESTRUCTURA DE UNA PÁGINA WEB

Cuerpo o parte principal: está

delimitado por las etiquetas
<body> y </body>.
En el cuerpo será donde
colocaremos nuestro texto e
imágenes delimitados a su vez por
otras etiquetas como las que hemos
visto.

Pie de página.
PONER TÍTULO A LA PÁGINA WEB

Ejemplo:
<html>
<head> <- cabecera de la pagina
<title> Mi pagina </title>
</head>
<body> <- cuerpo de la pagina
<strong> HOLA MUNDO </strong>
</body>
</html>
PONER TÍTULO A LA PÁGINA WEB
 MEJORAR LA PAGINA WEB
Vemos que nuestra página tiene el título “Mi pagina”.
Como hemos visto, sólo con HTML podemos crear una
página Web, pero si queremos que nuestra página
tenga mejor estética, diseño y funcionalidad, habrá
que utilizar dos nuevas herramientas:

- PHP: Lenguaje de programación, adicional al HTML,

que lo enriquece, es decir, le proporciona mayor
funcionalidad.
- CSS: Hojas de Estilo, que mejoran la presentación
de nuestra página web.
Hojas de Estilo ( CSS )

CSS : Cascade Style Sheet (Hoja de Estilo en
cascada)
Son un tipo de archivo .css que definen el formato
estético de las páginas web.
En ellos se indica, por ejemplo:
-tamaño
-color
-posición de los distintos elementos

Cada página puede tener asociada una o varias

hojas de estilo.
 Lenguaje PHP

Las siglas PHP significan Hypertext Pre-
processor ( procesador de lenguaje
hipertexto) aunque inicialmente significaba
Personal Home Page Tools ( Utilidades para
definir una página inicial personal)

Fue creado, en 1995, por Rasmus Lerdorf

Se inspiró en lenguajes como: C, C++,

Perl, Java, Python
Lenguaje PHP

PHP es un lenguaje de programación de uso general
que se ejecuta en el servidor Web, originalmente
diseñado para el desarrollo web de contenido
dinámico.

Fue uno de los primeros lenguajes de programación

del lado del servidor que se podían incorporar
directamente en el documento HTML en lugar de
llamar a un archivo externo que tratase los datos.

El código es interpretado por un servidor web con un

módulo de procesador de PHP que genera la página
Web resultante.
Lenguaje PHP

PHP ha evolucionado bastante desde su
comienzo y en la actualidad tambien
incluye una interfaz de línea de comandos
que puede ser usada en aplicaciones
gráficas independientes.

Interfaz  conexión entre dos sistemas o
dispositivos de cualquier

PHP puede ser usado en la mayoría de los
servidores web al igual que en casi todos
los sistemas operativos y plataformas sin
ningún costo (software libre).
Lenguaje PHP

PHP (Hyper Text Preprocessor) es un lenguaje que
permite la generación dinámica de contenidos en un
servidor web. No es un lenguaje de marcas o
etiquetas, como es el HTML y se ejecuta en el
servidor Web, lo que nos permite acceder a los
recursos que tenga dicho servidor (por ejemplo una
base de datos).

PHP es ejecutado en el servidor y el resultado es
enviado al navegador, dando como resultado una
página HTML (una página web). El lenguaje HTML lo
utilizaremos para páginas estáticas mientras que el
lenguaje PHP lo utilizaremos para páginas
dinámicas.
Lenguaje PHP
Para escribir el lenguaje PHP, dentro de HTML, en
lugar de utilizar bloc de notas o word, también
podemos utilizar Eclipse, un editor mas completo y
que ademas es software libre.
Hemos visto como crear una página web estática
con HTML, que solo puede mostrar datos de forma
estática y que no puede interactuar con otros
sistemas, como puede ser una base de datos, para
mostrar datos de forma dinámica.
Si queremos crear un sitio web, necesitaremos
crear varias páginas web y que éstas interactúen
entre sí, de forma dinámica. Por eso utilizaremos,
además de HTML, el lenguaje PHP.
Lenguaje PHP
Denominamos sitio web a un conjunto de
páginas web, relacionadas entre sí.
Todo sitio web tiene una primera página
web denominada Index.html (Esta página
es la que buscaremos para entrar al sitio
web).

En nuestro caso, como vamos a desarrollar
un sitio web dinámico, vamos a crear una
primera página web, index.PHP, que es la
que nos llevará a nuestro sitio web.
Ejemplo de archivo .php

<html>
<head> <- cabecera de la pagina
<title> Mi pagina </title>
</head>

<body> <- cuerpo de la pagina

<strong> HOLA MUNDO </strong> <- Texto resaltado

</br> <- Salto de linea

<?php  código PHP

echo “ADIOS MUNDO”;  muestra texto

?>
</body>
</html>
El resultado es:
Esqueleto de la página inicial
WifiCloudCan

El objetivo de nuestro proyecto ha sido crear un sitio
web, es decir, un conjunto de páginas web que
muestran información de forma organizada y que
será de utilidad a las empresas como herramienta
de gestión informática.

En este caso, como bloc de Notas para crear la

página web se ha utilizado un editor llamado
ECLIPSE (software libre). La primera página de un
sitio web siempre se llama Index.html. En nuestro
caso como utilizamos PHP además de HTML,
tendremos un archivo llamado INDEX.php, que
iniciará el flujo de las páginas web.
PÁGINA INICIAL DE WIFICLOUDCAN
PROCESO:
index.php
Inicia la sesión e Inicia el flujo de las páginas.

<?php
session_start();
session_destroy();

session_start();
session_regenerate_id(true);

header( 'Location: ./procesos.php?prid=inicio');

?>
PROCESO:
index.php

Denominaremos sesión a la permanencia de los
datos del usuario conectado al sitio web durante el
flujo de páginas.

Este primer proceso realiza estas acciones:

-Inicia Sesión y a continuación la finaliza para cerrar

anteriores sesiones abiertas por el mismo u otros
usuarios
-Inicia Sesión del usuario que se conecta a la página
web principal
-Redirige al proceso procesos.php que es el que
controla el flujo de las paginas, pasándole como
parámetro la cadena de texto “prid=INICIO”
Parámetros y Variables

Un parámetro es un tipo de variable que es
recibida por un proceso. En este caso, el proceso
procesos.php recibe como parámetro (variable) la
cadena de texto “INICIO”.

Una variable es un espacio de memoria (un
almacén) reservado para almacenar un valor que
corresponde a un tipo de dato soportado por un
lenguaje de programación.

Ejemplo: nombre  variable de tipo texto

$nombre = “PEPE”;  almacena en nombre el
contenido “pepe”
PROCESO:
procesos.php
<?php
session_start();

error_reporting(0);  gestión de errores

$param = $_SERVER["QUERY_STRING"];  en la variable

QUERY_STRING llega el valor
“prid=INICIO”
enviado desde INDEX.php y lo guarda en la variable param

parse_str($param);
 Convierte el texto “prid=INICIO” en una variable $prid cuyo
valor es ‘INICIO’
include('inicio.php'); <-- incluye el código de inicio.php
PROCESO:
procesos.php
if (is_null($prid)) $prid="inicio";
 si el parámetro esta vacio se obliga a que pase por
el proceso inicio
if ($prid=='inicio')
{
include('inicio/inicio.html');  texto de los proyectos
}
else
{
include($prid . ".php");  va al proceso que se
escriba en la barra de dirección del navegador
}
include('pie.php');  incluir proceso de pie de pagina
¿Qué hace procesos.php ?

Lee los parámetros que le llegan de index.php, en este caso

solo le llega uno, que es “prid=inicio”

Prepara y convierte la cadena de parámetros
QUERY_STRING, en este caso convierte la cadena de texto
“prid=inicio” en la variable $prid con el valor ‘inicio’ ($prid =
‘inicio’ )

Incluye el código de inicio.php (include) en la pantalla
principal

Incluye el código de inicio.html (include) en la pantalla
principal cuando prid = inicio (es el texto explicativo de
nuestros proyectos)

En caso de que prid no sea inicio incluye el código del proceso
indicado en la barra del navegador

Incluye el código de pie.php (include) en la pantalla principal
PROCESO:
inicio.php
<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"
lang="es">
<head>
<title>WifiCloudCan</title>

<meta name="author" content="BCR" />

<meta name="Keywords" content="wificloudcan"/>
<meta name="description" content="description"/>
PROCESO:
inicio.php
<meta name="copyright Ayuntamiento de Castro Urdiales
2013"content="copyright"/>
<meta name="robots" content="ALL"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8"/>
<meta name="revisit-after" content="1 days"/>

/*Variables clave para el posicionamiento de la pagina web en los

buscadores
<link rel="stylesheet" type="text/css”
href="./estilos/wificloudcan.css" />
/* enlace que asocia la hoja de estilos a la pagina web

</head>
PROCESO:
inicio.php
<body> div  división o sección de la pagina web
<div id="pagina">
<div id="cabecera">
<div id='cabeceraorganizaciones'>

<a href='procesos.php?prid=inicio'>
<img src='imagenes/cabecera.png' height=100%
width=100%/>
</a>
</div>

<!-- Fin de div de cabecera -->

</div>
PROCESO:
inicio.php
<div id='cuerpo'>

<div id='PanelIzdo'>
<?php include ('menus.php');?>
se incluye el menú de opciones del
usuario
</div>

<div id='PanelDcho'>

La sección PanelDcho se cierra en otro archivo llamado Pie.php

que veremos a continuación
¿Qué hace Inicio.php ?

-Pone la cabecera de la pagina

-Pone el cuerpo de la pagina dividido en panel izdo (

menus )
y panel dcho (pantalla de trabajo)

-Pone el pie de la página

Ejemplo de Hoja de Estilos
(wificloudcan.css)
Form /* formulario */
{
top:0px;
left:0px;
width:1000px;
height:500px;
}
Label /* etiquetas */
{
color:navy;
}
Input /* cajas de texto */
{ color:black;
border:2px outset lightgreen;
width: 30px;
}
Ejemplo de Hoja de Estilos
(wificloudcan.css)
#pagina
{
position:relative;
width:1024px;
margin:0 auto;
}
#cabecera
{
position:absolute;
top:0;left:0;
width:99%;
height: 120px;
background-color: green;
color: white;
}
Ejemplo de Hoja de Estilos
(wificloudcan.css)
#cuerpo
{
top:140px;
left:0px;
width:99%;
height:590px;
}
#pie {
top:740px;
left:0px;
width: 865px;
height: 26px;
font-size: 11px;
background-color: lightgray;
}
Ejemplo de Hoja de Estilos
(wificloudcan.css)
#PanelIzdo /* menus * /
{
top:4px;
left:0px;
width:200px;
height: 290px;
background-color: transparent;
color: black;
border:1px outset lightgray;
}
#PanelDcho /* pantalla de trabajo */
{
top:4px; left:210px; width:795px;
height: 577px; background-color: white; color: black;
border:1px outset lightgray;
}
PROCESO:
pie.php
</div> <!-- Fin de panelDcho -- Este div se abrió en inicio.php -->

</div> <!-- Fin de div cuerpo -->

<div id='pie'>
<div id='pie_izda'>
Copyright Ayuntamiento de Castro Urdiales 2013 (c)
</div>
<div id='pie_dcha'>
<a href="procesos.php?prid=inicio">www.wificloudcan.com</a>
<strong>v.2013_03_22_01</strong>
</div>
</div> <!-- fin del div pie -->
</div> <!-- Fin de div pagina que viene de inicio.php -->

</body> <!-- Fin de body que viene de inicio.php -->

</html> <!-- Fin del html que viene de inicio.php -- >
PROCESO:
menus.php
<ul id="listamenu" >
<li>
<a href='procesos.php?prid=inicio'>Inicio </a>
/* cuando el usuario pincha con el ratón en esta
opción navegará hacia la pagina inicio
</li>

<li>
<a href='procesos.php?prid=P0010'>Regístrate </a>
</li> /* cuando el usuario pincha con el ratón en esta
opción navegará hacia la pagina P0010

<li>
<a href='procesos.php?prid=P0030'>Contacta </a>
</li> /* cuando el usuario pincha con el ratón en esta
opción navegará hacia la pagina P0030
</ul>
PROCESO:
menus.php

Este proceso menus.php es

llamado mediante include desde el
proceso inicio.php, dentro de la
división o sección PanelIzdo.

Muestra una lista con las diferentes

opciones que puede elegir el
usuario que se conecta a nuestra
página web.
PROCESO:
P0010.php
PROCESO:
P0010.php
<h1>Regístrate</h1>

<link rel="stylesheet" type="text/css" href="./estilos/p0010.css" />

/** enlace a la hoja de estilos **/

<div id='persona'>

/** Formulario para introducir los datos del registro del usuario
/** va entre etiquetas <form> ….. </form>
<form method='post' action='procesos.php?prid=P0020' >

<label id='lblnombrepersona' >Nombre Persona</label>  etiqueta

<input type='text' id='nombrepersona' name="nombrepersona" />
PROCESO:
P0010.php

<label id='lblemail' >Email</label>

<input type='text' id='email' name="email" />  Introduccion de texto

<input type='submit' id='submit' value='Enviar'/>

//** cuando el usuario ha rellenado sus datos y pincha en el botón Enviar

navega a la pantalla que se haya indicado en el action del formulario, en
este caso irá al proceso p0020 que es el que almacena sus datos **/

</form>
</div>
PROCESO:
P0010.php

Type=´text´ -- > caja de texto

Type=`submit´ -- > botón

Un formulario es un documento en pantalla,

diseñado con el objetivo de que el usuario
introduzca datos estructurados (nombre, apellidos,
dirección, etc…) en las zonas del documento
destinadas a ese propósito para ser almacenadas y
tratadas posteriormente.
PROCESO:
P0020.php
PROCESO:
P0020.php

Este proceso muestra por pantalla

los datos introducidos en el
formulario de la pantalla anterior.

El propósito posterior es que

además almacene estos datos en
una base de datos.
PROCESO:
P0020.php
Todavía no registra... Estamos justito empezando...
Paciencia ..
<br/>

<?php

echo "Nombre Persona ....: " .

$_POST["nombrepersona"] . '<br/>';
echo "Email ………....: " . $_POST["email"] . '<br/>';
?>
PROCESO:
P0020.php

$_POST es una variable que guarda

el dato que introdujo el usuario en
el formulario de la pantalla anterior.

Habrá una variable $_POST por

cada caja del formulario.
BASES DE DATOS

Una base de datos es un “almacén” que nos permite

guardar grandes cantidades de información de forma
organizada para que luego podamos encontrar y
utilizar fácilmente.

Cada base de datos se compone de una o más

tablas que guarda un conjunto de datos. Cada tabla
tiene una o más columnas y filas. Las columnas
guardan una parte de la información sobre cada
elemento que queramos guardar en la tabla, cada
fila de la tabla conforma un registro.


BASES DE DATOS

Las bases de datos son manejadas por lo que se

llaman Sistemas de Gestión de Base de Datos que
son un tipo de software muy específico, dedicado a
servir de comunicación entre la base de datos, el
usuario y las aplicaciones que la utilizan.

Se compone de un lenguaje de definición de datos,

de un lenguaje de manipulación de datos y de un
lenguaje de consulta.
BASES DE DATOS (mySQL)

El proyecto Wificloucan ha utilizado un

sistema gestor de base de datos que se
llama PHPMYADMIN y la base de datos se
ha utilizado se llama MySQL.

En MySQL podremos añadir, modificar,

consultar y borrar datos de las tablas
creadas.
Phpmyadmin:
Gestor de Base de Datos MySql
BASES DE DATOS (Crear Tabla)
create table personas
(
/* Nombre del Dato Tipo del Dato Longitud del dato */

idpersona int auto_increment primary key,

nif varchar(30),
nombrecompleto varchar(100),
direccion varchar(100),
poblacion varchar(60),
codpostal varchar(5),
provincia varchar(60),
movil varchar(20),
email varchar(60),
);
BASES DE DATOS (Consulta de
Datos de una Tabla - Select )