Curso de Desarrollo Web: Etiquetas HTMLJorge Llanten
Guia de ayuda para el Curso de Desarrollo Web realizado por el prof. Jorge Llantén Briceño en donde se da una introducción a las etiquetas HTML y su significado.
El lenguaje HTML “HyperText Markup Language” es el lenguaje con el que se escriben las páginas web y que entienden los navegadores, de modo que quede determinada la forma en que mostrar la información (qué tipos, tamaños y colores de las letras, dónde colocar las imágenes, cómo enlazar a otras páginas, ...).
Curso de Desarrollo Web: Etiquetas HTMLJorge Llanten
Guia de ayuda para el Curso de Desarrollo Web realizado por el prof. Jorge Llantén Briceño en donde se da una introducción a las etiquetas HTML y su significado.
El lenguaje HTML “HyperText Markup Language” es el lenguaje con el que se escriben las páginas web y que entienden los navegadores, de modo que quede determinada la forma en que mostrar la información (qué tipos, tamaños y colores de las letras, dónde colocar las imágenes, cómo enlazar a otras páginas, ...).
Especialistas en formación corporativa en modo virtual y semi presencial. Con más de 16 años de experiencia en el mercado, estamos presentes en Perú, Chile, España, México, Panamá, Ecuador, Bolivia y España.
Experiencia pedagógica con el uso de Tabletas en el aula, de la IE Liceo Alejandro de Humboldt (Popayán). En evento Popayán Educa con TIC realizado el 3 de Marzo de 2015.
Jobsøgning og personlig branding gennem sociale medierEva Jonassen
Slides jeg har brugt (i forskellige versioner) ved oplæg rundt om i landet for forskellige netværk og organisationer med interesse i karriere, personlig branding og jobsøgning - og hvordan sociale medier kan bruges til at fremme målet. Input til hvordan det ser ud fra rekrutteringssiden.
Caso studio Brevetti CEA per l'adozione del gestionale ERP Metodo EvolusMetodo spa
Caso studio di adozione del gestionale ERP Metodo Evolus da parte di un'azienda che opera nel settore produttivo metalmeccanico. Brevetti CEA in particolare produce macchine per la confezione ed il controllo di medicinali in fiala, in flaconcini e siringhe pre-riempite ed utilizza fortemente quindi la gestione del flusso produttivo grazie alle peculiarità offerte da Metodo Evolus.
High Volume, Rapid Turn Around Localization: Lessons LearnedSDL
Customer success story by Johnson & Johnson on best practices and lesson learned in localization process. Learn the importance of prioritization, in-country review, terminology database, teamwork and collaboration. Delivered at the SDL Customer Success Summit Montreal 2016.
From ITC Agent Conference 2016...
It's no secret that email marketing is one of the most effective digital marketing strategies available, but no one really knows where to start. In this breakout you'll learn useful tips and tricks that you can implement today to start getting the most ROI from your email marketing strategy.
Presentación Seminario Cleformación HTML5, El lenguaje del futuroCLEFormación
CLEFormación organizó un seminario técnico gratuito sobre "HTML5, el lenguaje del futuro, nuevos paradigmas y nuevos problemas en el desarrollo de aplicaciones web". Como referentes en la Capacitación Profesional en el entorno de las Tecnologías de la Información, concretamente en cursos de programación Oracle, Java, y HTML5 quisieron reiterar su compromiso con la formación en el sector. Por eso después del seminario, comparten la presentación desarrollada por el formador.
1. HTML5 y el Futuro de la Web
MTA – ARIMAX – TP-LINK : Diego J. Coronel Y.
diegocoronel12@gmail.com
2. Qué es HTML5?
Estándar abierto y accesible
Elementos nuevos
Web Semántica
API’s de desarrollo
Retrocompatible
Nueva filosofía de trabajo
Impulsado por los grandes y pequeños
3. Qué es API´s?
Explicar a un cliente qué es y para qué sirve un API, luego de advertir
que su necesidad o requerimiento se soluciona con un servicio web,
a través de esta tecnología.
API(Interfaz de Programación de Aplicaciones), su definición formal
le da poca información útil a alguien que no entiende mucho de
informática. Una API es una "llave de acceso" a funciones que nos
permiten hacer uso de un servicio web provisto por un tercero, dentro
de una aplicación web propia, de manera segura.
Ejemplo:
Facebook Connect cede a través del API ciertos datos para registrar
automáticamente usuarios en otros sitios web, dándoles la
posibilidad de registrarse y loguearse con sus propias cuentas de
Facebook
5. Que es CSS ?
En esta lección aprenderás más cosas sobre
CSS y qué puede hacer por ti.
CSS es el acrónimo de Cascading Style
Sheets es decir: hojas de estilo en cascada.
6. ¿Qué diferencia hay entre CSS y HTML?
HTML se usa para estructurar el contenido; CSS se usa para
formatear el contenido previamente estructurado.
7. ¿Qué beneficios me ofrece CSS?
CSS fue toda una revolución en el mundo del diseño web.
Entre los beneficios concretos de CSS encontramos:
control de la presentación de muchos documentos desde una
única hoja de estilo;
control más preciso de la presentación;
aplicación de diferentes presentaciones a diferentes tipos de
medios (pantalla, impresión, etc.);
numerosas técnicas avanzadas y sofisticadas.
8. Trabaja sobre…
Firefox 3.5+
Chrome 3.0+
Safari 3.1+
Opera 10.5+
IE 9.0+ dicen…
iPhone
iPod Touch
iPad
Android OS
Pero siempre es importante hacer
pruebas de validación
http://html5test.com/
9. Tipo de Documento
Tipo de Documento
<!DOCTYPE html>
Lenguaje del Documento
<html lang="ES">
Codificación del Documento
<meta charset="UTF-8">
Enlaces a CSS, Favicon y RSS
<link rel="stylesheet" href="estilos.css">
<script src=jquery.js></script>
10. Estructura Mínima de un Documento
<!DOCTYPE html>
<html lang="ES">
<head>
<title>Este es un ejemplo de HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
Este es el cuerpo de la página, donde irá todo el
contenido.
</body>
</html>
14. Elementos Semánticos
<header> El elemento header debe utilizarse para marcar la cabecera
de una página (contiene el logotipo del sitio, una imagen, un cuadro de
búsqueda etc).
El elemento header puede estar anidado en otras secciones de la página
(es decir que no solo se utiliza para la cabecera de la página).
<nav> El elemento nav representa una parte de una página que enlaza
a otras páginas o partes dentro de la página. Es una sección con enlaces
de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en
un elemento nav. únicamente las secciones que consisten en bloques de
navegación más importantes son adecuados para el elemento de
navegación.
15. Elementos Semánticos
<section> El elemento section representa un documento genérico o de
la sección de aplicación. Una sección, en este contexto, es una
agrupación temática de los contenidos. Puede ser un capítulo, una
sección de un capítulo o básicamente cualquier cosa que incluya su
propio encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para
una introducción, noticias, información de contacto etc.
<footer> El elemento footer se utiliza para indicar el pié de la página o
de una sección. Un pie de página contiene información general acerca de
su sección el autor, enlaces a documentos relacionados, datos de
derechos de autor etc.
16. Elementos Semánticos
<aside> El elemento aside representa una nota, un consejo, una
explicación. Esta área son representados a menudo como barras laterales
en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las
comillas tipográficas o barras laterales, para la publicidad, por grupos de
elementos de navegación, y por otro contenido que se considera por
separado del contenido principal de la página.
<article> El elemento article representa una entrada independiente en
un blog, revista, periódico etc.
Cuando se anidan los elementos article, los artículos internos están
relacionados con el contenido del artículo exterior. Por ejemplo, una
entrada de blog en un sitio que acepta comentarios, el elemento article
principal agrupa el artículo propiamente dicho y otro bloque article
anidado con los comentarios de los usuario.
19. Nuevos Controles de Formularios - Input
Telephone
Url
Email
Password
Datetime
Date
Month
Week
Number
Range
Color
20. Nuevos Controles de Formularios
Puedes ver una relación oficial del borrador del
estándar en:
http://dev.w3.org/html5/spec/
www.whatwg.org/specs/web-apps/current-
work/multipage/
23. Atributos de Controles Editables
contenteditable Hace elementos HTML editable. Puede tener 3
valores: true, false é inherit.
designmode Hace editable un documento completo elemento.
Puede tomar 2 valores: ON ú OFF.
designmode Habilita la corrección ortográfica. Funciona en Firefox
y hay que descargar los diccionarios. Puede tomar 2 valores: True o
False.
25. Atributos de <video>
autoplay Para que el video se reproduzca automáticamente. Puede
tener valor TRUE o FALSE.
controls Para que se muestre barra de control debajo del video.
height Altura del video.
widthAncho del video.
loop El video se reproduce de manera repetitiva.
poster Imagen si el video no está disponible.
preload Controla si el video es precargado. Puede tener 3 valores:
none, metadata ó auto.
src Indica la url del video.
26. Formato de <video>
IMPORTANTE A la fecha los navegadores comerciales sólo
soportan el formato de video Vorbis OGG y MP4.
30. Que más puedes hacer con HTML5
http://www.thewildernessdowntown.com/
http://www.jolicloud.com/product
http://wordmark.it/
http://www.phoboslab.org/ztype/
http://www.nikebetterworld.com/
http://www.klowdz.com/
http://www.effectgames.com/demos/canvascycle/
Y muchas cosas más…..te animas???