INGENIEROS EN SISTEMA COMPUTACIONALES

CATEDRÁTICO:
ING. JOSÉ LUIS ROVIRA BALAN

MATERIA:
PROGRAMACION WEB

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

PRESENTA:
YESICA GARCÍA GARCÍA

ÍNDICE
UNIDAD 1:

ARQUITECTURA

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

1.1. Evolución de las aplicaciones web.---------------------4
1.2. Arquitectura de las aplicaciones web.------------------9
1.3. Tecnologías para el desarrollo de aplicaciones web.---10
1.4. Planificación de aplicaciones web.--------------------13

UNIDAD 2:

LENGUAJE DE MARCADO

2.1. Introducción.-----------------------------------------16
2.2. Representación de documentos.-------------------------17
2.3. Tipos de datos básicos.-------------------------------18
2.4. Estructura global de un documento.--------------------28
2.5.

Elementos

básicos:

texto,

vínculos,

listas,

tablas,

objetos,

imágenes

y

aplicaciones.--------------------------30
2.6. Estructura y disposición.-----------------------------42
2.7. Formularios.------------------------------------------46
Aplicación en el desarrollo de su proyecto por equipo------47
CONCLUSIÓN-------------------------------------------------48

INTRODUCCIÓN
La programación Web, parte de las siglas WWW, que significan World Wide Web o telaraña
mundial. Para realizar una pagina con la programación 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 más que un nombre, que
identifica una computadora, dentro de esa computadora un archivo que indica el camino al
recurso que se solicita.

2

El siguiente concepto dentro de la programación Web, es el protocolo encargado de llevar la
información 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 información que se encuentre almacenada en una
pagina Web, este lenguaje es el HTML(Hypertext Markup Language). En la programación
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 programación web , se desfasaron los diseños gráficos
tradicionales, con lo que se empezaron a diseñar interfaces concretas para este medio,
buscando ficheros pequeños para facilitar la carga de los mismos. La programación web se
orientaba a un diseño muy cargado y interactuando con el usuario.

UNIDAD 1 ARQUITECTURA
1.1.

EVOLUCIÓN DE LAS APLICACIONES WEB.

Desde que Internet y la Web fueron creados, una cantidad infinita de posibilidades se han
abierto, quizás, la más importante y usual sea el acceso de datos e información desde
cualquier sitio. Las personas que se dedican al desarrollo de aplicaciones

podrían

considerar esto como un desafío, ya que los avances tecnológicos de estos últimos años
exigen aplicaciones más rápidas, ligeras y robustas que permitan utilizar la Web. Sin lugar a
dudas, internet es una de las últimas tecnologías que más rápidamente se está
desarrollando para su introducción en los hogares. Las previsiones apuntan a su integración
como un electrodoméstico más, con unas capacidades y servicios que evolucionaran
rápidamente. Por ese motivo, cada vez más adquieren importancia en las respuestas de los
usuarios frente a la implantación de estas nuevas tecnologías.

3

con el objetivo de que. una nueva red creada por los Estados Unidos. en el hipotético caso de un ataque ruso. que se convirtió en el estándar de comunicaciones dentro de las redes informáticas. La National Science Fundation crea su propia red informática llamada NSFNET. Internet ha permitido a estas personas mayor flexibilidad en términos de horarios y de localización. Estados Unidos crea una red exclusivamente militar. se pudiera tener acceso a la información militar desde cualquier punto del país. se ha podido mejorar de manera significativa la manera de trabajar de algunas personas al poder hacerlo desde sus hogares. Entonces dos investigadores crearon el Protocolo TCP/IP. creando así una gran red con propósitos científicos y académicos. En plena guerra fría. En principio. En los años 60. y cualquier persona con fines académicos o de investigación podía tener acceso a la red. Dos años después. ya contaba con unos 40 ordenadores conectados. la red contaba con 4 ordenadores distribuidos entre distintas universidades del país. Tanto fue el crecimiento de la red que su sistema de comunicación se quedó obsoleto. ARPANET siguió creciendo y abriéndose al mundo. Esta red se creó en 1969 y se llamó ARPANET. 4 .Gracias a Internet y las conexiones de alta velocidad que lo acompañan. Las funciones militares se desligaron de ARPANET y fueron a parar a MILNET. que más tarde absorbe aARPANET.

Tim Berners Lee dirigía la búsqueda de un sistema de almacenamiento y recuperación de datos. En el Centro Europeo de Investigaciones Nucleares (CERN). 5. descarga directa). transferencia de archivos(FTP). 4. A partir de entonces Internet comenzó a crecer más rápido que otro medio de comunicación. AOL. documentos. para su consulta o descarga. El autor William Gibson hizo una revelación: el término "ciberespacio". El paso inmediatamente posterior en su evolución fue la inclusión de un método para elaborar páginas dinámicas que 5 . En un principio la web era sencillamente una colección de páginas estáticas. jabber). YIM. 2.El desarrollo de las redes fue abismal. Berners Lee retomó la idea de Ted Nelson (un proyecto llamado "Xanadú”) de usar hipervínculos. formando el embrión de lo que hoy conocemos como INTERNET. y se crean nuevas redes de libre acceso que más tarde se unen aNSFNET. etc.  La publicación web o la programación web Son términos adecuados para describir el proceso general que engloba el diseño y la creación de un sitio web. el texto que aparece en la pantalla contiene palabras en otro color y para resaltar las palabras clave. P2M. etc. 1. así que el autor se basó en los videojuegos. Algunos de los servicios disponibles en Internet aparte de la WEB son el acceso remoto a otras máquinas (SSH y telnet). transmisión de archivos (P2P. convirtiéndose en lo que hoy todos conocemos. Robert Caillau quien cooperó con el proyecto. En ese tiempo la red era básicamente textual. ICQ. aunque conocida por unos pocos. La gran ventaja que presenta la WWW son los hiperenlaces gracias a los cuales la navegación y la búsqueda de información se convierten en un juego de niños.. correo electrónico(SMTP). 3. Con el tiempo la palabra "ciberespacio" terminó por ser sinónimo de Internet. Cuando se visualiza un documento WWW. cuanta que en 1990 deciden ponerle un nombre al sistema y lo llamarón World Wide Web (WWW) o telaraña mundial. conversaciones en línea (IMSN MESSENGER. En 1985 la Internet ya era una tecnología establecida.

ya que han surgido nuevas tecnologías que permiten que el acceso a una base de datos desde el Web. comoPerl o Python. ARQUITECTURA DE LAS APLICACIONES WEB. se han abierto infinidad de posibilidades en cuanto al acceso a la información desde casi cualquier sitio. y PHP. ya que los avances en tecnología demandan cada vez aplicaciones más rápidas. generado a partir de los datos de la petición).2. El único problema es decidir entre el conjunto de posibilidades la correcta para cada situación. ASP. El viejo CGI ha cumplido con el propósito de añadir interactividad a las páginas Web pero sus deficiencias en el desarrollo de aplicaciones y en la escalabilidad de las mismas ha conducido al desarrollo de APIs específicos de servidor como Active Server Pages. como Java o VisualBasic. Afortunadamente. por ejemplo. Sun ha desarrollado 6 . Esto representa un desafío a los desarrolladores de aplicaciones. que son más eficientes que su predecesor CGI. ligeras y robustas que permitan utilizar el Web.permitieran que lo mostrado tuviese carácter dinámico (es decir. Como la mayoría de CGIs estaban escritos en lenguajes interpretados. Para aprovechar el potencial de estas tecnologías y ofertar una solución de servidor más extensible y portable. el servidor se veía sometido a una gran carga. o en lenguajes que requerían "run-time environment". Este método fue conocido como CGI ("Common Gateway Interface") y definía un mecanismo mediante el que se podía pasar información entre el servidor y ciertos programas externos. sea un mero trámite. el servidor debía lanzar un proceso para ejecutar el programa CGI. tenemos herramientas potentes para realizar esto. Con la introducción de Internet y del Web en concreto. La concurrencia de múltiples accesos al CGI podía comportar problemas graves. 1. El funcionamiento de los CGIs tenía un punto débil: cada vez que se recibía una petición.

llamada Java Server Pages. Java Virtual Machine.     Análisis 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 comunicación: tono y estilo (resumidos en un briefing creativo) Métricas 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 . Los servlets Java son muy eficientes. JSP. requerimientos de navegador/plataforma. etc. y componentes como las Java Beans creando una página Web especial que el servidor Web compila dinámico. Otra nueva tecnología viene a sumarse a las que extienden la funcionalidad de los servidores Web.la tecnología llamada servlet. proveedores. 1. expectación. 1. aplicaciones Java. etc.) Análisis de la competencia Estudio de los Perfiles de audiencia o Investigación de la audiencia/mercado: Perfiles de las audiencias principales y secundarias o Capacidades y Restricciones de la audiencia: habilidades. Los JSP permiten juntar HTML.3. TECNOLOGÍAS PARA EL DESARROLLO DE APLICACIONES WEB. necesidades típicas. DEFINICIÓN DEL PROYECTO     Descubrimiento Entrevistas a las partes interesadas (clientes. debido al esquema de threads en el que se basan y al uso de una arquitectura estándar como la JVM.

email. Responsabilidades internas. fotografías. DISEÑO ESTRUCTURAL  aroundDefinición del Contexto  Inventario del contenido existente: textos. textos. Briefing Creativo y Plan de Marketing 2. Responsabilidades de los Proveedores  Diagramas a nivel de Site y de Página 8 . imagines. traducciones. incluyendo fuentes que no    provengan de la web (libros. vídeos. etc…) Contenido que tenga que ser creado o editado (imágenes. vídeos. teléfono u otros medios o Planificación del Back-office e integración de éste con la  base de datos.            Audiencia Requerimientos o Funcionales/Interactivos o Contenidos o Visuales Alcance Métricas de éxito Marketing Mantenimiento y soporte posterior Desarrollo futuro Equipo y roles Relación con el cliente (gestión de la cuenta) Ciclo de aprobación Presupuesto Timming  Entregables en la fase de Definición del Proyecto  Para un proyecto pequeño: Plan de Proyecto  Para un proyecto grande: Plan de Proyecto. Requisitos de Soporte o Plan de soporte al usuario final o Formación o contratación de personal   internoo Mantenimiento del site en curso. etc…) Responsabilidades de autoría y edición (equipo: asignación de recursos) Plan de mantenimiento de contenidos  Definición Funcional  Requisitos Funcionales o Planificación de usuario  Requerimientos de tecnología o Tecnologías a emplear o Servidor y Hosting o Desarrollo e integración de aplicaciones (tanto propias como de terceros) o Integración de datos (tanto propios como de terceros) o Relaciones y responsabilidades con proveedores y/o terceros o Plan de pruebas: proceso de detección de errores (bug tracking) y proceso de resolución de errores (bug  fixing) o Desarrollo o mantenimiento en curso Requerimientos de planificación e integración o Integración de Marketing: marketing mediante via postal.

Prototipo de baja resolución. Contrato de Aceptación del Servicio. Wireframes: representación esquemática de las páginas. Obtención de los Componentes de diseño. Contrato de Confidencialidad  Pruebas del Diseño Estructural y Finalización de esta fase  Revisión de los wireframes con las partes implicadas (cliente.  Entregables de esta fase de Diseño Gráfico del Site  Para un proyecto pequeño: Componentes de diseño. Convenciones de Nombres y Etiquetas (Nomenclaturas). Prototipo interactivo de las secciones clave del site. Mapa del Site.  Comprobación de los wireframes con 3-5 usuarios. Guía de estilo. vídeos e ilustraciones. DISEÑO VISUAL      Diseño Gráfico del Site Aplicación de la marca e identidad visual.). Plan de Pruebas. Fotografía.    Arquitectura de la Información. Determinación del origen de las fotografías. 3. Creación y edición de contenidos de acuerdo con la arquitectura de información del site y de los diagramas de las páginas. etc.  Para un proyecto grande: Componentes de diseño.  Revisión de los Contenidos y Finalización de esta fase  Aceptación de los contenidos mediante un ciclo de aprobación de los mismos 4. Recopilación y Creación de Contenidos   Autoría de Contenidos. Cuando se requiera mantener relaciones con proveedores: Contrato con el proveedor.      Entregables de esta fase de Diseño Estructural Para proyectos pequeños: Diagrama de Arquitectura de Información. Plan de Soporte. Especificaciones Técnicas. Wireframes. Vídeo e Ilustración.  Revisión del Diseño y Finalización de esta fase 9 . Para proyectos grandes: Diagrama de Arquitectura de Información. para reutilización de los contenidos es recomendable que se preparen  directamente para la web. Licenciamiento. Especificaciones Funcionales. Wireframes.

  Aceptación del diseño mediante un ciclo de aprobación del mismo.) y aprobaciones finales. etc. Desarrollo y/o Integración del sistema de gestión de contenidos (CMS). Desarrollo de los datos y/o de la base de datos. Lanzamiento  Puesta en Marcha  Lanzamiento previo con base de datos con pocos usuarios. META tags. Pruebas en los distintos navegadores  Revisión  Revisión por parte de las partes implicadas (clientes. Pruebas de navegación. Posicionamiento del site (SEP). Soporte de usuarios. 5. Integración de datos. Planificación final del proceso de calidad. Comprobación del diseño con 3-5 usuarios. Construcción del Site Asignación de contenidos de prueba.  Mantenimiento  Puesta del site en manos del equipo de mantenimiento. Marketing sobre el site. Almacenamiento en el servidor de desarrollo (para pruebas)  Pruebas de Calidad  Prueba de los contenidos y revisión de los mismos: comprobación de enlaces. aplicaciones u otras funcionalidades. Diseño de elementos reutilizables: gráficos. Desarrollo de la aplicación. JavaScript (y/o otros scripts cliente a       nivel de página). Aplicación de estilos. revisión de textos e      imágenes. lanzamiento progresivo con la base de    datos completa. etc. Diseño y desarrollo de las páginas y plantillas: HTML. PRODUCCIÓN       Ingeniería Instalación y configuración del Servidor y del Hosting. Pruebas funcionales: pruebas sobre la aplicación y sobre elementos interactivos. CSS. 6. etc. Pruebas de integración. navegación. 10 .

de forma muy urgente. te escribo esta carta. Lenguaje de marcado de hipertexto). junto con el texto. aparte. editores e impresores. Los lenguajes de marcado suelen confundirse con lenguajes de programación. ponga primera letra mayúscula. etc". ponga mayúsculas. sangría. REPRESENTACIÓN DE DOCUMENTOS. La representación de documentos es fundamental para poder procesar estos y es una fase previa en el tiempo a la recuperación de información.. incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación. el marcado se usaba y se usa en la industria editorial y de la comunicación.1. cierre negrilla. pero es parte integrante del conjunto. Estimado Juan. ponga comillas.2. 2. El objetivo de la representación de documentos es la traducción de los mismos a términos del sistema. ponga negrillas. ya que el lenguaje de marcado no tiene funciones aritméticas o variables. El lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que. fundamento delWorld Wide Web (entramado de comunicación de alcance mundial). ya que no me has enviado. El lenguaje de marcas más extendido es el HTML (HyperText Markup Language. Establecimiento como site inicial o realización de ajustes en la planificación UNIDAD 2 LENGUAJE DE MARCADO 2. no son lo mismo.. como sí poseen los lenguajes de programación. ponga dos puntos. Sin embargo. INTRODUCCIÓN. Históricamente. Un ejemplo de cómo funciona el lenguaje de marcado puede observarse en el dictado de viva voz de un documento a una persona que lo transcribe a máquina:  Ponga estilo de carta.  Métricas sobre el site: recuperación de datos (informes). reportes y monitorización. Esta representación se lleva a cabo mediante un conjunto de fases que contribuyen mediante ciertas simplificaciones y generalizaciones a presentar una vista lógica de los 11 . así como entre autores.

 NÚMEROS ENTEROS 12 . existen muchos otros. TIPOS DE DATOS BÁSICOS. En este sentido existen ciertas similitudes con el proceso de indización que hacen que muchos especialistas hablen directamente de un proceso de indización automática para referirse al conjunto de las operaciones conducentes a la representación de los documentos. Nosotros preferimos hablar de representación de documentos en conjunto y de indización automática para una de las fases en concreto. 2. Presentamos una visión concisa de los procesos más comunes a continuación. Un tipo de datos es una propiedad de un valor que determina su dominio (qué valores puede tomar). aunque otros no.documentos que permita su comparación con las consultas. Las representaciones que generaremos serán aptas para su procesamiento por parte de aplicaciones informáticas según diversos modelos. Podemos dividir estas en:  Elección y selección de unidades de representación  Creación del léxico de la colección  Indización automática Que a su vez incorporan fases más específicas de representación que detallaremos a continuación. en torno a criterios temáticos analíticos. Es por tanto un proceso imprescindible para la recuperación de información. y para ser más exactos. qué operaciones se le pueden aplicar y cómo es representado internamente por el computador. Además de estos.3. Una parte importante de los subprocesos son independientes al modelo de recuperación de información elegido. De igual forma algunos subprocesos son más adecuados para ciertas técnicas mientras que otros no lo son. El primero de ellos hace referencia al ámbito automatizado en que tienen lugar estos procesos. aunque con algunos matices. Además la representación de los documentos se hace en torno a criterios temáticos. En general podríamos equiparar la representación de documentos al análisis documental. y más adelante aprenderemos a crear nuestros propios tipos de datos. A continuación revisaremos los tipos de datos más básicos.

.  NÚMEROS REALES 13 . preocupémonos sólo de la forma más común 123. Los valores que puede tomar un int son todos los números enteros: ..El tipo int permite representar números enteros. 3. que significa «entero»... -2. -1. 1. Por ejemplo. El nombre int viene del inglés integer. 2. . el número 123 puede ser representado de varias maneras: >>> 0o173 123 >>> 0x7b 123 >>> 0b1111011 123 >>> 123 == 0x7b True Por ahora. -3. Todas las operaciones aritméticas y relacionales pueden ser aplicadas sobre valores del tipo int: >>> 524 + 891 1415 >>> (1524 // 100) % 10 5 Los números enteros literales se escriben con un signo opcional seguido por una secuencia de dígitos: 1570 +4591 -12 Más adelante veremos otras formas de representar enteros literales. 0.

Si la parte decimal es cero.9843000 881.  El nombre float viene del término punto flotante.45E4 -24500. Hay que tener mucho cuidado.14159 -3.07 14 . que es la manera en que el computador representa internamente los números reales.14159 >>> 1024.7 es representado internamente por el computador con la aproximación 0. Por ejemplo. Todas las operaciones aritméticas y relacionales pueden ser aplicadas sobre valores del tipo float. El tipo float permite representar números reales. Esto puede conducir a resultados algo sorpresivos: >>> 1/7 + 1/7 + 1/7 + 1/7 + 1/7 + 1/7 + 1/7 0. Por ejemplo: >>> -2.69999999999999996.0 >>> 7e-2 0. porque los números reales no se pueden representar de manera exacta en un computador. puede ser omitida: >>> 881.9999999999999998 Los números reales literales se escriben separando la parte entera de la decimal con un punto. 1024. el número decimal 0. en la que se escribe un factor y una potencia de diez separados por una letra e.0 Otra representación es la notación científica. Todas las operaciones entre valores float son aproximaciones.9843 >>> -3.

3 + 2 7. y entregan como resultado un valor booleano: >>> not True or (True and False) False Las operaciones relacionales <.3 La regla general es: si en una expresión aritmética aparece algúnfloat. etc. pero siempre entregan como resultado un valor booleano: >>> 2 + 2 == 5 15 .>>> 6.1094\times 10^{-31}. y el resultado es real: >>> 5. Por ejemplo.3 + 2.1094E-31 9. >. Por lo mismo. el entero es convertido a un número real antes de evaluarla. a True y Falsetambién se les llama valores booleanos. or y not pueden ser aplicadas sobre valores booleanos.1094e-31 Los dos últimos valores del ejemplo son iguales.02e23 6.0. El nombre bool viene del matemático George Boole.  VALORES LÓGICOS  Los valores lógicos True y False son de tipo bool. Las operaciones lógicas and. respectivamente. 5. ==.02\times 10^{23} y 9. pueden ser aplicadas sobre valores de tipos comparables.. Cuando se combinan valores reales y enteros en una operación. el resultado es de tipo float. a6. que representa valores lógicos. quien creó un sistema algebraico para la lógica binaria.3 + 2 primero es convertido a 5.02e+23 >>> 9.

>>> "hola " + 'mundo' 3. sino la repetición. >>> "lo" * 5 6. El operador + aplicado a dos strings no representa la suma. es decir. el string es repetido tantas veces como indica el número: 5.4 >>> 50 < x < 100 True  TEXTO  A los valores que representan texto se les llama strings. y tienen el tipo str. 'lololololo' Las operaciones relacionales permiten comparar strings alfabéticamente: >>> "ala" < "alamo" < "bote" < "botero" < "boteros" < "zapato" True 16 . Los strings literales pueden ser representados con texto entre comillas simples o comillas dobles: "ejemplo 1" 'ejemplo 2' Los operadores aritméticos no pueden ser aplicadas sobre strings. sino la concatenación. 'hola mundo' 4.False >>> x = 95. salvo dos excepciones: 1. que significa pegar los strings uno después del otro: 2. El operador * aplicado a un string y a un número entero no representa la multiplicación.

En inglés. none significa «ninguno». que usamos para leer la entrada del usuario. Hay que tener la precaución de convertir los valores que entrega al tipo adecuado. 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. se utiliza la función len(): >>> len('universidad') 11 La función input(). el siguiente programa tiene un error de incompatibilidad de tipos: n = input('Escriba un número:') cuadrado = n * n print('El cuadrado de n es'. siempre entrega como resultado un string.Para conocer el largo de un string. 17 . que es diferente al de todos los demás valores. Por ejemplo.  El valor None tiene su propio tipo.  CONVERSIÓN DE TIPOS  Los tipos de los valores indican qué operaciones pueden ser aplicadas sobre ellos.  None es un valor que se utiliza en contextos en que ningún valor es válido.

0  cuando se utiliza cualquier valor en un contexto booleano.A veces es necesario convertir valores de un tipo a otro para poder operar sobre ellos. o None. o el string vacío ''. en que es convertido al valor False: o el valor 0. es convertido al valor True. Existen dos tipos de conversiones: implícitas y explícitas.14) True Con los operadores and y or ocurre algo más extraño: >>> 4 and 7 7 18 . el entero es convertido al real correspondiente:  >>> 56 * 8.0  448. excepto por los siguientes casos. Las conversiones implícitas son las que se hacen automáticamente según el contexto. Las más importantes son las siguientes:  cuando se utiliza un entero en un contexto real. Por ejemplo: >>> not 0 True >>> not 10 False >>> not 'hola' False >>> bool(3.

891) 3 >>> int(True) 1 >>> int(None) TypeError: int() argument must be a string or a number. True es convertido a 1 y False a 0:  >>> True * 4 + False * 8  4  >>> True + True  2  >>> n = 5  >>> "el número es " + ((n % 2 != 0) * "im") + "par"  'el número es impar' Las conversiones explícitas se realizan usando el nombre del tipo de destino como si fuera una función. se utiliza la función int: >>> int('45') 45 >>> int(3.>>> 0 and 7 0 >>> 5 or 6 5 >>> 0 or 6 or 7 6 Ejercicio: deducir cómo funcionan and y or cuando los operandos no son booleanos. para convertir un valor al tipo entero.  cuando se utiliza un valor lógico en un contexto entero. Por ejemplo. not 'NoneType' 19 .

en él encontramos el título del documento.4. se utiliza la función str: >>> str(87) '87' >>> str(True) 'True' 2. Un documento creado en HTML contiene básicamente la siguiente serie de comandos que dan forma a su contenido:         <HTML> Indica el inicio del documento. comprendido entre las etiquetas <HEAD> y </HEAD>  El cuerpo. comprendido entre las etiquetas <TITLE> y </TITLE>. </HEAD> Final de la Cabecera del documento. <BODY> Inicio del cuerpo del documento. </BODY> Final del cuerpo del documento. El documento en sí está dividido en dos zonas principales:  El encabezamiento. que no se ve en pantalla. El título debe ser breve y descriptivo de su contenido. </TITLE> Final del título del documento. </HTML> Final del documento.Dentro del cuerpo está todo lo que 20 . comprendido entre las etiquetas <BODY> y </BODY> Dentro del encabezado se encuentra información del documento.>>> 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. ESTRUCTURA GLOBAL DE UN DOCUMENTO. <HEAD> Inicio de la Cabecera. Este es el que aparece en la barra superior de nuestro navegador de páginas Web. <TITLE> Inicio del título del documento.

LISTAS. animaciones.5. ELEMENTOS BÁSICOS: TEXTO. imágenes. copiamos el siguiente código fuente y guardamos el archivo con la extensión htm ó html con el nombre de index <HTML> <HEAD> <TITLE> Proyecto Web </TITLE> </HEAD> <BODY> <HI> <CENTER> Página base o inicial </CENTER> </HI> <HR>  Esta es la primera página que observamos directamente de su código fuente. VÍNCULOS. TABLAS. </BODY> </HTML> 2. etc. pronto estaremos en condiciones de hacer más cosas interesantes. Firefox o Internet Explorer abrimos el archivo index. formularios.queremos que aparezca en la pantalla principal (texto. OBJETOS. 21 . la estructura a manera de ejemplo queda de esta manera: Con la ayuda de un Browser. Ahora con la ayuda de un procesador de palabras (Bloc de notas).  El lenguaje HTML para generarla no es difícil.) Por tanto.htm y observamos la página creada. IMÁGENES Y APLICACIONES. <P> Este es un segundo párrafo como alternativa de presentación.

Hay otras etiquetas como <P>.Un documento HTML comienza con la etiqueta <html>. Así pues. sino que sirve como título de la ventana del programa que la muestra. con la presentación y los efectos que se decidan. Este título no forma parte del documento en sí pues no se ve en la pantalla principal. donde reside la información del documento. El elemento <TITLE> contenido dentro del encabezamiento permite especificar el título de un documento HTML. etc. etc. El cuerpo de un documento HTML contiene el texto. y termina con </html>. Dentro del cuerpo se pueden aplicar una serie de efectos a través de diferentes marcas o etiquetas (también otros autores las denominan "directivas"). El tamaño mayor es el correspondiente al número 1. que sirve para definir algunos valores válidos para todo el documento. y con la apariencia de estar embutida sobre el fondo. Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura básica del lenguaje HTML en su nivel básico no son necesarios. que. imágenes. comprendidas entre las etiquetas <H1> y </H1>. para separar los distintos párrafos. siendo el número indicativo del tamaño. se presentarán ante el usuario. <H2> y </H2>. la etiqueta <HR> para obtener una raya horizontal tan ancha como la pantalla. Dentro del documento hay dos zonas principales: el encabezamiento. y el cuerpo. etc. imágenes. delimitado por las etiquetas <BODY> y </BODY>. la etiqueta de centrado <CENTER> y </CENTER> que sirve para centrar todo lo que esté dentro de ella. la estructura de un documento HTML es la siguiente: <HTML> <HEAD> <TITLE>Título de la página</TITLE> </HEAD> <BODY> [Aquí se sitúan otras etiquetas que hacen posible visualizar la página] </BODY> </HTML> El texto puede tener unas cabeceras. ya sea texto. 22 . delimitado por las marcas <HEAD> y </HEAD>. etc. (hasta el número 6).

</BODY> </HTML> Pero existen también una serie de Atributos:  <body background="nombre_de_archivo"> Especifica una imagen para el fondo del documento. del vínculo visitado y del vínculo activo. va aunque todavia un es muy segundo sencilla.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. 23 .  <body bgcolor="#rrggbb"> Especifica un color para el fondo del documento.  <body text="#rrggbb"> Especifica un color para el texto normal del documento. #rrggbb representa el valor hexadecimal del color expresado como rojo-verde-azul. parrafo.  <body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb"> Establece el color del texto de vínculo.

He aquí algunos ejemplos de cabeceras HTML y su representación en pantalla: Código HTML <h1>Cabecera Visualización 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 párrafo que será formateado antes de que se muestre en la pantalla  <pre>. se puede definir el esqueleto del documento o estructura básica. pero no todos los tipos de etiquetas están permitidos. </pre> Identifica texto que ha sido formateado previamente (preformateado) por algún otro sistema y debe ser desplegado tal como es. . es decir. dentro del cuerpo del documento. La etiqueta <tag> puede ser usada para incluir tablas en documentos.  Títulos Mediante los títulos. en sus diferentes niveles de importancia. 24 . ESTILOS Y EFECTOS BÁSICOS Todas las etiquetas que siguen a continuación se introducen a partir de la etiqueta <BODY>. . HTML tiene 6 niveles de cabeceras numeradas del uno al seis. Texto preformateado puede incluir etiquetas embebidas.

 <plaintext> Similar a <pre> excepto que no se reconocerán etiquetas incluidas. .  <blockquote>. . </u> Subrayado <tt> . </i> Itálicas <u> .  <xmp>. . </tt> Tipo de letra de 25 . . </b> Negritas <i> . Estilos lógicos <em> . </em> Énfasis <strong> . . las etiquetas incluidas serán ignoradas. . aún cuando no está definido por el estándar. . . Esta es una etiqueta arcaica. el resto del documento será traducido como texto simple. como no hay etiqueta para finalizar. </blockquote> Incluye una sección de texto citado de cualquier otra fuente. . . . pero los espacios de tabulación funcionarán. . . </samp> Incluye salida ejemplo Estilos físicos <b> . . . . </strong> Énfasis mayor <code> . . </xmp> Similar a <pre> excepto que no se reconocerán etiquetas incluidas. Algunos navegadores reconocen una etiqueta </plaintext>. . . . . <listing>. </listing> Ejemplo de listado de ordenador. .  Atributos del texto Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final. </code> Despliega una directiva HTML <samp> . Esta es una etiqueta ya arcaica.

línea. </cite> Despliega una cita  Fuentes HTML  Saltos de línea: HTML no reconoce los finales de línea del editor de texto. </kbd> Despliega una tecla del teclado <var> .<kbd> . . </var> Define una variable máquina <dfn> . . . . pero la etiqueta <BR> desplaza el texto a la línea siguiente. línea. </dfn> de escribir Despliega una definición (en muchos navegadores no funciona) <cite> . y la etiqueta <P> también lo desplaza. . Por esa razón. Por esa archivo. serán comandos salto de define visualizadas básicos línea. aunque utilicemos 26 . . . El la línea de en nuestro Hay primero siguiente. dos produce El un segundo. Visualización HTML no reconoce los finales de línea. un final aunque para <BR>pasando de párrafo <P>dejando una línea en blanco de separación con el texto siguiente. . dejando una línea de separación. razón. Código HTML HTML no reconoce utilicemos distintas de forma saltar de el texto a los finales líneas continua.

distintas líneas en nuestro archivo. izquierda. Cada linea esta centrada entre ambos margenes. Este párrafo está alineado en el centro. TT. que utilizan los códigos B. como demuestra el siguiente código: Código HTML Visualización 27 . </p> Este párrafo está alineado a la izquierda. Cada línea se sitúa en el margen derecho. pasando el texto a la línea siguiente. Este párrafo está alineado a la izquierda. respectivamente. El primero produce un salto de línea. cursiva y teletipo o máquina de escribir. Hay dos comandos básicos para saltar de línea. El segundo. define un final de párrafo dejando una línea en blanco de separación con el texto siguiente. </p> p align=center> Este parrafo esta alineado en el centro. serán visualizadas de forma continua. Cada linea esta alineada en el margen derecho.  Párrafos: A continuación se muestran las etiquetas HTML para fijar los párrafos y el resultado correspondiente: Código HTML Visualización <p> Este parrafo usa la alineacion por defecto. Etiquetas HTML de párrafo  Tipos de letra: Los tipos básicos son negrita. Cada línea se sitúa en el centro de ambos márgenes. </p> <p align=right> Este parrafo esta alineado a la derecha. I. Cada linea se coloca a la izquierda del margen. Cada línea se sitúa en el margen izquierdo.

en general. Las listas se pueden anidar. en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista. Lentejas <dd>Siguiente definición  Barcelona 2. dónde empieza cada punto y dónde acaba la lista. numeradas y listas de definiciones (glosarios). cada una con una presentación diferente: no numeradas. Podemos recurrir a tres tipos distintos de listas. 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 dónde empieza la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea. para centrar cualquier otra cosa: un gráfico. es decir. o al menos sin texto por delante (sólo espacios o tabulaciones). que no tiene porqué ser del mismo tipo. Garbanzos </dl> 28 .letra <B>negrita</B> letra negrita letra <I>cursiva</I> letra cursiva letra <TT>teletipo</TT> letra teletipo Para centrar texto (o. Lista no numerada <ul>: Lista numerada <ol>: <ul> <ol> <li>Madrid <li>Lentejas <li>Barcelona <li>Garbanzos <li>Zaragoza <li>Judías </ul> </ol> Lista de definiciones/glosario: <dl> <dl> <dt>Primer término a definir <dd>Definición del primer término <dt>Siguiente término a definir  Madrid 1.

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.  Tablas He aquí las principales etiquetas para mostrar tablas en código HTML: Etiqueta de inicio Etiqueta final <TABLE> </TABLE> Descripción 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 título en la parte superior de la tabla. Judías Zaragoza generar una la usarse lista de definiciones que requiere menos espacio. Además. establece la ubicación del título de la etiqueta.(El atributo compact de etiqueta <dl> puede  para 3. ya sea en la parte superior o inferior de la tabla  align=left¦center¦right 29 .  align=top¦bottom Dentro de la etiqueta caption.

Ejemplos de código HTML para la creación de Tablas: Bordes para las Celdas y colores de las celdas.  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. th y td.  colspan=numero Indica cuántas columnas ocupa la celda.  width=numero¦porcentaje Establece el ancho de la tabla o de las celdas especificadas en un valor en píxeles o en porcentaje con respecto al ancho del documento. Funciona dentro de las etiquetas tr.  valign=top¦middle¦bottom¦baseline Especifica la alineación vertical de los datos  Nowrap Establece que las líneas contenidas en las celdas afectadas no se pueden romper para ajustarse al ancho de las celdas.  rowspan=numero Indica cuántas líneas ocupa la celda. 30 . ESTRUCTURA Y DISPOSICIÓN.6. 2.Establece la ubicación de los datos dentro de las celdas.

cgi para una página generada dinámicamente con CGI (Common Gateway Interface). para utilizar de forma óptima este tipo de editores.html. Tradicionalmente. el archivo recibe una extensión . Documento HTML Una página HTML es un archivo simple que contiene texto formateado con etiquetas HTML. Se puede crear una página Web incluso con los editores de texto más básicos (como la aplicación bloc de notas. incluyendo:     . El El cuerpo encabezado está está delimitado delimitado por por las las etiquetas <BODY> y </BODY> Por ejemplo. los atributos y sus valores en colores diferentes para hacerlos más fáciles de leer.etc. se pueden agregar etiquetas simplemente haciendo clic con el ratón y sus atributos pueden modificarse escribiendo las propiedades en un formulario. pero también existen editores más sofisticados.htm o . En todo caso. . pero una página Web puede potencialmente llevar cualquier otra extensión. es de gran ayuda tener un buen nivel de conocimiento de HTML. Los editores WYSIWYG ("What You See Is What You Get") son editores de interfaz gráfica para trabajar en una página Web y que permiten visualizar mejor lo que verán los visitantes del sitio.php.pl para una página generada dinámicamente en Perl (Practical Extraction and Report Language). Algunas veces incluyen herramientas para comprobar si el código HTML es válido.  Disposición de documentos HTML Un documento HTML comienza con la etiqueta <HTML> y termina con la etiqueta </HTML>. . el archivo recibe una extensión .html. Tradicionalmente. pero una página Web puede potencialmente llevar cualquier otra extensión.htm o . Con este tipo de editor. Contiene además un encabezado que describe el título de la página y un cuerpo donde se encuentra el contenido de etiquetas <HEAD> y </HEAD>. por ejemplo).php3 o . También hay editores HTML que muestran las etiquetas. esta es una página HTML minimalista: <HTML> <HEAD> <TITLE>Título de página</TITLE> 31 . la página. .php4 para una página generada dinámicamente en PHP. .asp para una página generada dinámicamente por ASP (Active Server Pages).

2 Final//EN"> HTML 4.w3. a fin de especificar el estándar de código que emplea la página.dtd">  Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/xhtml1/DTD/xhtml1-loose.01 HTML 4. una referencia al estándar HTML que se utiliza.dtd"> XHTML 1.</HEAD> <BODY> Contenido de página </BODY> <HTML>  Declaración de tipo de documento La página HTML debe incluir la declaración de tipo de documento.org/TR/html4/loose.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.</HEAD> <BODY>Contenido de página</BODY> </HTML> Esto indica qué DTD (Document Type Definition) se está utilizando.0 Transitional//EN" "http://www.dtd">  Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.w3. La tabla resume las declaraciones para las principales versiones de HTML: Versión Declaración HTML 2.w3.w3. DTD es una referencia a las características del lenguaje utilizado. La declaración se hace agregando una línea como ésta: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/frameset.01 Strict//EN" "http://www.dtd">  Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD Frameset//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-strict.0  Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.org/TR/html4/strict.0//EN"> <HTML> <HEAD>.01 Transitional//EN" "http://www.dtd"> 32 .org/TR/xhtml1/DTD/xhtml1-frameset.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.w3.01  Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" "http://www.dtd">  Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1...w3.0 Frameset//EN" "http://www.0//EN"> HTML 3.

su funcionalidad no deviene del HTML sino de los scripts ejecutables que residen en el servidor y que reciben la información introducida por el usuario. ya que han surgido nuevas tecnologías que permiten que el acceso a una base de datos desde el web por ejemplo php. beneficiando al cliente final. Elementos como FORM. Como resultado se pretende llegar al propósito de implementar un sitio de web ya sea de instituciones facilitando la actualización de la información relevante.org/TR/xhtml1/DTD/xhtml1-strict. TEXTAREA y sus atributos permiten diseñar formularios que rellenará el usuario. Sin embargo. Garantizar a los 33 . SELECT.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1. FORMULARIOS. tenemos herramientas potentes para realizar esto. Los formularios permiten que el usuario introduzca información (seleccionando ítems o directamente escribiendo en los lugares indicados) que será procesada por scripts asociados al servidor de acuerdo con la especificación CGI ('Common Gateway Interface'). El uso de formularios está muy extendido en las páginas web sobre todo por su utilización como interfaz de entrada para realizar las búsquedas. APLICACIÓN EN EL DESARROLLO DE SU PROYECTO POR EQUIPO En esta materia de programación web se aplica en nuestro proyecto que por la general está enfocado de cómo programar una página de web. Actualmente ya existen bastantes ejemplos de aplicaciones web complejas como el de instituciones para hacer más eficientes sus tiempos de respuesta y reducir costos. INPUT.XHTML 1.0 Strict//EN" "http://www. Afortunadamente. mysql etc.7. el proceso general engloba el diseño y la creación de un sitio web que se podía pasar información entre el servidor y ciertos programas externos.w3.dtd"> 2.

administradores y fabricantes de software de servidor. Se visualiza un mejor futuro con un gran desarrollo por las ventajas que da el usar este tipo de tecnología. cada vez encontraremos más sistemas que se apoyan de la infraestructura existente con Internet. algunas dependencias gubernamentales y la infinidad de tiendas que cuentan con una infraestructura muy desarrollada de aplicaciones y servicios a través de la web. tales como las instituciones bancarias. 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. que permitirán hacer actividades que quizás ahora parecen imposibles o remotas. por la contraparte. Otro ejemplo es la tecnología B2B que permite que las empresas tengan una relación más íntima con sus proveedores y clientes. beneficiando al cliente final. rapidez y facilidad de uso. aunque.usuarios el acceso a la información y la documentación necesarias que permitan el desarrollo del estudio. también habrán más amenazas por el aumento de la cultura “hacker” y los cada vez más complejos virus que aprovechan cualquier hueco de seguridad. Actualmente ya existen bastantes ejemplos de aplicaciones web complejas. Las tecnologías emergentes abren una nueva ventana de posibilidades aún por explorar y explotar. el reto de desarrollar esquemas donde la información 34 . Queda para los desarrolladores de sistemas. CONCLUSIONES. la investigación y del conocimiento. que es otra forma de aplicaciones que aprovechan el Internet para hacer más eficientes sus tiempos de respuesta y reducir costos. La tecnología para el desarrollo de aplicaciones a través de sistemas web ha evolucionado al punto de volverse no solo un simple sistema de información. la docencia.

el cual permite realizar la actualización dinámica de información utilizando la tecnología ASP y Bases de Datos en Microsoft Access. facilitando la actualización de la información relevante. Es un mundo cercano y con esperanza. Como resultado del desarrollo de este proyecto se obtuvo la implementación del sitio web para el Centro Universitario del Sur. encontrar formas mejores y más seguras de desarrollo de aplicaciones web. donde la tecnología se acerca a la sociedad. que permitan que podamos ver sistemas más complejos a los actualmente conocidos. que con seguridad y de forma rápida resuelvan los problemas cotidianos y acerquen los servicios a los usuarios. en especial a los que menos han podido aprovecharla y disfrutarla. 35 .fluya con mayor facilidad independiente de la plataforma o la aplicación.