INGENIEROS EN SISTEMA COMPUTACIONALES

CATEDRTICO:
ING. JOS LUIS ROVIRA BALAN

MATERIA:
PROGRAMACION WEB

TRABAJO:
UNIDAD 1: ARQUITECTURA
UNIDAD 2: LENGUAJE DE MARCADO

PRESENTA:
YESICA GARCA GARCA

NDICE
UNIDAD 1:

ARQUITECTURA

INTRODUCCION------------------------------------------------3
1

1.1. Evolucin de las aplicaciones web.---------------------4

1.2. Arquitectura de las aplicaciones web.------------------9
1.3. Tecnologas para el desarrollo de aplicaciones web.---10
1.4. Planificacin de aplicaciones web.--------------------13

UNIDAD 2:

LENGUAJE DE MARCADO

2.1. Introduccin.-----------------------------------------16
2.2. Representacin de documentos.-------------------------17
2.3. Tipos de datos bsicos.-------------------------------18
2.4. Estructura global de un documento.--------------------28
2.5.

Elementos

bsicos:

texto,

vnculos,

listas,

tablas,

objetos,

imgenes

aplicaciones.--------------------------30
2.6. Estructura y disposicin.-----------------------------42
2.7. Formularios.------------------------------------------46
Aplicacin en el desarrollo de su proyecto por equipo------47
CONCLUSIN-------------------------------------------------48

INTRODUCCIN
La programacin Web, parte de las siglas WWW, que significan World Wide Web o telaraa
mundial. Para realizar una pagina con la programacin Web, se deben tener claros, tres
conceptos fundamentales los cuales son, el URL (Uniform Resource Locators), es un sistema
con el cual se localiza un recurso dentro de la red, este recurso puede ser una pagina web,
un servicio o cualquier otra cosa. En resumen el URL no es ms que un nombre, que
identifica una computadora, dentro de esa computadora un archivo que indica el camino al
recurso que se solicita.

El siguiente concepto dentro de la programacin Web, es el protocolo encargado de llevar la

informacin que contiene una pagina Web por toda la red de internet, como es el
HTTP(Hypertext Transfer Protocol). Y por ultimo el lenguaje necesario cuya funcionalidad es
la de representar cualquier clase de informacin que se encuentre almacenada en una
pagina Web, este lenguaje es el HTML(Hypertext Markup Language). En la programacin
Web, el HTML es el lenguaje que permite codificar o preparar documentos de hipertexto, que
viene a ser el lenguaje comun para la construccion de una pagina Web.
Con el comienzo de Internet y la programacin web , se desfasaron los diseos grficos
tradicionales, con lo que se empezaron a disear interfaces concretas para este medio,
buscando ficheros pequeos para facilitar la carga de los mismos. La programacin web se
orientaba a un diseo muy cargado y interactuando con el usuario.

UNIDAD 1 ARQUITECTURA
1.1.

EVOLUCIN DE LAS APLICACIONES WEB.

Desde que Internet y la Web fueron creados, una cantidad infinita de posibilidades se han
abierto, quizs, la ms importante y usual sea el acceso de datos e informacin desde
cualquier sitio. Las personas que se dedican al desarrollo de aplicaciones

podran

considerar esto como un desafo, ya que los avances tecnolgicos de estos ltimos aos
exigen aplicaciones ms rpidas, ligeras y robustas que permitan utilizar la Web. Sin lugar a
dudas, internet es una de las ltimas tecnologas que ms rpidamente se est
desarrollando para su introduccin en los hogares. Las previsiones apuntan a su integracin
como un electrodomstico ms, con unas capacidades y servicios que evolucionaran
rpidamente. Por ese motivo, cada vez ms adquieren importancia en las respuestas de los
usuarios frente a la implantacin de estas nuevas tecnologas.

Gracias a Internet y las conexiones de alta velocidad que lo acompaan, se ha podido

mejorar de manera significativa la manera de trabajar de algunas personas al poder hacerlo
desde sus hogares, Internet ha permitido a estas personas mayor flexibilidad en trminos de
horarios y de localizacin. En los aos 60. En plena guerra fra, Estados Unidos crea una red
exclusivamente militar, con el objetivo de que, en el hipottico caso de un ataque ruso, se
pudiera tener acceso a la informacin militar desde cualquier punto del pas.
Esta red se cre en 1969 y se llam ARPANET. En principio, la red contaba con 4 ordenadores
distribuidos entre distintas universidades del pas. Dos aos despus, ya contaba con
unos 40 ordenadores conectados. Tanto fue el crecimiento de la red que su sistema de
comunicacin se qued obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP,
que se convirti en el estndar de comunicaciones dentro de las redes informticas.

ARPANET sigui creciendo y abrindose al mundo, y cualquier persona con fines acadmicos
o de investigacin poda tener acceso a la red.

Las funciones militares se desligaron de ARPANET y fueron a parar a MILNET, una nueva red
creada por los Estados Unidos.

La National Science Fundation crea su propia red informtica llamada NSFNET, que ms
tarde absorbe aARPANET, creando as una gran red con propsitos cientficos y acadmicos.

El desarrollo de las redes fue abismal, y se crean nuevas redes de libre acceso que ms tarde
se unen aNSFNET, formando el embrin de lo que hoy conocemos como INTERNET.
1. En 1985 la Internet ya era una tecnologa establecida, aunque conocida por unos pocos.
2. El autor William Gibson hizo una revelacin: el trmino "ciberespacio".
3. En ese tiempo la red era bsicamente textual, as que el autor se bas en los videojuegos.
Con el tiempo la palabra "ciberespacio" termin por ser sinnimo de Internet.
4. En el Centro Europeo de Investigaciones Nucleares (CERN), Tim Berners Lee diriga la
bsqueda de un sistema de almacenamiento y recuperacin de datos. Berners Lee
retom

la

idea

de Ted

Nelson (un

proyecto

llamado "Xanad) de

usar

hipervnculos. Robert Caillau quien cooper con el proyecto, cuanta que en 1990 deciden
ponerle un nombre al sistema y lo llamarn World Wide Web (WWW) o telaraa mundial.
5. A partir de entonces Internet comenz a crecer ms rpido que otro medio de
comunicacin, convirtindose en lo que hoy todos conocemos.
Algunos de los servicios disponibles en Internet aparte de la WEB son el acceso remoto a
otras mquinas (SSH y telnet), transferencia de archivos(FTP), correo electrnico(SMTP),
conversaciones en lnea (IMSN MESSENGER, ICQ, YIM, AOL, jabber), transmisin de archivos
(P2P, P2M, descarga directa), etc. La gran ventaja que presenta la WWW son los hiperenlaces
gracias a los cuales la navegacin y la bsqueda de informacin se convierten en un juego
de nios. Cuando se visualiza un documento WWW, el texto que aparece en la pantalla
contiene palabras en otro color y para resaltar las palabras clave.
La publicacin web o la programacin web
Son trminos adecuados para describir

el proceso general que engloba

el diseo y la

creacin de un sitio web. En un principio la web era sencillamente una coleccin de pginas
estticas, documentos, etc., para su consulta o descarga. El paso inmediatamente posterior
en su evolucin fue la inclusin de un mtodo para elaborar pginas dinmicas que
5

permitieran que lo mostrado tuviese carcter dinmico (es decir, generado a partir de los
datos de la peticin). Este mtodo fue conocido como CGI ("Common Gateway Interface") y
defina un mecanismo mediante el que se poda pasar informacin entre el servidor y ciertos
programas externos.

El funcionamiento de los CGIs tena un punto dbil: cada vez que se reciba una peticin, el
servidor deba lanzar un proceso para ejecutar el programa CGI. Como la mayora
de CGIs estaban escritos en lenguajes interpretados, comoPerl o Python, o en lenguajes que
requeran "run-time environment", como Java o VisualBasic, el servidor se vea sometido a
una gran carga. La concurrencia de mltiples accesos al CGI poda comportar problemas
graves.

1.2. ARQUITECTURA DE LAS APLICACIONES WEB.

Con la introduccin de Internet y del Web en concreto, se han abierto infinidad de
posibilidades en cuanto al acceso a la informacin desde casi cualquier sitio. Esto representa
un desafo a los desarrolladores de aplicaciones, ya que los avances en tecnologa demandan
cada vez aplicaciones ms rpidas, ligeras y robustas que permitan utilizar el Web.
Afortunadamente, tenemos herramientas potentes para realizar esto, ya que han surgido
nuevas tecnologas que permiten que el acceso a una base de datos desde el Web, por
ejemplo, sea un mero trmite. El nico problema es decidir entre el conjunto de posibilidades
la correcta para cada situacin.
El viejo CGI ha cumplido con el propsito de aadir interactividad a las pginas Web pero sus
deficiencias en el desarrollo de aplicaciones y en la escalabilidad de las mismas ha
conducido al desarrollo de APIs especficos de servidor como Active Server Pages, ASP, y
PHP, que son ms eficientes que su predecesor CGI. Para aprovechar el potencial de estas
tecnologas y ofertar una solucin de servidor ms extensible y portable, Sun ha desarrollado
6

la tecnologa llamada servlet. Los servlets Java son muy eficientes, debido al esquema de
threads en el que se basan y al uso de una arquitectura estndar como la JVM, Java Virtual
Machine. Otra nueva tecnologa viene a sumarse a las que extienden la funcionalidad de los
servidores Web, llamada Java Server Pages, JSP. Los JSP permiten juntar HTML, aplicaciones
Java, y componentes como las Java Beans creando una pgina Web especial que el servidor
Web compila dinmico.

1.3. TECNOLOGAS PARA EL DESARROLLO DE APLICACIONES WEB.

1. DEFINICIN DEL PROYECTO

Descubrimiento
Entrevistas a las partes interesadas (clientes, proveedores, etc.)
Anlisis de la competencia
Estudio de los Perfiles de audiencia o Investigacin de la audiencia/mercado: Perfiles de las
audiencias principales y secundarias o Capacidades y Restricciones de la audiencia: habilidades,
expectacin, necesidades tpicas, requerimientos de navegador/plataforma, etc.

Anlisis
Finalidad ltima del site
Funcionalidades y contenidos necesarios en el producto final
Capacidades internas de la empresa: recursos financieros y recursos de personal (equipo)

Estrategia
Objetivos de negocio: primarios y secundarios
Estrategia de comunicacin: tono y estilo (resumidos en un briefing creativo)
Mtricas de xito
Plan de Marketing
Alcance: decidir qu hacer ahora y qu puede esperar para una segunda fase

Plan de Proyecto (Borrador)

Resumen del Proyecto
Estrategia
7

Audiencia
Requerimientos o Funcionales/Interactivos o Contenidos o Visuales
Alcance
Mtricas de xito
Marketing
Mantenimiento y soporte posterior
Desarrollo futuro
Equipo y roles
Relacin con el cliente (gestin de la cuenta)
Ciclo de aprobacin
Presupuesto
Timming

Entregables en la fase de Definicin del Proyecto

Para un proyecto pequeo: Plan de Proyecto
Para un proyecto grande: Plan de Proyecto, Briefing Creativo y Plan de Marketing

2. DISEO ESTRUCTURAL
aroundDefinicin del Contexto
Inventario del contenido existente: textos, imagines, vdeos, incluyendo fuentes que no

provengan de la web (libros, fotografas, etc)

Contenido que tenga que ser creado o editado (imgenes, textos, traducciones, vdeos, etc)
Responsabilidades de autora y edicin (equipo: asignacin de recursos)
Plan de mantenimiento de contenidos

Definicin Funcional
Requisitos Funcionales o Planificacin de usuario
Requerimientos de tecnologa o Tecnologas a emplear o Servidor y Hosting o Desarrollo e
integracin de aplicaciones (tanto propias como de terceros) o Integracin de datos (tanto propios
como de terceros) o Relaciones y responsabilidades con proveedores y/o terceros o Plan de
pruebas: proceso de deteccin de errores (bug tracking) y proceso de resolucin de errores (bug

fixing) o Desarrollo o mantenimiento en curso

Requerimientos de planificacin e integracin o Integracin de Marketing: marketing mediante via
postal, email, telfono u otros medios o Planificacin del Back-office e integracin de ste con la

base de datos.
Requisitos de Soporte o Plan de soporte al usuario final o Formacin o contratacin de personal

internoo Mantenimiento del site en curso.

Responsabilidades internas.
Responsabilidades de los Proveedores

Diagramas a nivel de Site y de Pgina

8

Arquitectura de la Informacin.
Mapa del Site.
Wireframes: representacin esquemtica de las pginas.
Convenciones de Nombres y Etiquetas (Nomenclaturas).

Entregables de esta fase de Diseo Estructural

Para proyectos pequeos: Diagrama de Arquitectura de Informacin, Wireframes.
Para proyectos grandes: Diagrama de Arquitectura de Informacin, Wireframes.
Especificaciones Funcionales, Especificaciones Tcnicas, Plan de Pruebas, Plan de Soporte.
Cuando se requiera mantener relaciones con proveedores: Contrato con el proveedor, Contrato de
Aceptacin del Servicio, Licenciamiento, Contrato de Confidencialidad

Pruebas del Diseo Estructural y Finalizacin de esta fase

Revisin de los wireframes con las partes implicadas (cliente, etc.).
Comprobacin de los wireframes con 3-5 usuarios.

3. Recopilacin y Creacin de Contenidos

Autora de Contenidos.
Creacin y edicin de contenidos de acuerdo con la arquitectura de informacin del site y de los
diagramas de las pginas; para reutilizacin de los contenidos es recomendable que se preparen

directamente para la web.

Determinacin del origen de las fotografas, vdeos e ilustraciones.

Revisin de los Contenidos y Finalizacin de esta fase

Aceptacin de los contenidos mediante un ciclo de aprobacin de los mismos

4. DISEO VISUAL

Diseo Grfico del Site

Aplicacin de la marca e identidad visual.
Fotografa, Vdeo e Ilustracin.
Obtencin de los Componentes de diseo.
Prototipo de baja resolucin.

Entregables de esta fase de Diseo Grfico del Site

Para un proyecto pequeo: Componentes de diseo.
Para un proyecto grande: Componentes de diseo, Gua de estilo, Prototipo interactivo de las
secciones clave del site.
Revisin del Diseo y Finalizacin de esta fase
9

Aceptacin del diseo mediante un ciclo de aprobacin del mismo.

Comprobacin del diseo con 3-5 usuarios.

5. PRODUCCIN

Ingeniera
Instalacin y configuracin del Servidor y del Hosting.
Desarrollo de los datos y/o de la base de datos.
Desarrollo de la aplicacin.
Desarrollo y/o Integracin del sistema de gestin de contenidos (CMS).
Diseo y desarrollo de las pginas y plantillas: HTML, CSS, JavaScript (y/o otros scripts cliente a

nivel de pgina).
Diseo de elementos reutilizables: grficos, navegacin, META tags, etc.
Construccin del Site
Asignacin de contenidos de prueba.
Aplicacin de estilos.
Integracin de datos, aplicaciones u otras funcionalidades.
Almacenamiento en el servidor de desarrollo (para pruebas)

Pruebas de Calidad
Prueba de los contenidos y revisin de los mismos: comprobacin de enlaces, revisin de textos e

imgenes, etc.
Pruebas funcionales: pruebas sobre la aplicacin y sobre elementos interactivos.
Pruebas de integracin.
Pruebas de navegacin.
Planificacin final del proceso de calidad.
Pruebas en los distintos navegadores

Revisin
Revisin por parte de las partes implicadas (clientes, etc.) y aprobaciones finales.

6. Lanzamiento
Puesta en Marcha
Lanzamiento previo con base de datos con pocos usuarios; lanzamiento progresivo con la base de

datos completa.
Marketing sobre el site.
Posicionamiento del site (SEP).
Soporte de usuarios.

Mantenimiento
Puesta del site en manos del equipo de mantenimiento.
10

Mtricas sobre el site: recuperacin de datos (informes), reportes y monitorizacin.

Establecimiento como site inicial o realizacin de ajustes en la planificacin

UNIDAD 2 LENGUAJE DE MARCADO

2.1. INTRODUCCIN.
El lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que,
junto con el texto, incorpora etiquetas o marcas que contienen informacin adicional acerca
de la estructura del texto o su presentacin. El lenguaje de marcas ms extendido es
el HTML (HyperText Markup Language, Lenguaje de marcado de hipertexto), fundamento
delWorld Wide Web (entramado de comunicacin de alcance mundial).
Los lenguajes de marcado suelen confundirse con lenguajes de programacin. Sin embargo,
no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritmticas o variables,
como s poseen los lenguajes de programacin. Histricamente, el marcado se usaba y se
usa

en

la

industria editorial y

de

la

comunicacin,

as

como

entre autores, editores e impresores.

Un ejemplo de cmo funciona el lenguaje de marcado puede observarse en el dictado de
viva voz de un documento a una persona que lo transcribe a mquina:
Ponga estilo de carta. ponga comillas, ponga maysculas, Estimado Juan, ponga dos
puntos, aparte, sangra, ponga primera letra mayscula, te escribo esta carta, ponga
negrillas, de forma muy urgente, cierre negrilla, ya que no me has enviado... etc".

2.2. REPRESENTACIN DE DOCUMENTOS.

La representacin de documentos es fundamental para poder procesar estos y es una fase
previa en el tiempo a la recuperacin de informacin, pero es parte integrante del conjunto.
El objetivo de la representacin de documentos es la traduccin de los mismos a trminos
del sistema.
Esta representacin se lleva a cabo mediante un conjunto de fases que contribuyen
mediante ciertas simplificaciones y generalizaciones a presentar una vista lgica de los

11

documentos que permita su comparacin con las consultas. Es por tanto un proceso
imprescindible para la recuperacin de informacin.
En general podramos equiparar la representacin de documentos al anlisis documental,
aunque con algunos matices. El primero de ellos hace referencia al mbito automatizado en
que tienen lugar estos procesos. Las representaciones que generaremos sern aptas para su
procesamiento por parte de aplicaciones informticas segn diversos modelos. Adems la
representacin de los documentos se hace en torno a criterios temticos, y para ser ms
exactos, en torno a criterios temticos analticos.
En este sentido existen ciertas similitudes con el proceso de indizacin que hacen que
muchos especialistas hablen directamente de un proceso de indizacin automtica para
referirse al conjunto de las operaciones conducentes a la representacin de los documentos.
Nosotros preferimos hablar de representacin de documentos en conjunto y de indizacin
automtica para una de las fases en concreto.
Podemos dividir estas en:
Eleccin y seleccin de unidades de representacin
Creacin del lxico de la coleccin
Indizacin automtica
Que a su vez incorporan fases ms especficas de representacin que detallaremos a
continuacin. Una parte importante de los subprocesos son independientes al modelo de
recuperacin de informacin elegido, aunque otros no. De igual forma algunos subprocesos
son ms adecuados para ciertas tcnicas mientras que otros no lo son. Presentamos una
visin concisa de los procesos ms comunes a continuacin.

2.3. TIPOS DE DATOS BSICOS.

Un tipo de datos es una propiedad de un valor que determina su dominio (qu valores puede
tomar), qu operaciones se le pueden aplicar y cmo es representado internamente por el
computador. A continuacin revisaremos los tipos de datos ms bsicos. Adems de estos,
existen muchos otros, y ms adelante aprenderemos a crear nuestros propios tipos de datos.
NMEROS ENTEROS
12

El tipo int permite representar nmeros enteros. Los valores que puede tomar un int son
todos los nmeros enteros: ... -3, -2, -1, 0, 1, 2, 3, ...
El nombre int viene del ingls integer, que significa entero.
Todas las operaciones aritmticas y relacionales pueden ser aplicadas sobre valores del
tipo int:
>>> 524 + 891
1415
>>> (1524 // 100) % 10
5
Los nmeros enteros literales se escriben con un signo opcional seguido por una secuencia
de dgitos:
1570
+4591
-12
Ms adelante veremos otras formas de representar enteros literales. Por ejemplo, el nmero
123 puede ser representado de varias maneras:
>>> 0o173
123
>>> 0x7b
123
>>> 0b1111011
123
>>> 123 == 0x7b
True
Por ahora, preocupmonos slo de la forma ms comn 123.

NMEROS REALES

13

El tipo float permite representar nmeros reales.

El nombre float viene del trmino punto flotante, que es la manera en que el
computador representa internamente los nmeros reales.

Todas las operaciones aritmticas y relacionales pueden ser aplicadas sobre valores del
tipo float.
Hay que tener mucho cuidado, porque los nmeros reales no se pueden representar de
manera exacta en un computador. Por ejemplo, el nmero decimal 0.7 es representado
internamente por el computador con la aproximacin 0.69999999999999996. Todas las
operaciones entre valores float son aproximaciones. Esto puede conducir a resultados algo
sorpresivos:
>>> 1/7 + 1/7 + 1/7 + 1/7 + 1/7 + 1/7 + 1/7
0.9999999999999998
Los nmeros reales literales se escriben separando la parte entera de la decimal con un
punto. Si la parte decimal es cero, puede ser omitida:
>>> 881.9843000
881.9843
>>> -3.14159
-3.14159
>>> 1024.
1024.0
Otra representacin es la notacin cientfica, en la que se escribe un factor y una potencia
de diez separados por una letra e. Por ejemplo:
>>> -2.45E4
-24500.0
>>> 7e-2
0.07
14

>>> 6.02e23
6.02e+23
>>> 9.1094E-31
9.1094e-31
Los

dos

ltimos

valores

del

ejemplo

son

iguales,

respectivamente,

a6.02\times

10^{23} y 9.1094\times 10^{-31}.

Cuando se combinan valores reales y enteros en una operacin, el entero es convertido a un
nmero real antes de evaluarla. Por ejemplo, 5.3 + 2 primero es convertido a 5.3 + 2.0, y el
resultado es real:
>>> 5.3 + 2
7.3
La regla general es: si en una expresin aritmtica aparece algnfloat, el resultado es de
tipo float.
VALORES LGICOS

Los valores lgicos True y False son de tipo bool, que representa valores lgicos.

El nombre bool viene del matemtico George Boole, quien cre un sistema algebraico para la
lgica binaria. Por lo mismo, a True y Falsetambin se les llama valores booleanos. Las
operaciones lgicas and, or y not pueden ser aplicadas sobre valores booleanos, y entregan
como resultado un valor booleano:
>>> not True or (True and False)
False
Las operaciones relacionales <, >, ==, etc., pueden ser aplicadas sobre valores de tipos
comparables, pero siempre entregan como resultado un valor booleano:
>>> 2 + 2 == 5

15

False
>>> x = 95.4
>>> 50 < x < 100
True
TEXTO

A los valores que representan texto se les llama strings, y tienen el tipo str.

Los strings literales pueden ser representados con texto entre comillas simples o comillas
dobles:
"ejemplo 1"
'ejemplo 2'
Los operadores aritmticos no pueden ser aplicadas sobre strings, salvo dos excepciones:
1. El operador + aplicado a dos strings no representa la suma, sino la concatenacin, que
significa pegar los strings uno despus del otro:
2. >>> "hola " + 'mundo'
3. 'hola mundo'
4. El operador * aplicado a un string y a un nmero entero no representa la
multiplicacin, sino la repeticin, es decir, el string es repetido tantas veces como
indica el nmero:
5. >>> "lo" * 5
6. 'lololololo'
Las operaciones relacionales permiten comparar strings alfabticamente:
>>> "ala" < "alamo" < "bote" < "botero" < "boteros" < "zapato"
True

16

Para conocer el largo de un string, se utiliza la funcin len():

>>> len('universidad')
11
La funcin input(), que usamos para leer la entrada del usuario, siempre entrega como
resultado un string. Hay que tener la precaucin de convertir los valores que entrega al tipo
adecuado. Por ejemplo, el siguiente programa tiene un error de incompatibilidad de tipos:
n = input('Escriba un nmero:')
cuadrado = n * n
print('El cuadrado de n es', cuadrado)
Es importante entender que los strings no son lo mismo que los valores que en l pueden
estar representados:
>>> 5 == '5'
False
>>> True == 'True'
False
NULO

Existe un valor muy especial que se llama None.

None es un valor que se utiliza en contextos en que ningn valor es vlido. En

ingls, none significa ninguno.

El valor None tiene su propio tipo, que es diferente al de todos los dems valores.

CONVERSIN DE TIPOS

Los tipos de los valores indican qu operaciones pueden ser aplicadas sobre ellos.

17

A veces es necesario convertir valores de un tipo a otro para poder operar sobre ellos.
Existen dos tipos de conversiones: implcitas y explcitas.
Las conversiones implcitas son las que se hacen automticamente segn el contexto. Las
ms importantes son las siguientes:

cuando se utiliza un entero en un contexto real, el entero es convertido al real

correspondiente:

>>> 56 * 8.0

448.0

cuando se utiliza cualquier valor en un contexto booleano, es convertido al valor True,

excepto por los siguientes casos, en que es convertido al valor False:
o el valor 0,
o el string vaco '',
o None.
Por ejemplo:
>>> not 0
True
>>> not 10
False
>>> not 'hola'
False
>>> bool(3.14)
True
Con los operadores and y or ocurre algo ms extrao:
>>> 4 and 7
7
18

>>> 0 and 7
0
>>> 5 or 6
5
>>> 0 or 6 or 7
6
Ejercicio: deducir cmo funcionan and y or cuando los operandos no son booleanos.

cuando se utiliza un valor lgico en un contexto entero, True es convertido

a 1 y False a 0:

>>> True * 4 + False * 8

>>> True + True

>>> n = 5

>>> "el nmero es " + ((n % 2 != 0) * "im") + "par"

'el nmero es impar'

Las conversiones explcitas se realizan usando el nombre del tipo de destino como si fuera
una funcin.
Por ejemplo, para convertir un valor al tipo entero, se utiliza la funcin int:
>>> int('45')
45
>>> int(3.891)
3
>>> int(True)
1
>>> int(None)
TypeError: int() argument must be a string or a number, not 'NoneType'
19

>>> int('abc')
ValueError: invalid literal for int() with base 10: 'abc'
>>> int('doscientos')
ValueError: invalid literal for int() with base 10: 'doscientos'
Ya veremos qu significan los errores.
Para convertir un valor en un string, se utiliza la funcin str:
>>> str(87)
'87'
>>> str(True)
'True'

2.4. ESTRUCTURA GLOBAL DE UN DOCUMENTO.

Un documento creado en HTML contiene bsicamente la siguiente serie de comandos que
dan forma a su contenido:

<HTML> Indica el inicio del documento.

<HEAD> Inicio de la Cabecera.
<TITLE> Inicio del ttulo del documento.
</TITLE> Final del ttulo del documento.
</HEAD> Final de la Cabecera del documento.
<BODY> Inicio del cuerpo del documento.
</BODY> Final del cuerpo del documento.
</HTML> Final del documento.

El documento en s est dividido en dos zonas principales:

El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezado se encuentra informacin del documento, que no se ve en pantalla,
en l encontramos el ttulo del documento, comprendido entre las etiquetas <TITLE> y
</TITLE>. El ttulo debe ser breve y descriptivo de su contenido. Este es el que aparece en la
barra superior de nuestro navegador de pginas Web.Dentro del cuerpo est todo lo que

20

queremos que aparezca en la pantalla principal (texto, imgenes, animaciones, formularios,

etc.)
Por tanto, la estructura a manera de ejemplo queda de esta manera:
Con la ayuda de un Browser, Firefox o Internet Explorer abrimos el archivo index.htm y
observamos la pgina creada. Ahora con la ayuda de un procesador de palabras (Bloc de
notas), copiamos el siguiente cdigo fuente y guardamos el archivo con la extensin htm
html con el nombre de index
<HTML>
<HEAD>
<TITLE> Proyecto Web </TITLE>
</HEAD>
<BODY>
<HI> <CENTER> Pgina base o inicial </CENTER>
</HI>
<HR>
Esta es la primera pgina que observamos directamente de su cdigo fuente.
El lenguaje HTML para generarla no es difcil, pronto estaremos en condiciones de
hacer ms cosas interesantes.
<P> Este es un segundo prrafo como alternativa de presentacin.
</BODY>
</HTML>

2.5. ELEMENTOS BSICOS: TEXTO, VNCULOS, LISTAS, TABLAS,

OBJETOS, IMGENES Y APLICACIONES.

21

Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del
documento

hay

dos

zonas

principales: el

encabezamiento,

delimitado

por

las

marcas <HEAD> y </HEAD>, que sirve para definir algunos valores vlidos para todo el
documento, y el cuerpo, delimitado por las etiquetas <BODY> y </BODY>, donde reside la
informacin del documento. El elemento <TITLE> contenido dentro del encabezamiento
permite especificar el ttulo de un documento HTML. Este ttulo no forma parte del
documento en s pues no se ve en la pantalla principal, sino que sirve como ttulo de la
ventana del programa que la muestra. Existen muchos otros elementos que se engloban
dentro del encabezamiento pero para la estructura bsica del lenguaje HTML en su nivel
bsico no son necesarios.
El cuerpo de un documento HTML contiene el texto, imgenes, etc. que, con la presentacin
y los efectos que se decidan, se presentarn ante el usuario. Dentro del cuerpo se pueden
aplicar una serie de efectos a travs de diferentes marcas o etiquetas (tambin otros autores
las denominan "directivas").
As pues, la estructura de un documento HTML es la siguiente:
<HTML>
<HEAD>
<TITLE>Ttulo

de

la

pgina</TITLE>

</HEAD>
<BODY>
[Aqu

se

sitan

otras

etiquetas

que

hacen

posible

visualizar

la

pgina]

</BODY>
</HTML>
El

texto

puede

tener

unas

cabeceras,

comprendidas

entre

las

etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el nmero 6), siendo el nmero
indicativo del tamao. El tamao mayor es el correspondiente al nmero 1. Hay otras
etiquetas

como <P>,

para

separar

los

distintos

prrafos,

la

etiqueta

de

centrado <CENTER> y </CENTER> que sirve para centrar todo lo que est dentro de ella,
ya sea texto, imgenes, etc. la etiqueta <HR> para obtener una raya horizontal tan ancha
como la pantalla, y con la apariencia de estar embutida sobre el fondo, etc.

22

He aqu un ejemplo:
<HTML>
<HEAD>
<TITLE>Mi

pagina

Web</TITLE>

</HEAD>
<BODY>
<CENTER>
<H1>Primera

pagina</H1>

</CENTER>
<HR>

Esta

es

<P>Aqui

mi

primera

pagina,

va

aunque

todavia

un

es

muy

segundo

sencilla.
parrafo.

</BODY>
</HTML>
Pero existen tambin una serie de Atributos:
<body background="nombre_de_archivo">
Especifica una imagen para el fondo del documento.
<body bgcolor="#rrggbb">
Especifica un color para el fondo del documento.
<body text="#rrggbb">
Especifica un color para el texto normal del documento.
<body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">
Establece el color del texto de vnculo, del vnculo visitado y del vnculo activo.
#rrggbb representa el valor hexadecimal del color expresado como rojo-verde-azul.

23

 ESTILOS Y EFECTOS BSICOS

Todas las etiquetas que siguen a continuacin se introducen a partir de la etiqueta <BODY>,
es decir, dentro del cuerpo del documento.
Ttulos
Mediante los ttulos, en sus diferentes niveles de importancia, se puede definir el esqueleto
del documento o estructura bsica. HTML tiene 6 niveles de cabeceras numeradas del uno al
seis. He aqu algunos ejemplos de cabeceras HTML y su representacin en pantalla:
Cdigo HTML
<h1>Cabecera

Visualizacin
tipo

1</h1>
<h2>Cabecera

Cabecera tipo 1
tipo

2</h2>
<h3>Cabecera

tipo
Cabecera tipo 3

3</h3>
<h4>Cabecera

tipo
Cabecera tipo 4

4</h4>
<h5>Cabecera

tipo
Cabecera tipo 5

5</h5>
<h6>Cabecera
6</h6>

Cabecera tipo 2

tipo
Cabecera tipo 6

Elementos de texto

<p>

El fin de un prrafo que ser formateado antes de que se muestre en la pantalla

<pre>. . . </pre>

Identifica texto que ha sido formateado previamente (preformateado) por algn otro sistema
y debe ser desplegado tal como es. Texto preformateado puede incluir etiquetas embebidas,
pero no todos los tipos de etiquetas estn permitidos. La etiqueta <tag> puede ser usada
para incluir tablas en documentos.
24

<listing>. . . </listing>

Ejemplo de listado de ordenador; las etiquetas incluidas sern ignoradas, pero los espacios
de tabulacin funcionarn. Esta es una etiqueta ya arcaica.

<xmp>. . . </xmp>

Similar a <pre> excepto que no se reconocern etiquetas incluidas.

<plaintext>

Similar a <pre> excepto que no se reconocern etiquetas incluidas, como no hay etiqueta
para finalizar, el resto del documento ser traducido como texto simple. Esta es una etiqueta
arcaica. Algunos navegadores reconocen una etiqueta </plaintext>, an cuando no est
definido por el estndar.

<blockquote>. . . </blockquote>

Incluye una seccin de texto citado de cualquier otra fuente.

Atributos del texto

Mediante estos atributos determinamos el estilo y el tipo de letra que tendr la presentacin
del documento final.
Estilos lgicos
<em> . . . </em>
nfasis
<strong> . . . </strong>
nfasis mayor
<code> . . . </code>
Despliega una directiva HTML
<samp> . . . </samp>
Incluye salida ejemplo

Estilos fsicos
<b> . . . </b>
Negritas
<i> . . . </i>
Itlicas
<u> . . . </u>
Subrayado
<tt> . . . </tt>
Tipo de letra de
25

<kbd> . . . </kbd>
Despliega una tecla del teclado
<var> . . . </var>
Define una variable
mquina
<dfn> . . . </dfn>

de

escribir

Despliega una definicin (en muchos

navegadores no funciona)
<cite> . . . </cite>
Despliega una cita

Fuentes HTML

Saltos de lnea:

HTML no reconoce los finales de lnea del editor de texto, pero la etiqueta <BR> desplaza el
texto a la lnea siguiente, y la etiqueta <P> tambin lo desplaza, dejando una lnea de
separacin.
Cdigo HTML
HTML

no

reconoce

utilicemos

distintas

de

forma

saltar

de

el

texto

los

finales

lneas

continua.

lnea.

El

la

lnea

de

en

nuestro

Hay

primero
siguiente.

lnea.

dos

produce
El

un

segundo,

Por

esa

archivo,

razn,

sern

comandos
salto

de

define

visualizadas

bsicos
lnea,

un

final

aunque
para

<BR>pasando
de

prrafo

<P>dejando una lnea en blanco de separacin con el texto siguiente.

Visualizacin
HTML no reconoce los finales de lnea. Por esa razn, aunque utilicemos
26

distintas lneas en nuestro archivo, sern visualizadas de forma continua.

Hay dos comandos bsicos para saltar de lnea. El primero produce un
salto

de

lnea,

pasando el texto a la lnea siguiente. El segundo, define un final de

prrafo
dejando una lnea en blanco de separacin con el texto siguiente.

Prrafos:

A continuacin se muestran las etiquetas HTML para fijar los prrafos y el resultado
correspondiente:
Cdigo HTML

Visualizacin

<p> Este parrafo usa la alineacion por

defecto, izquierda. Cada linea se coloca a
la izquierda del margen. </p>
<p

align=right>

Este

parrafo

esta

alineado a la derecha. Cada linea esta

alineada en el margen derecho. </p>
p

align=center>

Este

parrafo

esta

alineado en el centro. Cada linea esta

centrada entre ambos margenes. </p>

Este prrafo est alineado a la izquierda. Cada

lnea se sita en el margen izquierdo.

Este prrafo est alineado a la izquierda. Cada

lnea se sita en el margen derecho.

Este prrafo est alineado en el centro. Cada lnea

se sita en el centro de ambos mrgenes.

Etiquetas HTML de prrafo

Tipos de letra:

Los tipos bsicos son negrita, cursiva y teletipo o mquina de escribir, que utilizan los
cdigos B, I, TT, respectivamente, como demuestra el siguiente cdigo:
Cdigo HTML

Visualizacin

27

letra <B>negrita</B>

letra negrita

letra <I>cursiva</I>

letra cursiva

letra <TT>teletipo</TT>

letra teletipo

Para centrar texto (o, en general, para centrar cualquier otra cosa: un grfico, por ejemplo)
se usa la etiqueta <center>:
<center>Verde que te quiero verde</center>
Verde que te quiero verde

Listas

Las listas se definen de forma muy sencilla: se dice dnde empieza la lista, dnde empieza
cada punto y dnde acaba la lista. Las etiquetas que se utilicen en cada caso deben
aparecer al principio de lnea, o al menos sin texto por delante (slo espacios o
tabulaciones). Podemos recurrir a tres tipos distintos de listas, cada una con una
presentacin diferente: no numeradas, numeradas y listas de definiciones (glosarios).
Las listas se pueden anidar, es decir, en el lugar donde debera ir uno de los trminos de la
lista se pone una nueva lista, que no tiene porqu ser del mismo tipo.

Lista no numerada <ul>: Lista numerada <ol>:

<ul>

<ol>

<li>Madrid

<li>Lentejas

<li>Barcelona

<li>Garbanzos

<li>Zaragoza

<li>Judas

</ul>

</ol>

Lista de definiciones/glosario: <dl>

<dl>
<dt>Primer trmino a definir
<dd>Definicin del primer trmino
<dt>Siguiente trmino a definir

Madrid

1. Lentejas

<dd>Siguiente definicin

Barcelona

2. Garbanzos

</dl>

28

(El

atributo compact de

etiqueta <dl> puede

para

3. Judas

Zaragoza

generar

una

la

usarse
lista

de

definiciones que requiere menos

espacio.

Tablas

He aqu las principales etiquetas para mostrar tablas en cdigo HTML:

Etiqueta de inicio

Etiqueta final

<TABLE>

</TABLE>

Descripcin de la etiqueta
Contenedor para los bordes de la tabla

<TABLE BORDER> </TABLE>

Etiqueta para tabla con bordes

<TR>

</TR>

Establece una fila dentro de una tabla

<TD>

</TD>

Define una celda dentro de un tabla

<TH>

</TH>

<CAPTION>

</CAPTION>

Centra una cabecera en la parte superior de la

tabla o en un lado
Fija un ttulo en la parte superior de la tabla.

Adems, las tablas pueden llevar una serie de Atributos:

border=numero

Establece si aparece o no un borde alrededor de las celdas de la tabla, y cual es el grosor del
borde.

align=topbottom

Dentro de la etiqueta caption, establece la ubicacin del ttulo de la etiqueta, ya sea en la

parte superior o inferior de la tabla

align=leftcenterright

29

Establece la ubicacin de los datos dentro de las celdas. Funciona dentro de las
etiquetas tr, th y td.

valign=topmiddlebottombaseline

Especifica la alineacin vertical de los datos

Nowrap

Establece que las lneas contenidas en las celdas afectadas no se pueden romper para
ajustarse al ancho de las celdas.

colspan=numero

Indica cuntas columnas ocupa la celda.

rowspan=numero

Indica cuntas lneas ocupa la celda.

cellspacing=numero

Indica el espacio insertado entre las celdas individuales de una tabla

cellpadding=numero

Establece el espacio entre el borde de la celda y el contenido de la celda.

width=numeroporcentaje

Establece el ancho de la tabla o de las celdas especificadas en un valor en pxeles o en

porcentaje con respecto al ancho del documento.
Ejemplos

de

cdigo

HTML

para

la

creacin

de

Tablas:

Bordes para las Celdas y colores de las celdas.

2.6. ESTRUCTURA Y DISPOSICIN.

30

 Documento HTML
Una pgina HTML es un archivo simple que contiene texto formateado con etiquetas HTML.
Tradicionalmente, el archivo recibe una extensin .htm o .html, pero una pgina Web puede
potencialmente llevar cualquier otra extensin. Se puede crear una pgina Web incluso con
los editores de texto ms bsicos (como la aplicacin bloc de notas, por ejemplo), pero
tambin existen editores ms sofisticados.
Los editores WYSIWYG ("What You See Is What You Get") son editores de interfaz grfica para
trabajar en una pgina Web y que permiten visualizar mejor lo que vern los visitantes del
sitio. Con este tipo de editor, se pueden agregar etiquetas simplemente haciendo clic con el
ratn y sus atributos pueden modificarse escribiendo las propiedades en un formulario. En
todo caso, para utilizar de forma ptima este tipo de editores, es de gran ayuda tener un
buen nivel de conocimiento de HTML. Tambin hay editores HTML que muestran las
etiquetas, los atributos y sus valores en colores diferentes para hacerlos ms fciles de leer.
Algunas veces incluyen herramientas para comprobar si el cdigo HTML es vlido.
Tradicionalmente, el archivo recibe una extensin .htm o .html, pero una pgina Web puede
potencialmente llevar cualquier otra extensin, incluyendo:

.asp para una pgina generada dinmicamente por ASP (Active Server Pages);
.cgi para una pgina generada dinmicamente con CGI (Common Gateway Interface);
.php, .php3 o .php4 para una pgina generada dinmicamente en PHP;
.pl para una pgina generada dinmicamente en Perl (Practical Extraction and Report
Language);etc.

Disposicin de documentos HTML

Un documento HTML comienza con la etiqueta <HTML> y termina con la etiqueta </HTML>.
Contiene adems un encabezado que describe el ttulo de la pgina y un cuerpo donde se
encuentra

el

contenido

de

etiquetas <HEAD> y </HEAD>.

la

pgina.
El

El

cuerpo

encabezado
est

est

delimitado

delimitado

por

por

las
las

etiquetas <BODY> y </BODY>

Por ejemplo, esta es una pgina HTML minimalista:
<HTML>
<HEAD>
<TITLE>Ttulo de pgina</TITLE>
31

</HEAD>
<BODY>
Contenido de pgina
</BODY>
<HTML>
Declaracin de tipo de documento
La pgina HTML debe incluir la declaracin de tipo de documento, una referencia al estndar
HTML que se utiliza, a fin de especificar el estndar de cdigo que emplea la pgina. La
declaracin se hace agregando una lnea como sta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML> <HEAD>...</HEAD> <BODY>Contenido de pgina</BODY> </HTML>
Esto indica qu DTD (Document Type Definition) se est utilizando. DTD es una referencia a
las caractersticas del lenguaje utilizado. La tabla resume las declaraciones para las
principales versiones de HTML:
Versin

Declaracin

HTML 2.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//EN">

HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 4.01

Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Transitional: <!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML

4.01

HTML

4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset: <!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0

Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional: <!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">

Frameset: <!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

XHTML

1.0

Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
32

XHTML 1.1 <!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

XHTML

1.0

Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2.7. FORMULARIOS.
Los formularios permiten que el usuario introduzca informacin (seleccionando tems o
directamente escribiendo en los lugares indicados) que ser procesada por scripts asociados
al servidor de acuerdo con la especificacin CGI ('Common Gateway Interface'). Elementos
como FORM, INPUT, SELECT, TEXTAREA y sus atributos permiten disear formularios que
rellenar el usuario.
Sin embargo, su funcionalidad no deviene del HTML sino de los scripts ejecutables que
residen en el servidor y que reciben la informacin introducida por el usuario. El uso de
formularios est muy extendido en las pginas web sobre todo por su utilizacin como
interfaz de entrada para realizar las bsquedas.

APLICACIN EN EL DESARROLLO DE SU PROYECTO POR EQUIPO

En esta materia

de programacin web se aplica en nuestro proyecto que por la general

est enfocado de cmo programar una pgina de web, el proceso general

engloba

el

diseo y la creacin de un sitio web que se poda pasar informacin entre el servidor y
ciertos programas externos.
Afortunadamente, tenemos herramientas potentes para realizar esto, ya que han surgido
nuevas tecnologas que permiten que el acceso a una base de datos desde el web por
ejemplo php, mysql etc. Actualmente ya existen bastantes ejemplos de aplicaciones web
complejas como el de instituciones para hacer ms eficientes sus tiempos de respuesta y
reducir costos, beneficiando al cliente final.
Como resultado se pretende llegar al propsito de implementar un sitio de web ya sea de
instituciones facilitando la actualizacin de la informacin relevante. Garantizar a los

33

usuarios el acceso a la informacin y la documentacin necesarias que permitan el desarrollo

del estudio, la docencia, la investigacin y del conocimiento.

CONCLUSIONES.
La tecnologa para el desarrollo de aplicaciones a travs de sistemas web ha evolucionado al
punto de volverse no solo un simple sistema de informacin, sino que ahora se pueden
desarrollar aplicaciones complejas que cumplen con todas las necesidades que se le
presenten y que cumplen con requerimientos de seguridad, rapidez y facilidad de uso.
Actualmente ya existen bastantes ejemplos de aplicaciones web complejas, tales como las
instituciones bancarias, algunas dependencias gubernamentales y la infinidad de tiendas
que cuentan con una infraestructura muy desarrollada de aplicaciones y servicios a travs
de la web. Otro ejemplo es la tecnologa B2B que permite que las empresas tengan una
relacin ms ntima con sus proveedores y clientes, que es otra forma de aplicaciones que
aprovechan el Internet para hacer ms eficientes sus tiempos de respuesta y reducir costos,
beneficiando al cliente final.
Las tecnologas emergentes abren una nueva ventana de posibilidades an por explorar y
explotar, que permitirn hacer actividades que quizs ahora parecen imposibles o remotas.
Se visualiza un mejor futuro con un gran desarrollo por las ventajas que da el usar este tipo
de tecnologa, cada vez encontraremos ms sistemas que se apoyan de la infraestructura
existente con Internet, aunque, por la contraparte, tambin habrn ms amenazas por el
aumento de la cultura hacker y los cada vez ms complejos virus que aprovechan
cualquier hueco de seguridad. Queda para los desarrolladores de sistemas, administradores
y fabricantes de software de servidor, el reto de desarrollar esquemas donde la informacin
34

fluya con mayor facilidad independiente de la plataforma o la aplicacin, encontrar formas

mejores y ms seguras de desarrollo de aplicaciones web, que permitan que podamos ver
sistemas ms complejos a los actualmente conocidos, que con seguridad y de forma rpida
resuelvan los problemas cotidianos y acerquen los servicios a los usuarios.
Es un mundo cercano y con esperanza, donde la tecnologa se acerca a la sociedad, en
especial a los que menos han podido aprovecharla y disfrutarla. Como resultado del
desarrollo de este proyecto se obtuvo la implementacin del sitio web para el Centro
Universitario del Sur, el cual permite realizar la actualizacin dinmica de informacin
utilizando la tecnologa ASP y Bases de Datos en Microsoft Access, facilitando la actualizacin
de la informacin relevante.

35