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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(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

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

Introducción al desarrollo web (idesweb)

Introducción al desarrollo web (idesweb) Introducción al desarrollo web (idesweb) Práctica 8: PHP 2 (cookies y sesiones) 1. Objetivos Conocer el concepto de cookie y sus posibles usos. Aprender a utilizar las cookies con PHP. Conocer el concepto

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

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

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

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

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

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

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

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

La guía de la programación HTML5, CSS y JavaScript con Visual Studio

La guía de la programación HTML5, CSS y JavaScript con Visual Studio Tabla de contenidos INTRODUCCIÓN... 5 AGRADECIMIENTOS...6 TABLA DE CONTENIDOS... 7 CAPÍTULO 01 HTML 5: LAS TECNOLOGÍAS Y SU IMPLICACIÓN EN EL DESARROLLO...17 EL ESTADO ACTUAL DEL ESTÁNDAR... 18 ESPECIFICACIONES

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

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

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

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

Manual de NVU Capítulo 5: Las hojas de estilo

Manual de NVU Capítulo 5: Las hojas de estilo Manual de NVU Capítulo 5: Las hojas de estilo Pág. 1 Manual de NVU Capítulo 5: Las hojas de estilo Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de

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

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

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

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

Manual de Formulario. www.sagasoluciones.com info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75

Manual de Formulario. www.sagasoluciones.com info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75 Manual de Formulario info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75 MANUAL DE FORMULARIO CONTROL DEL DOCUMENTOS Realizado (21/01/2010) Inmaculada Peña Ruiz Técnico Revisado

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

Kompozer: Crear una hoja de estilos

Kompozer: Crear una hoja de estilos Kompozer: Crear una hoja de estilos Las hojas de estilo en cascada (en inglés, Cascading Style Sheets), son archivos con extensión.css que se utilizan para dar estilo a nuestros documentos html, separando

Más detalles

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUIA DISPONIBLE EN: http://preparadorivan.blogspot.com/ - http://preparadormssi.50webs.com/inicio.html La World Wide Web o la Web, es una de las múltiples

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

Clase. geniería de la Computación. Departamento de Ciencias e Ing. Diego C. Martínez - DCIC-UNS

Clase. geniería de la Computación. Departamento de Ciencias e Ing. Diego C. Martínez - DCIC-UNS Ingeniería de Ap plicaciones Web Clase 10 Diego C. Martínez Departamento de Ciencias e Ing geniería de la Computación Universidad Nacional del Sur AJAX AJAX es un término familiar en otros conte extos...

Más detalles

Introducción al desarrollo para plataformas móviles con Phonegap

Introducción al desarrollo para plataformas móviles con Phonegap Introducción al desarrollo para plataformas móviles con Phonegap Si queremos desarrollar aplicaciones para móviles, qué herramienta conviene utilizar y para qué plataforma móvil? Las aplicaciones Android

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

Ejercicio: Mensajes Alert, Confirm y Prompt

Ejercicio: Mensajes Alert, Confirm y Prompt Ejercicio: Mensajes Alert, Confirm y Prompt Utilizando Javascript podemos crear tres diferentes tipos de mensajes emergentes que se pueden usar para mostrar información, obtener confirmación u obtener

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

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

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

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

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

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

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

Extensiones. Guillermo López Mozilla Hispano

Extensiones. Guillermo López Mozilla Hispano Extensiones Guillermo López Mozilla Hispano Extensiones Qué son? Programilla para extender el comportamiento/visualización de cualquier programa Mozilla Usan la misma tecnología que las aplicaciones Mozilla

Más detalles

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose

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

Fundamentos de programación I. - Anexo de Software -

Fundamentos de programación I. - Anexo de Software - Fundamentos de programación I - - 1. Introducción 1.1. Introducción a Dev-C++ y DJGPP 1.1.1. Qué es Dev-C++? Dev-C++ es un Entorno Integrado de Desarrollo (Integrated Development Environment, IDE) capaz

Más detalles

Diseño de Páginas Web 2011

Diseño de Páginas Web 2011 Diseño de Páginas Web 2011 PRESENTACIÓN Proporciona ejemplos de páginas web reales, disponibles en Internet; se presenta el lenguaje HTML y las hojas de estilo en cascada (CSS), enfatizando la utilización

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

Descripción del tutorial. Contenidos. www.facebook.com/codigonexogr. @codigonexo. www.plus.google.com/+codigonexogr/

Descripción del tutorial. Contenidos. www.facebook.com/codigonexogr. @codigonexo. www.plus.google.com/+codigonexogr/ www.facebook.com/codigonexogr @codigonexo www.plus.google.com/+codigonexogr/ Contenidos 1. Introducción al patrón MVC 1.1.Conceptos básicos Qué es un patrón 1.2.Estructura del patrón MVC 1.3.Cómo funciona

Más detalles

UF1304 Elaboración de plantillas y formularios

UF1304 Elaboración de plantillas y formularios UF1304 Elaboración de plantillas y formularios Tema 1. Formularios en la construcción de páginas web Tema 2. Plantillas en la construcción de páginas web OBJETIVOS: - Confeccionar plantillas para las páginas

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

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

TEMA 3 A: INTRODUCCIÓN AL DOM

TEMA 3 A: INTRODUCCIÓN AL DOM TEMA 3 A: INTRODUCCIÓN AL DOM 1.- Qué es el DOM?... 2 1.1.- DOM y JavaScript... 2 1.3.- Cómo se accede al DOM?... 3 2. Instalar una consola... 4 3. Averiguar la versión DOM de Explorer... 5 4.- El DOM

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

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

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

La única regla que debe de tener presente siempre, es que cada etiqueta que abra debe de cerrarla en el mismo orden < /etiqueta cerrada>.

La única regla que debe de tener presente siempre, es que cada etiqueta que abra <etiqueta> debe de cerrarla en el mismo orden < /etiqueta cerrada>. Antes de comenzar, si algo no está en este manual, utilice google para averiguarlo y acostúmbrese a ello ya que será la mejor herramienta que pueda encontrar. La estructura básica de toda página web es:

Más detalles

HOJA DE CALCULO EXCEL NIVEL II

HOJA DE CALCULO EXCEL NIVEL II HOJA DE CALCULO EXCEL NIVEL II DURACION: 30 HORAS Los participantes al finalizar la acción formativa serán capaces de utilizar la hoja de cálculo EXCEL, adquiriendo los conocimientos teóricos y prácticos

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

> 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

La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.

La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente. PLANTILLAS EN PHP El concepto de plantilla, es un criterio del desarrollo web que propone optimizar la cantidad de documentos HTML que se usan en el desarrollo de un sitio web. A lo largo de la navegación

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

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

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

JSP(JAVA SERVER PAGES)

JSP(JAVA SERVER PAGES) JSP(JAVA SERVER PAGES) Introducción En la actualidad, la mayoría de los sitios Web quieren mostrar contenido dinámico basado en el usuario y en la sesión. La mayor parte del contenido, tal como imágenes,

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

C.F.G.S. DESARROLLO DE APLICACIONES INFORMÁTICAS. MÓDULO: Diseño y realización de servicios de presentación en entornos gráficos.

C.F.G.S. DESARROLLO DE APLICACIONES INFORMÁTICAS. MÓDULO: Diseño y realización de servicios de presentación en entornos gráficos. C.F.G.S. DESARROLLO DE APLICACIONES INFORMÁTICAS MÓDULO: Diseño y realización de servicios de presentación en entornos gráficos Unidad 1 Introducción Visual Basic.NET El objetivo de la unidad es conocer

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

Optimización del uso de internet en la gestión cultural

Optimización del uso de internet en la gestión cultural NUEVAS TECNOLOGÍAS APLICADAS A LA GESTIÓN CULTURAL Optimización del uso de internet en la gestión cultural Javier Leiva Aguilera www.javierleiva.info Madrid, 12-14 de noviembre de 2007 Fundamentos de diseño

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

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

Arquitecturas Distribuidas 09/10

Arquitecturas Distribuidas 09/10 Tema 4. VI La Web en la actualidad d Arquitecturas Distribuidas 09/10 1 VI. La Web en la actualidad 1. Aplicaciones Web 2. Arquitectura en 3 capas de las aplicaciones web 3. Pero, qué es una aplicación

Más detalles

Desarrollo y servicios web

Desarrollo y servicios web Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2015-1 Qué vimos la clase pasada? 1. Fin tutorial HTML 2. Nombres de dominio 3. URLs 3 Sesión 4. Método GET - POST Qué haremos hoy? 1. Tipos de solicitudes

Más detalles

Definiciones. Tema 21_Módulos Menú 1

Definiciones. Tema 21_Módulos Menú 1 Definiciones Un menú es una lista de opciones o de órdenes que forman parte de un mismo título, mediante los cuales se podrán seleccionar determinadas operaciones de la aplicación. El conjunto de todos

Más detalles

Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones. Unidad 1. Conceptos [ASP.NET EN VISUAL STUDIO]

Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones. Unidad 1. Conceptos [ASP.NET EN VISUAL STUDIO] Pasos para crear un sitio web ASP.Net con el Visual Studio en cualquiera de sus versiones Conceptos Lo primero que necesitamos para crear una aplicación o proyecto web es seleccionar el entorno del Visual

Más detalles