WIXLIB

Programación en Internet 2007-2008Departamento de Lenguajes ySistemas InformáticosDiseño de un sitio webProgramación en InternetCurso 2007-2008Programación en Internet – Curso 2007-2008Índice IntroducciónDescripción del sitioPaso 1: modelo de datosPaso 2: crear el diagrama de navegaciónPaso 3: diseñar cada pantallaPaso 4: crear el diagrama de páginasPaso 5: definir cada páginaDocumentación finalDLSI - Universidad de Alicante1

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Introducción Un buen diseño es el punto de partida de ladocumentación del sitio web La documentación es esencial:– Constancia de lo que se quiere hacer Facilita las fases posteriores Disminuye los costes (tiempo y dinero) Directo al grano, sin rodeos y sin tener que pensar lascosas 1000 veces– Constancia de los que se está haciendo Nadie está las 24h pensando en lo mismo– Constancia de lo que se ha hecho ¿Por qué lo hice así y no de otra forma?– Medio de comunicación entre personas quetrabajan en equipoProgramación en Internet – Curso 2007-2008Descripción del sitio web Sistema de información junto con la funcionalidadqrequerida:– Enunciado simplificado de la práctica de blogs (PI 2006-07,cuatrimestre 1)– El objetivo de esta práctica es implementar una aplicaciónweb para la gestión de un portal de blogs.– Cualquier visitante se podrá dar de alta en el sistema comousuario registrado y así podrá crear sus blogs o registrarseen alguno ya existente.– Cada blog tendrá una serie de datos propios (título,descripción propietariodescripción,propietario, categoríacategoría, fecha de alta y si estavisible o no la totalidad del blog).– Los blogs tendrán aportaciones (con: título, texto, fecha dealta, imagen, etc.) que las realiza únicamente el propietariodel blog y cada aportación podrá tener comentarios (contexto, autor, fecha de alta, etc.) que las pueden realizar losvisitantes del blog.DLSI - Universidad de Alicante2

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Descripción del sitio web Sistema de información junto con la funcionalidadrequerida:– Los blogs se clasifican por categorías.– Desde la página principal del portal se tienen queconsultar los blogs por categorías.– Desde la página principal de cada blog se tienenque ver todas las aportaciones y sus respectivoscomentarios– Las aportaciones y comentarios se tienen quepoder ver del más reciente al más antiguo o alrevés (ascendente o descendente).Programación en Internet – Curso 2007-2008Paso 1: modelo de datos Extraer el modelo de datos:– Modelo conceptual Æ EER Entidades Atributos Relaciones– Modelo lógico Æ Relacional TablasCamposTipos de los camposRelaciones entre las tablas (restricciones)– Modelo físico Æ Sentencias SQLDLSI - Universidad de Alicante3

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008DLSI - Universidad de Alicante4

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Paso 2: crear el diagrama denavegación Desarrollar una especificación de:––––La estructura y contenidoLa navegaciónEl comportamiento y funcionamientoEl acceso del sistema desde el punto de vista delusuario final Diagrama de navegación Æ Estructura lógicadel sitio web No existe un estándarProgramación en Internet – Curso 2007-2008Paso 2: crear el diagrama denavegación Problema: mezclar el nivel denavegación con el nivel de página El diagrama de navegación se tiene quemapear al diagrama de páginas (paso4)DLSI - Universidad de Alicante5

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008DLSI - Universidad de Alicante6

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Paso 3: diseñar cada pantalla Definir los elementos que componencadad pantallat ll dde lla aplicaciónliió jjuntot consu funcionalidad Pasos:– Papel– Herramienta de diseño gráfico– Codificación con HTML/CSS Para cada elemento, se pueden definirmúltiples alternativasProgramación en Internet – Curso 2007-2008Paso 3: diseñar cada pantalla Ejemplo: cómo introducir una fecha– Cuadros de texto: uno o varios– Listas desplegables– Calendario– DLSI - Universidad de Alicante7

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008DLSI - Universidad de Alicante8

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008DLSI - Universidad de Alicante9

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008DLSI - Universidad de Alicante10

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008EL blog del proyectoDLSI - Universidad de Alicante11

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Paso 4: diagrama de páginas Diagrama de páginas Æ Estructurafísica No existe un estándarProgramación en Internet – Curso 2007-2008DLSI - Universidad de Alicante12

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008DLSI - Universidad de Alicante13

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008Símbolos de páginasNombre.extPáginag estática de servidor comúnNombre.extPágina estática con marcos (frameset)Nombre.extPágina estática con un formularioNombre.extPrograma externo (CGI)DLSI - Universidad de Alicante14

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Modificadores de páginasPágina dinámica de servidorNombre.extNombre.extPágina dinámica de servidor (con acceso a BD)Nombre.extReferencia a otra página ya existente en eldiagramaProgramación en Internet – Curso 2007-2008EnlacesEnlace pulsado por el usuariogparap el salto))Enlace automático ((n número de segundosEnlacesFormulario enviado por POSTFormulario enviado por GET o enlace con datosFormulario enviado por POST con datos por GETContenido de un marco (frame)Fichero incluido en el servidorEnlace a una nueva ventana de navegadorEnlace tipo ‘mailto:’Enlace de entrada a un subdiagramaEnlace de salida de un subdiagramaDLSI - Universidad de Alicante15

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Otros símbolosNombreSubdiagramaURLReferencia a una web externaReferencia a un recurso no visualizabledesde el navegador (ficheros incluidos,Nombre.extdocumentos PDF o Word, vídeos, etc.)Programación en Internet – Curso 2007-2008Diagrama de ta.asppedidos.aspPresentacion.aviDLSI - Universidad de Alicante16

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Diagrama de mación en Internet – Curso 2007-2008Diagrama de Presentacion.aviPedidosinicio.htmlDLSI - Universidad de Alicanterespuesta.asppedidos.aspinicio.html17

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Diagrama de páginas A partir del diagrama de navegación sepueded realizarliun mapeo all didiagramade páginas El mapeo no es siempre 1:1– A partir de un elemento del diagrama denavegación pueden salir varias páginas enel diagrama de páginas– Varios elementos del diagrama denavegación se pueden representar por unaúnica páginaProgramación en Internet – Curso gs.phpver.phpid, asc/descid, descididDLSI - Universidad de Alicante18

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Diagrama de páginas Caso extremo: toda la web en una solapágina, con la inclusión de ficherosexternos que contienen los datos quecambian en el diagrama de navegaciónProgramación en Internet – Curso 2007-2008DLSI - Universidad de Alicante19

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso ceptadosArtículoscortos (PDF)DLSI - Universidad de AlicanteArtículoslargos (PDF)TutorialesaceptadosTutorial 1Tutorial 220

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008menu presentacionmenu Programación en Internet – Curso 2007-2008Paso 5: definir cada página Describe el contenido y la función decada página desde el punto de vista delprogramador Versión inicial y versión final una vezprogramadas Æ Evoluciona con eltiempoDLSI - Universidad de Alicante21

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008Por si hacefalta hablar conel autorFicherosexternos que seincluyenC: CreaciónL: LecturaM: ModificaciónS: SelectI: InsertU: UpdateD: DeleteW: WhereO: OrderG: Group byE: EntradaS: SalidaDLSI - Universidad de AlicanteControl de versiones(utilizar un CVS)22

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Programación en Internet – Curso 2007-2008Documentación final Todo lo anterior más:––––Instrucciones de configuración del servidorInstrucciones de configuración del SGBDInstrucciones de instalación y publicación del sitio webManual del programador: Programas empleadosLibrerías de código JavaScriptEstructura de los CSS – Normas gráficas y de diseño (identidad corporativa)– Manual de usuarioDLSI - Universidad de Alicante23

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008Documentación Ejemplo: documentación prácticaalumnoProgramación en Internet – Curso 2007-2008DLSI - Universidad de Alicante24

Programación en Internet 2007-2008Programación en Internet – Curso 2007-2008DLSI - Universidad de Alicante25

Descripción del sitio web Sistema de información junto con la funcionalidad requerida: - Enunciado simplificado de la práctica de blogs (PI 2006-07, cuatrimestre 1) - El objetivo de esta práctica es implementar una aplicación web para la gestión de un portal de blogs. - Cualquier visitante se podrá dar de alta en el sistema como