HTML + CSS + JavaScript" Ingeniería de Sistemas de Información! Grado en Ingeniería en Tecnologías de Telecomunicación" " GSyC"

Tamaño: px
Comenzar la demostración a partir de la página:

Download "HTML + CSS + JavaScript" Ingeniería de Sistemas de Información! Grado en Ingeniería en Tecnologías de Telecomunicación" " GSyC""

Transcripción

1 HTML + CSS + JavaScript" Ingeniería de Sistemas de Información! Grado en Ingeniería en Tecnologías de Telecomunicación" " GSyC"

2 2012 Pedro de las Heras Quirós" Algunos derechos reservados. Este trabajo se distribuye bajo la licencia Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License" 2012 Armando Armando Fox & David Patterson" Licensed under Creative Commons Attribution- NonCommercial-ShareAlike 3.0 Unported License" 2"

3 HTML + CSS + JavaScript "

4 HTML" HTML: descendiente del Generalized Markup Language de IBM (1960 s) => SGML (Standard Generalized Markup Language, 1986) " Documento = Colección jerarquizada de elementos o etiquetas que definen la estructura de sus contenidos" Encabezamientos, tablas, listas, anclas, párrafos, " Imágenes, código JavaScript, audio, video, canvas 2D, 3D" Formularios que permiten al usuario enviar información (texto, botones radio/check, menús desplegables...)" HTML utiliza la metáfora del libro" HTML5 extiende esta metáfora con <video>, <audio>, <canvas> 112 elementos/etiquetas" 4"

5 HTML " Lenguaje de marcado: texto combinado con marcas (anotaciones al texto) sintácticamente distinguibles " Un documento HTML está compuesto por elementos anidados! Cada elemento se define mediante una etiqueta de apertura y una de cierre <etiqueta> contenido </etiqueta> Ej. <P> contenido </P> Algunos elementos tienen una única etiqueta que se autocierra: <IMG /> Anidamiento de elementos" <table> <thead> <tr> <th> asdf </th> <th> nlkj </th> </tr> </thead> </table> 5"

6 HTML " Las etiquetas <div> y <span> son muy importantes: definen cajas/ áreas que sirven para agrupar otros elementos" Cada elemento puede tener atributos (muchos de ellos opcionales): parejas clave= valor para definir metadatos o estilos" Ej: <TABLE id= Personal > Algunos elementos además tienen contenido! Ej: <A HREF=http://google.com>Página de Google</a>" Especialmente interesantes: atributos id and class, para marcar estilos" id ha de ser único en el documento" El mismo atributo class puede asociarse a muchos elementos:" " <div id="right" class="content"> <p> Lore ipsum. <span class= special >Lore ipsum</span>. </p> </div> 6"

7 Introduction This article is a review of the book Dietary Preferences of Penguins, by Alice Jones and Bill Smith. Jones and Smith's controversial work makes three hard-to-swallow claims about penguins: First, that penguins actually prefer tropical foods such as bananas and pineapple to their traditional diet of fish Second, that tropical foods give penguins an odor that makes them unattractive to their traditional predators 7"

8 <!DOCTYPE html> <html> <head> <title>dietary Preferences of Penguins</title> <meta charset="utf-8"> <link rel="stylesheet" href="http://uri-del-css"/> </head> <body> <h1>introduction</h1> <p> This article is a review of the book <i>dietary Preferences of Penguins</i>, by Alice Jones and Bill Smith. Jones and Smith's controversial work makes three hard-to-swallow claims about penguins: </p> <ul> <li> First, that penguins actually prefer tropical foods such as bananas and pineapple to their traditional diet of fish </li> <li> Second, that tropical foods give penguins an odor that makes them unattractive to their traditional predators </li> </ul> </body> </html> Versión de HTML Metainformación Contenido 8"

9 Introduction This article is a review of the book Dietary Preferences of Penguins, by Alice Jones and Bill Smith. Jones and Smith's controversial work makes two hard-to-swallow claims about penguins:... First, that penguins actually prefer tropical foods such as bananas and pineapple to their traditional diet of fish Second, that tropical foods give penguins an odor that makes them unattractive to their traditional predators <h1>introduction</h1> <p> This article is a review of the book <i>dietary Preferences of Penguins</i>, by Alice Jones and Bill Smith. Jones and Smith's controversial work makes three hard-to-swallow claims about penguins: <p> <ul> <li> First, that penguins... 9"

10 Cascading Style Sheets (CSS)" Se recomienda no incluir información sobre estilo visual en el marcado de HTML: " mejor no usar p.ej. la etiqueta <i> </i> para enfatizar" El aspecto visual de la página se describe en documento aparte (hoja de estilo) " Mejora la accesibilidad, modificación, reutilización,.." Permite parlticulariza la identidad del producto a través del diseño" Independiza las tareas del diseñador y del desarrollador! 10"

11 Cascading Style Sheets (CSS)" En el documento HTML, dentro del elemento <head> se enlaza su hoja de estilo:" <link rel="stylesheet" href="http://uri/hoja.css"/> " En el fichero.css los selectores se asocian a atributos (estilo visual) en la hoja de estilo" Los atributos tienen valores Ejemplo de fichero.css " atributos y valores para el selector p (selecciona todos los elementos p) p { border:0px; padding:0px; margin:0px; text-align:right; } 11"

12 Cascading Style Sheets (CSS)" Mecanismos para asociar atributos a un selector: " 1. Por tipo de elemento/etiqueta " 2. Por atributo id del elemento/etiqueta" 3. Por atributo class del elemento/etiqueta" 4. Jerárquicamente según anidamiento (espacios indican anidamiento)" 5. Con comas se pueden separar selectores para aplicarles los mismos atributos" Ejemplos:"! selector qué selecciona! h1 (1) cualquier elemento h1 div#message (2) *el* elemento div cuyo ID es message.red (3) cualquier elemento de clase red div.red, h1 (2,5) elementos div de clase red o cualquier h1 div#message h1 (2,4) elementos h1 dentro de div de clase message a.lnk (3) elementos a de clase lnk a.lnk:hover (3)elementos a con clase lnk, cuando se pasa por encima de ellos con el ratón (hover) 12"

13 Cascading Style Sheets (CSS)" " Ejemplos de atributos y valores:" Atributo Valores de ejemplo! font-family Times, serif font-weight bold font-size 14pt,125%,12px font-style italic color black margin 4px background-color red,#c2eed6 border 1px solid blue text-align right text-decoration underline vertical-align middle padding 1cm 13"

14 Ejemplo de selectores CSS! Escribe un selector CSS que selecione sólo la palabra Mondays para aplicarle atributos de estilo" <p class= x id= i >I hate <span>mondays</span</p> <p>but <span class= y >Tuesdays</span> are OK.</p> 14"

15 Ejemplo de selectores CSS! Escribe un selector CSS que selecione sólo la palabra Mondays para aplicarle atributos de estilo" <p class= x id= i >I hate <span>mondays</span</p> <p>but <span class= y >Tuesdays</span> are OK.</p> 3 soluciones, de más específica a menos:" #i span p.x span.x span Redundantes en este html pues como mucho 1 " elemento puede tener ID i: " p#i span" p#i.x NO válidos:! span p span " " 15"

16 Herramientas para el desarrollador en Firefox y Chrome! Todos los navegadores modernos tienen herramientas para el desarrollador" https://developer.mozilla.org/en-us/docs/tools" En Firefox: Tools->Web Developer-> Web developer toolbar! Prueba a desactivar los estilos para ver su efecto: en la barra, css -> disable styles -> disable all styles! En la barra de herramienas activa Info -> Display Element Information en la barra para:" 1. Ver dónde está anidado un elemento dentro de la jerarquía de elementos de la página" 2. Ver si tiene asociado atributo id o class:" <table id= movies > html > body > div #main > table #movies > thead > tr > th <h1 class= title >Rotten Potatoes </h1> html > body > h1.title 16"

17 HTML + CSS + JavaScript " Este año se cumplen 20 años de la creación de Mosaic

18 Usos de JavaScript" 1. Client-side JavaScript:! Código JavaScript que corre en el browser, asociado a la página Web" Se usa JavaScript para mejorar la experiencia de usuario de aplicaciones SaaS que siguen el patrón arquitectónico MVC" Se combina JavaScript con HTML y CSS" Es importante que no se mezcle JavaScript con el código HTML" Es importante que el servicio esté disponible para cliente no-javascript" 2. Aplicaciones tipo desktop en el lado del cliente, como Google Docs! Pueden operar offline" El código JavaScript en el browser usa un servidor delgado, sólo para almacenar en la BD, recibiendo objetos JSON que convierte en HTML (en el browser)" Se programan normalmente con frameworks, como Ember.js, Backbone.js o Angular.js de Google, que soportan variantes del patrón MVC" 3. Aplicaciones SaaS pero con JavaScript en el servidor! Frameworks implementados con node.js: express, meteor" 18"

19 Consejos" Una vez que tienes un nivel intermedio de JavaScript vas a aprender a utilizarlo en el navegador" Usa las herramientas del desarrollador disponibles en todos los navegadores modernos." Durante tu aprendizaje de JavaScript ten siempre a mano una consola en tu browser para poder probar código" En Firefox y Chrome/Chromium, busca el menú de desarrollador y allí arranca la consola de JavaScript" Para depurar: " console.log("hola mundo") alert("hola") Depurador integrado en Firefox, Chrome" Y para trastear rápidamente con JavaScript + HTML + CSS:" 19"

20 La posición privilegiada de JavaScript" JavaScript es un lenguaje más" Pero al correr en el browser el código JavaScript puede:" Ser ejecutado como consecuencia de la interacción del usuario con la interfaz gráfica de la página: click de ratón, ratón pasando por encima, pulsar tecla, " Realizar peticiones HTTP al servidor sin necesidad de tener que recargar toda una página (petición AJAX)" Ser ejecutado cuando el servidor envíe una respuesta HTTP a una petición (respuesta AJAX)" Consultar y modificar el documento cargado, redibujándolo si hay cambios" Utilizar otros protocolos de comunicación alternativos a HTTP: WebSockets, WebRTC" 20"

21 Dónde poner el código JavaScript?" La etiqueta HTML <script> permite incluir código JavaScript en una página Web" Formas NO recomendadas de usarla: código mezclado en el body " <html> <head><title>update Address</title></head> <body> <!-- MAL: embedding scripts directly in page, esp. in body --> <script> <!-- // MAL: "hide" script body in HTML comment // (modern browsers may not see script at all) function checkvalid() { // MAL: checkvalid is global if!(fieldsvalid(getelementbyid('addr'))) { // BAD: > and < may confuse browser's HTML parser alert('>>> Please fix errors & resubmit. <<<'); } // MAL: "hide" end of HTML comment (l.3) in JS comment: --> </script> <!-- MAL: using HTML attributes for JS event handlers --> <form onsubmit="return checkvalid()" id="addr" action="/update"> <input onchange="rp.filter_adult" type="checkbox"/> <!-- MAL: URL using 'javascript:' --> <a href="javascript:back()">go Back</a> </form> </body> </html> 21"

22 Dónde poner el código JavaScript?" La forma recomendada es guardar el código en fichero aparte y utilizar la etiqueta HTML <script src="url"> para incluirlo en la sección HEAD del documento, no poniendo código mezclado en el body" Misma justificación que para sacar el estilo a ficheros.css" Los elementos HTML que vayan a iteraccionar con JavaScript:" O bien se añaden al DOM en una función JavaScript setup() O bien forman parte del documento HTML pero inicialmente no se muestran (atributo CSS display: none) Luego en algún momento desde JavaScript se cambia su estilo para que aparezcan" De cualquiera de las dos formas, si el browser no tiene JavaScript activado no mostrará los elementos HTML que requieren JavaScript, lo que es bueno 22"

23 El Document Object Model (DOM)!

24 DOM" DOM: Document Object Model! World Wide Web Consortium Document Object Model: " "a platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents"! O sea: una representación estandarizada, en forma de árbol, de los elementos de un documento HTML accesible programáticamente a través de API" Coloquialmente hablamos del DOM de una página" Cada elemento DOM se define recursivamente pues una de sus propiedades es un array de elementos hijo" Por tanto, el nodo DOM que representa el elemento <html> incluye todo el documento, con nodos hijos para <head> y <body>, y <body> tiene nodos hijos para cada una de las etiquetas anidadas que contenga ese documento: <h1>, <div>, " Cada elemento puede tener atributos: <img src= >, <a href= >, <div class= >, <span id= >, 24"

25 DOM" Inspección del DOM en Firefox: " En barra de herramientas de desarrollador: Info- >Display Element Information, o" Menú Tools->Web Developer->Inspector, o" En 3D: Menú Tools -> Web Developer->Tilt" También accessibles desde Web Console" 25"

26 Acceso al DOM desde JavaScript" En un browser, el objeto global JavaScript está accesible en la variable global window window.x === x Cuando el browser carga una nueva página, el HTML de la página se analiza para generar su árbol DOM" En window.document (=== document) está la raíz del árbol DOM de la página que está mostrando el browser" Llamando a métodos de window se puede:" recorrer y consultar el árbol DOM de la página actual" añadir/eliminar elementos al árbol DOM, modificar su contenido y modificar/eliminar/añadir atributos (p.ej. id o class) de elementos, lo que provoca que se redibuje la parte afectada de la página 26"

27 API JSAPI" El objeto window ofrece algo más que el DOM" Ofrece propiedades y funciones para manipular el DOM y otras específicas del browser, con el nombre de API JSAPI! location, document, document.head, document.body, document.write(string), document.getelementbyid(string), alert(string), confirm(string), Ejemplo: prueba a asignar una url a window.location en la consola" Las implementaciones del lenguaje JavaScript son bastante similares en los diferentes browsers" Sin embargo, la API JSAPI no es tan uniforme entre browsers! Existen varias bibliotecas que recubren JSAPI para homogeneizar: YUI, Prototype, DoJo. La más usada: jquery! 27"

28 jquery" jquery es una API que recubre JSAPI, proporcionando uniformidad entre browsers" Generalmente usaremos jquery y no JSAPI" jquery es la API para manipular el DOM más utilizada" Y la biblioteca JavaScript más utilizada ( > 60% de los sitios Web)" jquery extiende JSAPI con animaciones, soporte para CSS, eventos y AJAX" jquery define una función global: jquery() $() es un alias de jquery() 28"

29 Función global jquery(),$() jquery / $() es una función sobregarcada (overloaded). Dependiendo de los argumentos que se le pasan hace una cosa u otra" 1. Pasándole un selector de CSS (un string) :! Devuelve los elementos del DOM correspondientes al selector CSS que se pasa como argumento, o null si no hay ninguno" Si se le pasa en un 2º argumento un elemento, sólo devuelve los descendientes de éste " Si devuelve varios elementos, se itera luego sobre ellos con.each para acceder a cada elemento de la colección devuelta" 2. Pasándole HTML (un string):! Crea el elemento HTML correspondiente al argumento (que ha de tener etiquetas HTML para no confundirse con un selector CSS del caso anterior) y lo devuelve recubierto/envuelto en un objeto jquery, pero NO lo inserta en el DOM (hay funciones para hacerlo)! 3. Pasándole un/unos elemento JSAPI del DOM (ej. document o window):! Devuelve un objeto jquery que recubre el elemento del argumento" 4. Pasándole una función como argumento! Ejecuta la función después de que se haya cargado todo el documento y el DOM esté preparado para ser manipulado. Equivalente a $(document).ready(f) 29"

30 Selección de elementos con $('selector-css') " Ejemplos de selectores CSS (los mismos de una hoja CSS):" selector qué selecciona! h1 cualquier elemento h1 div#message *el* elemento div cuyo ID es message.red cualquier elemento de clase red div.red, h1 los elementos div de clase red o cualquier h1 div#message h1 los elementos h1 dentro de los div de clase message a.lnk elementos a de clase lnk a.lnk:hover elementos a con clase lnk, cuando se pasa por encima de ellos (hover) Ejemplos de llamadas a $('selector-css'): " jquery('#movies'): el elemento con id movies $('#movies') $('h1.title') : el elemento con id movies : elementos h1 de clase title 30"

31 Propiedades y funciones de elementos DOM recubiertos por jquery()/$()" Hay 3 tipos de acciones que se pueden realizar sobre un elemento o un conjunto de elementos devueltos por jquery('selector-css')/$('selector-css'):" 1. Cambiar su aspecto visual modificando la clase CSS del/de los elementos" 2. Cambiar su contenido modificando el html del/de los elementos o el texto del contenido del elemento" 3. Animar el/los elementos (mostrar/ocultar, desvanecerse/ reaparecer, )" Consulta " A continuación presentamos algunas funciones" 31"

32 Funciones para elementos seleccionados por jquery() Notación e.func(args) es una función que se aplica a un elemento e devuelto por jquery(). Ej: $('h1.title').func(args). Si no se indica otra cosa, devuelve el elemento tras aplicársele la función, por lo que se pueden llamar en cascada e.is( :cond') Comprueba si e cumple la condición cond:, que puede ser una de estas: ':checked', ':selected', ':enabled', ':disabled' e.addclass('cssclass'),.removeclass('cssclass'),.hasclass() e.insertbefore(elem),.insertafter(elem),.remove(),.replacewith(elem),.appendto(elem) e.clone() Devuelve copia recursiva de los descencientes de e e.html(['htmlstring']) Devuelve (o pone si hay argumento) el html del elemento e.text([ texto']) Devuelve (o pone si hay argumento) el contenido (p.ej. a un <h1> texto </h1> e.val([val]) Devuelve o pone el valor del elemento: para textboxes el contenido, para botones la etiqueta, para menús el texto de la opción seleccionada e.attr('attr' [,nuevovalor]). Devuelve o pone atributos Ej: $('img').attr('src, 'http://google.com') e.find('selector-css') Devuelve elementos hijos seleccionados por selector-css. Ej: $('#movies tr') == $('#movies').find('tr') 32"

33 Funciones para elementos seleccionados por jquery() e.css( atributo') Devuelve valor del atributo CSS del elemento e e.css({ atributo':'valor', }) Pone valores a los atributos CSS del elemento Animaciones: e.hide([duracion][,callback]),.show([duracion][,callback]) Muestra/oculta el elemento, tardando duracion ('fast', 'slow' o milisegundos), y cuando termina llama a la función callback e.slideup([duracion][,callback]), Desaparece como persiana.slidedown([duracion][,callback]),.slidetoggle([duracion][,callback]) e.fadeout([duracion][,callback]), Desaparece haciendo transparente.fadein([duracion][,callback]) e.fadeto(duracion, target, callback) Target es un valor de transparencia entre 0.0 y "

34 Ejemplos" Visita una página que use jquery, p.ej. la página " Como es normal, usa la biblioteca jquery J " Prueba ahora en la consola Web las siguientes llamadas:" > window.document; > window.document.getelementbyid( banner-secondary'); // Usando API JSAPI > $('#banner-secondary'); // Usando jquery > jquery( div'); // Selecciona todos los <div> del documento > $( h2.logo').hide()// Usa Tools->Web Developer Extension->View Source->View Generated Source // Verás el estilo que le ha puesto <h2 style="display: none;" class="logo"><a href="/" title="jquery">jquery</a></h2> > $( h2.logo').show() // Cambia de nuevo el style para que se muestre > h=$( div#banner-secondary') // Selecciona el elemento <div> de id CSS banner-secondary > h.slideup('slow') // Y ahora lo anima ocultándolo lentamente > h.slidedown('slow') // Y ahora lo anima haciéndolo aparecer lentamente > h.slidetoggle(2500) // Si estaba oculto lo hace aparecer, y viceversa > h2=$( #home-content h2') // los <h2> dentro del elemento con id #homecontent, no incluhe el h2 del logotipo > h2.fadeto(2000, 0.25) // los vuelve transparentes > $( h2').fadeto(2000,0.25) // y lo mismo con todos los <h2> (incluído logo) 34"

35 jquery: Registro de manejadores de eventos sobre elementos del DOM!

36 Eventos y callbacks" JSAPI permite registrar funciones JavaScript que el browser llamará cuando ocurran eventos en la interfaz: pulsar botón, mover ratón sobre elemento, enviar formulario, " Les llamaremos gestores/manejadores de eventos o callbacks! JSAPI define varios tipos de eventos, que jquery extiende" Algunos elementos tienen un comportamiento predefinido para algunos eventos. Ej. click en un enlace carga la página de la url" En las callbacks podemos programar acciones jquery que modifican el DOM " 36"

37 Registro de manejadores para eventos con jquery" Cómo registrar eventos! elemento.tipo-evento(func([event]){ }) Asocia a elemento el manejador/callback func para cuando ocurra tipo-evento. Cuando ocurra tipo-evento sobre elemento, el browser llamará a func(event) pasando en event el evento que ha ocurrido (click de ratón, )!! Tipos de Eventos" Tipos de eventos aplicables a cualquier elemento:" o o o o click, dblclick, mousedown/mouseup, mouseenter/mouseleave keypress (event.which devuelve el código ASCII dentro del manejador)" focus/blur (el elemento obtiene/pierde el foco)" focusin/focusout (el padre del elemento obtiene/pierde el foco)" Eventos aplicables a elementos accionables por el usuario (forms, checkboxes, radio buttons, text box, text field, menús):" o change " o select (event.which devuelve el texto seleccionado dentro del manejador)" o submit (disparado cuando se envía un formulario) "" 37"

38 Ejecución de callbacks" El browser llama a un manejador de eventos/ callback cuando se produce el evento sobre el elemento con el que se asoció el manejador" Si hay registrado un manejador para el elemento, o para alguno de sus elementos ancestros, se ejecutan en cadena antes del comportamiento predefinido (si existe):" La cadena comienza en el elemento en el que se produce el evento y termina en el objeto global (window)" Si un manejador devuelve true, se ejecuta el siguiente en la cadena" Si el manejador devuelve false, se interrumpe la ejecución en cadena, y la del comportamiento predefinido, que es el último" 38"

39 Ejemplo" Aplicación Web que muestra películas de cine" Podría estar implementada con Django / Rails / PHP/ Node / Java, " Nosotros la hemos implementado con Node (descárgala)" Vamos a añadir con jquery una checkbox para seleccionar películas aptas para menores (Ratings G y PG), sin que para ello haya que pedir una nueva página al servidor" " " Añadimos a public/index.html: <head>... <script src='http://code.jquery.com/jquery min.js' type='text/javascript'></script> <script src='/javascripts/rp.js' type='text/javascript'></script> 39"

40 Ejemplo" <body> <h2>all Movies</h2> <table id='movies'> <thead> <tr> <th>movie Title</th> <th>rating</th> <th>release Date</th> <th>more Info</th> </tr> </thead> <tbody> <tr> <td>aladdin</td> <td>g</td> <td> :00:00 UTC</td> <td><a href="/movies/1">more about Aladdin</a></td> </tr>... <tr> <td>raiders of the Lost Ark</td> <td>pg</td> <td> :00:00 UTC</td> <td><a href="/movies/4">more about Raiders of the Lost Ark</a></td> </tr> </tbody> </table> </body> </html> public/index.html 40"

41 Ejemplo" Creamos el fichero public/javascripts/rp.js" RP = { setup: function() { // construct new DOM elements $('<label for="filter" class="explanation">' + 'Restrict to movies suitable for children' + '</label>' + '<input type="checkbox" id="filter"/>' ).insertbefore('#movies').change(rp.filter_adult); }, filter_adult: function () { // 'this' is JSAPI element that received event (checkbox) if ($(this).is(':checked')) { $('#movies tbody tr').each(rp.hide_if_adult_row); } else { $('#movies tbody tr').show(); }; }, hide_if_adult_row: function() { if (! /^G PG$/i.test($(this).find('td:nth-child(2)').text())) { $(this).hide(); } } } $(RP.setup); // when document ready, run setup code 41"

42 Ejemplo" Creamos el fichero public/javascripts/rp.js" RP = { setup: function() { // construct new DOM elements $('<label for="filter" class="explanation">' + 'Restrict to movies suitable for children' + '</label>' + '<input type="checkbox" id="filter"/>' ).insertbefore('#movies').change(rp.filter_adult); }, filter_adult: function () { // 'this' is JSAPI element that received event (checkbox) if ($(this).is(':checked')) { $('#movies tbody tr').each(rp.hide_if_adult_row); } else { $('#movies tbody tr').show(); }; }, hide_if_adult_row: function() { if (! /^G PG$/i.test($(this).find('td:nth-child(2)').text())) { $(this).hide(); } } } $(RP.setup); // when document ready, run setup code RP.setup se ejecutará una vez que esté todo el DOM generado 42"

43 Ejemplo" Creamos el fichero public/javascripts/rp.js" RP = { setup: function() { // construct new DOM elements $('<label for="filter" class="explanation">' + 'Restrict to movies suitable for children' + '</label>' + '<input type="checkbox" id="filter"/>' ).insertbefore('#movies').change(rp.filter_adult); }, filter_adult: function () { // 'this' is JSAPI element that received event (checkbox) if ($(this).is(':checked')) { $('#movies tbody tr').each(rp.hide_if_adult_row); } else { $('#movies tbody tr').show(); }; }, hide_if_adult_row: function() { if (! /^G PG$/i.test($(this).find('td:nth-child(2)').text())) { $(this).hide(); } } } $(RP.setup); // when document ready, run setup code Inserta el código HTML de la checkbox 43"

44 Ejemplo" Creamos el fichero public/javascripts/rp.js" RP = { setup: function() { // construct new DOM elements $('<label for="filter" class="explanation">' + 'Restrict to movies suitable for children' + '</label>' + '<input type="checkbox" id="filter"/>' ).insertbefore('#movies').change(rp.filter_adult); }, filter_adult: function () { // 'this' is JSAPI element that received event (checkbox) if ($(this).is(':checked')) { $('#movies tbody tr').each(rp.hide_if_adult_row); } else { $('#movies tbody tr').show(); }; }, hide_if_adult_row: function() { if (! /^G PG$/i.test($(this).find('td:nth-child(2)').text())) { $(this).hide(); } } } $(RP.setup); // when document ready, run setup code Registra callback para el evento change de la checkbox. Mejor change que click: change se activa también cuando se selecciona por teclado la checkbox. En la callback this es la checkbox JSAPI, que envolvemos con $(this) para que sea un objeto jquery 44"

45 Ejemplo" Creamos el fichero public/javascripts/rp.js" RP = { setup: function() { // construct new DOM elements $('<label for="filter" class="explanation">' + 'Restrict to movies suitable for children' + '</label>' + '<input type="checkbox" id="filter"/>' ).insertbefore('#movies').change(rp.filter_adult); }, filter_adult: function () { // 'this' is JSAPI element that received event (checkbox) if ($(this).is(':checked')) { $('#movies tbody tr').each(rp.hide_if_adult_row); } else { $('#movies tbody tr').show(); }; }, hide_if_adult_row: function() { callback if (! /^G PG$/i.test($(this).find('td:nth-child(2)').text())) { $(this).hide(); } } } $(RP.setup); // when document ready, run setup code Itera sobre cada tr del tbody de #movies, y lo pasa como this a la función hide_if_adult_row 45"

46 Ejemplo" Creamos el fichero public/javascripts/rp.js" RP = { setup: function() { // construct new DOM elements $('<label for="filter" class="explanation">' + 'Restrict to movies suitable for children' + '</label>' + '<input type="checkbox" id="filter"/>' ).insertbefore('#movies').change(rp.filter_adult); }, filter_adult: function () { // 'this' is JSAPI element that received event (checkbox) if ($(this).is(':checked')) { $('#movies tbody tr').each(rp.hide_if_adult_row); } else { $('#movies tbody tr').show(); }; }, hide_if_adult_row: function() { if (! /^G PG$/i.test($(this).find('td:nth-child(2)').text())) { $(this).hide(); } } } $(RP.setup); // when document ready, run setup code Muestra todos los tr 46"

47 Ejemplo" Creamos el fichero public/javascripts/rp.js" RP = { setup: function() { // construct new DOM elements $('<label for="filter" class="explanation">' + 'Restrict to movies suitable for children' + '</label>' + '<input type="checkbox" id="filter"/>' ).insertbefore('#movies').change(rp.filter_adult); }, filter_adult: function () { // 'this' is JSAPI element that received event (checkbox) if ($(this).is(':checked')) { $('#movies tbody tr').each(rp.hide_if_adult_row); } else { $('#movies tbody tr').show(); }; }, hide_if_adult_row: function() { if (! /^G PG$/i.test($(this).find('td:nth-child(2)').text())) { $(this).hide(); } } } $(RP.setup); // when document ready, run setup code 2º td del tr pasado en this 47"

48 Comentarios sobre el Ejemplo" La checkbox se añade desde la función setup(), y ésta sólo se ejecuta si el browser tiene JavaScript" Si la hubiéramos puesto en el HTML, los browsers sin JavaScript la mostrarían pero no podrían interactuar con ella" Sólo se ha añadido un objeto al ámbito global, RP, que define su propio ámbito. Por eso todas las funciones se tienen que llamar por su nombre: RP.fname Implementación alternativa menos intrusiva de la ocultación de pelis para mayores:" Si en el servidor marcamos en index.html las filas (TR) de películas para adultos (PG13, R) usando un atributo de clase adult:" <tr class='adult > Entonces podríamos eliminar RP.hide_if_adult_row() Y substituir $('#movies tbody tr').each(rp.hide_if_adult_row); por $('#movies tr.adult').hide(); De esta forma el código JavaScript no se apoya en detalles de la presentación (ahora dependemos de que la calificación esté en la 2ª columna de la tabla (td:nth-child(2)) 48"

49 Eventos definidos y disparados por el usuario" Se pueden definir nuevos eventos utilizando esta otra forma de registrar callbacks para un evento:" elemento.on('nuevo-evento', func(event){ }) Y luego se puede llamar a estos eventos explícitamente con trigger Ejemplo que puedes probar en la consola Web de Firefox, en la página de películas de la siguiente sección sobre Ajax:" $('#movies').on('mievento', function(){ alert( $( this ).text() ); }); $('#movies').trigger('mievento, ['hola ] ); 49"

50 AJAX!

51 Introducción" En 1998 Microsoft añade el objeto XmlHttpRequest o xhr a su navegador Internet Explorer 5 (IE5)" En 2005 Google Maps es una de las primeras aplicaciones que demuestra la potencia de AJAX" 51"

52 Objeto XmlHttpRequest (xhr) El objeto JavaScript XmlHttpRequest, o xhr, que proporcionan muchos browsers permite realizar RPCs asíncronas: la llamada retorna antes de obtenerse la respuesta del servidor" Envía un mensaje de petición HTTP desde JavaScript sin que sea necesario redibujar toda una página al obtener el mensaje de respuesta" Genera un mensaje de petición HTTP normal, al que le añade la cabecera X-Requested-With: XMLHttpRequest! Cuando llega la respuesta se llama a una callback que utiliza la respuesta obtenida (p.ej. una vista parcial HTML, o XML, o JSON, texto, o nada) para modificar el DOM de la misma página desde la que se hace la petición" Al no recargar toda la página se tarda menos en mostrar la respuesta y la interfaz ofrece una interacción más dinámica" En jquery se utiliza $.ajax para usar el objeto xhr 52"

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1 Índice HTML HyperText Markup Language Conceptos básicos Historia y evolución de HTML XHTML vs. HTML HTML dinámico Hojas de estilo (CSS) DOM Diseño de servicios Web 2 DATSI Qué es HTML? Lenguaje de publicación

Más detalles

Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:

Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras

Más detalles

SEGUNDA PARTE: DOM y jquery

SEGUNDA PARTE: DOM y jquery SEGUNDA PARTE: DOM y jquery 1. Conoce a jquery jquery jquery: Una librería javascript MUY popular Colección de utilidades y herramientas Para manipular los elementos de la página - Contenido - Atributos

Más detalles

DISEÑO WEB (I y II) CONTENIDO TEMÁTICO

DISEÑO WEB (I y II) CONTENIDO TEMÁTICO DISEÑO WEB (I y II) CONTENIDO TEMÁTICO 1. Historia de internet 2. Introducción a las aplicaciones web 3. Estructura de un sitio web 4. Accesibilidad web a. Normas de accesibilidad del World Wide Web Consortium

Más detalles

Programa. Conceptos básicos: variables, valores y objetos predefinidos, operadores, etc. etc. Callbacks, eval(), etc.

Programa. Conceptos básicos: variables, valores y objetos predefinidos, operadores, etc. etc. Callbacks, eval(), etc. Programa Programa 1. Introducción. Repaso HTML-CSS. Orientaciones Generales. 2. Javascript: Qué es? Dónde se ejecuta? Cómo se ejecuta? Conceptos básicos: variables, valores y objetos predefinidos, operadores,

Más detalles

Librerías JavaScript jquery y Zepto. Juan Quemada, DIT, UPM

Librerías JavaScript jquery y Zepto. Juan Quemada, DIT, UPM Librerías JavaScript jquery y Zepto 1 Librerias Javascript Las librerias JavaScript actuales son multi-navegador Funcionan en IE, Firefox, Safari, Chrome, Opera,... w Ahorran mucho tiempo -> utilizarlas

Más detalles

LENGUAJES DE PROGRAMACIÓN 4 MÓDULOS. 56 Horas

LENGUAJES DE PROGRAMACIÓN 4 MÓDULOS. 56 Horas LENGUAJES DE PROGRAMACIÓN 4 MÓDULOS. 56 Horas HTML, XHTML Y CSS K008 10 horas Obtener un conocimiento base sobre las tecnologías usadas en la creación de páginas web. Conocer la estructura y comandos básicos

Más detalles

DESARROLLO WEB EN ENTORNO CLIENTE

DESARROLLO WEB EN ENTORNO CLIENTE DESARROLLO WEB EN ENTORNO CLIENTE CAPÍTULO 1: Selección de arquitecturas y herramientas de programación Juan Manuel Vara Mesa Marcos López Sanz David Granada Emanuel Irrazábal Jesús Javier Jiménez Hernández

Más detalles

Firebug. Manual de usuario

Firebug. Manual de usuario Firebug Manual de usuario Fecha: 24/07/2008 Referencia: EJIE S.A. Mediterráneo, 3 Tel. 945 01 73 00* Fax. 945 01 73 01 01010 Vitoria-Gasteiz Posta-kutxatila / Apartado: 809 01080 Vitoria-Gasteiz www.ejie.es

Más detalles

FORMACIÓN ESPECIALIZADA EN HERRAMIENTAS Y LENGUAJES DE PROGRAMACIÓN WEB

FORMACIÓN ESPECIALIZADA EN HERRAMIENTAS Y LENGUAJES DE PROGRAMACIÓN WEB HERRAMIENTAS Y LENGUAJES DE PROGRAMACIÓN WEB La consolidación de los medios online como soporte principal de comunicación, así como la coyuntura económica, que relega a los soportes publicitarios convencionales

Más detalles

Introducción al desarrollo web (idesweb) - 3 a ed.

Introducción al desarrollo web (idesweb) - 3 a ed. Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 4: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en

Más detalles

Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web

Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web La Web 1. Qué es la Web? 7 1.1 Lado servidor: HTTP, FTP, lenguajes, SQL 7 1.2 Lado cliente: HTML, CSS, JavaScript 10 2. Los lenguajes y su utilidad 10 2.1 HTML 10 2.2 CSS 14 2.3 JavaScript 17 2.4 Ejemplo

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 3 Horas Objetivo General: Construir páginas Web en base

Más detalles

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto) HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional

Más detalles

Tema 6 Parte III. Frameworks web para dispositivos móviles

Tema 6 Parte III. Frameworks web para dispositivos móviles Tema 6 Parte III Frameworks web para dispositivos móviles 2 1 Introducción Frameworks web para dispositivos móviles Frameworks web para móviles Frameworks web para móviles 3 Nos permiten desarrollar un

Más detalles

Parte III: AJAX y REST

Parte III: AJAX y REST Tema 3: Javascript Parte III: AJAX y REST Texto http://www.flickr.com/photos/kosmar/62381076 Cómo hacer peticiones al servidor desde Javascript, usando el estilo REST AJAX 2 Asynchronous Javascript And

Más detalles

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.

Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales. 1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio

Más detalles

PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario

PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario DATOS GENERALES: Nombre del Módulo: Diseño y elaboración de páginas web Sesión No. 1 Duración 2 horas 1.1 Determina la estructura del sitio web con base en las necesidades del usuario Estructura y compara

Más detalles

Guía Práctica de Comprobación de Accesibilidad: FORMULARIOS

Guía Práctica de Comprobación de Accesibilidad: FORMULARIOS Guía Práctica de Comprobación de Accesibilidad: FORMULARIOS Centro de Referencia en Accesibilidad y Estándares Web Mayo 2009 Copyright 2009 Instituto Nacional de la comunicación (INTECO) El presente documento

Más detalles

Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB

Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB Máster en DISEÑO Y DESARROLLO DE PROYECTOS WEB OBJETIVOS El máster está compuesto por los módulos de Diseño de páginas Web profesionales y Desarrollo de sitios Web con PHP y Javascript. Al finalizar el

Más detalles

Objetivos y Temario CURSO PROGRAMACION JAVASCRIPT Y JQUERY

Objetivos y Temario CURSO PROGRAMACION JAVASCRIPT Y JQUERY Objetivos y Temario CURSO PROGRAMACION JAVASCRIPT Y JQUERY OBJETIVOS JavaScript es un lenguaje de programación para interactuar con los navegadores, que proporciona a los sitios Web dinamismo e inmediatez.

Más detalles

JavaScript,, AJAX y otras tecnologías web. Área de Ingeniería Telemática

JavaScript,, AJAX y otras tecnologías web. Área de Ingeniería Telemática JavaScript,, AJAX y otras tecnologías Contenidos JavaScript AJAX Flash 2 JavaScript Lenguaje interpretado como PHP, pero se ejecuta en cliente no en servidor Sintaxis semejante a la del lenguaje Java y

Más detalles

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto

Más detalles

Prácticas de Programación Multimedia.

Prácticas de Programación Multimedia. Prácticas de Programación Multimedia. Las prácticas de la asignatura Programación Multimedia van a consistir en el diseño de un sitio web con distintos contenidos multimedia sobre el que se irán añadiendo

Más detalles

(Rich Internet Applications) (Aplicaciones de internet enriquecidas).

(Rich Internet Applications) (Aplicaciones de internet enriquecidas). (Rich Internet Applications) (Aplicaciones de internet enriquecidas). JavaScript, jquery, jquery UI Es utilizado en los sitios y aplicaciones web para agregar funcionalidad. Utilizado en el lado del cliente

Más detalles

Introducción al desarrollo web (idesweb)

Introducción al desarrollo web (idesweb) Introducción al desarrollo web (idesweb) Práctica 3: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en una página

Más detalles

Widget de catálogos. Manual de Usuario. Versión 2. Madrid 13/08/2015

Widget de catálogos. Manual de Usuario. Versión 2. Madrid 13/08/2015 Widget de catálogos Manual de Usuario Madrid 13/08/2015 Versión 2 Contenidos 1 Introducción... 3 2 Alta de conjuntos de datos en datos.gob.es... 7 3 Descripción del widget... 12 3.1 Widget, versión sencilla...

Más detalles

Introducción a las aplicaciones WEB

Introducción a las aplicaciones WEB Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 3 de mayo de 2010 Qué es Internet? I LAN: Local Area Network, red de ámbito local. Qué es Internet? II Qué es Internet?

Más detalles

Introducción a AJAX y visión global de la práctica

Introducción a AJAX y visión global de la práctica Introducción a AJAX y visión global de la práctica Modelo de aplicaciones Web clásico (1) La mayor parte de las interacciones del usuario causan una petición HTTP al servidor Web El servidor Web procesa

Más detalles

TFM Comunicación, Redes y Gestión de Contenidos

TFM Comunicación, Redes y Gestión de Contenidos TFM Comunicación, Redes y Gestión de Contenidos Aplicación móvil hibrida para control de asistencia y servicio técnico a domicilio y gestión de partes de trabajo Autor: Patricia Paguay Lara Tutorizado

Más detalles

c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, España 644 317 266 info@soluciones4web.com

c/ Ausias March 5, Bloque 7, 5C Denia, C.P. 03700 Alicante, España 644 317 266 info@soluciones4web.com Manual de Buenas Prácticas de maquetación en html Una buena maquetación es fundamental para obtener un diseño elegante, compatible con todos los navegadores y que cumpla las normas de accesibilidad establecidas.

Más detalles

Lic. Mariano Pistone Front-end developer +54-261-155015062 Mendoza Argentina

Lic. Mariano Pistone Front-end developer +54-261-155015062 Mendoza Argentina Te apasiona el diseño/desarrollo web y no sabés por dónde empezar? Entonces este curso es para vos, pues está pensado para personas que no se quedan quietas, que tienen ganas de superarse y de enfrentar

Más detalles

Servidores Web E2B2C. Leandro Radusky Esteban Lanzarotti. Nov 2014

Servidores Web E2B2C. Leandro Radusky Esteban Lanzarotti. Nov 2014 Servidores Web E2B2C Leandro Radusky Esteban Lanzarotti Nov 2014 Agenda Mañana HTTP: Arquitectura Cliente/Servidor: introducción teórica. Elementos de una página web: HTML, JavaScript y CSS básicos. python-bottle:

Más detalles

Su uso conlleva una serie de ventajas y desventajas propias del uso de estas herramientas.

Su uso conlleva una serie de ventajas y desventajas propias del uso de estas herramientas. LIBRERÍAS DE JAVASCRIPT (FRAMEWORKS) Un framework es una estructura de software compuesta de partes personalizables e intercambiables para el desarrollo de una aplicación. Se puede considerar también como

Más detalles

Tema 3, parte 4. Javascript: el DOM (Modelo de Objetos del. Documento) Texto. http://www.flickr.com/photos/jm3/3620744443

Tema 3, parte 4. Javascript: el DOM (Modelo de Objetos del. Documento) Texto. http://www.flickr.com/photos/jm3/3620744443 http://www.flickr.com/photos/jm3/3620744443 Tema 3, parte 4 Javascript: el DOM (Modelo de Objetos del Texto Documento) Texto Javascript parte 4 El DOM 1. El árbol DOM Conceptos básicos sobre el API DOM

Más detalles

Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en el de la página web.

Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en el <head> de la página web. Es la librería (framework) JavaScript para escribir menos y hacer más Es una forma de convertir el desarrollo cliente de una aplicación web en algo mucho más rápido y sencillo, facilitando la interacción

Más detalles

ACCIÓN FORMATIVA FINANCIADA POR EL SERVICIO PÚBLICO DE EMPLEO ESTATAL

ACCIÓN FORMATIVA FINANCIADA POR EL SERVICIO PÚBLICO DE EMPLEO ESTATAL MF0491_3: PROGRAMACIÓN WEB EN EL ENTORNO CLIENTE. (IFCD0210: DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB) 180 HORAS PRESENCIALES Nº DE EXPEDIENTE: FC/2013/0064 ACCION 141 GRUPO 1 ACCIÓN FORMATIVA FINANCIADA

Más detalles

Objetivos y Temario CURSO HTML 5 PARA ios Y ANDROID

Objetivos y Temario CURSO HTML 5 PARA ios Y ANDROID Objetivos y Temario CURSO HTML 5 PARA ios Y ANDROID OBJETIVOS Las aplicaciones para dispositivos móviles están gozando de un notable éxito. Su mercado, en continuo crecimiento, hace que todo lo que se

Más detalles

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html. Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje

Más detalles

JavaScript en HTML 5

JavaScript en HTML 5 JavaScript en HTML 5 HTML5 puede ser imaginado como un edificio soportado por tres grandes columnas: HTML, CSS y JavaScript. Ya hemos estudiado los elementos incorporados en HTML y las nuevas propiedades

Más detalles

Antes de comenzar un sitio. Empezar un sitio web

Antes de comenzar un sitio. Empezar un sitio web Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar

Más detalles

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO IBEROTEC SEMESTRE ACADÉMICO: 2014-II SÍLABO. Informáticas

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO IBEROTEC SEMESTRE ACADÉMICO: 2014-II SÍLABO. Informáticas INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO IBEROTEC SEMESTRE ACADÉMICO: 2014-II 1. DATOS GENERALES SÍLABO CARRERA PROFESIONAL : Telemática / Sistemas de Telecomunicaciones UNIDAD DIDÁCTICA : Introducción

Más detalles

1. Temario Curso Web Design 2014

1. Temario Curso Web Design 2014 1. Temario Curso Web Design 2014 FIREWORKS Diseño profesional de interfaces web Nociones generales para qué sirve?, diferencia con Photoshop Espacio de trabajo - Barras de menú, herramientas y paletas

Más detalles

12.1. Definición de un fichero XML

12.1. Definición de un fichero XML XML 12 XML son las siglas de Extensible Markup Language y desde hace unos años se ha convertido en un estándar para el manejo de datos debido a la facilidad con la que los propios usuarios pueden crear

Más detalles

Web Developer Extension

Web Developer Extension Web Developer Extension Manual rápido de usuario Fecha: 08/09/2006 Referencia: EJIE S.A. Mediterráneo, 3 Tel. 945 01 73 00* Fax. 945 01 73 01 01010 Vitoria-Gasteiz Posta-kutxatila / Apartado: 809 01080

Más detalles

Anexo I: Detalles sobre Diseño WEB y Diseño Interactivo

Anexo I: Detalles sobre Diseño WEB y Diseño Interactivo Anexo I: Detalles sobre Diseño WEB y Diseño Interactivo Anexo I: Detalles sobre Diseño WEB y Diseño Interactivo... 1 1. Los ejes alrededor de un diseño interactivo... 2 2. Los problemas de Adobe Flash...

Más detalles

HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe

HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe HTML para E-mail Guía de Buenas prácticas Less ys More Ludwig Mies van der Rohe Ejemplo de un e-mail sin buenas prácticas Textos degradados Los textos están sobre un fondo degradado Newsletter Septiembre

Más detalles

Taller de Paginas Web

Taller de Paginas Web Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion

Más detalles

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani 1 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas

Más detalles

ADAPTAEMPLEO INFORME ACCESIBILIDAD. octubre 2013. Versión 1.0

ADAPTAEMPLEO INFORME ACCESIBILIDAD. octubre 2013. Versión 1.0 ADAPTAEMPLEO INFORME ACCESIBILIDAD octubre 2013 Versión 1.0 1.0 Primera versión del documento. CONTROL DE CAMBIOS Índice de Contenido 1. ACCESIBILIDAD WEB...4 2. PUNTOS DE VERIFICACIÓN...5 2.1. IMÁGENES

Más detalles

Introducción a RIA. Andrés Pastorini. TRIA Tecnólogo Informático

Introducción a RIA. Andrés Pastorini. TRIA Tecnólogo Informático a RIA Andrés Pastorini TRIA Tecnólogo Informático El objetivo principal de la asignatura es forma al estudiante en el diseño y desarrollo de aplicaciones web ricas. Los objetivos de la asignatura son:

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 63 Horas Objetivo General: Construir páginas Web a partir

Más detalles

TU NEGOCIO EN INTERNET

TU NEGOCIO EN INTERNET Dr.TIC Tractament tecnològic per al teu negoci TU NEGOCIO EN INTERNET WordPress Nivel Medio LAS WEBS SON COMO UNA FÁBRICA WEB DOMINIO HTTP:// ESTRUCTURA PHP O HTML SERVIDOR FTP ESTRUCTURA INDEX.PHP CONTENIDO

Más detalles

Grupo de Sistemas y Comunicaciones

Grupo de Sistemas y Comunicaciones Laboratorio de Servicios Web Grupo de Sistemas y Comunicaciones gsyc-profes@gsyc.escet.urjc.es Curso 2008-2009 1 (c) GSyC, Grupo de Sistemas y Comunicaciones, 2009 http://gsyc.escet.urjc.es Se permite

Más detalles

Curso: DISEÑO WEB PARA DISPOSITIVOS MOVILES CON HTML5 + CSS3 + JAVASCRIPT

Curso: DISEÑO WEB PARA DISPOSITIVOS MOVILES CON HTML5 + CSS3 + JAVASCRIPT Curso: DISEÑO WEB PARA DISPOSITIVOS MOVILES CON HTML5 + CSS3 + JAVASCRIPT Código: 1095 Familia Profesional: Desarrollo y diseño web Acreditación: Formación reconocida a través de vías no formales Modalidad:

Más detalles

Introducción. Qué es CSS? Historia de las CSS

Introducción. Qué es CSS? Historia de las CSS Introducción En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS, que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la presentación.

Más detalles

AJAX. Asynchronous JavaScript And Xml

AJAX. Asynchronous JavaScript And Xml 1 AJAX Asynchronous JavaScript And Xml INTRODUCCIÓN (I) Ajax no es una tecnología en sí mismo. En realidad se trata de varias tecnologías independientes que se unen: XHTML y CSS, para crear una presentación

Más detalles

PROGRAMA DE DISEÑO WEB

PROGRAMA DE DISEÑO WEB Objetivo PROGRAMA DE DISEÑO WEB El objetivo de esta capacitación es que el alumno adquiera los conocimientos necesarios para poder Diseñar y Maquetar una Página Web optimizando al máximo la escritura de

Más detalles

Experto en Diseño Web Para Dispositivos Móviles con HTML5 + CSS3 + JavaScript

Experto en Diseño Web Para Dispositivos Móviles con HTML5 + CSS3 + JavaScript Modalidad: Distancia Duración: 80 h Experto en Diseño Web Para Dispositivos Móviles con HTML5 + CSS3 + JavaScript Objetivo: El término HTML hace referencia al lenguaje de marcado predominante para la elaboración

Más detalles

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com

Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite

Más detalles

Curso básico de creación de páginas web

Curso básico de creación de páginas web Curso básico de creación de páginas web Programa de formación docente UAM 2005-2006 Miguel Sevilla Callejo Abril 2006 Departamento de Geografía Universidad Autónoma de Madrid Objetivos Desarrollar las

Más detalles

jquery Mobile Dr. José Martín Molina Espinosa

jquery Mobile Dr. José Martín Molina Espinosa jquery Mobile Dr. José Martín Molina Espinosa jquery Mobile http://jquerymobile.com/ Cómo crear aplicaciones con el look-and-feel de Android a través del uso de estilos CSS y de javascript? Actualmente

Más detalles

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver

Más detalles

Herramientas para crear páginas.

Herramientas para crear páginas. Herramientas para crear páginas. Herramientas para la creación de páginas Web. Como hemos visto resulta sencillo pero engorroso escribir directamente en HTML. Por ello es más sencillo utilizar un editor

Más detalles

EJERCICIOS HTML BÁSICOS

EJERCICIOS HTML BÁSICOS EJERCICIOS HTML BÁSICOS Ejercicio 1 Crear un documento HTML desde cero Crea la estructura de carpetas del sitio (carpeta raíz, carpeta de imágenes y de scripts). Dentro de la carpeta de scripts crea un

Más detalles

Scripting en el cliente: Javascript. Tecnologías Web

Scripting en el cliente: Javascript. Tecnologías Web Scripting en el cliente: Javascript Tecnologías Web Motivación Por qué usar JavaScript? Permite crear efectos atractivos visualmente Permite crear sitios WEB que se visualicen de la misma manera en distintos

Más detalles

JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal.

JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal. 1 JavaScript 1.1 Qué es JavaScript? JavaScript es un lenguaje interpretado. Es idóneo para trabajar en Web, ya que son los navegadores que utilizamos los que interpretan (y por tanto ejecutan) los programas

Más detalles

Noviembre 2013. Qué es jquery? Por: César Amauri Villarreal Fuentes QUÉ ES JQUERY? NOVIEMBRE 2013

Noviembre 2013. Qué es jquery? Por: César Amauri Villarreal Fuentes QUÉ ES JQUERY? NOVIEMBRE 2013 Qué es jquery? Noviembre 2013 Por: César Amauri Villarreal Fuentes 1 Qué es jquery? Es una biblioteca de JavaScript rápida y concisa que simplifica el documento HTML, manejo de eventos, animación y las

Más detalles

Dreamweaver CS6 para PC/Mac Sitios completamente CSS conforme a los estándares del W3C

Dreamweaver CS6 para PC/Mac Sitios completamente CSS conforme a los estándares del W3C Introducción Internet en la actualidad 7 El World Wide Web Consortium y los estándares 7 Los programas de creación de sitios web 7 Objetivo del libro 8 Interfaz de creación El entorno del sistema 9 La

Más detalles

Diplomado de Diseño Web

Diplomado de Diseño Web Fireworks es una aplicación que nos permite crear de una forma relativamente sencilla interfaces para web, es un editor de gráficos tanto vectoriales como de pixeles, en él se desarrollan elementos de

Más detalles

Novedades ebd versión 3.2

Novedades ebd versión 3.2 Novedades ebd versión 3.2 En este documento se detallan los cambios más importantes realizados en la versión 3.2 de ebd. Además de estas modificaciones, se han implementado mejoras de rendimiento y corregido

Más detalles

Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos

Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Herramientas de DISEÑO: Recursos Gráficos Software de Diseño Lenguaje de Programación Contenido curso practico; LENGUAJE

Más detalles

Confección y publicación de páginas Web

Confección y publicación de páginas Web 2014 Confección y publicación de páginas Web Docente: Manuel Fernández Catalán 0 ÍNDICE 1 Presentación... 2 2 Objetivos... 2 3 Tecnología... 2 4 Metodología y evaluación... 3 5 Material didáctico... 3

Más detalles

Diseño de páginas web 2011

Diseño de páginas web 2011 Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero

Más detalles

TEMA 9 CREACIÓN DE PÁGINAS WEB

TEMA 9 CREACIÓN DE PÁGINAS WEB TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio

Más detalles

DOM. Document Object Model

DOM. Document Object Model 1 DOM Document Object Model INTRODUCCIÓN Es un conjunto de utilidades específicamente diseñadas para manipular documentos XML. Por extensión, DOM también se puede utilizar para manipular documentos XHTML

Más detalles

> Temario Curso de Diseño Web <

> Temario Curso de Diseño Web < le ayuda a crear hermosos diseños para sitios web y aplicaciones móviles en un instante, sin necesidad de programación. Brinda imágenes vectoriales y de mapa de bits, maquetas, gráficos 3D, y contenido

Más detalles

Ficha Técnica. Categoría. Contenido del Pack. Sinopsis. Programación. - 2 CDROM - 3 Manual Teórico - 1 Cuaderno de Ejercicios

Ficha Técnica. Categoría. Contenido del Pack. Sinopsis. Programación. - 2 CDROM - 3 Manual Teórico - 1 Cuaderno de Ejercicios Ficha Técnica Categoría Programación Contenido del Pack - 2 CDROM - 3 Manual Teórico - 1 Cuaderno de Ejercicios Sinopsis Javascript es un lenguaje de programación que se utiliza para realizar acciones

Más detalles

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 9: Hojas de estilo.

Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 9: Hojas de estilo. Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 9: Hojas de estilo. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Hojas de estilo Atrás quedaron

Más detalles

Desarrollo para navegadores web: HTML, DHTML, CSS, DOM, Javascript y objetos incrustados

Desarrollo para navegadores web: HTML, DHTML, CSS, DOM, Javascript y objetos incrustados Desarrollo para navegadores web: HTML, DHTML, CSS, DOM, Javascript y objetos incrustados Índice de contenido Desarrollo para navegadores web: HTML, DHTML, CSS, DOM, Javascript y objetos incrustados...1

Más detalles

Curso Oficial GoLive 6.0

Curso Oficial GoLive 6.0 Nombre del curso Duración 32 horas Plataformas disponibles PC Mac Titulación Título Oficial CREA Adobe Certified Training Provider Objetivos El objetivo principal del curso es adquirir los conocimientos

Más detalles

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Índice Conceptos básicos En este capítulo se enseñan los conceptos básicos de trabajo en Adobe Dreamveaver CS3. También se describen

Más detalles

CUALIFICACIÓN CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB PROFESIONAL. Nivel 2. Versión 5 Situación RD 1201/2007 Actualización

CUALIFICACIÓN CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB PROFESIONAL. Nivel 2. Versión 5 Situación RD 1201/2007 Actualización Página 1 de 18 CUALIFICACIÓN CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB PROFESIONAL Familia Profesional Informática y Comunicaciones Nivel 2 Código IFC297_2 Versión 5 Situación RD 1201/2007 Actualización

Más detalles

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML?

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML? Diseño de Sitios Web 5 (I) Qué es? Es un lenguaje descriptivo con el cual se describe la estructura del texto y todos los elementos que se muestran en la página. Es el método más usado para publicar documentos

Más detalles

Javascript parte II: AJAX

Javascript parte II: AJAX Tema 3 Javascript parte II: AJAX Texto http://www.flickr.com/photos/kosmar/62381076 Asynchronous JavaScript and XML. O cómo hacer peticiones al servidor desde Javascript AJAX (Asynchronous JavaScript And

Más detalles

Curso Diseño Web con Software libre, VNU

Curso Diseño Web con Software libre, VNU 1. - QUE ES VNU? NVU (se pronuncia N-view, por "new view") es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source, o sea que cualquiera está autorizado para bajarlo sin

Más detalles

Optimización de Tiempos de Respuesta como Estrategia de Incremento del Número de Visitas

Optimización de Tiempos de Respuesta como Estrategia de Incremento del Número de Visitas Optimización de Tiempos de Respuesta como Estrategia de Incremento del Número de Visitas 5 de mayo de 2004 Juan de Bravo Diez 1 AGENDA La importancia del tiempo de respuesta en el diseño de un sitio web

Más detalles

INDICE Programación Introducción Capitulo 21 BASIC Capitulo 22. COBOL Capitulo 23 DELPHI Capitulo 24. FORTRAN Capitulo 25.

INDICE Programación Introducción Capitulo 21 BASIC Capitulo 22. COBOL Capitulo 23 DELPHI Capitulo 24. FORTRAN Capitulo 25. INDICE Programación Introducción 706 Capitulo 21 BASIC 711 Introducción 711 Sintaxis 713 Procedimientos y control de flujo 713 Tipos de datos 714 Disponibilidad y variantes del dialecto 714 Capitulo 22.

Más detalles

Christian Busquiel Sanz Diego Morillo Arroyo Alicia Rodríguez Carrión José Romero Huertas

Christian Busquiel Sanz Diego Morillo Arroyo Alicia Rodríguez Carrión José Romero Huertas Ajax Christian Busquiel Sanz Diego Morillo Arroyo Alicia Rodríguez Carrión José Romero Huertas Departamento de Ingeniería Telemática Universidad Carlos III de Madrid Contenido Introducción Descripción

Más detalles

CREACIÓN DE PÁGINAS WEB CON NVU

CREACIÓN DE PÁGINAS WEB CON NVU CREACIÓN DE PÁGINAS WEB CON NVU 1. Introducción... 1 2. Instalación... 2 3. Antes de comenzar una página web... 2 4. Editar páginas web con NVU... 5 5. Definir el diseño de nuestro sitio... 6 5.1. Plantillas...

Más detalles

Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO

Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO CONTENIDO TEMATICO: HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO Presentación de la formación y del formador INSTALACIÓN DE NAVEGADORES Y HERRAMIENTAS Descarga e instalación de Mozilla Firefox Descarga e instalación

Más detalles

1. Instalación y preparación de los ficheros 1.1. Copiar el fichero con los programas. 1.2. Extraer el fichero "Taller UB5" con Winzip

1. Instalación y preparación de los ficheros 1.1. Copiar el fichero con los programas. 1.2. Extraer el fichero Taller UB5 con Winzip Taller de matemática / informática 2014-2015 Introducción a las programación web 1. Instalación y preparación de los ficheros 1.1. Copiar el fichero con los programas copiar el fichero "Taller UB5" desde

Más detalles

Tecnologías web 2.0. David Ramos Valcárcel www.davidramos.biz david@uvigo.es. MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre

Tecnologías web 2.0. David Ramos Valcárcel www.davidramos.biz david@uvigo.es. MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre Tecnologías web 2.0 MÓDULO IV: Tecnologías y frameworks de desarrollo de software libre http://trevinca.ei.uvigo.es/~orge/master/ HTML 5 Etiquetado semántico Mejora búsquedas Mejora comprensión Mejora

Más detalles

ETIQUETAS HTML 5 Diseño de Sitios Web TUW

ETIQUETAS HTML 5 Diseño de Sitios Web TUW Etiqueta Descripción Define un comentario nueva nueva nueva nueva

Más detalles

Práctica 4: Edición de contenidos web

Práctica 4: Edición de contenidos web Comercio Electrónico Práctica 4: Edición de contenidos web Antonio Sanz ansanz@unizar.es Rafael del Hoyo rdelhoyo@ita.es Objetivo de la práctica En esta práctica se pretende realizar una introducción a

Más detalles

DWR: Easy Ajax for Java

DWR: Easy Ajax for Java DWR: Easy Ajax for Java Juan Fernández Rodríguez uo67775@uniovi.es Resumen. En este artículo describiremos brevemente que es Ajax de que tecnologías se compone y como funciona, haremos un breve resumen

Más detalles