Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Lab 1. Introduccion Al Entorno de Practicas DCU PDF

    Cargado por

    mcgmc
    20 vistas7 páginas

    Título original

    Lab 1. Introduccion al Entorno de Practicas DCU.pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    20 vistas7 páginas

    Lab 1. Introduccion Al Entorno de Practicas DCU PDF

    Cargado por

    mcgmc

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 7

    Prcticas de

    Desarrollo Centrado en el Usuario

    Introduccin al
    Entorno para Desarrollo Web en
    prcticas de DCU

    Introduccin al entorno de trabajo para


    prcticas de DCU
    Objetivos

    Preparar un entorno de trabajo para el desarrollo de interfaces web

    Construir una interfaz web utilizando HTML y CSS

    ndice
    1. Preparando el entorno de trabajo
    1.1. Mquina Virtual
    1.2. Entorno para desarrollo web
    2. Tecnologas bsicas para el desarrollo web
    2.1. HTML
    2.2. CSS
    2.3. JavaScript
    3. Ejemplo/Ejercicio

    1. Preparando el entorno de trabajo


    1.1

    Mquina Virtual

    En las sesiones de laboratorio de DCU trabajaremos con mquinas virtuales preparadas por los
    tcnicos del DS IC. Cada grupo de alumnos tendr asignada una mquina virtual para todo el
    cuatrimestre. Estas mquinas vienen preparadas con las herramient as necesarias para
    desarrollar el proyecto de la asignatura.
    En PoliformaT->Recursos->Prcticas el documento Manual Usuario Maquina Virtual contiene
    los pasos necesarios para acceder a las mquinas virtuales de cada usuario. Podis acceder a
    dichas mquinas virtuales desde cualquier ordenador de los laboratorios o desde vuestro
    ordenador personal.

    1.2

    Entorno para desarrollo web

    Para el desarrollo de Interfaces Web en las prcticas de DCU se utilizarn las tecnologas
    tpicas de desarrollo web: HTML, CSS y JavaScript. Junt o a estas tecnologas bsicas
    utilizaremos tambin jQuery (este lenguaje se ver en los laboratorios 2 y 3).
    La infraestructura software que se utilizar en el laboratorio para facilitar el desarrollo web
    utilizando estas tecnologas podr ser:

    Aptana Studio1, es un IDE multiplat forma, open source, basado en Eclipse y focalizado en
    el des arrollo web. Permite el desarrollo de aplicaciones dinmicas para web, con soport e a
    HTML, CSS y Javascript, as como a PHP, Adobe Air o Ruby on Rails

    Eclipse 2 como entorno de trabajo (ms detalles de Eclipse en el documento Eclipse y


    Xampp en PoliformaT) y el plugin WTP integrado en Eclipse ms el paquete xampp (ms
    detalles de xampp en el documento Eclipse y Xampp en P oliformaT) que incluye el servidor
    web Apache, como servidor Web para desplegar el prototipo. Esto nos permite construir
    prototipos de clientes web y ejecutarlos con un servidor web.

    2. Tecnologas bsicas de desarrollo web


    El desarrollo web es un concepto muy amplio que implica el desarrollo de un sitio web desde su
    forma ms sencilla, una sola pgina esttica, hasta una aplicacin web compleja, comercio
    electrnico o servicios sociales en red.
    Un sitio web se divide en diferent es partes independientes que s e pueden programar utilizando
    diferentes tecnologas. Estas partes son:

    1
    2

    Parte Cliente: front-end, pginas web que ven y con las que interactan los clientes.
    Parte Servidor: back-end, parte del sitio web que no ven los clientes.

    www.aptana.com
    www.eclipse.org

    Parte Cliente-Servidor: interaccin de la parte cliente y de la parte servidor.


    Bases de Datos: almacn de datos utilizados en el sitio web

    En el contexto de esta asignatura nos vamos a centrar en la parte Cliente de los sitios web,
    centrndonos en el desarrollo de interfaces web.
    Aunque existen divers as formas de implementar interfaces web, actualmente las tecnologas
    tpicas estn constituidas bsicamente por:

    2.1

    HTML y CSS (creacin de las pginas web)


    JavaScript y DOM (programacin de la parte Cliente)

    HTML

    HTML (HyperText Markup Language) es el lenguaje estndar para el diseo Web. Est basado
    en el uso de etiquetas y se utiliza para describir la estructura y la informacin de un documento
    Web.
    La estructura mnima de cualquier documento Web es la siguiente:
    <!DOCTYPE html>
    <html>
    <head><title></title></head>
    <body></body>
    </html>

    <!DOCTYPE> : Se incluye al inicio del documento e indica la versin de HTML que incluye
    el documento para que el navegador lo interprete como tal.
    <HTML>: Delimita el inicio y fin del documento Web.
    <HEAD>: Generalmente, contiene: (1) el ttulo de la pgina: <title>, (2) informacin meta
    (keywords, autor, encoding, etc): <meta>, (3) enlaces a ficheros css: <link> y (4) scripts
    javascript: <script>.
    <BODY>: Incluye la estructura e informacin del document o Web mediante etiquet as
    estndar HTML como <p>, <div>, <ul>, etc.

    2.2

    CSS

    CSS es un lenguaje para definir estilos de presentacin de contenido HTML. Est basado en el
    concepto de selectores.
    Un selector es un patrn que nos permite seleccionar elementos del documento para
    asociarles propiedades como colores, tamaos, posiciones, fondos, etc. Los estilos CSS
    pueden aadirse en el propio documento HTML o en plantillas externas . El uso de plantillas
    externas facilita el reso entre documentos. Una plantilla CSS se compone de un conjunt o de
    estilos que se aplicarn a diferentes elementos del documento HTML.
    Ejemplo de estilo CSS:
    body {
    background: #333333;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    }
    h1 {
    font-size: 200%
    }
    p {
    margin: 5px 0;
    padding: 0 3px;
    }

    Los estilos CSS pueden definirse en tres sitios diferentes:


    En la misma etiqueta sobre la que se aplica el estilo.
    En la etiqueta <head>.
    En una plantilla externa (recomendado).
    Los selectores CSS bsicos utilizan el nombre de una etiqueta, el id, o la clase de un
    componente:
    p{ background-color: red; }
    Cambia el color de fondo a todos los prrafos del documento
    #titulo{ background-color: red; }
    Se aplica slo al elemento con id titulo
    .fondo-destacado{ background-color: red; }
    Se aplica a los elementos cuyo atributo class sea fondo-destacado

    2.3

    JavaScript

    JavaScript es un lenguaje para la inclusin de scripts en los documentos HTML. Los scripts
    JavaScript permit en aadi r comportamiento al documento, por ejemplo animaciones, acciones
    frente a eventos del usuario, recuperacin de datos, etc. Un documento HTML deja de ser
    contenido esttico y pasa a contener tambin funcionalidad ejecutable. Los scripts no se
    compilan, son enviados al navegador junto al documento HTML, y el navegador se encarga de
    interpretarlos.
    Los scripts se definen mediante la etiqueta <script>. Se pueden definir en:

    Etiqueta <HEAD>:
    o Se carga antes que el contenido de <BODY>.
    o Nos aseguramos que est cargado antes de usarlo (puede bloquear la carga del
    documento si tarda mucho).
    o Est centralizado al inicio del documento.
    Dentro de <BODY>:
    o Se define all donde se usa.
    o Mala idea: muy complicado de mantener.
    Al final del documento:
    o La pgina se carga antes que el script.
    o Es problemtico si hay componentes que dependen de funcionalidad JavaScript (el
    usuario puede hac er click en un botn antes de cargar el cdigo JavaScript
    correspondiente).
    Los scripts JavaScript tambin pueden ser incluidos a partir de una librera (fichero .js)
    externa.

    Los scripts JavaScript suelen interactuar con objetos del documento:


    Es necesario saber cuando el DOM est creado para ejecutar este cdigo.
    Se utiliza el evento onLoad del documento. Este evento se dispara cuando se ha cargado
    todo el documento, incluido recursos como las imgenes (esto puede oc asionar el retraso
    en la ejecucin del script).

    Ejemplo de JavaScript dentro de <head>:


    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript Date</title>
    <script type="text/javascript">
    function setYear() {
    var currentYear = new Date();
    document.getElementById('year').innerHTML =
    currentYear.getFullYear();
    }
    window.onload = setYear;
    </script>
    </head>
    <body>
    <p>Cuando cargue, el ao 2000 cambiar por el ao actual</p>
    <p id="year">2000</p>
    </body>
    </html>
    Ejemplo de JavaScript como un fichero externo (misFunciones.js):
    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript Date</title>
    <script type="text/javascript"
    src="scripts/misFunciones.js"></script>
    </head>
    <body>
    <p>Cuando cargue, el ao 2000 cambiar por el ao actual</p>
    <p id="year">2000</p>
    </body>
    </html>

    3. Ejemplo/Ejercicio
    Utilizando HTML y CSS crear una pgina web esttica que os pres ente como desarrolladores
    web. En la imagen de abajo tenis un ejemplo de pgina web.

    También podría gustarte