HTML5 y CSS3: cómo sacarles partido hoy
|
|
|
- María Carmen Córdoba Serrano
- hace 6 años
- Vistas:
Transcripción
1 HTML5 y CSS3: cómo sacarles partido hoy Jose Florido Madrid Martes 22 Septiembre
2 Objetivo del curso Mostrar el potencial de los nuevos estándares, así como de los navegadores web de nueva generación y su uso hoy en día, logrando mantener nuestras páginas web compatibles con navegadores menos avanzados.
3 HTML 5
4 Primera parte: HTML5 Historia Características Novedades APIs Ejercicio práctico: creación de una página con HTML5
5 HTML5 y CSS3: cómo sacarles partido partido hoy hoy HTML 5 Historia de HTML 5
6 Historia de HTML5 HTML4 1998
7 Historia de HTML5 XHTML1 2000
8 Historia de HTML5 XHTML2 2002
9 Historia de HTML5 XForms 2003
10 Historia de HTML5 WHATG 2004
11 Historia de HTML5 HTML5 2007
12 Historia de HTML5 Hoy día, las aplicacione web necesitan: Reproducir video y audio Acceso a recursos: webcam, micrófono, etc Trabajar offline 3D Geolocalización Mejores subidas de ficheros Drag and drop Complejos elementos de interacción con formularios
13 Historia de HTML5 2022? Final Draft en Octubre 2009 Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4 Google Wave iphone
14 HTML5 y CSS3: cómo sacarles partido partido hoy hoy HTML 5 Principales características
15 HTML5: Principales características Compatibilidad Evolución, no revolución
16 HTML5: Principales características Utilidad Resolver problemas reales
17 HTML5: Principales características Interoperabilidad Definir el comportamiento de los UA Gestión de errores
18 HTML5: Principales características Acceso universal Independencia del medio, i18n, accesible
19 HTML5 y CSS3: cómo sacarles partido partido hoy hoy HTML 5 Novedades
20 HTML5: Novedades Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
21 HTML5: Novedades Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
22 HTML5: Novedades Doctype <!DOCTYPE html> :-)
23 HTML5: Novedades Tipos de contenido Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
24 HTML5: Novedades Metadata content define la presentación o el comportamiento del resto del documento, o relaciones del documento con otros documentos. base, command, link, meta, noscript, script, style, title
25 HTML5: Novedades Flow content la mayoría de los elementos usados en el cuerpo de un documento son de tipo flow. a, abbr address, article aside, audio, dialog, div, fieldset, figure, footer, form, h1, h2, img, nav, p, script, section, select, small, span, strong, table, textarea, time, video,...
26 HTML5: Novedades Sectioning content elementos que crean nuevas secciones en el documento article, aside, nav, section
27 HTML5: Novedades Heading content elementos que definen la cabecera de una sección h1, h2, h3, h4, h5, h6, hgroup
28 HTML5: Novedades Phrasing content texto del documento junto con elementos que marcan el texto, dentro de un párrafo a, b, string, span, small, time, em,...
29 HTML5: Novedades Embedded content elementos que importan otro recurso o contenido de otro vocabulario dentro del documento audio, canvas, embed, iframe, img, math, object, svg, video
30 HTML5: Novedades Interactive content elementos destinados a interacción con el usuario a, audio, button, details, embed, iframe, img, input, keygen, label,menu, object, select, textarea, video
31 HTML5: Novedades Nuevos elementos Elementos estructurales Canvas Video Audio
32 HTML5: Novedades Elementos estructurales I section representa una sección del documento. Junto con h1, h2,..., h6 indica la estructura del documento. article representa una pieza de contenido independiente dentro de un documento. aside representa una pieza de contenido que esta menos relacionada con el resto de la página.
33 HTML5: Novedades Elementos estructurales II hgroup representa el encabezado de una sección. Agrupa varios elementos h1 - h6. header representa la cabecera de un documento o sección. footer representa el pie de una sección y puede contener información sobre el autor, copyright, etc.
34 HTML5: Novedades <article> <hgroup> <h1>apples</h1> <h2>tasty, delicious fruit!</h2> </hgroup> <p>the apple is the pomaceous fruit of the apple tree.</p> <section> <h1>red Delicious</h1> <p>these bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>granny Smith</h1> <p>these juicy, green apples make a great filling for apple pies.</p> </section> </article>
35 HTML5: Novedades Elementos estructurales III nav representa una sección del documento que contiene navegación dialog usado para marcar una conversación figure usado para asociar una description textual o subtítulos a algún elemento embedido, como vídeos o imágenes.
36 HTML5: Novedades <body> <header> <h1>web page</h1> <nav> <h1>navigation</h1> <ul> <li><a href="articles.html">articles</a></li> <li><a href="today.html">today</a></li> <li><a href="successes.html">successes</a></li> </ul> </nav> </header> <article> <p>...page content would be here...</p> </article> <footer> <p>copyright 2006 The Example Company</p> <p><a href="about.html">about</a> - <a href="policy.html">privacy Policy</a> - <a href="contact.html">contact Us</a></p> </footer> </body>
37 HTML5: Novedades Nuevos elementos canvas crea un lienzo donde es posible crear gráficos u otras imágenes visuales al vuelo, mediante scripting.
38 HTML5: Novedades Canvas - accesibilidad Contenido alternativo <canvas id="a_canvas" width="400" height="300"> <p>ops! No canvas support, bad browser!</p> </canvas> Problemas de accesibilidad
39 HTML5: Novedades Canvas - soporte Soporte extenso por parte de navegadores * IE utilizando la librería excanvas.js
40 HTML5: Novedades Canvas - aplicaciones Efectos y transformaciones (Demo) Animaciones (Demo) Tipografías (Cufón)
41 HTML5: Novedades Nuevos elementos video un método único para insertar video en la web.
42 HTML5: Novedades Video - atributos <video src=" your browser does not support the video tag </video> Atributos poster autobuffer autoplay loop controls
43 HTML5: Novedades Video - formato / codecs Ogg Theora (Chrome, Firefox, Opera) H.264 (Chrome, Safari)
44 HTML5: Novedades Video - soporte Soportado por las últimas versiones de casi todos los navegadores, excepto IE
45 HTML5: Novedades Video - degradación grácil <video controls> <source src="zombie.ogg" type="video/ogg"/> <source src="zombie.mp4" type="video/mp4"/> <embed src=" type="application/x-shockwave-flash" width="500" height="396" allowscriptaccess="always" allowfullscreen="true"/> </video>
46 HTML5: Novedades Nuevos elementos audio un método único para insertar audio en la web.
47 HTML5: Novedades Audio - atributos <audio src=" controls></audio> Atributos autobuffer autoplay loop controls
48 HTML5: Novedades Audio - demo HTML5 Audio player
49 HTML5: Novedades Audio - soporte Soportado por las últimas versiones de casi todos los navegadores, excepto IE
50 HTML5: Novedades Nuevos reglas para el código En HTML4 / XHTML1: <li> <p><a href=" a google.com</a></p> <a href=" src="" alt="logo de Google" /></a> </li>
51 HTML5: Novedades Nuevos reglas para el código En HTML5: <li> <a href=" <p>ir a google.com</p> <img src="" alt="logo de Google" /> </a> </li>
52 HTML5: Novedades Elementos que desaparecen basefont big center font s strike tt u frame frameset noframes acronym applet isindex dir
53 HTML5: Novedades Forms Opera 10 demo
54 HTML5 y CSS3: cómo sacarles partido partido hoy hoy HTML 5 APIs
55 HTML5: APIs APIs en navegadores getelementsbyclassname queryselector Almacenamiento de datos en el cliente, por sesión y persistente Mensajes entre documentos Drag-and-drop
56 HTML5: APIs getelementsbyclassname( abrir ) <li id="uno"> <p>link 1</p> <a href="#" class="abrir">abrir link 1</a> </li> <li id="dos"> <p>link 2</p> <a href="#" class="abrir">abrir link 2</a> </li> <li id="tres"> <p>link 3</p> <a href="#" class="abrir">abrir link 3</a> </li>
57 HTML5: APIs queryselector( #dos.abrir ) <li id="uno"> <p>link 1</p> <a href="#" class="abrir">abrir link 1</a> </li> <li id="dos"> <p>link 2</p> <a href="#" class="abrir">abrir link 2</a> </li> <li id="tres"> <p>link 3</p> <a href="#" class="abrir">abrir link 3</a> </li>
58 HTML5: APIs Almacenamiento de datos en el cliente, por sesión y persistente Aplicaciones web offline Menor latencia Mejor rendimiento Mayor privacidad Safari Notes demo
59 HTML5: APIs Mensajes entre documentos Cross-domain Sin necesidad de configuración postmessage() John Resig s messaging demo
60 HTML5: APIs Drag-and-drop Drag and drop nativo del sistema Arrastrar objetos al navegador y entre ventanas del navegador Drag-and-drop demo 280 slides video demo
61 HTML5: Ejercicio Estructura
62 HTML5: Ejercicio HTML4
63 HTML5: Ejercicio HTML5
64 CSS 3
65 Segunda parte: CSS3 Historia Selectores Módulos y nuevas propiedades Ejercicio práctico: aplicación de CSS3 a una página
66 HTML5 y CSS3: cómo sacarles partido partido hoy hoy CSS 3 Historia de CSS 3
67 Historia de CSS3 CSS1 1996
68 Historia de CSS3 CSS2 1998
69 Historia de CSS3 CSS (WD)
70 Historia de CSS3 CSS (WD)
71 CSS3: Principios Compatibilidad Hacia delante y hacia atrás
72 CSS3: Principios Complementariedad Cambiar CSS si cambiar HTML
73 CSS3: Principios Independencia De plataforma y de dispositivo
74 CSS3: Principios Simplicidad, flexibilidad, riqueza Sencillo y potente
75 CSS3: Principios Accesibilidad Posibilitar acceso universal
76 HTML5 y CSS3: cómo sacarles partido partido hoy hoy CSS 3 Selectores
77 CSS3: Selectores Selectores en CSS1 de elemento: h1 { color: red; } de clase: h1.alert { color: red; } de ID: #alert { color: red; } descendientes y contextuales: h1 em { color: red; } pseudo-clases: a:link, a:visited, a:active, :first-line, :first-letter comodín: div * p
78 CSS3: Selectores Selectores en CSS2 selector universal (*): blockquote * {... } de atributo: a[href=" {... } más pseudo-clases: :first-child, :hover, :focus, :active, :lang, :before, :after de hijos: div > p {... } de hermanos: h1 + h2 {... }
79 CSS3: Selectores Selectores en CSS1 y CSS2 body > ol > li p
80 CSS3: Selectores Selectores en CSS1 y CSS2 body > ol > li p - Selecciona cualquier elemento p que es descendiente de un elemento li que es hijo de un elemento ol que es hijo de un elemento body.
81 CSS3: Selectores Selectores en CSS1 y CSS2 p > * > em
82 CSS3: Selectores Selectores en CSS1 y CSS2 p > * > em - Selecciona cualquier elemento em que es hijo de cualquier elemento que es hijo de un elemento p.
83 CSS3: Selectores Selectores en CSS1 y CSS2 a[title~="mail"]
84 CSS3: Selectores Selectores en CSS1 y CSS2 a[title~="mail"] - Selecciona cualquier elemento a con un atributo title que contiene la palabra Mail.
85 CSS3: Selectores Selectores en CSS3 I nuevos selectores de atributo: comienzo del atributo a[href^="ftp:"] {... } final del atributo a[href$=".edu"] {... } cualquier cadena contenido img[src*="photos"] {... }
86 CSS3: Selectores Selectores en CSS3 II nuevas pseudo-clases: :enabled, :disabled, :checked Permiten cambiar la apariencia de los inputs de formulario, según su estado. No soportadas en IE7 ni en IE8
87 HTML5 y CSS3: cómo sacarles partido partido hoy hoy CSS 3 Módulos
88 CSS3: Módulos Algunos otros módulos de CSS3 Colores Modelo de caja Fondos y bordes Tipografía y efectos de texto Layout multicolumna Animaciones y transiciones
89 CSS3: Colores Colores en CSS2 Hexadecimal - #RRGGBB Hexadecimal, shorthand - #RGB RGB- rgb(red, green, blue) Nombres de colores - white, red, black, etc.
90 CSS3: Colores Nuevos formatos de colores en CSS3 HLS - hsl(hue, saturation, lightness) CMYK - cmyk(cyan, magenta, yellow, black) HLSA - hlsa(hue, saturation, lightness, alpha) RGBA - rgba(red, green, blue, alpha)
91 CSS3: Colores Formato HLS Intensidad, luz y saturación Sencillo de manipular Existente en programas de edición de imágenes, como Adobe Photoshop Adecuado para crear paletas de colores: sólo tienes que elegir el color básico y no sus variantes claras/oscuras
92 CSS3: Colores Formato CMYK Cyan, magenta, amarillo y negro Formato muy bien conocido por los diseñadores Nos permite definir cómo nuestros colores serán impresos
93 CSS3: Colores Formatos RGBA y HSLA Añaden un cuarto parámetro: alpha El canal alpha define la transparencia del color, va de 0 (totalmente transparente) a 1 (totalmente opaco) La adición del canal alpha ofrece muchas nuevas posibilidades a los diseñadores visuales.
94 CSS3: Colores Si no hay soporte RGBA background-color: rgb(0%, 0%, 100%); background-color: rgba(0%, 0%, 100%, 0.5);
95 CSS3: Colores RGBA y HSLA vs OPACITY Opacity es una propiedad de CSS3 que modifica la transparencia de todo el elemento. Por ejemplo un párrafo con opacity: 0.5 tendría su fondo semitrans, pero también su contenido (texto) El canal alpha nos permite modificar la transparencia del color de fondo del elemento, con lo que el contenido del elemento no se vería afectado.
96 CSS3: Colores Soporte en navegadores Las últimas versiones de Safari, Opera, Firefox y Chrome soportan HSL, HSLA y RGBA IE no soporta ninguno de los nuevos formatos Ningún navegador soporta aún CMYK
97 CSS3: Modelo de caja Modelo de caja IE box model W3C box model Nueva propiedad: box-sizing: content-box / border-box Soportado en FF 1.1, Safari 3, IE 8, Opera 9.5
98 CSS3: Fondos y bordes Fondos y bordes Degradados Bordes redondeados Sombras Imágenes de borde Imágenes de fondo
99 CSS3: Fondos y bordes Degradados background: -webkit-gradient(linear, 0 0, 100% 100%, from(#d0d0d0), to(#ffffff)); background: -moz-linear-gradient(20% center, 30% center, from(blue), to (yellow)) no-repeat; Soportado por Safari y firefox.
100 CSS3: Fondos y bordes Bordes redondeados -moz-border-radius-topleft / -webkit-border-top-left-radius -moz-border-radius-topright / -webkit-border-top-right-radius -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
101 CSS3: Fondos y bordes Sombras (de caja) box-shadow: 10px 10px 5px #888;
102 CSS3: Fondos y bordes Imágenes de borde border-image: border-corner-image:
103 CSS3: Fondos y bordes Imágenes de fondo Tamaño -o-background-size, -webkit-background-size, -khtml-background-size, -moz-background-size Múltiples imágenes de fondo background: url(img1.gif) top left no-repeat, url(img2.gif) bottom left no-repeat; Soportado por Safari
104 CSS3: Layout multicolumna Layout multicolumna Número de columnas Separacón entre columnas Bordes separadores -moz-column-count -moz-column-width -moz-column-gap -webkit-column-count -webkit-column-width -webkit-column-gap
105 CSS3: Tipografía y efectos de texto Tipografía y efectos de texto Sombras en texto Uso de tipografías (@font-face)
106 Muchas gracias por venir!
107 Los mejores cursos en desarrollo frontend impartidos por los mejores profesionales
Maquetado Avanzado: HTML5 y CSS3
Maquetado Avanzado: HTML5 y CSS3 Programa de Estudio Maquetado Avanzado: HTML5 y CSS3 Domina lo último de los lenguajes más importantes en la Web: HTML 5 y CSS 3. Aprende a realizar sitios Web de última
Listado de elementos o etiquetas HTML5
Listado de elementos o etiquetas HTML5 Etiqueta Función Define un comentario Define el tipo de docuemento Define
Maquetado Avanzado: HTML5 y CSS3
Maquetado Avanzado: HTML5 y CSS3 Programa de Estudio Maquetado Avanzado: HTML5 y CSS3 Domina lo último de los lenguajes más importantes en la Web: HTML 5 y CSS 3. Aprende a realizar sitios Web de última
Maquetado Avanzado: HTML5 y CSS3
Maquetado Avanzado: HTML5 y CSS3 Programa de Estudio Maquetado Avanzado: HTML5 y CSS3 Domina lo último de los lenguajes más importantes en la Web: HTML 5 y CSS 3. Aprende a realizar sitios Web de última
CSS 3. Fernando O!ega.
CSS 3 Fernando O!ega fernando.ortega@eui.upm.es Qué falta en CSS 2.1? 2 Selectores Lista completa de nuevos selectores: http://www.w3.org/tr/css3- selectors/ Selector de atributo condicional: Permite seleccionar
NUEVAS ETIQUETAS HTML 5
NUEVAS S HTML 5 Se muestra a continuación el listado completo de las etiquetas indicando las nuevas HTML 5, las mismas se agrupan en base a su funcionalidad dentro del documento html. Establece
TABLAS CON HTML Y CSS
TABLAS CON HTML Y CSS Sesión 09 By Ing. David Gil INTRODUCCIÓN Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido
ETIQUETAS HTML 5 Diseño de Sitios Web TUW
Etiqueta Descripción Define un comentario nueva nueva nueva nueva
1. La evolución de HTML La evolución de las CSS 16
HTML5 y CSS3 1. La evolución de HTML 15 2. La evolución de las CSS 16 2.1 La noción de módulo 16 2.2 La evolución de los estados 16 2.3 Los prefijos comerciales 17 2.4 Utilizar los prefijos comerciales
Maquetación Web: HTML 5 y CSS
Maquetación Web: HTML 5 y CSS Programa de Estudio Maquetación Web: HTML 5 y CSS Aprende amaquetar sitios Web de forma ágil y profesional sin usar tablas.separa el diseño visual del contenido y optimiza
HTML Introducción. 2. Nuevos Conceptos
HTML 5 1. Introducción HTML5 es el lenguaje de etiquetas que permite diseñar documentos web estáticos la cual ofrece (a diferencia de las versiones anteriores) un conjunto de funciones que permitirá dar
Aplicaciones Web XHTML+CSS. David Cabrero Souto. Grupo MADS (http://www.grupomads.org/) Universidade da Coruña
Aplicaciones Web XHTML+CSS David Cabrero Souto Grupo MADS (http://www.grupomads.org/) Universidade da Coruña W3C Establece estándares: recomendaciones. HTML 4.0 XHTML 1.0, XHTML 1.1, XHTML 2.0, XFORMS
HTML5 ADAPTADO POR: YIM ISAIAS APESTEGUI FLORENTINO
HTML5 HTML v XHTML HTML5: futuro estándar que unifica HTML y XHTML, pero Aún en desarrollo Dos versiones: W3C y WHATWG XHTML 1: estándar actual, pero sin continuidad Dos formas de codificar HTML5: html
Programa Formativo. Código: Curso: Experto en Diseño Web para dispositivos móviles Modalidad: DISTANCIA Duración: 120h.
Código: 13619 Curso: Experto en Diseño Web para dispositivos móviles Modalidad: DISTANCIA Duración: 120h. Objetivos El término HTML hace referencia al lenguaje de marcado predominante para la elaboración
DISEÑO WEB. Escuela Web Design. PARA MÓVILES Y ESCRITORIO DURACIÓN 45 HRS ADOBE DREAMWEAVER CC
TEMARIO Escuela Web Design Escuela Web Design ADOBE DREAMWEAVER CC DREAMWEAVER Y PARA QUÉ SIRVE? Marco de referencia: HTTP Qué es un servidor y dónde conseguir uno Qué es un dominio Buscar disponibilidad
DESCRIPCIÓN ESPECÍFICA NÚCLEO: Núcleo Sector Comercio y Servicios.
DESCRIPCIÓN ESPECÍFICA NÚCLEO: Núcleo Sector Comercio y Servicios. SUBSECTOR: Informática y Comunicación. Nombre del Módulo: Creación de páginas Webs Código: CSTI0168 total: 60 horas Objetivo General:
Hojas de Estilo CSS3. Duración: horas. Descripción. Objetivos
Hojas de Estilo CSS3 Duración: 15.00 horas Descripción El lenguaje CSS o hojas de estilo en cascada nos permite dar estilo a un documento de marcas por ejemplo realizado con HTML o XML. Con CSS podemos
El objetivo general del curso es conseguir que el alumno sea capaz de realizar páginas web utilizando las hojas de estilo CSS3.
Hojas de Estilo CSS3 Duración: 15.00 horas Descripción El lenguaje CSS o hojas de estilo en cascada nos permite dar estilo a un documento de marcas por ejemplo realizado con HTML o XML. Con CSS podemos
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
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML Desarrollo de aplicaciones Web. Felipe LC La actividad #1 En qué consistió la actividad 1? Qué conceptos aprendimos? Demos algunos ejemplos. Qué aprendimos
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.
En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales HTML Desarrollo
CSS Avanzado Audio, Video e Iframes
CSS Avanzado Audio, Video e Iframes es una etiqueta de HTML bastante antigua que permite añadir de una manera muy fácil y rápida una página web o contenido dentro de otra página. Para ello únicamente
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
Programa Formativo. Objetivos
Código: 13630 Curso: Curso superior de Programación de Videojuegos con HTML5 + JavaScript + CSS3 Modalidad: DISTANCIA Duración: 150h. Objetivos El videojuego, como todo medio de comunicación, es un producto
HTML5 y CSS3 Revolucione el diseño de sus sitios web (3ª edición)
Introducción A. La creación de sitios web 18 B. Los lenguajes 18 C. El libro 18 1. Para los diseñadores web 18 2. El contenido 19 Capítulo 1: La evolución del HTML y del CSS A. Breve historia de Internet
Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1
Introducción a CSS Jesús Arias Fisteus Aplicaciones Web (2016/17) Aplicaciones Web (2016/17) Introducción a CSS 1 Parte I Introducción a CSS Aplicaciones Web (2016/17) Introducción a CSS 2 Hola Mundo!
UTN DESARROLLADOR WEB MOBILE. Diseño Multimedial. Presentación del curso. Temario a desarrollar
Presentación del curso El desarrollo web para dispositivos móviles es un área de la programación web con una demanda en permanente crecimiento. Este curso está orientado a todas aquellas personas que deseen
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
Curso de Maquetación Web: HTML 5 y CSS
Curso de Maquetación Web: HTML 5 y CSS Aprende a maquetar sitios Web de forma ágil y profesional sin usar tablas. Separa el diseño visual del contenido y optimiza al máximo los estilos de las páginas Web.
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:
Guía del Curso Técnico Profesional en Diseño Web Avanzado con HTML5 y CSS3
Guía del Curso Técnico Profesional en Diseño Web Avanzado con HTML5 y CSS3 Modalidad de realización del curso: Titulación: A distancia y Online Diploma acreditativo con las horas del curso OBJETIVOS El
UNIDAD 1 GENERALIDADES HTML
UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.
En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea
HTML completo Pregunta 1 En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea Solución: El atributo tabindex Pregunta 2 El elemento de HTML que se emplea para definir
AS341 - HTML5 (Intermedio)
AS341 - HTML5 (Intermedio) Acción formativa Curso: HTML5 (Intermedio) Modalidad formativa: teleformación. Duración: 28h Objetivos HTML5 es un nuevo concepto para la construcción de sitios web y aplicaciones
Técnicas de visualización
Técnicas de visualización Hojas de estilo CSS Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez
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
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
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
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.producciondigitalup.com.ar alumnos@producciondigitalup.com.ar Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla
EL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
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
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
DISEÑO WEB AVANZADO CON HTML5 Y CSS3 MODALIDAD TELEFORMACIÓN HORAS: 40
DISEÑO WEB AVANZADO CON HTML5 Y CSS3 MODALIDAD TELEFORMACIÓN HORAS: 40 Planificar y diseñar páginas y sitios web mediante el lenguaje de programación HTML. Objetivos Conocer e interpretar las etiquetas
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.
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Código: DWEB003 Duración: 160 Horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos
Formateo de Texto. (parte II)
Formateo de Texto (parte II) JUAN CARLOS CONDE RAMÍREZ WEB-TOOLS Objetivos Identificar la diferencia entre background y foreground. Conocer las diferentes maneras de aplicar color al texto. Conocer más
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2017 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Selector universal Se utiliza para seleccionar todos los elementos de la página. * { } margin: 0; padding:
DREAMWEAVER CS4 Código: 3492
DREAMWEAVER CS4 Código: 3492 Modalidad: Distancia Duración: Tipo A Objetivos: Aportar al alumno de un modo rápido y sencillo las competencias necesarias para la creación y diseño de páginas Web en Dreamweaver.
XML: HTML y XHTML. Sergio Luján Mora XML-03
XML: HTML y XHTML Sergio Luján Mora sergio.lujan@ua.es XML-03 Vídeo de esta presentación Puedes ver esta presentación en vídeo: http://www.youtube.com/watch?v=edtgmwvngjs XHTML es el lenguaje de marcado
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
BASE es un framework, el cual, podría definirse de manera muy sencilla como un esquema para el desarrollo y/o la implementación de una aplicación.
BASE por Carlos Lobo Qué es? BASE es un framework, el cual, podría definirse de manera muy sencilla como un esquema para el desarrollo y/o la implementación de una aplicación. En el caso de BASE, ellos
Índice. Capítulo 1. Documentos HTML5... 1
Índice Capítulo 1. Documentos HTML5... 1 1.1 Componentes básicos... 1 1.2 Estructura global... 2 ... 2 ... 2 ... 3 ... 4 ... 5 ... 6 ... 7 1.3 Estructura
TÉCNICO SUPERIOR EN PROGRAMACIÓN, DISEÑO WEB MULTIDISPOSITIVO, SERVIDORES Y BASES DE DATOS
TÉCNICO SUPERIOR EN PROGRAMACIÓN, DISEÑO WEB MULTIDISPOSITIVO, SERVIDORES Y BASES DE DATOS MORDERED 2017 INDICE PRESENTACIÓN y OBJETIVOS... 2 DESARROLLO DEL CURSO... 2 TEMARIO... 3 Módulo 1 Fundamentos
Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Selector
Introducción al desarrollo web (idesweb) - 3 a ed.
Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 7: JavaScript, Modelo de Objetos de Documento y cookies 1. Objetivos Aprender a manejar el DOM de una página web para manipular su contenido.
Lenguajes y estándares para la Web. Tema 3: XHTML. Elementos de marcado
Tema 3: XHTML. Elementos de marcado Esquema Tipo de documento, espacio de nombres y codificación Metadatos Módulos de XHTML Mecanismos de estructuración Esquema Tipo de documento, espacio de nombres y
Fundamentos de HTML. Contenidos. Programación en Internet Curso Introducción HTML Etiquetas Guía de estilo
Departamento de Lenguajes y Sistemas Informáticos Fundamentos de HTML Programación en Internet Curso 2006-2007 Introducción HTML Etiquetas Guía de estilo Contenidos DLSI - Universidad de Alicante 1 Introducción
HTML completo. Pregunta 1: Pregunta 2: Pregunta 3: Pregunta 4:
HTML completo Pregunta 1: En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea a) El atributo tab b) El atributo tabindex c) El atributo alt d) No se puede Pregunta
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
Responsive Web Design con JQuery
Responsive Web Design con JQuery Área: Informática Modalidad: Teleformación Duración: 80 h Precio: Consultar Curso Bonificable Solicita información Añade al archivador Recomienda a un amigo OBJETIVOS El
Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0
Accesibilidad en la Web: de WCAG 1.0 a WCAG 2.0 Universidad de Colima México Departamento de Lenguajes y Sistemas Informáticos Pautas de accesibilidad al contenido en la Web 1.0: paso a paso Sergio Luján
Pregunta 4: En HTML, para definir una línea horizontal de separación se emplea. a) <dd> b) <hr> c) <pre> d) <xmp>
HTML completo Pregunta 1: En HTML, para definir una línea horizontal de separación se emplea a) b) c) d) Pregunta 2: En HTML, una tabla de datos emplea las siguientes etiquetas a)
DISEÑO WEB RESPONSIVO RWD
BIENVENIDOS!!! DISEÑO WEB RESPONSIVO RWD Objetivos Entender el diseño web responsivo. Conocer las herramientas disponibles para desarrollar una plantilla J! de tipo responsiva. Desarrollar una plantilla
QUÉ SE NECESITA PARA UTILIZAR HTML5
Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web. Existen diferentes versiones del lenguaje HTML,
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS CSS - Hojas
[6] inserción de elementos multimedia
![[6] inserción de elementos multimedia](/thumbs/65/53957660.jpg "[6] inserción de elementos multimedia")
[6] inserción de elementos multimedia LMSGI, 1º de ASIR [Unidad 1] HTML Multimedia La palabra hace referencia a la posibilidad de que el contenido incorpore elementos de todo tipo Ejemplos Imágenes Vídeos
CONTENIDOS DEL CURSO ONLINE DE DISEÑO Y DESARROLLO WEB CON HTML5, CSS Y DREAMWEAVER CS4:
Curso Online Diseño y Desarrollo Web con HTML5, CSS y Dreamweaver CS4 Completo Curso Online de Diseño y Desarrollo Web mediante el lenguaje programación HTML5, la hoja de estilos CSS y el programa de diseño
Curso: DISEÑO WEB AVANZADO CON HTML5 Y CSS3
Curso: DISEÑO WEB AVANZADO CON HTML5 Y CSS3 Código: 1366 Familia Profesional: Desarrollo y diseño web Acreditación: Formación reconocida a través de vías no formales Modalidad: Distancia Duración: 75 horas
RESUMEN HTML. Elementos de estructura
RESUMEN HTML Elementos de estructura primer elemento que enmarca todo el fichero HTML (obligatorio) zona de cabecera (obligatorio) definición de un título (obligatorio) cuerpo
Lenguajes de marcado: HTML y XHTML
Tema 2 (primera parte) Lenguajes de marcado: HTML y XHTML http://www.flickr.com/photos/nolanus/5848333881/ 1. Conceptos básicos 2. Formatos básicos 3. Multimedia 4. Secciones de página 5. Formularios 6.
DISEÑANDO. Web. Empresa. de mi. COmo crear una web empresarial sin ser programador ni diseñador
introducción Bienvenida El Instructor Juan Sebastián Ossa Domínguez Diseñador Gráfico y Diseñador Desarroldor de Software introducción Bienvenida Objetivo del Curso Transmitir los conceptos básicos diseño
HTML/CSS( Mi(primera(página(
HTML/CSS Miprimerapágina QuéesHTML Esunlenguajedemarcasparaformateary estructurarundocumento,quepuedeleerseen cualquiernavegador. EstandarizadoenlanormaISOdeSGML StandardGeneralizedMarkupLenguage).
Ejercicios - HTML5 y CSS3
Índice 1 Ejercicio 1 - Estructura...2 2 Ejercicio 2 - Canvas... 2 3 Ejercicio 3 - Multimedia...2 4 Ejercicio 4 - Geolocalización... 3 5 Ejercicio 5 - Almacenamiento Offline... 3 6 Ejercicio 6 - CSS3...
Ficha Técnica. Categoría. Contenido del Pack. Sinopsis. Diseño Web. - 1 CDROM - 1 Cuaderno de Ejercicios - 2 Manual Teórico
Ficha Técnica Categoría Diseño Web Contenido del Pack - 1 CDROM - 1 Cuaderno de Ejercicios - 2 Manual Teórico Sinopsis El término HTML hace referencia al lenguaje de marcado predominante para la elaboración
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Estructura en HTML (0.6 puntos)... 2 2 Ejercicio 2 - Terminando la Web de ejemplo (0.6 puntos)... 2 3 Ejercicio 3 - Estructura
DIPLOMADO DESARROLLO WEB Y CREACIÓN DE APPS DESARROLLO DE APLICACIONES WEB CON PHP & MYSQL
DESARROLLO DE APLICACIONES WEB CON PHP & MYSQL MySQL PHP Introducción a MySQL y WAMP Introducción al modelo de datos Entidad-Relación 3 Creación de una base de datos y tablas usando WAMP y PHPmyAdmin Introducción
CSS 3. Diseño Web Avanzado. Nicolás Torre
CSS 3 Diseño Web Avanzado Nicolás Torre Breve repaso sobre CSS Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos
CSS3 Domine los estándares web con las hojas de estilo
Utilizar las hojas de estilos en cascada 1. Objetivos del libro 13 2. La evolución de las CSS 14 2.1 Los módulos CSS3 14 2.2 Etapas en la concepción de las CSS3 15 3. Los prefijos de los navegadores 19
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4 Código: 1413005 OBJETIVOS: Para diseñar y publicar una página Web, saber maquetar una página Web, saber crear animaciones, etc. CONTENIDOS: DISEÑO
Curso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
Un paseo por la Web Qué es el HTML? Hojas de estilo en cascada (CSS) Qué herramientas necesitamos? LECCIÓN 2: ESTRUCTURA DEL CÓDIGO HTML
NDICE LECCIÓN 1: INTRODUCCIÓN Un paseo por la Web Qué es el HTML? Hojas de estilo en cascada (CSS) Qué herramientas necesitamos? LECCIÓN 2: ESTRUCTURA DEL CÓDIGO HTML Las etiquetas HTML Guardar páginas
HTML/XHTML/FORMS. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR
HTML/XHTML/FORMS CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR HTML Estructura de un documento HTML Elemento HTML HEAD TITLE META datos BODY HTML HTML
CSS BÁSICO Hojas de Estilo. Iván Martínez Toro
CSS BÁSICO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo. CSS (CASCADING STYLE
CSS básico. Introducción, Unidades y Selectores
CSS básico. Introducción, Unidades y Selectores LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red [1] introducción a CSS LMSGI, módulo del ciclo de FP de Grado
Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO
CONTENIDO TEMATICO: HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO Presentación de la formación y del formador INSTALACIÓN DE NAVEGADORES Y HERRAMIENTAS Descarga e instalación de Mozilla Firefox Descarga e instalación
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
Í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
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
Computación Web (Curso 2015/2016)
Introducción a CSS Computación Web (Curso 2015/2016) Jesús Arias Fisteus // jaf@it.uc3m.es Introducción a CSS p. 1 Introducción a CSS Introducción a CSS p. 2 Hola Mundo! 1 body { 2 color: rgb(200, 200,
Presentación y objetivos
Programación de Java Programación Web Presentación y objetivos JavaScript es un lenguaje de programación que se utiliza para realizar acciones dentro del ámbito de una página Web. Se trata de una programación
Html5 hoy? Presente y Futuro de la web
Html5 hoy? Presente y Futuro de la web < qué es HTML?> HyperText Markup Language (Lenguaje de Marcado de Hipertexto) lenguaje predominante para la elaboración de páginas web. contiene información acerca
HTML 5 - Clase 3. Universidad Nacional de Quilmes
HTML 5 - Clase 3 Universidad Nacional de Quilmes 1 Qué es HTML5? Es la nueva versión del lenguaje de marcado que se usa para estructurar páginas web. Este proyecto de HTML5 se inició a finales de 2003
HTML/CSS. Vídeo, audio, imagen
HTML/CSS Vídeo, audio, imagen Imágenes La resolución de pantalla es el número de pixeles que muestra. La resolución CSS o Viewport. Si un dispositivo tiene un alto número de pixeles, a una distancia de
MODALIDAD Nº DE HORAS DURACIÓN CERTIFICADO Online 160 Horas 6 MESES Si
PACK LENGUAJE DE PROGRAMACIÓN HTML Y PHP MODALIDAD Nº DE HORAS DURACIÓN CERTIFICADO Online 160 Horas 6 MESES Si 1. HTML BÁSICO 20H CONTENIDOS: 1 Internet 1.1 Qué es Internet 1.2 Los comienzos de Internet
PROGRAMA DE DISEÑO WEB
Objetivo PROGRAMA DE DISEÑO WEB El objetivo de esta capacitación es que el alumno adquiera los conocimientos necesarios para poder Diseñar y Maquetar una Página Web optimizando al máximo la escritura de
Manual básico de HTML
Manual básico de HTML 1 Índice 1Estructura básica...3 Atributos de la etiqueta BODY...3 2Formación de parráfos:...4 Cabeceras / Headings...4 Párrafos / Paragraph...4 Múltiples espacios...4 Salto línea...5