Introducción al curso y al programa. Juan Quemada, DIT, UPM

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

Download "Introducción al curso y al programa. Juan Quemada, DIT, UPM"

Transcripción

1 Introducción al curso y al programa Juan Quemada, DIT, UPM 1

2 Curso: Diseño de aplicaciones Web en HTML5 y para móviles FirefoxOS Curso de iniciación al diseño y a la programación en HTML5 HTML, CSS y JavaScript) de aplicaciones Web multi-dispositivo PC, tableta, telefóno,...) y a su empaquetamiento para telefonos FirefoxOS o para publicarlas en Internet o en su AppStore Juan Quemada, DIT, UPM 2

3 Diseño de servicios en la nube, utilizando JavaScript, para acceso movil y multi-dispositivo con HTML5* Programa de especialización con 5 cursos MOOC!! Desarrollo de Aplicaciones en HTML5, CSS y Javascript, incluyendo Dispositivos Móviles Firefox O.S.! Desarrollo avanzado de Aplicaciones HTML5 y Firefox O.S.*, incluyendo tecnicas de ingenería de software! Desarrollo de aplicaciones HTML5 multi-terminal Android, ios,...)*! Desarrollo de servicios en la nube con HTML5, Javascript y node.js*! Desarrollo avanzado de servicios en la nube con Javascript y node.js*! *Nota: Los otros 4 cursos empezarán en MiriadaX en 2014 y Juan Quemada, DIT, UPM 3

4 Modulo 1: Introducción a HTML, CSS, URLs y a las herramientas del curso. Modulo 2:Estructura de la navegación y el texto en páginas Web HTML5, prioridad en CSS3 y publicación en la nube de Google Drive de los ejercicios del curso.! Modulo 3: Estructuración, visualización y depuración con Firefox de HTML5 y CSS3 adaptados a un entorno responsivo y multi-pantalla, para adaptación a móviles y tabletas. Modulo 4: Introducción a JavaScript, sus sentencias, variables, expresiones, scripts de cliente, así como a la utilización de la consola JavaScript del navegador Firefox.! Modulo 5: Primeros programas Javascript con booleanos, igualdad y comparaciones, sentencia condicional, números, funciones, strings e internacionalización. Modulo 6: Objetos, propiedades, métodos, eventos, formularios, sentencia for/in y características avanzadas de objetos, incluyendo acceso a la página Web cargada en el navegador a través del árbol DOM Document Object Model)! Modulo 7: Interacción con el usuario, eventos y sus manejadores, formularios, jquery, Zepto, Arrays y bucles. Modulo 8: Ejemplo de un cronómetro, eventos tactiles, localstorage y JSON, así como su utilización en aplicaciones Web.! Modulo 9: Introducción a los gráficos y animaciones con SVG Scalable Vector Graphics) y HTML5 CANVAS, así como al empaquetamiento de web apps para FirefoxOS. Modulo 10: API de geolocalización HTML5 y Mash-up con Google Maps, asi como realizaci on del proyecto final del curso. Módulos Juan Quemada, DIT, UPM 4

5 Desarrollo y evaluación del curso El curso consta de 5 tramos de 2 modulos! Diseñado para realizarse en 5 semanas 1 semana por tramo) " Pero se deja una semana adicional por tramo ~10 semanas, 2 semanas por tramo)! Ejercicios P2P de entrega obligatoria! Al final de cada módulo 2 ejercicios por tramo)! además! hay tests obligatorios y mas ejercicios P2P opcionales Plazos y limites! Tramo 1: comienzo lunes o antes), final 19-10! Tramo 2: comienzo lunes o antes), final 02-11! Tramo 3: comienzo lunes o antes), final 16-11! Tramo 4: comienzo lunes o antes), final 30-11! Tramo 5: comienzo lunes o antes), final 14-12! Evaluaciones y curso cierran el Juan Quemada, DIT, UPM 5

6 Actividades de un Módulo Tarea 0: Descargar transparencias y ejemplos del módulo! Fichero ZIP para descargar con " Transparencias en formato PDF " Directorio con ejemplos presentados en el módulo! para realizar ejercicios modificando los descargados! Directorio con ejemplos publicados en Internet Google Drive) " ejecutables en Firefox! Tareas de Aprendizaje varias):! un video o screencast del tema 3 y 14 minutos) " evaluado no siempre) con un test o un ejercicio P2P opcional! Tarea final: Ejercicio P2P de entrega obligatoria! Cada modulo acaba con un ejercicio P2P obligatorio Juan Quemada, DIT, UPM 6

7 Tarea 0: Transparencias y Ejemplos de un Módulo Descarga Juan Quemada, DIT, UPM 7

8 Equipos y servicios a utilizar Un PC o portatil de trabajo necesario)! con S.O. Windows de Microsoft! con S.O. UNIX Ubuntu,..) de software libre! Ordenador MAC con sistema operativo con OS X! Móvil o tableta conveniente para probar, pero no necesario)! Android, iphone, ipad, FirefoxOS,.. pero no es necesario " Se puede utilizar un simulador de FirefoxOS para probar Apps! Cuenta en Google para Google Drive o Google Docs! para publicar Apps y Páginas Web en la nube " Es la cuenta unificada de acceso a Gmail, Youtube, Google+, Docs, Drive,... Juan Quemada, DIT, UPM 8

9 Herramientas a utilizar Simulador/Editor interactivo sencillo: Editor y visualizador de HTML5, CSS y JS con ejemplos cargados! Sublime Text 2! Editor de HTML, CCS y JavaScript con ayudas visuales " Creadores wysiwyg) de páginas Web opcional)! Dreamweaver: Creador de páginas Web muy potente e intuitivo. " Bluegriffon: editor wysiwyg gratuito y de código abierto " Navegador Firefox! con su entorno de desarrollo de aplicaciones Web y FirefoxOS Juan Quemada, DIT, UPM 9

10 Seleccionar ejemplo Hacer clic para actualizar pag. Hacer clic en el Modulo 1 Editor Interactivo Juan Quemada, DIT, UPM 10

11 Herramientas de desarrollo web de Firefox.! https://developer.mozilla.org/en-us/docs/tools Inspector HTML de Firefox.! https://developer.mozilla.org/en-us/docs/tools/page_inspector Editor de Estilos de Firefox.! https://developer.mozilla.org/en-us/docs/tools/style_editor Herramientas autónomas de Firefox.! Visor de repintado: https://developer.mozilla.org/en-us/docs/tools/paint_flashing_tool! Visor 3D: https://developer.mozilla.org/en-us/docs/tools/3d_view! Borrador Javascript: https://developer.mozilla.org/en-us/docs/tools/scratchpad! Visor de diseño adaptativo: https://developer.mozilla.org/en-us/docs/tools/ Responsive_Design_View Consola Web de Firefox.! https://developer.mozilla.org/en-us/docs/tools/web_console Depurador Javascript de Firefox.! https://developer.mozilla.org/en-us/docs/tools/debugger Perfilador de Firefox.! https://developer.mozilla.org/en-us/docs/tools/profiler Simulador de Firefox OS Documentación de Firefox y sus herramientas! Instalación: https://addons.mozilla.org/en-us/firefox/addon/firefox-os-simulator! Documentación: https://developer.mozilla.org/en-us/docs/tools/firefox_os_simulator Juan Quemada, DIT, UPM 11

12 Introducción a Internet y a la Web Juan Quemada, DIT, UPM 12

13 Clientes, servidores y la nube Clientes:! Dan acceso a información y servicios en Internet! Servidores:! Alojan la información y los servicios! La nube: conjunto de terminales y servidores! interconectados con aplicaciones y protocolos de Internet! TCP/IP: protocolos de interconexión de redes de fibra, cable, WIFI,...! sobre los que se implementan las aplicaciones de Internet y sus protocolos Juan Quemada, DIT, UPM 13

14 Clientes, navegadores y tiendas Clientes de acceso a Internet más importantes! PCs, portátiles, tabletas, teléfonos inteligentes! Navegador browser) cliente Web de acceso a servidores! Utilizando: URL, HTTP, HTML, CSS y JS " p.e. Chrome, Firefox, Internet Explorer, Opera, Safari,...! Tiendas de aplicaciones! Instalan aplicaciones en móviles y tabletas " Las aplicaciones usan las normas de la Web URL, HTTP,...) Juan Quemada, DIT, UPM 14

15 Máquina servidora host) Contiene información y servicios! Una máquina servidora tiene una dirección conocida en Internet! Dirección simbólica de dominio o DNS): upm.es, google.com, " Cada dirección de dominio tiene una dirección IP binaria) asociada! Hay 2 tipos de direcciones IP: IPv4 e IPv6! IPv4: versión 4 del protocolo IP con dirección de 32 bits o 4 octetos " ejemplo: , localhost - mi máquina),...! IPv6: versión 6 del protocolo IP última) con dirección de 128 bits " ejemplo: 2001:db8:85a3::8a2e:370:7334,... Juan Quemada, DIT, UPM 15

16 Servidores y puertos Puerto! Dirección de 16 bits dentro de la máquina servidora " Es donde se instala el programa servidor! El programa servidor es lo que normalmente denominamos servidor " Cliente y servidor se comunican a través de un protocolo: HTTP, SMTP,...! Utilizando el interfaz de sockets TCP/IP para comunicar entre ambos! Los servicios tienen un protocolo y un puerto por defecto! Web: protocolo HTTP puerto 80), HTTPS 443)! protocolo SMTP puerto 25), POP3 110), IMAP143)! Shell segura: protocolo SSH puerto 22)! Si un servidor no está en el puerto por defecto Servidor host) puerto 25 dirección IP puerto 80 SMTP Web: HTTP! Su dirección debe incluir el puerto, p.e. dit.upm.es:8080, :8080 Juan Quemada, DIT, UPM 16

17 google.com URL URL Uniform Resource Locator) Dirección de un recurso en un servidor en Internet! Internet soporta muchos tipos de servicios diferentes! Cada tipo de servicio utiliza un URL y protocolo diferentes! Algunos ejemplos de tipos de URLs! URL Web: utiliza HTTP para acceder a recursos, incluye " Protocolo, servidor y recurso camino): URL de correo ): identifica el buzon de usuario, incluye " protocolo, buzon de usuario y servidor: Juan Quemada, DIT, UPM 17

18 HTTP HiperText Transfer Protocol) Protocolo del Web! Procesa recursos identificados por un URL en un servidor remoto Métodos o comandos principales de HTTP! GET: trae al cliente lee) un recurso identificado por un URL! POST: crea un recurso identificado por un URL! PUT: actualiza un recurso identificado por un URL! DELETE: borra un recurso identificado `pr un URL!... hay mas comandos) Cliente 1 solicita recurso: google.com HTTP GET upm.es apple.es Clientes 2, 3 y 4 solicitan recursos: HTTP GET Juan Quemada, DIT, UPM 18

19 Aplicación Web Aplicaciones ejecutables en un navegador creadas con! HTML, CSS y JavaScript! HTML! Lenguaje de marcado de páginas Web " define la estructura del contenido de una página Web! En WebApps define la interfaz de la aplicación con el usuario CSS! Define el estilo visual de un una página o aplicación Web HTML) JavaScript! Lenguaje de programación de aplicaciones de cliente Juan Quemada, DIT, UPM 19

20 Aplicación Web: HTML, CSS y JavaScript HTML! Lenguaje de marcado CSS! Estilo la visualización JavaScript! Lenguaje de programación Juan Quemada, DIT, UPM 20

21 WebApps o aplicaciones de cliente Aplicaciones que residen en un servidor! pero se ejecutan en un cliente " Se identifican con un URL: El cliente trae la aplicación del servidor con el protocolo HTTP GET) Las apps se construyen con las tecnologías de la Web! URLs, HTTP, HTML, CSS y JavaScript 1) Cliente solicita WebApp identificada con URL! 2) Script se ejecuta al cargar la página Web en el navegador: Solicitud HTTP GET asociada a un URL Respuesta HTTP: página Web con script Juan Quemada, DIT, UPM Servidor sirve fichero identificado por URL 21

22 HTML/CSS Miprimerapágina

23 QuéesHTML Esunlenguajedemarcasparaformateary estructurarundocumento,quepuedeleerseen cualquiernavegador. <html> </html> EstandarizadoenlanormaISOdeSGML StandardGeneralizedMarkupLenguage). ElW3Cdesarrollaespecificacionestécnicasy directrices,deformaquesepuedaaseguraruna altacalidadtécnicayeditorial.

24 EstructuraHTML UndocumentoHTMLKenetreseKquetasquedescribenla estructurageneraldeundocumentoydanunainformaciónsencilla sobreél.<html>,<head>y<body> LaseKquetaspuedenescribirsetantoenmayúsculascomoen minúsculas,peroserecomiendaelusodeminúsculas:<html>o <HTML>,<body>o<BODY> Editor Visualizaciónenelnavegador

25 EstructuraHTML <!doctypehtml>declaraundocumentohtml5paraquese visualicecorrectamente. DoctypecomienzaauKlizarseenHTML4.01yXHTML h\p://validator.w3.org/ <!doctypehtml>

26 EstructuraHTML <html>paraidenkficarqueestacodificadoenestelenguajey Limitar,elprincipioyelfindeldocumento. <html></html>

27 EstructuraHTML <HEAD>lacabecera,queconKeneinformaciónyrecursossobreel propiodocumentoyquenoapareceeneldocumento,destacando elktulo<title>.seráelnombrequeapareceenlacabeceradel visualizadoryenlosbuscadoresdeahílaimportanciadequesea significakvo. <head></head> <Ktle></Ktle>

28 EstructuraHTML LaeKquetametadefinevariosKposdemetadatos. Elatributocharsetespecificalacodificaciónusadaennuestra página. <metacharset="character_set"> <metacharset="ude8">

29 EstructuraHTML CharsetuFG8eslaUnicodeTransformaKonFormat8ebit representaelcódigodecaracteresunicode.escompakblecon ASCII. Permitevisualizarloscaracteresdetodoslosidioma.

30 EstructuraHTML Caracteresespeciales:paraincluireneltextocaracteresquesonpropiasdel lenguajehtmlesnecesariousarsuanotacióncodificada: h\p://dev.w3.org/html5/htmleauthor/charref Espacioenblancononebreakingspace) < Menorque < > Mayorque > & Ampersand & Comillas " apóstrofo &apos;

31 EstructuraHTML <body>elcuerpoconkeneloselementosvisiblesenlapágina. Lasimágenes,losencabezados,lospárrafosdetexto,laslistas,las tablas,loshipervínculos <body></body>

32 EditoresHTML Antesdecomenzaratrabajarconuneditorespecífico,esrecomendableconocer elcódigo. Podemosusarprogramasquetrabajencontextoplano,sinañadirsuspropias marcasdeedición,enwindowselblocdenotasyenmacintosheltextedit. TextEditestápordefectoenRichTextesnecesarioconfigurarloparaqueguarde tutrabajocomoarchivosdetextoplano. LosdocumentosHTMLdebentenerlaextensiónhtmlohtm. UsaruneditorwysiwygcomoelAdobeDreamweaver)oelBlueGrifon h\p://www.bluegriffon.org/)ouneditorconayudasvisualescomoelsublime h\p://www.sublimetext.com/)nosfacilitarálascosas. VercomparaKva:h\p://en.wikipedia.org/wiki/Comparison_of_HTML_editors

33 EstructuraHTML Mi)primera)página)vistaenelprogramaBlocdeNotas

34 EstructuraHTML Mi)primera)página)vistaenelprogramaSublime.

35 EstructuraHTML Mi)primera)página)vistaenelprogramaDreamweaver.

36 LenguajeHTML UndocumentoHTMLinsertaeneltextoeTquetasquecontrolan losdiferentesaspectosdelapresentaciónylasemánkcadel contenido. Lostextoshabitualesestánformadosporencabezados<h1>, párrafos<p>,textoimportante<strong>enfakzado<em>listas <ul><li>...

37 SelectoresCSS ParaaplicarunesKlodepresentación,elselectordeelemento puedeserunaekquetahtml: p,h1,ul,li ElesKloafectaatodoelcontenidoincluidodentrodeesaeKqueta <p></p>,<h1></h1>,<ul></ul>. ElselectorpuedeaplicarseamásdeunaeKquetaHTML: elemento,elemento h1,h2,h3 Afectaaloselementos<h1>,<h2>y<h3>.

38 CSS ElesKlopuedeestarenlacabeceradelapágina,debeexpresarse enunelemento<style>dentrodelacabecera<head>del documento. Selector{ycadadeclaración:propiedad:valor;}

39 RecursosHTML MDN:ListadeElementosHTML5 h\ps://developer.mozilla.org/es/docs/html/html5/html5_lista_elementos W3C:HTML5elements h\p://dev.w3.org/html5/markup/elements.html WoorkUp:HTML5tagreference h\p://woorkup.com/wpecontent/uploads/2009/12/html5evisualecheate Sheet1.pdf

40 HTML/CSS Marcasbásicas

41 HTML Lasmarcasdetextoenhtml,seempleanparaelestructurado semántcodelcontenido. Lostextoshabitualesestánformadosporpárrafos,palabrasen negritaocursiva,anotacionesycorrecciones,citasaotros documentosexternos... Marcadobásico: <p></p>epárrafo <em></em>edaénfasisaltextoqueencierra <strong></strong>emáximaimportanciaaltextoqueencierra LaseKquetas<b>paralaboldonegritaylaeKqueta<i>paralaitálicaocursiva, sonsimilaresvisualmente,perosinsignificadosemánkco. h\p://www.w3.org/wiki/html/elements/b

42 CSS EllenguajedemarcasHTML,estáorientadoaladefinicióndela estructuraylasemánkcadeldocumentoynoasurepresentación gráfica. CSScontrolaelaspectográficodeldocumentomediantehojasde esklo)style)sheets),indicandoalnavegadorcomosedeben visualizarloselementosdeundocumentohtml.asíseconsigue separarelaspectodelcontenido. ProyectocssZenGarden: h\p://www.mezzoblue.com/zengarden/alldesigns/

43 CSS CadaeKquetaHTMLKeneunosvaloresdeCSSpordefecto,que puedenvariarsegúnelnavegador,quetendremosquemodificar connuestrosesklospersonales. Visualizaciónvalorespor defectocssenelnavegador

44 HTML EjemplovaloresCSSpordefectodelnavegador,de:h1,p,strong, em. h1{ display:block; fontesize:2em; marginebefore:0.67em; marginea{er:0.67em; marginestart:0; margineend:0; fonteweight:bold;} p{ display:block; marginebefore:1em; marginea{er:1em; marginestart:0; margineend:0;} strong{ fonteweight:bold;} em{ fontestyle:italic;}

45 CSS Másinformaciónvalorespordefecto: W3C: h\p://dev.w3.org/html5/markup/elements.html InternetExplorer: h\p://www.iecss.com/ Firefox: h\p://mxr.mozilla.org/mozillaecentral/source/layout/style/html.css Chrome,Safari: h\p://trac.webkit.org/browser/trunk/source/webcore/css/html.css Opera h\p://www.iecss.com/operae10.51.css

46 CSS LaprimeraformadeañadirelesKloCSSaundocumentoHTMLes conelementosenlínea,eselmétodomássencillo,añadiendoun atributostyleenelelementoconcretodentrodelapágina.nose puedenreuklizarparavarioselementosquecompartenlasmismas propiedades. SeescribenlaspropiedadesdelesKloenlasmarcasdelHTMLcomo "nombre:valor"separadasporpuntoycoma. <body style="color: red; "> <p style="font-size: 16px; color: blue; font-family: Arial, Helvetica, sans-serif;"> Mi primera página</p>

47 CSS LasegundaformaañadeelesKloCSSenunbloque<style>enla cabecera<head>)yaplicaeleskloavarioselementosdelapág.. CadaelementoHTMLKeneunacajaasociada,dondeaplicanlos comandosdeesklocss.elcolordefondoaplicadoacada elementohtmldelejemplo,muestralacajaasociadaacadauno.

48 CSS Lomásaconsejableparamantenerlaseparaciónentrecontenidoy presentación,enunahojadeesklocssseparadadelhtml,quese importaconunelemento<link>enlacabecera.

49 CSS Laprincipalventajaesquelashojas deesklosonaplicablesaunaoa muchaspáginas.permiteademás adaptarlapresentaciónapcs, móviles,tabletasoimpresorascon elatributomediaqueackvaráel eskloespecíficodecadadisposikvo. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link href= estilo.css" rel="stylesheet" type="text/css" media="min-width:380px)"> h\p://www.w3.org/tr/css3emediaqueries/

50 CSS FormatodelasnormasycomandosdeesTlo ElesKlosedefineentrellaves"{"y"}";elselectordeterminasobre queelementoshtmlaplicaelesklo,cadabloque)de)declaración: {declaración;declaración}separadasporpuntoycoma";". Cadadeclaración:propiedad:valor,fijaunvalorparauna propiedad)del)es>lo). H1 {color : green; text-align : center}

51 HTML Listas: <ul></ul>edefinelistas,noordenadas. <ol></ol>edefinelistas,ordenadas. <li></li>edefineloselementosdelaslistas ul{ display:block; listestyleetype:disc; marginebefore:1em; marginea{er:1em; marginestart:0; margineend:0; paddingestart:40px;} ol{ display:block; listestyleetype:decimal; marginebefore:1em; marginea{er:1em; marginestart:0; margineend:0; paddingestart:40px;}

52 TextoHTML Citas:<blockquote></blockquote>ecitastextualesdeuntexto externo. Elatributocite="url"eIndicaladireccióndelapáginaweboriginal delaqueseextraelacita. blockquote{ display:block; marginebefore:1em; marginea{er:1em; marginestart:40px; margineend:40px;}

53 TextoHTML Textopreformateado: <pre></pre>emankeneelaspectovisual,loselementoenblanco semankenenigualqueeneltextooriginal. pre{ display:block; fontefamily:monospace; whiteespace:pre; margin:1em0;}

54 TextoHTML Abreviaturayacrónimo: <abbr></abbr>eparaindicarelsignificadodeunaabreviaturaoun acrónimo.

55 TextoHTML Saltodelínea: <br>esaltodelíneaeneltexto,sinlosmárgenesdefinidosparael párrafo. Pocasveceshayqueusarunsaltodelínea:Unapoesía,unlistado delcódigo,cuandocadalíneanoesunpárrafoporsísola.

56 TextoHTML Superíndicesysubíndices: <sup></sup> <sub></sub>eparaekquetareltextocomosuperosubíndices. sub{ verkcalealign:sub; fontesize:smaller;} sup{ verkcalealign:super; fontesize:smaller;}

57 TextoHTML code: <code></code>epararepresentarfragmentosdecódigo informákco. Valorespordefecto: code{ fontefamily:monospace;} Otrasmarcasdetexto: Textoborrado<del>einsertado<ins>enundocumento. Listasdedefiniciones<dl>,<dt>y<dd>

58 Tabla LastablassedefinenconlaseKquetas<table>,<tr>paracadafilay <td>paracadacolumna<th>indicaqueunaceldaeslacabecera.

59 TablaCSS

60 TextoHTML LIBROSWEB:Marcadobásicodetexto h\p://librosweb.es/xhtml/capitulo_3/ marcado_basico_de_texto.html ConClase:Texto h\p://html.conclase.net/w3c/html401ees/struct/text.html MDN:CSS h\ps://developer.mozilla.org/eneus/docs/web/css

61 Codificación de caracteres, UNICODE y character entity 1

62 Alfabeto, código y codificación Juego de caracteres o alfabeto! Conjunto de caracteres normalizados para representar una lengua! Código de caracteres ver Código numérico asignado a cada carácter de un alfabeto, p.e. " ASCII: Alfabeto inglés EEUU) codificado en 7 bits por carácter " ISO Latin-1 ISO 8859, ISO Latin-15): Alfabetos de Europa occidental, 8 bits " UNICODE: código internacionalizado que soporta muchas lenguas! Codificación! representación binaria de un código de caracteres, p.e. UNICODE tiene " UTF-8: Código de longitud variable de 1, 2, 3 o 4 bytes, eficiente para lenguas latinas " UTF-16: Codifica plano BMP en 2 bytes, otros planos en 4 bytes " UTF-32: Código de longitud fija: 4 bytes eficiente con planos que no son BMP Juan Quemada, DIT, UPM 2

63 Unicode Consortium UNICODE es un consorcio internacional! Define normas de internacionalización I18N) " códigos de caracteres UNICODE), símbolos, librerías software, formatos,.! Código UNICODE! Código de caracteres internacionalizado, " es el resultado mas conocido del consorcio! puede representar muchas lenguas " ver: Juan Quemada, DIT, UPM 3

64 Código Unicode Unicode asigna un código numérico a cada carácter! Los caracteres se agrupan en planos 4Cada plano se codifica en 2 bytes 2 bytes octetos): 65,536 caracteres! Planos más importantes 4BMP Basic Multilingual Plane) Agrupa los símbolos más habituales de la mayoría de lenguas actuales 4SMP Suplementary Multilingual Plane): Lenguas antiguas y mas 4SIP Supl. Ideographic Plane): Ext. CJK China, Japan, Korea) 4TIP Tiertary Ideographic Plane): Lenguas antiguas asiáticas 4SSP Suplementary Special-purpose Plane): usos especiales 4

65 UNICODE BMP: subconjunto ASCII Basic Latin) 5

66 UNICODE BMP: extensión ISO Latin1 6

67 Ejemplo Unicode Códigos Unicode BMP: algunos ideogramas chinos Kangxi 7

68 Cuantos códigos de caracteres manejamos? El diseño de una página Web! Se pueden utilizar códigos diferentes " El editor utilizará el código seleccionado " El fichero se podrá guardar con otro código " El SO Windows, Linux,..) utiliza otro código! La navegación por Internet! puede utilizar códigos diferentes " El navegador tiene un código configurado " por el usuario que lo utiliza " El servidor suele estar internacionalizado " HTML indica el código de la página " OJO: debe coincidir con el del fichero en disco Juan Quemada, DIT, UPM 8

69 Teclado chino Introducción de textos La información textual se introduce a través de un teclado! Cada tecla envía un carácter " Los teclados solo solo suelen letras de un área geográfica determinada! El teclado incluye un conjunto limitado de teclas! Los caracteres no incluidos necesitan un código especial " HTML utiliza caracteres escapados lo caracteres no incluidos " por ejemplo se utiliza para el símbolo de copyright!! La pantalla es gráfica Teclado arabe! puede representar cualquier carácter 9 Juan Quemada, DIT, UPM

70 Entidad de carácter HTML La sintáxis de HTML obliga a no utilizar algunos caracteres! < es comienzo de marca y no se puede incluir dentro de un texto " Dentro de un texto < debe representarse con character entities! Problemas similares ocurren con otros caracteres: >, &,..! Caracteres especiales HTML o sin tecla serán character entities! Por ejemplo, un bloque <div> con: Si x < y, e y < z, entonces x < z, " Será en HTML: <div> Si x > y, e y > z, entonces x > z, </div>! La tabla superior incluye algunos entidades, tablas completas están en " " " ENTIDADES DE CARÁCTER! > < &60; => significa menor que < > &62; => significa mayor que " &22; => ampersand o símbolo & & & &38; => ampersand o símbolo &.. Juan Quemada, DIT, UPM 10

71 URLs, recursos y enlaces Juan Quemada, DIT, UPM 11

72 google.com Recurso Web, URL y HTTP Recurso Web! Contenido digital procesable con HTTP " Normalmente se almacena en un fichero en un servidor! URL Web! p.e., página Web, foto, pelicula, fichero o parte de el, registro de una BD,...! Dirección unívoca de un recurso Web en Internet " HTTP permite procesar el recurso Web identificados por el URL Web! Un URL Web tiene 3 componentes básicos! Por ejemplo, en " http es el protocolo o método de acceso al recurso " google.com es la dirección del servidor en Internet donde reside el recurso " /picture.com es el camino path) dentro del servidor que identifica el fichero Juan Quemada, DIT, UPM 12

73 google.com URLs en HTML URL Uniform Resource Locator)! Dirección de recursos en Internet, definidos en normas de IETF " RFC ), RFC ), RFC ),... Caso particular de URI Uniform Resource Identifier)! Los URLs asociados a marcas HTML identifican! Recursos externos asociados al elemento definido por la marca! Por ejemplo:! <a href= > " identifica la página Web a la que se navegará al hacer click en el hiperenlace! <img src= > " Identifica el recurso con la imagen asociada a la marca <img...> Juan Quemada, DIT, UPM 13

74 Path o camino de un URL El path es la ruta desde el directorio raíz! a través de los directorios del servidor " que lleva al recurso! Los servidores Web suelen estar configurados! para que el fichero index.html o index.htm se pueda omitir " /lib/coches/index.htm será equivalente a /lib/coches/! El camino path) es el camino de directorio UNIX path)!.. se refiere al directorio anterior " /lib/casas/../coches/vw.htm es equivalente a /lib/coches/vw.htm Juan Quemada, DIT, UPM 14

75 Hiperenlace El hiperenlace permite navegar por Internet! Define una relación entre documentos " <a href="http://upm.es">upm</a>! Atributos de <a...>! href: hiperenlace asociado! alternate: página alternativa! rel: relación con la página enlazada " alternate, author, license, tag,...! type: mime-type de página enlazada!...! Ejemplos! <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/">license</a> Juan Quemada, DIT, UPM 15

76 Ancla Anchor o Fragment) El ancla anchor) se añade al final del URL! identifica un elemento dentro una página Web " El identificador debe ser único en la página Web Formato: <protocol://><host><path><anchor>! Por ejemplo: " seccion2: identifica la seccion 3 de la página HTML Juan Quemada, DIT, UPM 16

77 URLs relativos relativos al recurso anterior! Solo llevan path, el navegador añade " host, protocol y port del acceso anterior! Ejemplos! Path absoluto: /lib/coches/vw.html " camino absoluto desde el directorio raíz del servidor! Path relativo: coches/vw.html, vw.html " Camino relativo desde el directorio del recurso actual! Path relativo con..:../casas/chalet.html " Camino relativo con vuelta a directorio padre! Anchor solo: seccion3 " Elemento con id=seccion3 en el mismo recurso! Ojo! El navegador no accede al servidor, el recurso ya esta cargado Juan Quemada, DIT, UPM 17

78 URL con pregunta o query Se puede añadir una pregunta o query con parámetros! <protocol://><host><path><query> " pregunta o query: parámetros con la siguiente sintáxis!?param1=valor1&param2=valor2&...! Se utilizan en interfaces REST de acceso a servicios " Identifican información en una base de datos! Ejemplo! "?usuario=1527: envía el parámetro usuario=1527 Juan Quemada, DIT, UPM 18

79 Otros URLs El URL soporta otros servicios accesibles con otros protocolos, tales como telnet, mailto, file, ftp,...! URL de identificación de ficheros locales con un path):! file:///dir1/dir2/fichero.html! Solo tiene protocolo y path absoluto. Juan Quemada, DIT, UPM 19

80 URL de Permite crear correos electrónicos en documentos Web. Al hacer clic en ellos se despliega el correo especificado.! Mas información en: Juan Quemada, DIT, UPM 20

81 Seleccionar ejemplo Hacer clic para actualizar pag. Hacer clic en el Modulo 1 Editor Interactivo Juan Quemada, DIT, UPM 21

82 HTML Estructura

83 EstructuraHTML Loselementoshtmlpuedenvisualizarsecomobloqueocomoenlínea. Loselementosbloquesblockocupantodoelanchodelapáginayfuerzanauna nuevalíneaantesydespués. <article> <aside> <canvas> <div> <footer> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section> <ul> hbps://developer.mozilla.org/eneus/docs/html/blockelevel_elements Loselementosenlíneainlinesóloocupanelanchonecesarioynofuerzan nuevaslíneas. <em> <a> <br> <img> <span> <button> <input> <select> <textarea> hbps://developer.mozilla.org/eneus/docs/html/inline_elements

84 EstructuraHTML DIV, Elelemento<div>esunelementodebloquequeseemplea contenerensuinteriorotroselementoshtml. Elelemento<div>,noLeneningúnsignificado,essemánLcamente neutro. EmpleandoCSS,elelemento<div>,sepuedeuLlizarpara estructurareldocumentoengrandesbloquesdecontenido. EldiveslapropuestaparasusLtuiraloselementos<table>,parael diseño.elpropósitodelelemento<table>,esparamostrardatos tabulados.

85 <div> <div>definebloqueungenéricoempleadoparaformatearconcss. <div,id="caja" class="cabecera">,.,</div> AtributoID:idenLficaunívocamenteunelementoHTMLenuna página.unelementohtmlsolodebetenerunatributoidyeste debeserúnicoenlapágina.elselectorcsscaja,serefiereal elementoconatributoid="caja,comoencaja,{color:blue},, AtributoCLASS:defineunaclasedeelementosHTML.Unelemento puedetenervariosatributosclass.,elselectorcss.cabecera,se refiereatodosloselementodelaclasecabeceraquellevanel atributoclass="cabecera"),comoen.cabecera,{color:red},,,,

86 EstructuraHTML SPAN, ElelementoHTML,<span>,esunelementoenlíneaqueseemplea comouncontenedordetexto. Elelemento<span>,noLeneningúnsignificadoespecial,es semánlcamenteneutro.. CuandoseuLlizajuntocon,CSS,elelemento<span>,sepuede ullizarparaestablecerlosatributosdeeslloparalaspartesdel textomedianteunidenlficadoridounaclaseclass.

HTML/CSS( Mi(primera(página(

HTML/CSS( Mi(primera(página( HTML/CSS Miprimerapágina QuéesHTML Esunlenguajedemarcasparaformateary estructurarundocumento,quepuedeleerseen cualquiernavegador. EstandarizadoenlanormaISOdeSGML StandardGeneralizedMarkupLenguage).

Más detalles

Imágenes#HTML# Las#imágenes#se#vinculan#en#una#página#HTML#con#la#e8queta##con#los# atributos# ### src#=#url###

Imágenes#HTML# Las#imágenes#se#vinculan#en#una#página#HTML#con#la#e8queta#<img>#con#los# atributos# ### src#=#url### CSS div ImágenesHTML LasimágenessevinculanenunapáginaHTMLconlae8quetaconlos atributos src=url alt=textoalterna8vodelaimagen width=ancho height-=alto EstructuraCSS lae8quetaofrecealosdiseñadoreslaflexibilidadyelcontrol

Más detalles

Introducción HTML y CSS. Clientes, servidores, nube

Introducción HTML y CSS. Clientes, servidores, nube Clientes, servidores, nube a. Los clientes dan acceso a los servicios en Internet. b. Los servidores alojan la información y los servicios. c. La nube es el conjunto de terminales y servidores. TCP/IP

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

Introducción al curso y al programa. Juan Quemada, DIT, UPM

Introducción al curso y al programa. Juan Quemada, DIT, UPM Introducción al curso y al programa Juan Quemada, DIT, UPM 1 Curso: Diseño de aplicaciones Web en HTML5 y para móviles FirefoxOS Curso de iniciación al diseño y a la programación en HTML5 (HTML, CSS y

Más detalles

Introducción a Internet y a la Web. Juan Quemada, DIT, UPM

Introducción a Internet y a la Web. Juan Quemada, DIT, UPM Introducción a Internet y a la Web Juan Quemada, DIT, UPM 1 Clientes, servidores y la nube Internet Clientes: dan acceso a los usuarios a la información y los servicios Servidores: alojan la información

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. 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

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

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

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

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

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

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB PRESENTA: CREACION DE PÁGINAS WEB OBJETIVO Conocer la aplicación de los paquetes mas utilizados para la implementación t diseño de una pagina Web. DIRIGIDO A: Estudiantes de informática, Ofimática y Personas

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

HTML HyperText Markup Language. Fernando Pérez Costoya fperez@fi.upm.es

HTML HyperText Markup Language. Fernando Pérez Costoya fperez@fi.upm.es HTML HyperText Markup Language Fernando Pérez Costoya fperez@fi.upm.es Índice Definición Historia y evolución de HTML El fiasco de XHTML HTML 5: la resurrección Un tour por HTML Diseño de aplicaciones

Más detalles

Introducción al desarrollo WEB. Tecnologías Web

Introducción al desarrollo WEB. Tecnologías Web Introducción al desarrollo WEB Tecnologías Web Un poco de Historia World Wide Web (WWW) Inventada por Tim Berners Lee en 1989!!! Mientras trabajaba European Organization for Nuclear Research (CERN) http://www.w3.org/consortium/history.html

Más detalles

Vamos a crear un EPUB desde cero

Vamos a crear un EPUB desde cero Vamos a crear un EPUB desde cero Qué es un EPUB? El EPUB es un formato abierto de libro digital desarrollado por el IDPF. Tiene vocación de ser formato estándar. EPUB es una especificación abierta para

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

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

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

Cursito 27: Curso de HTML Parte 3

Cursito 27: Curso de HTML Parte 3 Por Roxana Bassi rox@roxanabassi.com.ar / http://www.roxanabassi.com.ar Publicado en la sección los cuadernos de Internet World en la revista Internet World Latinoamérica en el período 1995-1999 Cursito

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

HTML 5 : Formularios

HTML 5 : Formularios HTML 5 : Formularios El formulario es una interfaz fundamental en las páginas web para interactuar con el usuario. Esta interacción se genera a través de variados elementos, como cajas para introducir

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

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

Páginas Web Barcelona

Páginas Web Barcelona Páginas Web Barcelona Requisito previo: Todos los asistentes deben de tener previo conocimiento de las plataformas Macintosh o Windows. Se prefiere que los delegados tengan una experiencia básica en HTML

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

Í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

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

HTML 5. Que es HTML5 07/04/2011

HTML 5. Que es HTML5 07/04/2011 HTML 5 M.I María Luisa González Ramírez Que es HTML5 Es una agrupación de diversas especificaciones concernientes al desarrollo web HTML 5 no se limita solamente a crear nuevas etiquetas, atributos. Es

Más detalles

Tema: Estructura de HTML5 y optimización de imágenes.

Tema: Estructura de HTML5 y optimización de imágenes. Diseño Digital V. Guía 3 1 Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V Tema: Estructura de HTML5 y optimización de imágenes. Objetivos Contenidos Introducir al

Más detalles

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR SERVICE DEFINITION MANUAL DEL ADMINISTRADOR Versión de producto: 1.5 Última revisión: 11-11-2008 2008 Carabela Consulting, S.L. Este documento contiene información confidencial. Página 1 de 18 ÍNDICE 1.

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

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 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

Desarrollo en HTML, CSS y Javascript de Apps Web, Android, IOS, FirefoxOS, Juan Quemada, DIT, UPM

Desarrollo en HTML, CSS y Javascript de Apps Web, Android, IOS, FirefoxOS, Juan Quemada, DIT, UPM Desarrollo e HTML, CSS y Javascript de Apps Web, Adroid, IOS, FirefoxOS, Jua Quemada, DIT, UPM 1 Objetivo del curso Curso de diseño y programació de aplicacioes Web multi-dispositivo (PC, tableta, telefóo,...)

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

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

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

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 1 Nombre de la practica: Introducción y conceptos básicos de HTML Lugar de ejecución:

Más detalles

CREIX AMB INTERNET. Crear Widgets para la web 2.0

CREIX AMB INTERNET. Crear Widgets para la web 2.0 CREIX AMB INTERNET Crear Widgets para la web 2.0 2 1. Widgets. 1.1. Qué son los Widgets. Esencialmente un widget es un conjunto de documentos HTML/CSS/JavaScript locales. Decimos locales, por que una vez

Más detalles

HTML Guía de trabajo para 3º ESO

HTML Guía de trabajo para 3º ESO HTML Guía de trabajo para 3º ESO Página 2 Índice 1. Qué es HTML?... 3 2. Cómo son las páginas Web?... 3 3. Qué es un sitio Web?... 3 4. Práctica 1. Crear un sitio web local... 4 5. Primera página HTML...

Más detalles

Tema 4. Contenido multimedia. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tema 4. Contenido multimedia. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Tema 4. Contenido multimedia ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Hipertexto! Permiten conectar entre sí entre diferentes documentos, elementos

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.Presentación general 2. Presentación del curso 3. Conceptos introductorios e ingeniería web 4. Arquitectura web

Más detalles

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6 Modalidad: Distancia Duración: 77 Horas Objetivos: En la actualidad Dreamweaver es uno de los principales programas utilizados por los profesionales para el diseño y maquetación de páginas web. Estos materiales

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

METODOLOGÍA DE DESARROLLO DE CONTENIDOS WEB ACCESIBLES ÍNDICE DE CONTENIDO

METODOLOGÍA DE DESARROLLO DE CONTENIDOS WEB ACCESIBLES ÍNDICE DE CONTENIDO ÍNDICE DE CONTENIDO Metodología de desarrollo de contenidos web accesibles...1 Estándares de accesibilidad de la UE...2 Desglose por roles...2 Creación de contenidos...2 Diseño...3 Programación...4 Anexo

Más detalles

MÓDULO: SERVICIOS E RED. Nombre: Curso: 2º SMR (9-6-2011) [Examen Final Junio]

MÓDULO: SERVICIOS E RED. Nombre: Curso: 2º SMR (9-6-2011) [Examen Final Junio] MÓDULO: SERVICIOS E RED Nombre: Curso: 2º SMR (9-6-2011) [Examen Final Junio] PARTE 1: Responde las siguientes preguntas tipo TEST. Solo hay una respuesta correcta. Dos respuestas incorrectas anulan una

Más detalles

CURSO DE DREAMWEAVER CS3

CURSO DE DREAMWEAVER CS3 CURSO DE DREAMWEAVER CS3 Aprender a manejar el programa Dreamweaver para diseñar páginas Web. A la finalización del curso, el alumno será capaz de crear sitios Web con páginas que incorporen imágenes,

Más detalles

CREIX AMB INTERNET. Desarrollo Aplicaciones para la plataforma Facebook

CREIX AMB INTERNET. Desarrollo Aplicaciones para la plataforma Facebook CREIX AMB INTERNET Desarrollo Aplicaciones para la plataforma Facebook 2 1. Introducción. 1.1. El propósito de la plataforma Facebook Facebook se creó como una versión en línea de los "Facebooks" de las

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

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes 10/09/14 CÓMO SE HACE LA WEB LO QUE VES Bases del HTML CÓMO ES CREADA Sitios pequeños utilizan solamente HTML y CSS. Sesión 3 Sitios más grandes usan CMS, herramientas de blog o comercio de e-commerce.

Más detalles

Información general. Últimas noticias

Información general. Últimas noticias Información general Últimas noticias 1 Registro de miembros Texto informativo { Registro nuevo usuario { 2 Registro de miembros 1) Acceder a secciones privadas de la página. 2) Acceso a contenido descargable

Más detalles

2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen

2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen CURSO DE HTML5 1. Historia de HTML Potencial de HTML5 Principales novedades de HTML5 Elementos necesarios para trabajar con HTML5 Editor Navegador 2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen

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

Wenceslao Zavala. www.producciondigitalup.com.ar

Wenceslao Zavala. www.producciondigitalup.com.ar Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:

Más detalles

Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en

Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en Dominio y Hosting Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en el internet... 5 http: hyper text

Más detalles

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 2: Aspectos básicos.

Ministerio de Educación, Cultura y Deporte. HTML5 en la educación. Módulo 2: Aspectos básicos. Ministerio de Educación, Cultura y Deporte. HTML5 en la educación Módulo 2: Aspectos básicos. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Aspectos básicos del lenguaje

Más detalles

HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014

HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 HTML y XHTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Etiquetas Contenido de una página web: Contenido (información). Instrucciones de estructura

Más detalles

INDICE Capitulo 1. Internet y la Web Capitulo 2. Páginas Web Capitulo 3. Introducción al Lenguaje HTML Capitulo 4. Imágenes

INDICE Capitulo 1. Internet y la Web Capitulo 2. Páginas Web Capitulo 3. Introducción al Lenguaje HTML Capitulo 4. Imágenes INDICE Antes de comenzar XIII Capitulo 1. Internet y la Web 1 Internet 3 Protocolos de Internet 4 El hipertexto y la Web 4 Funcionamiento de la Web 8 Cliente Web 8 Servidor Web 8 Transferencia de la pagina

Más detalles

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí. Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la

Más detalles

UNIDAD 4 HIPERENLACES

UNIDAD 4 HIPERENLACES UNIDAD 4 HIPERENLACES OBJETIVO El alumno será capaz de crear, modificar y probar hipervínculos personalizados en un documento de Dreamweaver. TEMARIO 4.1 CONCEPTO Y TIPOS DE ENLACES 4.2 PERSONALIZAR NUEVOS

Más detalles

Darío Roig Servicio de Informática. Extensión Universitaria

Darío Roig Servicio de Informática. Extensión Universitaria Darío Roig Servicio de Informática Extensión Universitaria Calendario 8, 9, 10 de febrero de 2011 2 Sesiones de 16:00 19:30 (martes y miércoles) 1 Sesión de 16:00 19:00 (jueves) 10 horas 1 crédito de libre

Más detalles

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 Modalidad Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 cod / EU 0518 A Distancia Duración 300 Horas Objetivos Aportar al alumno todas las competencias y conocimientos necesarios

Más detalles

Manual de v2cms v2cms v1.01

Manual de v2cms v2cms v1.01 Manual de v2cms v2cms v1.01 Introducción v2cms es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creación de sitios web no importa el tamaño del mismo. El mismo permite una

Más detalles

MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML

MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con

Más detalles

Práctica 2: Diseño Web inicial. XHTML avanzado.

Práctica 2: Diseño Web inicial. XHTML avanzado. Grado de Información y Documentación Curso 2011-2012 33864-Informática II Práctica 2: Diseño Web inicial. XHTML avanzado. 1. Introducción y objetivos Introducción En esta práctica el alumno tendrá un tema

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

MANUAL TECNICO DE EMAILING BIZBOX

MANUAL TECNICO DE EMAILING BIZBOX MANUAL TECNICO DE EMAILING BIZBOX 1.- Verificar Registro SPF El dominio desde el que envía su coreo no puede ser cualquier dominio, debe ser un dominio aprobado y verificado para enviar correos, estos

Más detalles

Introducción: páginas web y navegadores

Introducción: páginas web y navegadores IB14 Informática Aplicada a la Construcción Creación de páginas web con HTML Introducción: páginas web y navegadores Una página web, pese a la gran cantidad de colores, imágenes e información que puede

Más detalles

Desarrollo y servicios web

Desarrollo y servicios web Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2014-2 2 Sesión 3. Arquitectura web básica parte 2 Qué haremos hoy? 3 1. La era post pc 2. Nombres de dominio 3. URL 4.HTTP( GET / POST) La era post-pc

Más detalles

Aspectos prácticos de Internet

Aspectos prácticos de Internet Aspectos prácticos de Internet Tema 6 Web y buscadores Introducción Conceptos Básicos HTML HTTP URL DNS Servidores web Caches y proxies Web 2.0 Buscadores Introducción Nació en 1990- Tim Berners-Lee Documentos

Más detalles

Técnico en Dreamweaver CC, HTML5, CSS3, PHP y JavaScript. Informática y Programación

Técnico en Dreamweaver CC, HTML5, CSS3, PHP y JavaScript. Informática y Programación Técnico en Dreamweaver CC, HTML5, CSS3, PHP y JavaScript Informática y Programación Ficha Técnica Categoría Informática y Programación Referencia 30382-1601 Precio 62.00 Euros Sinopsis Este curso de Técnico

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

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

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

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

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

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Tema 3. Conceptos Básicos de HTML ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Lenguajes de descripción! Grupo de lenguajes que describen cómo representar

Más detalles

INTRODUCCIÓN AL WEB. Pag. 1 de 10

INTRODUCCIÓN AL WEB. Pag. 1 de 10 INTRODUCCIÓN AL WEB La World Wide Web o simplemente WWW o Web es uno de los métodos más importantes de comunicación que existe en Internet. Consiste en un sistema de información basado en Hipertexto (texto

Más detalles

Creación de páginas Web

Creación de páginas Web Seminario Creación de páginas Web Santander, mayo 2006 Michael González Harbour (mgh@unican.es) GRUPO DE COMPUTADORES Y TIEMPO REAL Michael González Harbour 1 Creación de páginas Web 1. Introducción 2.

Más detalles

Tutorial de Drupal para Editores de Sitios

Tutorial de Drupal para Editores de Sitios Tutorial de Drupal para Editores de Sitios Autora: Aylín Alvarez Martínez Dpto. de Desarrollo de Infomed Noviembre 2010 1 Índice Qué es un CMS?... 3 Qué es Drupal?... 3 Registro e Ingreso... 3 Mi cuenta...

Más detalles

1.- REDES E INTERNET TIPOS DE REDES COMUNICACIÓN POR INTERNET PROTOCOLO IP PROTOCOLO TCP

1.- REDES E INTERNET TIPOS DE REDES COMUNICACIÓN POR INTERNET PROTOCOLO IP PROTOCOLO TCP 1.- REDES E INTERNET TIPOS DE REDES LAN (Local Area Network). Enlazan ordenadores dentro de un área limitada: un departamento, una oficina, un edificio, etc La forma más sencilla para crear una LAN es

Más detalles

1. Tutorial Página Personal... 2

1. Tutorial Página Personal... 2 Índice 1. Tutorial Página Personal... 2 1.1. Introducción... 2 1.2. Tutorial de edición de páginas web con Kompozer... 2 1.2.1. Descarga del programa... 2 1.2.2. Edición de la página web... 4 1.3. Como

Más detalles

La Capa de Aplicación Protocolos de Aplicación Básicos

La Capa de Aplicación Protocolos de Aplicación Básicos La Capa de Aplicación Protocolos de Aplicación Básicos mayo de 2008 DNS DNS (RFC 1034 y 1035) Idea básica: Cada nodo tiene un nombre único asignado a una dirección IP. El Sistema de Nombres de Dominio

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

DIPLOMADO EN SEGURIDAD INFORMATICA

DIPLOMADO EN SEGURIDAD INFORMATICA DIPLOMADO EN SEGURIDAD INFORMATICA Modulo 9: Soporte Computacional Clase 9_3:Protocolos de comunicación y conectividad de arquitecturas multiplataforma. Director Programa: César Torres A Profesor : Claudio

Más detalles

ENLACES EMAILS Y ANCLAS. ENLACES Y EMAILS ( Link)

ENLACES EMAILS Y ANCLAS. ENLACES Y EMAILS ( Link) ENLACES EMAILS Y ANCLAS Enlaces y E-mails 1.1 URL 1.1.1 Información de Enlace 1.1.2 Objetivo 1.1.3 Subir 1.2 Enlace a la barra en el texto 1,3 E-mail 1.4 Opciones avanzadas 2 Anclas ENLACES Y EMAILS (

Más detalles

Tabletas en el aula. Diseño de apps con MIT App Inventor 2. Edición 2015. Autor: Fernando Posada Prieto canaltic.com

Tabletas en el aula. Diseño de apps con MIT App Inventor 2. Edición 2015. Autor: Fernando Posada Prieto canaltic.com Tabletas en el aula Diseño de apps con MIT App Inventor 2 Edición 2015 Autor: Fernando Posada Prieto canaltic.com Diseño de apps con MIT App Inventor 2 Índice 1. Qué es App Inventor 2?... 2 2. Requisitos

Más detalles

Material Actividad de aprendizaje 1. Primeros Pasos con App Inventor

Material Actividad de aprendizaje 1. Primeros Pasos con App Inventor Análisis Desarrollo de para aplicaciones el desarrollo móviles móvil con APP con INVENTOR.. Indice Introducción 1. Android. 2. Introducción. 3. Requisitos para la Configuración. 4. Configuración de 2.

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 2 Diego C. Martínez Departamento de Ciencias e Ing geniería de la Computación Universidad Nacional del Sur Internet y sus servicios Internet define una forma de conexión

Más detalles

1.264 Tema 12. HTML Introducción a FrontPage

1.264 Tema 12. HTML Introducción a FrontPage 1.264 Tema 12 HTML Introducción a FrontPage HTML Subconjunto de lenguaje de marcado generalizado estándar (SGML), lenguaje descri ptivo de documentos. SGML está certificado con la norma ISO. La versión

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