Professional Documents
Culture Documents
Sistemas de Calidad en TI
COMPETENCIA(S) IMPLEMENTAR APLICACIONES DE SOFTWARE MEDIANTE A LA(S) QUE TCNICAS DE PROGRAMACIN Y CONSIDERANDO LOS CONTRIBUYE LA REQUERIMIENTOS DE LA ORGANIZACIN PARA EFICIENTAR SUS PROCESOS. ASIGNATURA: OBJETIVO GENERAL DE LA ASIGNATURA:
EL ALUMNO DESARROLLAR UN SITIO Y APLICACIONES WEB CON ACCESO A BASE DE DATOS, PARA EFICIENTAR PROCESOS EN UNA ORGANIZACIN
Expectativas
Evaluacin
TIPO DE SABER CRITERIO Tipo de Indicador IP= Indicador Plataforma IC= Indicador Clase Examen (Plataforma) Tareas o Actividades de plataforma Examen Integrador ConsultaBibliogrfica Consulta Virtual Saber Hacer (producto) Saber Hacer (desempeo) Avance de proyecto ProyectoIntegrador Coevaluacin Bitcora Auto evaluacin Calificacin completa del 3er Parcial IP IP IC IC IC IC IC IC IC IC IC IP IC 1 30% 10% 0% 5% 5% 5% 20% 10% 0% 2 25% 10% 0% 5% 5% 5% 20% 15% 0% 3 0% 5% 20% 5% 5% 10% 15% 0% 30% 2.50% 5% 2.50% 0% 100% Extraord. 60% 0% 0% 0% 0% 0% 0% 0% 0% 0% 0% 0% 40% 100% PONDERACIONES ASIGNADAS PARA LAS EVALUACIONES
Saber
Saber Hacer
Saber Ser
5% 5% 5%
0% 100%
5% 5% 5%
0% 100%
Reglamento
Temario
No I UNIDADES NOMBRE FUNDAMENTOS DE SITIOS WEB
Entorno de las aplicaciones Web (Internet, Intranet y Extranet)
II
Bibliografa
Autor Mcneil, Patrick Ao (2008 ) Ttulo del Documento The web designers Idea Book: The Ultimate Guide Principios de seguridad en el comercio electrnico (1era Edicin) Web Applications Design Patters (Interactive Technologies. 1st Ed.) Ciudad Ontario Pas Canada Editorial FW Publications Inc.
(2009)
Mxico, D.F.
Mxico
AlfaOmega Ra-Ma
Vora, P.
(2009)
New, Jersey.
EE.UU.
Morgan Kaufmann.
Navegadores para Web. HTML. Javascript y Vbscript. Applets en Java. Flash (lenguaje ActionScript). XML. PDF. AJAX, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML).
Se usan para acceder a recursos del servidor, como bases de datos y generacin de contenido dinmico para las pginas.
Servidor Web
Un servidor web es un programa que implementa el protocolo HTTP ). Este protocolo pertenece a la capa de aplicacin del modelo OSI y est diseado para transferir lo que se llama hipertextos, pginas web o pginas HTML: textos complejos con enlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductores de msica.
Servidor Web.
Algunos ejemplos: CERN httpd Apache IIS Resin Tomcat Geronimo JBoss JOnAS Cherokee
UWE UML
El mtodo UWE UML consta de seis modelos:
Modelo de casos de uso para capturar los requisitos del sistema. Modelo conceptual para el contenido (modelo del dominio). Modelo de usuario: modelo de navegacin que incluye modelos estticos y dinmicos. Modelo de estructura de presentacin, modelo de flujo de presentacin. Modelo abstracto de interfaz de usuario y modelo de ciclo de vida del objeto. Modelo de adaptacin.
Aspectos de seguridad.
Las aplicaciones Web estn ms expuestas a ataques. Se pueden tener ataques en tres niveles:
A la computadora del usuario. Al servidor. A la informacin en trnsito.
La seguridad en Web tiene 3 etapas primarias: Seguridad de la computadora del usuario. Seguridad del servidor Web y de los datos almacenados ah. Seguridad de la informacin que viaja entre el servidor Web y el usuario.
Seguridad de la computadora del usuario Los usuarios deben contar con navegadores y plataformas seguras, libres de virus y vulnerabilidades. Tambin debe garantizarse la privacidad de los datos del usuario.
Seguridad del servidor Web y de los datos almacenados ah Se debe garantizar la operacin continua del servidor, que los datos no sean modificados sin autorizacin (integridad) y que la informacin slo sea distribuida a las personas autorizadas (control de acceso).
Tarea
Realizar la lectura sobre la metodologa para creacin de sitios Web y realizar un resumen del mismo (en la libreta)
XHTML
Reformulacin de HTML 4.0 en XML
HTML
El HyperText Markup Language es el lenguaje de publicacin usado por la World Wide Web. Es una aplicacin SGML (Standard Generalized Markup Language), un sistema para definir lenguajes para dar formatos a documentos.
Pgina 29
Por ser una aplicacin SGML incluye una Definicin del Tipo de Documento (DTD)
El DTD define la sintaxis de las estructuras de formato y puede incluir definiciones adicionales, tales como referencias a entidades de caracteres (nombres simblicos o numricos de caracteres que pueden incluirse en un documento HTML).
Pgina 30
Pgina 31
Ejemplo XHTML
<?xml version=1.0 encoding=UTF-8?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/html4/strict.dtd> <html xmlns=http://www.w3.org/1999/xhtml" xml:lang=es lang=es> <head> <title>Ttulo del documento</title> </head> <body> <h1>Cabecera de documento</h1> <!-- Ttulo de seccin --> <p id=inicial>Un prrafo en el cuerpo<br />del documento.</p> <hr /> </body> </html>
Pgina 32
Pgina 33
Pgina 34
Pgina 35
Pgina 36
Pgina 37
Pgina 39
Direccionamiento
Por razones tcnicas relacionadas con el algoritmo de texto bidireccional de UNICODE, los elementos en bloque y en lnea difieren en el modo de heredar la informacin de direccionamiento.
Pgina 40
XHTML (4)
Organizacin de elementos
Elementos de nivel superior
html, head, body
Elementos de cabecera
link, meta, script, style, title
Elementos en bloque
div, h1 a h6, hr, noscript, p, pre
Elementos en lnea
br, a, img, map, area, script, span
Pgina 41
XHTML (5)
Listas
dl, dt, dd, ul, ol, li
Tablas
table, caption, tr, th, td
Elementos de frase
abbr, acronym, code, em, strong, var
Formularios
form, button, fieldset, legend, input, label, select, optgroup, option, textarea
Pgina 42
Entidades de carcter
Sintaxis:
&cdigo;
Donde cdigo es una palabra reservada o un nmero que indica el carcter a representar
Ejercicio
Crear una pgina Web que incluya:
Una imagen Ttulos, prrafos Un men con enlaces a otras pginas
Hecho con una lista desordenada
Etctera
XHTML (6)
Atributos principales
Se pueden aplicar a la mayora de los elementos.
id: permite asignar un identificador a un nico elemento class: permite asignar una clase o un conjunto de clases a un elemento. title: permite aplicar un ttulo a un elemento especfico. style: permite aplicar un estilo a un elemento especfico.
Pgina 46
XHTML (7)
Atributos de internacionalizacin
Se pueden aplicar a la mayora de los elementos.
lang: especifica un lenguaje que se aplicar a un elemento y a su contenido. El valor del atributo debe especificarse conforme a la RFC 1766 (p.e, es-ES para espaol). dir: especifica el sentido del texto de izquierda a derecha (dir="ltr", el valor por defecto) o de derecha a izquierda (dir="rtl").
Pgina 47
XHTML (8)
Atributos de teclado
Se pueden aplicar a los elementos a, area y formularios.
acceskey: permite asignar una tecla de acceso rpido a un elemento. tabindex: permite asignar un orden de tabulacin a un elemento.
Pgina 48
XHTML (9)
Eventos
Eventos de formulario onchange: se ejecuta el script cuando el elemento cambia. onsubmit: se ejecuta el script cuando se enva el formulario. onreset: se ejecuta el script cuando se limpia el formulario. onselect: se ejecuta el script cuando se selecciona el elemento. onblur: se ejecuta el script cuando el elemento pierde el foco. onfocus: se ejecuta el script cuando el elemento gana el foco.
Pgina 49
XHTML (10)
Eventos de ventana
onload: el script se ejecuta cuando se carga un documento. onunload: el script se ejecuta cuando se descarga un documento.
Eventos de teclado
onkeydown: el script se ejecuta cuando se presiona una tecla. onkeypress: el script se ejecuta cuando se presiona y libera una tecla. onkeyup: el script se ejecuta cuando se libera una tecla.
Pgina 50
XHTML (11)
Eventos de ratn
onclick: al hacer clic con el ratn. ondblclick: al hacer doble clic con el ratn. onmousedown: al presionar el botn del ratn. onmousemove: cuando se mueve el puntero del ratn. onmouseout: cuando el puntero del ratn se mueve fuera de un elemento. onmouseover: cuando el puntero del ratn se mueve sobre un elemento onmouseup: al liberar el botn del ratn.
Pgina 51
CSS
Los elementos de HTML permiten a los autores de pginas Web marcar la estructura de un documento La especificacin de HTML sugiere cmo se debieran representar los elementos en un navegador
Por ejemplo, <strong> suele mostrarse en negrita, <h1> suele mostrarse en un tipo de fuente mayor...
Pero no son ms que eso, sugerencias Las hojas de estilo (CSS) nos dan control total sobre el diseo de la pgina Web
{ color: green; }
DECLARACIN
Por ejemplo, sean las siguientes reglas: h1 { font-weight: bold; } h2 { font-weight: bold; } h3 { font-weight: bold; } Como las declaraciones son idnticas, se pueden agrupar: h1, h2, h3 { font-weight: bold; }
Elemento style
Se puede meter el estilo en el propio documento HTML
<html> <head> <title>...</title> <style type=text/css> <!-h1 { color: green; } --> </style> </head> <body> ...
Elemento <link>
<html> <head> <title>...</title> <link rel=stylesheet type=text/css href=miestilo.css/> </head> <body> ... </body> </html>
Clases e identificadores
Son atributos que tienen todos los elementos de HTML y que permiten crear potentes selectores
Atributo class Atributo id
Clases
Permite crear grupos de elementos a los que se va a aplicar el mismo estilo
<p class=importante>...</p> ... <span class=importante>...</span>
Los nombres de clases deben ser una sola palabra, aunque pueden tener dgitos y guiones:
codigo-fuente, nombre2, etc.
Identificadores
<div id=logo>...</div>
El valor de un atributo id debe ser nico en el documento Desde la hoja de estilo, nos referimos a ellos con una almohadilla:
#logo { ... }
Selectores contextuales
No slo debe coincidir el elemento, sino el contexto en el que aparece Supongamos que tenemos:
h1 em { color: red; } { color: red; }
Pseudo-clases y pseudo-elementos
Permiten lograr algunos efectos deseados por los diseadores y que no se pueden conseguir con las etiquetas HTML ni con las clases Ejemplos de pseudo-clases:
Los enlaces: visitados, no visitados, encima...
Ejemplos de pseudo-elementos:
La primera letra de un elemento, la primera lnea, aadir elementos no presentes en el documento fuente...
Pseudo-clases de enlaces
Permiten saber el estado en que se encuentra un enlace
a:link { text-decoration: none; }
Pseudo-clases de enlaces
a:link { text-decoration: none; }
Ejercicio
Primero, comentaremos en clase unas pocas de las mltiples propiedades de CSS A continuacin, aplicar una hoja de estilo externa a la pgina del ejercicio anterior para intentar que quede, ms o menos, como sigue: