KPGWU2. Desarrollo de Sitios Web

Programación Web
Unidad 2. Desarrollo de sitios Web
Ingeniería en: Telemática
Programa de la asignatura
Programación Web
KPGW
Clave: 210930728
Unidad 2. Desarrollo de sitios Web.
Universidad Abierta y a Distancia de México

UnADM
Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática

Programación Web
Presentación de la Unidad
En esta segunda Unidad identificarás algunas de las etapas más importantes en el

desarrollo y la planeación de un Sitio Web, conocerás el uso de algunas etiquetas del
lenguaje HTML en su versión 4 y 5, realizarás un repaso de las estructuras básicas de
programación aplicándolas a los lenguajes Web como PHP y JavaScript, conocerás
algunos de los generadores de código más populares para el desarrollo aplicaciones Web
y comprenderás un poco acerca del lenguaje SQL, su estructura, aplicación y la forma en
la que interactúa con una página Web.
Las actividades que realizarás te permitirán diseñar de una manera adecuada el mapa de
navegación y el esquema de información de tu proyecto de sitio Web, también gracias a
ellas conocerás mejor las etiquetas que componen el lenguaje HTML y su estructura,
adquiriendo las bases para iniciar su uso.
En cuanto a la construcción de tu sitio Web, podrás hacer uso de algún generador de

código para facilitar la tarea de programación y pruebas, como recomendación podrías
hacer uso de Adobe Dreamweaver, ya que es una herramienta que te ayudara a poner en
producción de una manera mucho más rápida y profesional tus proyectos Web.
Al finalizar la unidad encontraras una serie de videos que te guiaran en algunas tareas
básicas en el uso de Adobe Dreamweaver.
Propósitos
Al final de la unidad:
 Analizarás las necesidades de un caso

específico para proponer el diseño de un sitio
Web.
 Seleccionarás el lenguaje de programación que
sea acorde al tipo de sitio Web seleccionado.
 Utilizarás herramientas generadoras de código
para crear las páginas que integraran tu sitio Web.
 Integrarás bases de datos al sitio Web para su
funcionamiento dinámico.
Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 2

Programación Web
Competencia específica
Desarrollar un sitio Web estructurado para

su utilización con bases de datos mediante
la aplicación de lenguajes de programación
Web.
Temario de la Unidad
Unidad 2. Desarrollo de sitios Web.

2. Desarrollo de sitios Web
2.1. Fases del desarrollo Web
2.1.1. Selección del Tema
2.1.2. Documentación y Organización
2.1.3. Mapa de Navegación
2.2. Estructura de Programación

2.2.1. Etiquetas básicas del lenguaje HTML
2.2.2. Etiquetas básicas de PHP
2.2.3. Códigos Java Script básicos
2.2.4. Herramientas generadoras de código
2.3. Manipulación a bases de datos

2.3.1. Conectividad a bases de datos
2.3.2. Inserción de registros
2.3.3. Eliminación de registros
2.3.4. Consultas de registro

Programación Web
2.1. Fases del desarrollo Web
Durante el avance de esta Unidad aprenderás como desarrollar un sitio Web con cierto
nivel de interactividad, conocerás las etapas que componen su construcción, las etiquetas
básicas para su codificación y las herramientas empleadas para generar código,
finalizando con la interactividad del sitio Web a través de una base de datos. Para dar
comienzo es importante que conceptualices de manera adecuada que es un sitio Web y
como está formado.
Un Sitio Web es un conjunto de documentos electrónicos de hipertexto (páginas Web) que

componen y hacen referencia a un tema determinado. Normalmente están definidos por una
página de bienvenida (home page), que será la que se muestre inicialmente y desde la que
se podrá acceder a las demás páginas mediante enlaces (links). (Vázquez, 2006, p. 19)
Cuando des inicio a un proyecto relacionado con el desarrollo de un sitio Web es

necesario conceptualizarlo y planificarlo. Como mencionan Green, Chilcott y Flick “La
base de un sitio bien diseñado es una estructura definida con precisión” (2003, p.107).
No existe un estándar que podamos emplear como guía para llevar a cabo las fases de
conceptuación y planificación de un sitio Web, algunos desarrolladores profesionales
consideran que puede llevarse a cabo en 36 pasos, y gobiernos como el de México y
Chile han desarrollado sus propias metodologías aplicadas a la construcción de sitios
Web Gubernamentales o Institucionales.
A continuación se presentan las siete etapas que son, más comúnmente usadas para el
desarrollo de un sitio Web; No importa si el sitio Web a desarrollar es para un proyecto
personal, para un tercero, una institución pública o privada, siempre es conveniente llevar
a cabo estos pasos previos antes de iniciar con su desarrollo:

Programación Web
Ahora revisemos cada una de estas etapas.
La etapa número uno. Planificación, contempla la posible formación de un equipo de

trabajo, el plan de trabajo, tiempos, documentos de control interno como minutas, ordenes
de trabajo y controles de cambio, la recopilación y obtención de información, y la
definición del objetivo del sitio.
La etapa dos. Conceptualización, abarca asuntos referentes a los criterios de calidad,

estándares, usabilidad, determinación de estructuras, contenidos
Etapa numero tres. Arquitectura de la información, ésta es considerada como la parte

medular en la construcción y planeación de un sitio Web, ya que debe tener una
organización que facilite el acceso al usuario y le presente los datos como un todo.
La construcción de un sitio Web representa una estrategia a seguir

para resolver un problema de información, es por esta razón que se
sugiere a esta etapa como la parte medular del proyecto
Para conseguir esto es esencial organizar la información en una estructura jerárquica,

establecer niveles y relaciones entre sí, la mejor forma de conseguirlo es a través de la
representación gráfica de la estructura del sitio Web, en ésta se deben de mostrar los
contenidos, su organización y las relaciones entre ella, al resultado de esta representación
gráfica se le conoce como mapa de navegación.

Programación Web
La importancia del mapa de navegación radica en la comprensión del

orden de los contenidos (páginas Web) y la facilidad que se tendrá
para moverse entre ellas (hipervínculos). Haciendo una analogía, el
mapa de navegación es tan importante como los planos para un
arquitecto.
Existen muchas posibilidades para organizar la información en un mapa de navegación,

algunas de las más utilizadas son:
Tipo de organización Mapa de navegación
Lineal
Jerárquica
Jerárquica lineal

Programación Web
Concéntrica
Hipermedia
La etapa número cuatro. Navegación, tiene como objetivo definir el o los sistemas de
acceso a los contenidos del sitio Web, la meta es que a través de estos sistemas, los
usuarios puedan avanzar por sus diferentes áreas, de manera rápida y eficaz.
Cuando se diseñan sistemas de navegación, se debe de poner especial atención a dos

elementos que son muy importantes:
 Elementos textuales: Que son en donde la navegación se realiza a través de

menús, guías, botones y elementos dentro de la página.
 Elementos contextuales: Que es la forma en cómo se muestra la información,
utilizando elementos basados en texto, gráficos o el entorno del Sitio Web.
Para que un sistema de navegación sea eficiente deben tener 3 características

indispensables que son:

Programación Web
Consistente: debe ser

similar en todo el sitio
Uniforme: que
sus opciones Visible: El sistema
lleven siempre debe distinguirse
hacia los mismos dentro del sitio,
lugares dentro del com
sitio
Como una buena práctica en el diseño de los sistemas de navegación, se recomienda que
contenga como mínimo los siguientes elementos:
1. Menú General.
2. Pié de Página.
3. Fecha de actualización.
4. Botón que lleve a la página de inicio
5. Botón Mapa del sitio.
6. Sección de contacto.
7. Botón Ayuda.
Para que puedas entender mejor estos temas lee los capítulos uno y dos del
libro 01_No me hagas pensar, de Steve Krug (2006) y el artículo titulado
02_La Navegación y los Esquemas de Organización de la Información de
Pamela Rodríguez (2011), publicado en la revista Software Gurú.
La etapa número cinco. Diseño Visual, ésta es en donde se desarrollara la propuesta

visual del sitio Web, en ella como primer paso se realizara la generación de dibujos que
describan los componentes de cada pantalla, con la finalidad de dar ubicación a cada uno
de ellos dentro del sitio Web.
Una vez concluida esta etapa se deberán utilizar los dibujos generados, como insumo
para la elaboración del diseño gráfico del sitio Web; deberás emplear algún software de
edición grafica como Adobe Photoshop, Adobe Fireworks, o Gimp para generar el
prototipo.
En este punto se deben tener presentes la imagen corporativa, los criterios de usabilidad
y los criterios de accesibilidad.

Programación Web
Para conocer y que te familiarices con las pautas y criterios de accesibilidad

Web, visita la siguiente página:
http://www.w3c.es/Traducciones/es/WAI/intro/accessibility
Para que desarrolles de mejor manera tu sitio Web, puedes realizar la

descarga de las plantillas empleadas para la generación del Diseño
Visual; mismas que encontraras en la sección de material de apoyo en la
plataforma.
Etapa número seis. Codificación y pruebas, en esta etapa convergen todas las etapas
anteriores, la planeación, la navegación, la arquitectura de los contenidos y el diseño
gráfico, todas ellas comienzan a dar forma al proyecto de sitio Web, es muy importante
tomar como referencia las reglas de los estándares Web.
Para comenzar con la codificación, es necesario realizar la selección de las herramientas

para programación, los lenguajes en los que se desarrollará el sitio Web, y la estructura
de la base de datos.
Cuando se desarrolla un sitio Web es necesario realizar algunas pruebas, estas son parte
del control de calidad del sitio, las comúnmente realizadas son:
 Comprobación en navegadores: El primer paso es comprobar que las páginas

se pueden visualizar de forma correcta en diferentes navegadores.
 Comprobar tiempo de descarga: Uno de los puntos claves en el éxito de un sitio
Web es su rapidez de descarga, en base a ello se recomienda un tiempo mínimo
de descarga.
 Detectar los vínculos rotos: Es necesario detectar documentos que no están
conectados a través de vínculos.
Etapa número siete. Validación, en esta etapa el sitio Web será validado en la
codificación y en los estándares, para esto, existen herramientas en línea o de escritorio
que ayudan a realizar esta tarea, algunos programas para el desarrollo de sitios Web
como Adobe Dreamweaver pueden realizar este tipo de tareas para la validación de
código, los puntos importantes que se deben de considerar en las pruebas de validación
son:

Programación Web
 Validación de código HTML en el sitio: http://validator.w3.org/

 Validación de Hojas de Estilo en el sitio Web:
http://jigsaw.w3.org/cssvalidator/
 Validación de Accesibilidad en el sitio Web:
http://walidator.net/uwem/index.es.php
Ahora revisa detenidamente el documento titulado 03_Guía para el

desarrollo de sitios Web de la Administración Pública Federal del Sistema de
Internet de la Presidencia de México (2007), en donde podrás ver con mayor
detalle las etapas de construcción de un sitio Web.
Antes de continuar con el tema realiza la primera actividad de esta Unidad.
Actividad 1. Mapa de navegación
2.2. Estructura de Programación.
En la Unidad anterior se describió un poco acerca del lenguaje HTML, que es el que nos
permite crear páginas Web, este lenguaje está compuesto por etiquetas y atributos, estos
últimos son los que nos permiten modificar en cada etiqueta las opciones por defecto.
Cuando se escribe código HTML los atributos se escriben junto con la etiqueta
correspondiente, dentro de los símbolos <> por ejemplo:
<font face="Arial" color="#000066" size="+2">Este es un ejemplo</font>
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y el

final, mediante las cuales se determina la forma en la que debe aparecer en su navegador
el texto, las imágenes y los demás elementos.
En el ejemplo anterior se encuentra la etiqueta font y los atributos de ésta que son: face,
color y size, cada uno de estos atributos tiene un valor definido entre comillas “” y toda la
etiqueta junto con sus atributos está contenida dentro de los signos <>, después de esta
etiqueta se encuentra el texto Este es un ejemplo y por último encontramos la etiqueta de
cierre que la define una diagonal / y se escribe como </font>.

0
Programación Web
Las etiquetas básicas en HTML 4 son:
<html></html> Al principio y al final de todo documento.

<head> </head> Cabecera del documento. Dentro del head se ponen las etiquetas:
1. <title> </title> Indica el título de la página para el navegador.
2. <meta> permite aportar metainformación al documento, para su mejor
3. identificación e indexación por los motores de búsqueda. Hay distintos tipos:
4. <meta name="description" content="Frase descriptiva de los contenidos de
la página">
5. <meta name="keywords" content="Palabras clave que resuman la temática
de los contenidos de la página”>
6. <body> </body> Dentro de esta etiqueta se insertan los contenidos del
documento
7. La etiqueta <body> puede llevar incluida información sobre las propiedades de la
página, por ejemplo:
8. <body bgcolor="#xxyyzz"> define el color de fondo de la página.
9. <body text="#xxyyzz"> define el color por defecto del texto en la página.
10. <body link="#xxyyzz"> define el color de los enlaces.
11. <body vlink="#xxyyzz"> define el color de los enlaces visitados.
12. <body alink="#xxyyzz"> define el color de los enlaces activos.
13. <body background="imagen.gif"> establece una imagen para el fondo de la
página.
14.  sirve para anotar aclaraciones del programador de la
página. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y
no se muestra en la página.
Para formato de textos
<b> </b> negrita (es igual que la etiqueta

<i> </i> cursiva ( es igual que la etiqueta <em>...</em>)
<u> </u> subrayado
<font size=”X”> ... </font> marca el tamaño de los caracteres, donde X es un valor
del 1 a 7, o un valor relativo (+ 1-7).
<font color=”#XXYYZZ”> ...... </font> define el color del texto, donde XXYYZZ es un
valor formado por letras y números (hexadecimal) que indica el color.

1
Programación Web
<font face=”arial”> ... </font> determina el tipo de la fuente.

La etiqueta <font> puede incluir los tres parámetros (tamaño, fuente y color):
<font size=X color=#XXZZ face=fuente escogida> </font>
Para formato de párrafos
1. <p> salto de párrafo </p>

2. <br> salto de línea
3. <blockquote> </blockquote> sangrado.
4. <center> centrar el texto.
5. <p align=center> párrafo centrado.
6. <p align=left> párrafo alineado a la izquierda.
7. <p align=right> párrafo alineado a la derecha.
Para creación de listas
Lista no numerada:
1. <ul>
2. <li>primer elemento de la lista</li>
3. <li>segundo elemento de la lista</li>
4. <li>tercer elemento de la lista</li>
5. </ul> cierra lista
Lista numerada:
1. <ol>
2. <li>primer elemento de la lista</li>
3. <li>segundo elemento de la lista</li>
</ol> cierra lista.

2
Programación Web
Para lista de glosario o definición:
1. <dl>
2. <dt>término que se va a definir</dt>
3. <dd>definición del término</dd>
4. </dl> cierra lista.
Para líneas horizontales separadoras
1. <hr> línea horizontal.

2. <hr width="x%"> anchura de la línea en porcentaje.
3. <hr width=x> anchura de la línea en píxeles.
4. <hr size=x> altura de la línea en píxeles.
5. <hr align=center> línea alineada en el centro.
6. <hr align=left> línea alineada a la izquierda.
7. <hr align=right> línea alineada a la derecha.
8. <hr noshade> línea sin efecto de sombra.
Para imágenes
1. <img src="dirección de la imagen” "> indica la ruta de la imagen.

2. <img ... border=”X"> establece un borde de X pixels en torno a la imagen.
3. <img ... height="XX" width="YY"> establece un tamaño de la imagen (altura y
anchura) en pixels.
4. <img ... alt="texto explicativo"> se muestra un texto al pasar el cursor sobre la
imagen.
5. <img ... align="bottom"> alineación inferior del texto respecto de la imagen.
6. <img ... align="middle"> alineación del texto en el medio de la imagen.
7. <img ... align="top"> alineación superior del texto respecto de la imagen.
8. <img ... align="left"> alineación izquierda de la imagen en el párrafo.
9. <img ... align="right"> alineación derecha de la imagen en el párrafo.
10. <img ... hspace=X> espacio horizontal entre la imagen y el texto.
11. <img ... vspace=y> espacio vertical entre la imagen y el texto.

3
Programación Web
Para creación de links
1. <a href=”http://www.servidor.com/directorio/pagina.htm”> enunciado del

enlace</a>
2. <a href=”mailto:dirección de mail”> vínculo a una dirección de correo
electrónico.
Para tablas
1. <table>......</table> define dónde comienza y termina la tabla

2. <table width="XX %"> determina la anchura de la tabla. Puede darse en píxeles
(no lleva el símbolo %), o en porcentaje de la página.
3. <table height="XX> determina la altura de la tabla en píxeles.
4. <table border="X"> establece el grosor en píxeles del borde de la tabla
5. <table cellspacing="X"> define el espacio en píxeles entre las celdas
6. <table cellpadding="X"> define el espacio en píxeles entre el borde y el texto
7. <tr>......<tr> determina cada una de las filas de la tabla
8. <td>......</td> determina cada una de las columnas dentro de las filas
A continuación se muestra el código HTML de una página Web que contiene elementos
como tablas, links y texto.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Hola</title>
</head>
<body>
<p>Hola mundo.</p>
<table width="200" border="1">
<tr>
<td>Celda 1 </td>
<td>Celda 2 </td>

4
Programación Web
</tr>
<tr>
<td>Celda 3 </td>
<td>Celda 4 </td>
</tr>
</table>
<p><a href="http://www.w3c.es/">Visita las normás del W3C </a></p>
</body>
</html>
HTML en su versión 5 introduce nuevos elementos que facilitan programar la estructura

de las páginas Web, esto es debido a la inclusión de nuevas etiquetas, con un significado
semántico, para la representación de cada una de las diferentes secciones que puede
contener una página, por ejemplo:
<header> El elemento header debe utilizarse para marcar la cabecera de una página
(contiene el logotipo del sitio, una imagen, o un cuadro de búsqueda).
El elemento header puede estar anidado en otras secciones de la página (es decir que no
solo se utiliza para la cabecera de la página).
<nav> El elemento nav representa una parte de una página que enlaza a otras páginas o
partes dentro de la página. Es una sección con enlaces de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav;
únicamente las secciones que consisten en bloques de navegación más importantes son
adecuados para el elemento de navegación.
<section> El elemento section representa un documento genérico o de la sección de

aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos.
Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que
incluya su propio encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para una
introducción, noticias, información de contacto.
<footer> El elemento footer se utiliza para indicar el pié de la página o de una sección. Un
pie de página contiene información general acerca de su sección el autor, enlaces a
documentos relacionados, datos de derechos de autor.

5
Programación Web
<aside> El elemento aside representa una nota, un consejo, una explicación. Esta área
es representada a menudo como barras laterales en las revistas impresas.
El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o
barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro
contenido que se considera por separado del contenido principal de la página.
<article> El elemento article representa una entrada independiente en un blog, revista,

periódico.
Cuando se anidan los elementos article, los artículos internos están relacionados con el
contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta
comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro
bloque article anidado con los comentarios de los usuario.
Puede darse interactividad en la validación de los formulario con las etiquetas: Telephone,
Url, Email, Password, Datetime, Date, Month, Week, Number, Range, Color.
Incluso la forma de integrar video es con una etiqueta propia <video> y los parámetros:
 autoplay Para que el video se reproduzca automáticamente. Puede tener valor

TRUE o FALSE.
 controls Para que se muestre barra de control debajo del video.
 height Altura del video.
 width Ancho del video.
 loop El video se reproduce de manera repetitiva.
 poster Imagen si el video no está disponible.
 preload Controla si el video es precargado. Puede tener 3 valores: none,
metadata o auto.
 src Indica la URLl del video
Actualmente los navegadores comerciales sólo soportan el formato de

video Vorbis OGG y MP4
A continuación se muestran 2 bloques de código en donde se introduce un elemento de

video, el primero de ellos es en HTML4 y el segundo en HTML5

6
Programación Web
Ejemplo de video con HTML4
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425"

height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi
on=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param
name="allowscriptaccess" value="always" /> <param name="src"
value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param
name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash"
width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"
allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Ejemplo de video con HTML5
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4"

controls autobuffer></video>
Descarga los ejemplos HTML5 aplicados a audio, video y formularios,

para que observes su funcionamiento y aplicación, estos archivos los
puedes encontrar en el material de apoyo que se encuentra en la
plataforma.
Recuerda que para el funcionamiento correcto de estos ejemplos es

necesario que tu navegador Web este actualizado en su versión
más reciente.
Las páginas Web no son sólo informativas, también existen sitios Web en donde la
interactividad, el manejo de la información y su almacenamiento es la parte más
importante, ejemplo de esto serian los Sitios Web de comercio electrónico, o los Sitios
Web de noticias, en donde el nivel de interacción con el usuario y la información debe ser

7
Programación Web
mayor, en estos casos no sólo se emplea el lenguaje HTML, también se emplean otros
lenguajes de programación como PHP (Preprocesador de Hiper-Procesos) o Java Script.
Continuando con el tema de la estructura de programación ahora veremos otros tipos de

lenguajes de programación, pero antes lleva a cabo las siguientes actividades.
Actividad 2. Foro de intercambio de etiquetas.
Actividad 3. Sitio Web estático
En el año de 1994, Rasmus Lerdorf

desarrolló el lenguaje de programación
Web PHP, como un archivo CGI (Common
Gateway Interface “Interfaz de Entrada
Común”) escrito en lenguaje C que permitía
el uso de comandos en el servidor por
medio de una página Web, inicialmente fue
llamado Personal Home Page Tools
(Herramientas para paginas personal) ;
Con el paso del tiempo este lenguaje se ha
convertido en uno de los más populares
para el desarrollo de sitios Web, por su
Rasmus Lerdorf Creador de PHP.
facilidad de aprendizaje, estabilidad y
Recuperado de: https://twitter.com/rasmus
costo.
Antes de comenzar con este repaso, es importante hacer mención acerca de los editores
Web (más adelante retomaremos a fondo este tema). Para escribir código en el lenguaje
de programación PHP no es necesario hacer uso de ningún editor Web, se puede
programar con el bloc de notas, o con WordPad, de manera más profesional se podría
emplear algún software especializado como Adobe Dreamweaver, Kompozer
SketchDeluxe o Notepad++.
Para que puedas probar los ejemplos que emplearemos, es

necesario que esté instalado en tu computadora el lenguaje de
programación PHP, el servidor Web Apache y la base de datos
MySQL.

8
Programación Web
Puedes usar como guía el siguiente video “Descargar Xamp” que se

encuentra en el material de apoyo; y el software lo puedes descargar del
siguiente sitio: http://www.apachefriends.org/es/xampp.html
Si deseas instalar este servidor en un sistema operativo Linux o Unix, lee

el capítulo 04_Obtener e Instalar Apache., del Libro de Kabir, M. (2003) La
biblia del servidor Apache 2.
Para iniciar, es indispensable que todo código escrito en PHP tenga dos cabeceras, una
de inicio y la otra de cierre del bloque de código, estas pueden ser:
1. <? ?>
2. <% %>
3. <?php ?>
4. <script language="php"> </script>
Para los ejemplos que se mostraran emplearemos <?php y ?>, debido a que son usadas
con mayor frecuencia en el desarrollo de scripts en PHP
El uso de las variables en PHP es igual que en cualquier otro lenguaje de programación
ya que son el “lugar” donde se guardan los datos numéricos y alfanuméricos.
El siguiente bloque de código muestra el uso de algunas variables
<?php
$pesos=100;
$texto="Hola Mundo";
$arreglo[1]="Programación de Sitios Web";
$aprender=TRUE;
?>

9
Programación Web
Es importante mencionar que todas las sentencias en PHP

terminan con un punto y coma: (;) y que existe EXCEPCIÓN
en: las cabeceras y algunas sentencias como los
condicionales o los bucles.
En el bloque de código anterior, podemos apreciar en primer lugar que se está haciendo
uso de las cabeceras <?php ?>, después, entre ambas cabeceras, se han definido 4
variables que son:
 Una variable numérica llamada pesos.

 Una variable alfanumérica llamada texto
 Un arreglo o matriz llamado arreglo.
 Una variable de tipo booleano llamada aprender.
Dentro del lenguaje PHP las variables deben de cumplir con los siguientes puntos:
Todas las variables deben de tener un nombre, y antes del nombre de ésta se antepone el
signo de pesos “$”.
Después se sigue con la equivalencia, poniendo un igual y el valor.
Cuando se pone el valor, se define además, el tipo de variable (excepto en el caso de los
arreglos, que pueden ser numéricas, alfanuméricas e incluso booleanas, y se definen al
poner el número de la variable detrás del número entre dos corchetes “[“y “]”).
Si se introduce un número, no va entre comillas, y puede ser entero (números sin

decimales) o real (números con decimales).
Si se introduce un dato alfanumérico (letras o números y letras), se introduce entre

comillas, y es una cadena, o normalmente conocida entre programadores por string
debido a su nombre en inglés (puede que te suene si ya has programado en otro
lenguaje, como por ejemplo C/C++ o Visual Basic)
Si se introducen varios datos, se crea una tabla, también conocida como array o matriz.
En este caso, se define en el nombre de la variable, escribiendo al final el número o la
palabra (o ambas) que identificaran al array entre corchetes. Por ejemplo:

0
Programación Web
<?php
$arreglo[1]="Programacion de Sitios Web ";
?>
Finalmente, tenemos los booleanos, que sólo admiten dos valores: TRUE (verdadero) y
FALSE (falso). Para definirlos, simplemente tenemos que escribir la palabra TRUE o
FALSE.
Una vez que te has familiarizado con la forma en la que se definen las variables puedes
comenzar a realizar algunas operaciones matemáticas básicas, para esto sólo necesitas
conocer los operadores aritméticos y emplear el uso de variables, la siguiente tabla
muestra los operadores aritméticos empleados en el lenguaje PHP:
Operador Función
+ Sumar dos valores entre sí
- Restar dos valores entre sí
* Multiplicar dos valores entre sí
/ Dividir dos valores entre sí
% Resto de la división de dos valores
++ Incrementa en uno un valor o variable (se utiliza $variable++)
-- Decrementa en uno un valor o variable (se utiliza $variable--)
Cuando se realiza una operación es simplemente utilizar los operadores aritméticos y

almacenar el resultado en una variable. El siguiente ejemplo muestra el uso de
operadores aritméticos y variables:
<?php
/* Operaciones Aritméticas */
$valor1=12;
$valor2=2;
$operacion=$valor1 - $valor2 + 5; //Doce menos dos más cinco igual a quince
?>
Si ahora imprimiésemos la variable $operacion con la función echo() y la visualizáramos

en nuestro navegador web se mostraría el número 5.

1
Programación Web
También se podría hacer uso de las variables y los operadores de la siguiente manera:
<?php
/* Prueba de “operadores rápidos” */
$prueba1=18;
$prueba2=20;
$prueba1+=5; //El resultado seria 23
$prueba2/=4; //El resultado seria 5
?>
A esta forma de usar las variables y los operadores se le llama operadores rápidos.
Dentro del lenguaje PHP existen bloques de código llamados funciones que son las que
nos permiten realizar diferentes acciones, como por ejemplo imprimir un texto o conectar
a una base de datos, algunas de las funciones más usadas son:
Nombre de la función Trabajo que realiza

echo() Imprime texto
print() Imprime texto (igual que echo)
rand() Genera un número aleatorio
setcookie() Trabajar con las cookies y otra variables del servidor
mysql_connect() Conecta a un servidor MySQL
mail() Usada en el envío de correo electrónico
Las funciones echo() y print() son completamente iguales, pero por orden se debe de
utilizar la funcion print() cuando solo sea una variable, y echo cuando se requiera imprimir
varias variables.
En la versión 5.5 de PHP existen más de nueve mil funciones que

van desde el imprimir un texto hasta complejas conexiones
empleando protocolos de Internet, interacción con bases de datos,
e incluso con sistemas operativos. Visita el siguiente link en donde
encontraras la lista completa de funciones del lenguaje PHP y sus
ejemplos de uso
http://www.php.net/manual/es/indexes.functions.php

2
Programación Web
Para conocer sus funciones te recomendamos descargar el manual completo de

php 5.5 en español, puedes encontrarlo en el siguiente link
http://www.php.net/get/php_manual_es.html.gz/from/mx1.php.net/mirror
En el siguiente ejemplo se muestra un código que simula el tiro de un dado de 12 caras,

haciendo uso de las funciones print(), echo() y rand() observa como en este ejemplo
interactúan algunas etiquetas del HTML con código PHP.
<?php
/* Tirada de Dados */
$caras_dado=12;
$resultado=rand(1, $caras_dado);
echo “Hola! Bienvenido a la tirada de dados. Utilizaremos un dado de 12 caras en
esta ocasión. <br><br>en tu tirada has sacado:<br>”;
print $resultado;
echo “<br><br>suerte”;
?>
Dentro de todo lenguaje de programación existen las estructuras de control o

condicionales, PHP también hace uso de ellas y son empleadas de la siguiente manera:
Condicional IF/ELSE. Es recomendable utilizarlo cuando se hace uso de pocos valores.
Básicamente, lo que hace el condicional IF es:
Si_pasa(esto) {
se hace esto
}en_caso_contrario{
se hace esto otro
}

3
Programación Web
En el condicional IF se pueden utilizar diferentes operadores de comparación que son:
Operador Significado
$a==$b Es correcto si el primer valor ($a) es igual al segundo ($b)

$a===$b Es correcto si el primer valor ($a) es idéntico (las dos variables son del
mismo tipo y tienen el mismo valor) que el segundo valor ($b)
$a!=$b Es correcto si el primer valor ($a) no es igual al segundo ($b)
$a!==$b Es correcto si el primer valor ($a) no es idéntico (las dos variables son de
tipos diferentes y con distintos valores) que el segundo valor ($b)
$a>$b Es correcto si el primer valor ($a) es mayor que el segundo ($b)
$a<$b Es correcto si el primer valor ($a) es menor que el segundo ($b)
$a>=$b Es correcto si el primer valor ($a) es mayor o igual que el segundo ($b)
$a<=$b Es correcto si el primer valor ($a) es menor o igual que el segundo
A continuación se muestra un ejemplo de código en PHP con un IF:
<?php
$a=1;
$b=2;
if($a<=$b) {
echo “La variable $a es menor que la variable $b”;
}else{
echo “La variable $a no es menor que la variable $b”;
}
?>
Dentro de IF también existe el else if, para evitar escribir demasiados IF´s seguidos, un
ejemplo seria:
<?php
$a=1;
$b=2;
if($a<$b) {
echo “La variable $a es menor que la variable $b”;

4
Programación Web
}elseif ($a==$b) {
echo “La variable $a es igual que la variable $b”;
}elseif ($a>$b) {
echo “La variable $a es mayor que la variable $b”;
}
?>
El siguiente condicional es el SWITCH, generalmente es empleado cuando son

comparadas más de dos variables, funciona como su nombre indica (del inglés switch,
“interruptor”).
Básicamente funciona seleccionando una variable, y escogiendo las acciones que se

realizarán si el valor de la variable indicada es x.
Un ejemplo seria, realizando la tirada de un dado en la cual se mostrara una imagen de

acuerdo con el resultado:
<?php
/* Tirada de Dados */
$caras_dado=6;
$resultado=rand(1, $caras_dado);
echo “Hola! Bienvenido a la tirada de dados. Utilizaremos un dado de 6 caras en esta

ocasión.<br><br>En tu tirada has sacado:<br>”;
switch($resultado) {
case 1:
echo '<img src="/dado06_01.jpg">';
break;
case 2:
break;
case 3:

5
Programación Web
break;
case 4:
break;
case 5:
break;
case 6:
break;
default:
echo '<img src="/error.jpg">';
break;
}
echo “<br><br>Suerte”;
?>
En este ejemplo se va pasando la variable $resultado por los diferentes valores, entre
cada uno de los 6 resultados posibles.
Es importante que observes la última instrucción ya que no es un case x, sino default.

Cuando se llega a este valor, significa que la variable no es ninguno de los datos que
hemos ofrecido previamente. Normalmente se utiliza para errores.
El siguiente es el bucle while, recordemos que un bucle es la repetición de una o varias

acciones mientras se cumplan una condición determinada. Su significado (while, en inglés
es “mientras”). A continuación se muestra un ejemplo:
<?php
$var=12;
while($var!=15) {
echo(“La variable $var aún no es 15; es “ . $var);

6
Programación Web
$var++;
}
echo(“La variable $var ya es 15“);
?>
Si se programa de manera incorrecta el bucle WHILE podría no cumplir nunca la

condición y se ejecutaría de manera indeterminada o infinita.
Para evitar este problema se emplea DO/WHILE este bucle es prácticamente igual que el
bucle WHILE, con una única diferencia: se cumpla o no se cumpla la condición, siempre
se ejecuta una vez (si se cumple la condición se ejecuta en más ocasiones, pero por lo
menos una vez).
A continuación se muestra el ejemplo empleado en el bucle WHILE, ahora haciendo uso

de DO/WHILE:
<?php
$var=12;
do {

$var++;
} while($var!=15)
?>
La estructura usada es:
do {
acciones
} while(condición)

7
Programación Web
El ultimo bucle es FOR en su estructura es muy parecido al bucle WHILE, aunque es

principalmente utilizado para operaciones numéricas. Una de sus ventajas es que permite
expresar varios parámetros en la condición, esto puede ahorrar varias líneas de código.
En el siguiente ejemplo se muestra el mismo código empleado en los ejemplos anteriores

pero ahora usando FOR”:
<?php
for($var=12;$var!=15;$var++) {
}
?>
La condición del bucle se divide en tres sectores:
1. Declaración de la variable ($var=12;)

2. Condición del bucle ($var!=15;)
3. Acción a realizar a cada vuelta del bucle ($var++)
Su estructura es:
for (declaración;condición;acciones) {
acciones
}
No es obligatorio incluir en la condición la declaración de la variable o la acción que

realiza en cada ejecución del bucle.
Ahora que ya aprendiste como es que se emplean las estructuras básicas de

programación en PHP y visitaste el link de la documentación para revisar su listado de
funciones, podemos concluir que con este lenguaje se puede realizar diversas tareas
como procesar la información de formularios, generar páginas con contenidos dinámicos,
o enviar y recibir correos electrónicos, y que existen 3 campos en los que comúnmente se
emplean estos scripts:
1. Scripts del lado servidor (Interacción con bases de datos, mail, entre otros.)
2. Scripts de línea de comando (Empleados para la administración de sistemas
operativos de servidor a través de interfaces Web)
3. Scripts para aplicaciones gráficas.

8
Programación Web
Descarga los ejemplos PHP que fueron utilizados para esta explicación y
verifica su funcionamiento. Recuerda que para el funcionamiento correcto de
estos ejemplos es necesario tener instalado el servidor Web Apache, el
lenguaje de programación PHP y colocar los scripts en el directorio www o
htdocs.
Otro lenguaje empleado para el desarrollo de sitios Web interactivos es Java Script,
debes recordar que a diferencia de PHP este lenguaje se ejecuta en el navegador web del
cliente.
Nació en los años 90’s cuando se iniciaba el desarrollo de aplicaciones Web con mayor
complejidad. En esa época las personas para conectarse a Internet, utilizaban módems
que otorgaban una velocidad de conexión total de 56 Kbps (Kilo Bits por Segundo).
Debido a esas limitantes, era necesario un lenguaje que no tuviera que realizar una
petición hasta el servidor y esperar respuesta. De esta forma, nació Java Script, que
cubría muchas necesidades, este lenguaje se ejecutaba en el navegador del usuario y no
en el servidor, acelerando así todo el proceso; Actualmente Java Script se sigue
empleando para programar algunos efectos visuales junto con HTML5 o interactividad en
los sitios Web.
Incluir código Java Script en HTML es muy sencillo, a continuación se mostraran algunas
formas de hacerlo:
 Java Script en el mismo documento HTML

 Colocando las etiquetas <script> y </script> se puede incluir en cualquier parte del
documento.
 Se recomienda usar este código en la cabecera del documento dentro de las
etiquetas <head> y </head>
 Dentro de esta parte del código se debe añadir el atributo type y según el
estándar, el valor que debe agregarse es text/javascript.
Por ejemplo:
<html>
<head>
<script type="text/javascript">
document.write("Ingenieria en Telamática");
</script>
</head>

9
Programación Web
<body>
<p>Texto en HTML</p>
</body>
</html>
Mostrando en el navegador el siguiente resultado:
Java Script en los elementos HTML
Para realizar esto se introducen instrucciones de código Java Script dentro de etiquetas
HTML, esto ocasiona que cuando se accionan los elementos mediante un evento del
usuario se ejecute el script. Actualmente esto no es muy usado ya que no es una buena
práctica de programación.
<html>
<head>
<meta content="text/html; charset=iso-8859-1" />
<title>JavaScript en el documento</title>
</head>
<body>
<p onclick="alert('Ingeniería en Telemática')">Texto del párrafo.</p>
</body>
</html>
El resultado se muestra en la imagen cuando se hace clik en el texto.
Resultado en el navegador del ejemplo 2

0
Programación Web
Java Script en un archivo externo
Esta se considera la mejor práctica de programación ya que de esta manera el código es

separado y limpio, es más manejable para la realización de cambios y posible su
reutilización, ya que se tiene un archivo exclusivo para código Java Script.
Se enlaza con la etiqueta <script> a un documento HTML y no hay límite de cantidad de

archivos. Se define el atributo src donde se indica la ubicación del archivo a enlazar (en
Java Script archivo con extensión .js).
En el siguiente ejemplo se muestran 2 archivos, uno llamado script.js y otro documento

en formato HTML que invocara al primero para su ejecución.
//script.js
for (a=1; a<=6; a++){
document.write('<h' + a + '>Ingeniería en Telemática escrita en nivel ' + a);
document.write('</h' + a + '>');
}


<html>
<head>
<title>Ejemplo</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Texto del archivo.</p>
</body>
</html>

1
Programación Web
Mostrando en el navegador el siguiente resultado:
Resultado en el navegador del ejemplo 3
Java Script utiliza palabras reservadas las cuales son:
break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof,
new, return, switch, this, throw, try, typeof, var, void, while, with. Puedes notar que son las
mismas estructuras que se emplean en PHP
La sintaxis es similar a la de PHP aunque existen algunos aspectos importantes que se

deben de considerar los cuales son:
 Distingue entre mayúsculas y minúsculas.

 Los espacios en blanco (tabulaciones y nuevas líneas) son ignorados: Para
ordenar el código se puede tabular, crear nuevas líneas para una misma
instrucción, añadir espacios, etc. ya que el intérprete ignorará cualquier espacio en
blanco, esperando el final de la instrucción.
 Las instrucciones finalizan en punto y coma: Aunque no sea obligatorio para todas
las sentencias, sí lo es para una gran parte de las instrucciones.
 Utilizar un punto y coma para finalizar cada instrucción, mantendrá el orden y es
considerado una buena práctica de programación.
 No se define tipo de variable: Una variable puede almacenar diferentes tipos al
ejecutar un script ya que son de tipo dinámico.
 Uso de comentarios: Se pueden añadir para documentar el código como una
buena práctica ya que al igual que en otros lenguajes, éstos no se mostrarán en
pantalla.

2
Programación Web
//comentarios de una sola línea

alert("Ingeniería en Telemática");
/*De esta manera podemos añadir comentarios
de varias líneas cuando se necesite detallar
mucha información*/
alert("Programación de Sitios Web");
Las variables están destinadas a almacenar datos. Para declarar una variable, se
antecede a ésta, la palabra reservada var. Java Script también permite el uso de variables
sin previa declaración. Cualquier variable definida en el ámbito del documento, será
interpretada como variable global, pudiendo accederse a ella dentro de cualquier función.
Sin embargo, una variable definida dentro de una función, no será accesible fuera de ella.
El símbolo utilizado para la asignación es =.
Es muy recomendable declarar todas las variables que se usen en los scripts.
Las variables, en Java Script son del mismo tipo que en lenguaje PHP:
Numéricas:
El valor se asigna directamente si es int (entero) o si es float (decimal) donde se coloca un
punto en vez de la coma.
var foo = 90;

var bar = 75.8;
Cadenas de texto:
Se utiliza comillas simples 'texto' o dobles "texto" para delimitar su inicio y fin.
var foo = 'Hola Mundo!';
Booleanas:
Toma valores true o false (verdadero o falso).
var foo = true;
Arrays: Se puede colocar una colección de datos que pueden ser o no del mismo tipo:

3
Programación Web
var meses = ['Enero', 'Marzo', 'Mayo', 'Julio', 'Setiembre', 'Noviembre'];

var datos_persona = ['Ruth', 'Hernández', 25, 'México', false];
Desde cualquier elemento HTML se puede llamar a una función o instrucción Java Script.
Entre los eventos más habituales, se pueden encontrar:
Onclick:
Este evento se ejecuta cuando el usuario pulsa el botón izquierdo del ratón sobre el
elemento. Es un evento disponible desde la mayoría de los elementos HTML.
Por ejemplo:
<p onclick="alert('Ingeniería en Telemática');">Clic aquí</p>


<input type="radio" name="opcion" value="SI"
onclick="alert('Elegiste la opción SI');"/>
onkeydown / onkeyup
El usuario pulsa una tecla / el usuario levanta “el dedo” de una tecla :) Mayormente se
utiliza en campos de formulario.
Por ejemplo:
<input type="text" name="edad" onkeyup="alert('escribiste texto');"/>
onchange
En un campo de formulario, por ejemplo un select, se refiere a cuando el usuario, cambia
la opción seleccionada.
Por ejemplo:
<select name="estado" onchange="alert('Cambiaste de opción');">

<option>México</option>
<option>Zacatecas</option>
<option>Veracruz</option>
</select>

4
Programación Web
En Java Script al igual que en cualquier otro lenguaje de programación se puede hacer
uso de sentencias condicionales como por ejemplo if/else:
// archivo .js
function mostrar_u_ocultar() {
// si boton1 está checkeado
if(document.getElementById('boton1').checked == true) {
// oculta el campo texto1
document.getElementById('texto1').style.display = 'none';
// muestra el campo texto2
document.getElementById('texto2').style.display = 'block';
// si no está checkeado
} else {
// muestra el campo texto1
document.getElementById('texto1').style.display = 'block';
// oculta el campo texto2
document.getElementById('texto2').style.display = 'none';
}
}
<form>
<input type="radio" name="opcion" id="boton1" value="1"
onclick="mostrar_u_ocultar()"/> 1<br/>
<input type="radio" name="opcion" id="boton2" value="2"
onclick="mostrar_u_ocultar()"/> 2<br/>
Texto 1: <input type="text" name="texto1" id="texto1"/><br/>
Texto 2: <input type="text" name="texto2" id="texto2"/><br/>
</form>
Cómo pudiste observar en los ejemplos, existen similitudes entre los scripts desarrollados
en Java Script con los scripts desarrollados en PHP y con la forma en que son declaradas
las variables, no debes de confundirte cuando hagas uso de estos lenguajes pues cada
uno de ellos tiene una finalidad diferente.
Existen herramientas que pueden facilitar las tareas de programación de un sitio Web;
escribir aplicaciones para Internet podría convertirse en una tarea muy compleja que
involucre tiempo y esfuerzo, imagina el tener que diseñar y programar formularios en
HTML, consultas a bases de datos, controles de validación / error o probar una aplicación,
sin una herramienta que nos ayude en esta labor, esto sería muy tardado, el tiempo que
lleva generar esto se traduce en dinero, debido a esto existen herramientas generadoras
de código que nos ayudan a desarrollar esta tareas de una manera más rápida y sencilla
automatizando procesos de pruebas y ayudando a generar automáticamente todo el

5
Programación Web
HTML necesario, Hojas de estilos (CSS Cascading Style Sheets) y los archivos PHP que
conformaran nuestro proyecto.
Descarga los ejemplos de JScript que fueron utilizados para esta explicación y
verifica su funcionamiento. Puedes encontrarlos en el material de apoyo.
A continuación, se muestran algunos de los más potentes generadores de código PHP:
ScriptCase: Es un generador de código PHP, funciona a través de una interfaz Web, en

donde el desarrollador puede generar aplicaciones Web como formularios web, informes
HTML, aplicaciones de bases de datos, informes pdf, menús, cuadrículas editables,
páginas de ayuda Web, gráficos FLASH, componentes de auto-completado, páginas
maestro / detalle y algunas cosas más. Esta herramienta puede obtenerse en su versión
de prueba desde su sitio web en la siguiente dirección: http://scriptcase.net/download-
scriptcase/
PHP MySQL Wizard: Es un generador de código PHP, en el cual se pueden desarrollar

aplicaciones Web con interactividad en una base de datos MySQL. Su asistente tiene
muchas características, es totalmente. Esta herramienta puede obtenerse en su versión
de prueba desde su sitio web en la siguiente dirección:
http://softgalaxy.net/phpmysql/index.html
PHPMaker : Es una herramienta de automatización que puede generar un conjunto

completo de paginas PHP de manera rápida, esta herramienta soporta conexiones e
interacción con diversas bases de datos como: MySQL, PostgreSQL, Microsoft Access y
bases de datos Microsoft SQL Server. Una ventaja sobre algunas otras herramientas de
este tipo es que los códigos generados son limpios, sencillos y fáciles de personalizar. .
Esta herramienta puede obtenerse en su versión de prueba desde su sitio Web en la
siguiente dirección: http://www.hkvstore.com/phpmaker/download.asp
AppGini PHP Generator for MySQL: Es una herramienta para desarrollar aplicaciones
Web con interactividad a bases de datos. La aplicación se puede personalizar fácilmente
con plantillas CSS y HTML. Puedes realizar la descarga de este software desde la
siguiente dirección: http://bigprof.com/appgini/download
ScriptArtist: Es un software generador de código PHP y AJAX para MySQL. Para el

desarrollo de aplicaciones web. Disponible en su versión de prueba desde el sitio Web:
http://www.scriptartist.com/

6
Programación Web
Adobe Dreamweave: Es un software que está orientado a la construcción, diseño y

edición de sitios Web basados en estándares, genera distintos tipos de código entre los
que podemos mencionar HTML, Java Script, PHP, ASP, JSP, además de que puede
soportar conexiones a diversas bases de datos.
Dreamweaver es un software denominado WYSIWYG, (What You See Its What You Get
“Lo que tú ves es lo que tu obtienes”), ya que tiene una interface grafica en la que se
diseña, maqueta y construye toda la aplicación web generando de manera automática el
código de esta. Disponible en su versión de prueba desde el sitio Web:
http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=es
2.3. Manipulación a bases de datos.
La combinación de PHP junto con la base de datos MySQL es utilizada por un gran
número de sitios Web, debido a la potencia que se consigue utilizando estas dos
aplicaciones juntas.
Ahora, se explican las instrucciones más importantes, para trabajar entre PHP y la base
de datos MySQL, a través de ellas podrás realizar tareas como la conexión a la base de
datos, inserción y eliminación de registros, y consultas en las tablas de la base.
Para conectar desde PHP a una base de datos creada en MySQL, se hace uso de la
instrucción mysql_connect ( ), que debe de ser acompañada por tres parámetros:
1. El host en donde se encuentra la base de datos

2. Nombre del usuario de la base de datos.
3. Contraseña de la base de datos.
Cuando se trabaja de manera local, el parámetro de host será, por defecto “localhost” o,
"127.0.0.1", y el nombre de usuario y contraseña serán los que se utilizan para administrar
la base de datos.
A continuación se muestra un ejemplo del código empleado para la conexión a una base
de datos MySQL empleando PHP
<?php
//conectar.php
$host = 'localhost';
$usuario = 'usuario';//coloca el usuario de tu base de datos
$password = 'password';//coloca la contraseña del usuario

7
Programación Web
$datos_conexion = mysql_connect($host, $usuario, $password);

?>
Esta es la primera acción que se debe de realizar cuando se trabaja con PHP y una
base de datos MYSQL. Preferentemente se debe guardar en un archivo independiente, y
después incluirlo en nuestras páginas en las que sea necesario conectar a una base de
datos, de esta manera se realiza el reusó de código.
Por ejemplo, si se escriben 10 páginas en las que se debe conectar con una base de
datos, se evita 60 líneas de código (6 líneas por cada 10 páginas). Incluyendo el archivo
sonde declaramos la conexión haciendo uso de la instrucción include ( ).
Un problema muy frecuente con el uso de esta función es que los datos de conexión que
se utilizan no sean los correctos.
El siguiente paso después de haber realizado la conexión es el de seleccionar una base

de datos, y esto se logra mediante la instrucción mysql_select_db, en el siguiente bloque
de código muestra un ejemplo en el que se utiliza la función include, en donde se invoca
el archivo de conexión llamado conectar.php y se utiliza la función mysql_select_
<?
include "conectar.php";
mysql_select_db ("prueba", $datos_conexion);
?>
Podemos ver en el ejemplo como se emplea la función mysql_select_db en la cual se

selecciona una base de datos llamada prueba.
Una vez que se logre realizar la conexión y seleccionar una base datos por medio de PHP
lo siguiente será ejecutar cualquier tipo de consulta sobre la base de datos y reflejarla
en la página web, para ello se hace uso de del lenguaje SQL (Structured Query Language
“Lenguaje de Consulta Estructurado”); Este lenguaje, es el estándar de comunicación con
las bases de datos, y nos permiten realizar las operaciones básicas de una forma
universal. Las sentencias de este lenguaje están clasificadas en tres grupos
denominados:
DML = Data Manipulation Language “Lenguaje de Manipulación de Datos”

DDL = Data Definition Language “Lenguaje de Definición de Datos”
DCL = Data Control Language “Lenguaje de control de Datos”

8
Programación Web
Data Manipulation Language “Lenguaje de Manipulación de Datos”
1. SELECT = Recupera datos de la base de datos.

2. INSERT = Añade nuevas filas de datos a la base de datos.
3. DELETE = Suprime filas de datos de la base de datos.
4. UPDATE = Modifica datos existentes en la base de datos.
Data Definition Language “Lenguaje de Definición de Datos”
1. CREATE TABLE = Añade una nueva tabla a la base de datos.

2. DROP TABLE = Suprime una tabla de la base de datos.
3. ALTER TABLE = Modifica la estructura de una tabla existente.
4. CREATE VIEW = Añade una nueva vista a la base de datos.
5. DROP VIEW = Suprime una vista de la base de datos.
6. CREATE INDEX = Construye un índice para una columna.
7. DROP INDEX = Suprime el índice para una columna.
8. CREATE SYNOYM = Define un alias para un nombre de tabla.
9. DROP SYNONYM = Suprime un alias para un nombre de tabla.
Data Control Language “Lenguaje de control de Datos”
1. GRANT = Concede privilegios de acceso a usuarios.

2. REVOKE = Suprime privilegios de acceso a usuarios
3. COMMIT = Finaliza una transacción.
4. ROLLBACK = Aborta una transacción.
La mayoría de las sentencias que son usadas en SQL tienen una estructura similar, todas
están compuestas por expresiones como select, insert, update o create; y por una
cláusula o cláusulas del tipo from,o where que son las que indicaran los datos con los
que se interactuara.

9
Programación Web
Ejemplo de Expresión SQL
Para el desarrollo de tu proyecto y la ejecución de estos ejemplos es

necesaria la base de datos MySQL, si deseas instalarla por separado del
servidor Web y el lenguaje de programación PHP puedes leer el 05_ Manual
de instalación de MySQL (2003) que puedes encontrar en el material de
consulta.
En el siguiente ejemplo se utiliza una base de datos llamada clientes la cual contiene una
tabla llamada datos y la información contenida en esta tabla se encuentra en 3 campos
llamados nombre, dirección y teléfono.
+--------------------------------------------------------+----------------------------------------------------------------+-------------------
| Nombre | Direccion | Telefono
+--------------------------------------------------------+----------------------------------------------------------------+--------------------
+
| HERNANDEZ ROSAS ANA RUTH | CALLE 1 NUMERO 77 | 5511223344 |
| LEON JUAREZ ANDREA DAYAN | CALLE ROSAS DE ABRIL NUMERO 88 | 5522336699 |
| MARTINEZ MARTINEZ ERICK | CALLE 33 NUMERO 22 | 5544887722
| MARTINEZ VELAZQUEZ MIGUEL ANGEL | CALLE ILUSTRACIÓN NUMERO 2 | 5511223366 |
|
+----------------------------------------------------------+-------------------------------------------------------------+------- --------------
Datos contenido en la base clientes
También se emplean 2 páginas escritas en PHP llamadas conecta.php (contiene todos

los datos de conexión) y consulta.php en la cual se invoca a conecta.php y se realiza la
consulta e impresión de los datos contenidos en la tabla datos de la base de datos de
ejemplo.
//Declaración de la conexión a la base de datos

//conecta.php
<?php
$host = 'localhost';
$usuario = 'root';
$password = 'toor';
$datos_conexion = mysql_connect($host, $usuario, $password);

0
Programación Web
?>
//consulta.php
<html>
<body>
<?php
include "conecta.php";
mysql_select_db ("clientes", $datos_conexion);
$result = mysql_query ("SELECT nombre, direccion. telefono FROM datos", $datos_conexion);
echo "Nombre : ".mysql_result($result, 0, "nombre").”<br>";
echo "Dirección : ".mysql_result($result, 0, "direccion").”<br>";
echo "Telefóno: ".mysql_result($result, 0, "telefono").”<br>";
?>
</body>
</html>
Obteniendo como resultado:
Resultado de la consulta visualizado desde el navegador
No se muestra el contenido completo de la tabla ya que solo se indicó que debería de

imprimir el primer registro en la sentencia echo "Nombre: ".mysql_result($result, 0,
"nombre").”<br>"; el 0 indica el numero de columna o registro que mostrara, si en lugar de 0
se coloca un numero 2, el resultado sería el siguiente:
Resultado de la consulta con el indicador 2
Cuando se requiere realizar un script en el cual se visualice el contenido completo de la

tabla se emplean estructuras de control como do while, que realizaran un recorrido por
cada una de las celdas.
En el bloque de código anterior (consulta.php) podemos visualizar la combinación de 3

lenguajes diferentes que son HTML, PHP y SQL, para un mejor entendimiento se

1
Programación Web
iluminaron las sentencias de cada uno de estos lenguajes haciendo más fácil su
identificación para entender su funcionamiento:
Código HTML
Código PHP (Palabras reservadas)
Código SQL
Variables PHP
Invocar archivo de conexión
En el siguiente ejemplo se realiza el borrado de un campo de una base de datos, se

emplea la misma base de datos y la misma estructura del script del ejemplo anterior
llamado consulta.php cambiando únicamente el contenido SQL, haciendo uso de las
clausulas DELETE y WHERE quedando de la siguiente manera:
//borrado.php
<html>
<body>
<?php
$ nombre = HERNANDEZ ROSAS ANA RUTH;
$result = mysql_query("DELETE FROM datos WHERE nombre = '$nombre' ", $datos_conexion);
echo “El dato fue borrado”;
?>
</body>
</html>
En este ejemplo se utiliza una variable llamada $nombre que contiene “HERNANDEZ
ROSAS ANA RUTH”, este es el dato a buscar y borrar dentro en el campo nombre de la
tabla clientes, para poder realizar esto se emplea la cláusula WHERE.
Cuando la sentencia trabaja en conjunto con todas sus cláusulas y variables el resultado
es el borrado del dato de la tabla de la base de datos.
+--------------------------------------------------------+----------------------------------------------------------------+-------------------
| Nombre |Direccion | Telefono
+--------------------------------------------------------+----------------------------------------------------------------+--------------------
+
| MARTINEZ MARTINEZ ERICK | CALLE 33 NUERO 22 | 5544887722 |

2
Programación Web
|
+----------------------------------------------------------+-------------------------------------------------------------+------- --------------
Datos contenido en la base clientes después de la ejecución del script borrado.php
La tarea más común en el uso de páginas dinámicas, es quizás la inserción de registros

dentro de la base de datos, para este ejemplo emplearemos el script anterior llamado
consulta.php cambiando el contenido SQL, y haciendo uso de la clausula INSERT IN
TO quedando de la siguiente manera:
//insertar.php
<html>
<body>
<?php
mysql_query("INSERT INTO datos (nombre,direccion,telefono) values ('"."HERNANDEZ ROSAS

ANA RUTH"."','"."CALLE 1 NUMERO 77"."', '"."5511223344"."')",$datos_conexion);
echo "El dato se ingreso con éxito";
?></body>
</html>
El resultado de la ejecución del script es mostrado en la base de datos
+--------------------------------------------------------+----------------------------------------------------------------+-------------------
| Nombre | Direccion | Telefono
+--------------------------------------------------------+----------------------------------------------------------------+--------------------
+
| MARTINEZ MARTINEZ ERICK | CALLE 33 NUMERO 22 | 5544887722 |
| HERNANDEZ ROSAS ANA RUTH | CALLE 1 NUMERO 77 | 5511223344 |
+----------------------------------------------------------+-------------------------------------------------------------+------- --------------
Datos contenido en la base clientes después de la inserción de registro con el script inserción.php
En los ejemplos usados sólo se mostró la parte básica de las funciones de

MySQL, para un mejor manejo y uso de estas dentro de tu proyecto, lee la
06_Guía de referencia de la Sintaxis de MySQL y 07_Funciones y
operadores de MySQL, de la biblia de MySQL de Gilfillan (2003). Puedes
consultarla en el material de consulta

3
Programación Web
Para el desarrollo de tu proyecto es recomendable hacer uso de algún

software generador de código como Adobe Dreamweaver, ya que es
sumamente potente y fácil de usar, y su curva de aprendizaje es
relativamente corta. En esta ocasión se elaboraron algunos videos en los
cuales se mostraran las tareas básicas en la construcción de sitios Web
como son: la conexión a una base de datos, lectura de registros, inserción
de registros y borrado. Puedes consultarlos en el material de apoyo.
Para finalizar esta unidad realiza tu autoevaluación.
Autoevaluación.
Durante la lectura de esta Unidad se presentó la forma en la que debes de documentar y

planear un sitio Web, analizaste algunas de las etiquetas más comunes del HTML4 y el
HTML5 conociendo los nuevos usos de estas, y diste un repaso básico de programación
aplicándolo a los lenguajes Web PHP y JScript, por ultimo aprendiste la manera en la que
se realiza la conexión a una base de datos desde una página Web y su interacción. Se
considera que ya cuentas con los elementos para interpretar y así asegurar el
conocimiento adquirido, para esto:
1. Ingresa en el aula y selecciona la autoevaluación de la Unidad 2.

2. Lee cuidadosamente las instrucciones para que formules tus respuestas.
3. Verifica tus respuestas y en los casos necesarios, repasa los temas que necesites
fortalecer.
El asimilar estos temas te permitirán entender los que se expone en la siguiente Unidad
además de brindarte elementos que complementan tu formación profesional.
Evidencia de aprendizaje. Sitio Web dinámico.
Para culminar el estudio de la Unidad, realiza la entrega de tu sitio Web con

comportamiento dinámico, esta evidencia deberá de contemplar la implementación de
una base de datos con intercambios de registros (altas, lectura y borrado). Las
instrucciones para llevar a cabo esta evidencia las encontraras en plataforma.

4
Programación Web
Autorreflexiones
Como parte de cada Unidad, es importante que ingreses al foro Preguntas de

Autorreflexión y leas los cuestionamientos que formuló tu Facilitador(a), ya que a partir de
ellos debes elaborar tu Autorreflexión y enviarla mediante la herramienta
Autorreflexiones. No olvides que también se toman en cuenta para la calificación final.
* Recuerda que deberás realizar un archivo por Unidad.
Cierre de la Unidad
En esta unidad tuviste la oportunidad de conocer cuáles son los elementos que conforman
los sitios Web, la forma en que éstos se estructuran, sus elementos y el tipo de
características que poseen las páginas estáticas y dinámicas. Asimismo identificaste
cuáles son los tipos de lenguaje de programación que se utilizan para realizar estos. En la
siguiente unidad aprenderás acerca del uso de herramientas para administrar contenido y
sitios Web, en donde aplicaras algunos de los conocimientos que adquiriste en esta.
Para saber más
 Perfecciona la forma en la que programas en PHP visitando la página

http://mx1.php.net (en inglés) o descarga su manual oficial de esta dirección
http://mx1.php.net/get/php_manual_es.tar.gz/from/a/mirror (en español y
distribuido bajo licencia pública creative commons attribution)
 Navega en el sitio web http://www.phpmyadmin.net/home_page/index.php para

que conozcas la forma de administrar la base de datos MySQL vía Web.
Fuentes de consulta
Fuentes básicas
 Gilfillan, I. (2003). La biblia de MySQL.[PDF] Madrid: Anaya Multimedia.
 Green, T.y Chilcott, J. (2005). Desarrollo Web con PHP y MySQL. (1ª ed.).
Madrid: Anaya Multimedia.

5
Programación Web
 Kabir, M. (2003). La biblia de servidor Apache 2. [PDF] Madrid: Anaya

Multimedia.
 Krug, S. (2006). No me hagas pensar: Una aproximación a la usabilidad. (2ª

ed.). Madrid: Prentice Hall.
 México. Presidencia de la Republica, Sistema de Internet de la Presidencia.

(2007). Guía Para el Desarrollo de Sitios Web de la Administración Pública
Federal. Ciudad de México (México): Autor
 Pavón, J. (2007). Creación de un Portal con PHP y MySQL. (3ª ed.). México:
Alfaomega.
 Rodríguez, P. (2011 Nov.). La Navegación y los Esquemas de la Información.

Revista, Software Gurú Conocimiento en Práctica, Año1 (N° 34, 35).
 Sanders, B. (2011). HTML5 El futuro de la Web. (2ª ed.). Madrid: Anaya

Multimedia.
 Vázquez, P. (2006). Creación de Sitios Web. (1ª ed.). Buenos Aires: Manual
Users.
 Welling, L. y Thomson, L. (2003). Estudio MX: Creación de Sitios (1ª ed.)

Madrid: Anaya Multimedia.
Fuentes complementarias
 Achour, L., Et al. (2012-12-04) Manual oficial de PHP. Recuperado el 23 de

diciembre de 2012.Disponible en: http:/php.net/manual/es/index.php .
 Chile. Ministerio de Secretaría General de la Presidencia, Unidad de

Modernización y Gobierno Digital. (2008). Guía Web. Santiago (Chile): Autor.
W3C. Introducción a la accesibilidad Web. Recuperado 04 de diciembre del

2012 de: http://www.w3c.es/Traducciones/es/WAI/intro/accessibility

6
Programación Web
 W3C. Semantic Web. Recuperado 23 de diciembre de 2012 de:

http://www.w3.org/standards/semanticweb/
 W3C. Web Architecture. Recuperado 23 de diciembre de 2012 de:

http://www.w3.org/standards/webarch/

7

KPGWU2. Desarrollo de Sitios Web

Cargado por

Copyright:

Formatos disponibles

KPGWU2. Desarrollo de Sitios Web

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

KPGWU2. Desarrollo de Sitios Web

Cargado por

Copyright:

Formatos disponibles

Programación Web

Unidad 2. Desarrollo de sitios Web

Ingeniería en: Telemática

Unidad 2. Desarrollo de sitios Web.

Universidad Abierta y a Distancia de México

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática

En esta segunda Unidad identificarás algunas de las etapas más importantes en el

En cuanto a la construcción de tu sitio Web, podrás hacer uso de algún generador de

 Analizarás las necesidades de un caso

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 2

Desarrollar un sitio Web estructurado para

Unidad 2. Desarrollo de sitios Web.

2.2. Estructura de Programación

2.3. Manipulación a bases de datos

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 3

Unidad 2. Desarrollo de sitios Web

2.1. Fases del desarrollo Web

Un Sitio Web es un conjunto de documentos electrónicos de hipertexto (páginas Web) que

Cuando des inicio a un proyecto relacionado con el desarrollo de un sitio Web es

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 4

Ahora revisemos cada una de estas etapas.

La etapa número uno. Planificación, contempla la posible formación de un equipo de

La etapa dos. Conceptualización, abarca asuntos referentes a los criterios de calidad,

Etapa numero tres. Arquitectura de la información, ésta es considerada como la parte

La construcción de un sitio Web representa una estrategia a seguir

Para conseguir esto es esencial organizar la información en una estructura jerárquica,

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 5

La importancia del mapa de navegación radica en la comprensión del

Existen muchas posibilidades para organizar la información en un mapa de navegación,

Tipo de organización Mapa de navegación

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 6

Cuando se diseñan sistemas de navegación, se debe de poner especial atención a dos

 Elementos textuales: Que son en donde la navegación se realiza a través de

Para que un sistema de navegación sea eficiente deben tener 3 características

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 7

Consistente: debe ser

La etapa número cinco. Diseño Visual, ésta es en donde se desarrollara la propuesta

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 8

Para conocer y que te familiarices con las pautas y criterios de accesibilidad

Para que desarrolles de mejor manera tu sitio Web, puedes realizar la

Para comenzar con la codificación, es necesario realizar la selección de las herramientas

 Comprobación en navegadores: El primer paso es comprobar que las páginas

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 9

 Validación de código HTML en el sitio: http://validator.w3.org/

Ahora revisa detenidamente el documento titulado 03_Guía para el

Antes de continuar con el tema realiza la primera actividad de esta Unidad.

Actividad 1. Mapa de navegación

2.2. Estructura de Programación.

<font face="Arial" color="#000066" size="+2">Este es un ejemplo</font>

HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y el

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 1

Las etiquetas básicas en HTML 4 son:

<html></html> Al principio y al final de todo documento.

Para formato de textos

<b> </b> negrita (es igual que la etiqueta

Ciencias Exactas, Ingeniería y Tecnología | Ingeniería en Telemática 1

<font face=”arial”> ... </font> determina el tipo de la fuente.

Para formato de párrafos