El documento describe el lenguaje de marcado HTML y para qué sirve. HTML es el lenguaje de marcado más extendido para crear páginas web y describir la estructura y contenido de un documento a través de etiquetas. Sirve para comunicar e informar a usuarios y máquinas sobre el contenido de una página web de forma visible e invisible.
Presentación del DOM (Document Object Model) de documentos HTML con Javascript. Resumen de las características más importantes y ejemplos sencillos de como utilizarlas. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML
Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
Formalización y tipo de Documento HTML Doctype. Contenedores y tipos de elementos según sus comportamientos como Elementos de Bloque y elementos de linea.
Presentación del DOM (Document Object Model) de documentos HTML con Javascript. Resumen de las características más importantes y ejemplos sencillos de como utilizarlas. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML
Presentación del "Seminario Introducción a HTML5 y CSS3" impartido el 28 de octubre de 2010 en el CEU San Pablo por Paradigma Tecnológico.
Desde Paradigma, esperamos que el seminario cumpliera con vuestras expectativas y que os haya servido para conocer dichos estándares y os sirva de punto de partida para el desarrollo de nuevas aplicaciones web.
Muchas gracias.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
Formalización y tipo de Documento HTML Doctype. Contenedores y tipos de elementos según sus comportamientos como Elementos de Bloque y elementos de linea.
Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia.Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/.
La metodología de Diseño Centrado en el Usuario aborda las etapas en que se deben enfrentar proyectos digitales de manera exitosa.
- Estrategia y Planificación
- Estudio de Usuarios
- Arquitectura de Información
- Diseño de interfaz
- Diseño Front y Desarrollo
Introducción a la accesibilidad y su estado actual a 4 años de las WCAG 2.0 ¿Qué es? ¿Cómo abordarla? ¿A quién beneficia? ¿Quién debe hacerse cargo? Metodología de Evaluación y referencias. Charla dada en las Jornada de Usabilidad y Accesibilidad Digital UANL 2012, Monterrey, México
En el viaje de IDA al Diseño Responsive compartimos la experiencia de cómo crear el primer medio online chileno con Diseño Responsive. Bajo una metodología de Diseño Centrado en el Usuario aplicado a Capital.cl
Caso de estudio.
¿Quieres esta exposición para tu universidad o equipo?
maximiliano@ida.cl o www.ida.cl
Soledad Almagià nos habló de "Hornos Solares".
Estas charlas motivacionales se enmarcan en el proyecto "Explorando el mundo de la Energía Solar" que estamos desarrollando en el Colegio Alemán de Viña durante este segundo semestre de 2010 junto a otros apoderados del curso.
Niccolo Martelli nos habló de la "Energía Solar y su relación con la Robótica".
Estas charlas motivacionales se enmarcan en el proyecto "Explorando el mundo de la Energía Solar" que estamos desarrollando en el Colegio Alemán de Viña durante este segundo semestre de 2010 junto a otros apoderados del curso.
Alan Fox de la UNAB nos habló de la relación del a Eficiencia energética y el diseño como propuestas de sustentabilidad. Estas charlas motivacionales se enmarcan en el proyecto "Explorando el mundo de la Energía Solar" que estamos desarrollando en el Colegio Alemán de Viña durante este segundo semestre de 2010 junto a otros apoderados del curso.
Un pequeño resumen de las actividades que realizaremos con el proyecto "Explorando el mundo de la Energía Solar" que estamos desarrollando en el Colegio Alemán de Viña durante este segundo semestre de 2010 junto a otros apoderados del curso.
Charlas, Talleres prácticos de Hornos Solares, Visitas a Ecomaipo y empresas solares y una feria de empresas que trabajen con energía solar con un concurso de autos solares.
Taller de energías alternativas al curso de @lemoisza Kinder G de Colegio Alemán de Valparaíso (Viña del Mar). La idea era introducirlos a un modo de vida que integre efectivamente las energías renovables y que de seguro necesitarán dominar en su vida.
http://www.maximiliano.cl/cosas/energias-alternativas-para-ninos-horno-solar/
Sprites es una técnica de optimización de sitios basada en la fusión de imágenes a una sola para posteriormente ser separadas mediante CSS.
✓ Reduce principalmente el peso de mis páginas, consumiendo menos ancho de banda
✓ Disminuye de manera considerable las peticiones HTTP
✓ Minimiza sustancialmente la cantidad de imágenes y
✓ Optimiza el peso total de los archivos externos al HTML
Presentación de AyerViernes a cargo de Darcy Vergara, Per Arellano y Maximiliano Martin sobre tres de las cinco principales etapas de la Metodología desarrollada en AyerViernes
Inteligencia Artificial y Ciberseguridad.pdfEmilio Casbas
Recopilación de los puntos más interesantes de diversas presentaciones, desde los visionarios conceptos de Alan Turing, pasando por la paradoja de Hans Moravec y la descripcion de Singularidad de Max Tegmark, hasta los innovadores avances de ChatGPT, y de cómo la IA está transformando la seguridad digital y protegiendo nuestras vidas.
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta in...espinozaernesto427
Las lámparas de alta intensidad de descarga o lámparas de descarga de alta intensidad son un tipo de lámpara eléctrica de descarga de gas que produce luz por medio de un arco eléctrico entre electrodos de tungsteno alojados dentro de un tubo de alúmina o cuarzo moldeado translúcido o transparente.
lámparas más eficientes del mercado, debido a su menor consumo y por la cantidad de luz que emiten. Adquieren una vida útil de hasta 50.000 horas y no generan calor alguna. Si quieres cambiar la iluminación de tu hogar para hacerla mucho más eficiente, ¡esta es tu mejor opción!
Las nuevas lámparas de descarga de alta intensidad producen más luz visible por unidad de energía eléctrica consumida que las lámparas fluorescentes e incandescentes, ya que una mayor proporción de su radiación es luz visible, en contraste con la infrarroja. Sin embargo, la salida de lúmenes de la iluminación HID puede deteriorarse hasta en un 70% durante 10,000 horas de funcionamiento.
Muchos vehículos modernos usan bombillas HID para los principales sistemas de iluminación, aunque algunas aplicaciones ahora están pasando de bombillas HID a tecnología LED y láser.1 Modelos de lámparas van desde las típicas lámparas de 35 a 100 W de los autos, a las de más de 15 kW que se utilizan en los proyectores de cines IMAX.
Esta tecnología HID no es nueva y fue demostrada por primera vez por Francis Hauksbee en 1705. Lámpara de Nernst.
Lámpara incandescente.
Lámpara de descarga. Lámpara fluorescente. Lámpara fluorescente compacta. Lámpara de haluro metálico. Lámpara de vapor de sodio. Lámpara de vapor de mercurio. Lámpara de neón. Lámpara de deuterio. Lámpara xenón.
Lámpara LED.
Lámpara de plasma.
Flash (fotografía) Las lámparas de descarga de alta intensidad (HID) son un tipo de lámparas de descarga de gas muy utilizadas en la industria de la iluminación. Estas lámparas producen luz creando un arco eléctrico entre dos electrodos a través de un gas ionizado. Las lámparas HID son conocidas por su gran eficacia a la hora de convertir la electricidad en luz y por su larga vida útil.
A diferencia de las luces fluorescentes, que necesitan un recubrimiento de fósforo para emitir luz visible, las lámparas HID no necesitan ningún recubrimiento en el interior de sus tubos. El propio arco eléctrico emite luz visible. Sin embargo, algunas lámparas de halogenuros metálicos y muchas lámparas de vapor de mercurio tienen un recubrimiento de fósforo en el interior de la bombilla para mejorar el espectro luminoso y reproducción cromática. Las lámparas HID están disponibles en varias potencias, que van desde los 25 vatios de las lámparas de halogenuros metálicos autobalastradas y los 35 vatios de las lámparas de vapor de sodio de alta intensidad hasta los 1.000 vatios de las lámparas de vapor de mercurio y vapor de sodio de alta intensidad, e incluso hasta los 1.500 vatios de las lámparas de halogenuros metálicos.
Las lámparas HID requieren un equipo de control especial llamado balasto para funcionar
En este documento analizamos ciertos conceptos relacionados con la ficha 1 y 2. Y concluimos, dando el porque es importante desarrollar nuestras habilidades de pensamiento.
Sara Sofia Bedoya Montezuma.
9-1.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Actualmente, y debido al desarrollo tecnológico de campos como la informática y la electrónica, la mayoría de las bases de datos están en formato digital, siendo este un componente electrónico, por tanto se ha desarrollado y se ofrece un amplio rango de soluciones al problema del almacenamiento de datos.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
3Redu: Responsabilidad, Resiliencia y Respetocdraco
¡Hola! Somos 3Redu, conformados por Juan Camilo y Cristian. Entendemos las dificultades que enfrentan muchos estudiantes al tratar de comprender conceptos matemáticos. Nuestro objetivo es brindar una solución inclusiva y accesible para todos.
1. <H1>html</H1>
<h2>Qué es el html y para qué sirve</h2>
por Maximiliano Martin - www.maximiliano.cl
www.maximiliano.cl
2. Qué es HTML
Lenguaje de Marcado más extendido
www.maximiliano.cl
3. Qué es HTML
Lenguaje de Marcado más extendido
•Codificar un documento
•Industria Editorial
•Dictado a viva voz
Clases
•Presentación
•Procedimientos
•Descriptivo
www.maximiliano.cl
4. Qué es HTML
SGML
1986
Lenguaje de Marcado
Generalizado Standard
HTML
1991
Lenguaje de Marcas de Hipertextos
www.maximiliano.cl
6. Para qué sirve
Describir estructura y contenido
www.maximiliano.cl
7. Para qué sirve
Describir estructura y contenido
Complementar el texto con Objetos
www.maximiliano.cl
8. Para qué sirve
Describir estructura y contenido
Complementar el texto con Objetos
Se escribe en forma de “Etiquetas”
www.maximiliano.cl
9. Para qué sirve
Describir estructura y contenido
Complementar el texto con Objetos
Se escribe en forma de “Etiquetas”
Rodeada por Corchetes Angulares
www.maximiliano.cl
< >
19. Declaración / DOCTYPE
No es una etiqueta sino una
instrucción
•Definición del Tipo de Documento (DTD)
•El DTD especifica las reglas para el
lenguaje de marcado
•XHTML 1.0 Strict / XHTML 1.0 Transitional
•XHTML 1.1
•HTML 4.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
www.maximiliano.cl
21. Elemento Raiz / <html>
Etiqueta que contiene todo el HTML
•Informa al navegador que lo contenido
por él debe ser interpretado como HTML
•Inicio y término del documento
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
...elementos del head...
</head>
<body>
...elementos del body...
</body>
</html>
www.maximiliano.cl
26. Estructura de documento
Módulos de: <html>
•Estructura
•html, head, title, body <head>
•Metainformación
•Estilos <title> y otros elementos
•Link
•Base </head>
<body>
</body>
</html>
www.maximiliano.cl
27. Estructura de documento
Módulos de: <html>
•Estructura
•html, head, title, body <head>
•Metainformación
•Estilos <title> y otros elementos
•Link
•Base </head>
Módulos de:
•Texto <body>
•p, code, div, em, strong, span, q,
pre, samp, h1, h2, h3, etc elementos
•Hipertexto
•Lista
•Objetos
•Presentación
•Edición
•Formularios </body>
•Tablas
•Imágen </html>
•Otros
www.maximiliano.cl
32. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
www.maximiliano.cl
33. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
Lista de elementos ➡ ol, ul, li, li, li, li, li.
www.maximiliano.cl
34. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
Lista de elementos ➡ ol, ul, li, li, li, li, li.
Datos en excel ➡ table, td, tr,
www.maximiliano.cl
35. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
Lista de elementos ➡ ol, ul, li, li, li, li, li.
Datos en excel ➡ table, td, tr,
➡ Valores de atributos
www.maximiliano.cl
36. ¿Para quién?
Humanos Usuarios Máquinas
Comunicamos/Informamos
Visible “Invisible”
Titular principal ➡ h1
Contenido del artículo ➡ p
Lista de elementos ➡ ol, ul, li, li, li, li, li.
Datos en excel ➡ table, td, tr,
➡ Valores de atributos
www.maximiliano.cl
37. <head> o cabecera
Contiene información sobre el documento que:
no se muestra directamente al usuario
www.maximiliano.cl
38. <head> o cabecera
Contiene información sobre el documento que:
no se muestra directamente al usuario
<title>
<html>
<head>
<title>Guía de Referencia Rápida XHTML</title>
</head>
<body>
...elementos del body...
</body>
</html>
www.maximiliano.cl
39. <head> o cabecera
Contiene información sobre el documento que:
referencia a metaetiquetas
www.maximiliano.cl
40. <head> o cabecera
Contiene información sobre el documento que:
referencia a metaetiquetas
<meta>
<meta name="Description" content="Qué es HTML y para qué sirve" />
<meta name="Keywords" content="HTML,XHTML,tutorial HTML" />
<meta name="Author" content="Maximiliano Martin" />
<meta name="Copyright" content="...
www.maximiliano.cl
41. <head> o cabecera
Contiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
www.maximiliano.cl
42. <head> o cabecera
Contiene información sobre el documento que:
relaciona mediante vínculos a otras URL o archivos
<link>
<link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" media="print" rel="stylesheet" href="css/print.css" />
<link type="text/css" media="aural" rel="stylesheet" href="css/aural.css" />
www.maximiliano.cl
43. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
www.maximiliano.cl
44. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
...</body>
www.maximiliano.cl
45. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
...</body>
www.maximiliano.cl
46. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
...</body>
www.maximiliano.cl
47. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
...</body>
www.maximiliano.cl
48. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
p, div, ol, ul, li, a, img, em,
h1, h2, h3, etc. strong, span,
etc.
...</body>
www.maximiliano.cl
49. <body> o cuerpo
Define el contenido del documento. Lo que se
muestra a través del navegador
<body>...
Elementos en bloque Elementos en linea
p, div, ol, ul, li, a, img, em,
h1, h2, h3, etc. strong, span,
etc.
...</body>
www.maximiliano.cl
50. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<a> vínculo o ancla </a>
www.maximiliano.cl
51. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<a> vínculo o ancla </a>
•href •hreflang
•title •accesskey
•class •rel
•id •tabindex
<a href=”http://www.wikipedia.com/ancla/”
title=”Definición de Wikipedia” rel=”External”> vínculo
o ancla </a>
www.maximiliano.cl
52. Valores de Atributos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
<img src=”URI” />
•scr •height
•alt •longdesc
•class •width
•id
<img src=”http://www.w3c.es/img/eslogo-20030729.png”
alt="Oficina española del W3C" height="52" width="279" />
www.maximiliano.cl
53. + Elementos
Propiedad de algunos elementos a los que se les
asigna Valores específicos (Humanos/Robots)
•Estructura: body, head, html, title •Hipertexto: a
•Texto: abbr, acronym, address, blockquote, br, •Lista: dl, dt, dd, ol, ul, li
cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, •Objetos: object, param
p, pre, q, samp, span, strong, var •Edición: del, ins
•Presentación: b, big, hr, i, small, sub, sup, tt •Texto Bidireccional: bdo
•Formularios: button, fieldset, form, input, label, •Módulo de Imagen: img
legend, select, optgroup, option, textarea •Metainformación: meta
•Tablas: caption, col, colgroup, table, tbody, td, •Scripting: noscript, script
tfoot, th, thead, tr •Hoja de Estilo: style element
•Mapa de Imagen del lado Cliente: area, map •Link: link
•Mapa de Imagen del lado Servidor: Attribute •Base: base
ismap on img
www.maximiliano.cl
63. Accesibilidad
Proporciona alternativas para que lleguemos a más
usuarios con nuestro mensaje/información
•Metaetiquetas link
•Texto de vínculos
•Atributos alt, longdesc, rel, Acceskey, tabindex
•Estructura de cabeceras h1, h2, h3
•Cambios de idioma
http://www.discapnet.es/web_accesible/tecnicas/html/WCAG10-HTML-
TECHS_es.html/
www.maximiliano.cl
64. Ejercicio
Escribir las etiquetas identificadas
www.maximiliano.cl
65. Ejercicio
¿Cuántos elementos HTML puedes
nombrar en 5 minutos?
www.maximiliano.cl
66. Gracias
Maximiliano Martin
www.maximiliano.cl
www.maximiliano.cl