Bases de la maquetación de una web en HTML5, explicando e incorporando todas sus ventajas y novedades, así mismo, se darán a conocer diversas herramientas para el diseño y maquetación de webs de forma sencilla.
Se darán respuesta a las siguientes cuestiones:
¿Qué es HTML?
¿En qué consiste HTML?
¿Cómo se escriben las etiquetas?
¿Cómo se muestra una página Web?
¿Qué es la semántica HTML?
¿Qué es HTML5?
¿Por qué surge HTML5?
¿Qué va a pasar con las Web en HTML4?
¿Cómo se crea una página Web?
¿Cómo se declara un documento HTML5?
¿Qué etiquetas se usan para maquetar en HTML5?
¿Qué herramientas usaremos?
El taller correrá a cargo de Antonio Cruz Gómez, amigo y presidente de la Asociación EnRed 2.0 (http://enred20.org/)
Para más información puedes mirar la web: http://enred20.org/node/39
O ponerte en contacto con nosotros o con la Asociación EnRed 2.0
Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico
http://www.paradigmatecnologico.com/blog/curso-de-html5-y-css3/
Curso de introducción a HTML5 y CSS3 impartido el 1 junio de 2012 a clientes de Paradigma Tecnológico
http://www.paradigmatecnologico.com/blog/curso-de-html5-y-css3/
Comenzó como un simple sistema de blogs, pero ha evolucionado para ser utilizado como sistema de gestión de contenido muy completo a través de los miles de plugins, widgets y temas
Comenzó como un simple sistema de blogs, pero ha evolucionado para ser utilizado como sistema de gestión de contenido muy completo a través de los miles de plugins, widgets y temas
Con esta pequeña guia podras aprender a crear tu propia pagina web, asi como aprender el funcionamiento de las mismas, resolveras tus dudas y ahorraras tiempo al trabajar, ya que tiene funciones mejoradas que HTML.
¿Estás pensando en aprender HTML5? ¿Te gustaría participar en un curso sobre esta u otras tecnologías de desarrollo web?. En caso afirmativo no dudes en contactarme. Trabajo en el sector de la formación profesional para el empleo como técnico elearning y desarrollo cursos a medida.
Así mismo si te gustaría organizar tu propio curso sobre esta u otra tecnología puedo ayudarte.
Con esta presentación, pretendo dar una breve descripción de Adwords de Google.
Tipos de anuncios, que es el sistema de pujas, como aumentar las posibilidades de CTR, etc.
Menciono la importancia de un buen análisis de palabras clave y sobretodo de las palabras negativas, que tiene como efecto más directo, lo que se conoce, como Hemorragia de Clics.
En “La red” la mujer a encontrado un medio ideal para relacionarse, colaborar, aportar conocimientos y experiencias.
Una gran mayoría de las empresas online o ciberempresas son creadas y dirigidas por mujeres.
Las Redes Sociales están cambiando nuestra forma de recibir información.
Pero pocos somos los que sabemos que es una Red Social y su clasificación por la actividad o intereses.
Hoy por hoy, es importante tener nuestra marca personal, y cuidad nuestra identidad.
El empleo 2.0 cada vez está tomando más importancia a la hora de encontrar trabajo, y debemos conocer y saber usar estas herramientas.
Pero debemos que recordar que como todo en esta vida, las Redes Sociales tienen su aspectos negativos que vamos a analizar y que hacer.
Cuando el Departamento de Defensa llegó a la conclusión los sistemas de comunicaciones existentes era vulnerable, no esperaban que esa idea, fuese a convertirse en lo que hoy se conoce por Internet.
De un experimento con la conexión de 4 nodos para establecer una comunicación, a lo que es hoy Internet.
Internet a supuesto un cambio en nuestra vida y ha venido para quedarse y permitiendo el acceso desde cualquier parte desde la aparición de los dispositivos móviles.
El futuro pasará por la conexión total de todos los dispositivos capaces de conectarse, y los pasos son capacitar a los dispositivos, vehículos, electrodomésticos, etc. y siendo las propias máquinas quienes gestionen, mediante inteligencia artificial, sus propios contenidos, según los gustos y necesidades del usuario.
Seguramente también eres de esas personas que hemos sucumbido a la redes sociales y tenemos cuentas: Facebook, Twitter, Linkedin…
La idea que quise transmitir con esta presentación en el "Taller de Búsqueda de Empleo 2.0", que se realizó en "Cruz Rojo Jaén", es que tenemos que hacer buen uso de esta herramientas y si nos encontramos en situación de DESEMPLEO tenemos que aprender a usarlas para hacer una búsqueda activa de empleo, para mostrar al mundo y sobre todo a los técnicos de selección de personal de una empresa que eres una persona activa y especializada en tu nicho de mercado laboral y una forma de demostrarlo es usando estas “Herramientas 2.0”.
Tenemos que saber que la mayoría de los técnicos de selección de personal de una empresa, y sobre todo y si ya has pasado la primera criba curricular, que sepas que van a mirar tus perfiles en las Redes Sociales, por ello tenemos que destacar en ellas como personas activas, cordiales y bien formadas.
¿Qué crees que encontrará de ti el técnico de selección en Internet?
Hoy en día, nuestra "Reputación Online" y la "Huella Digital" son fundamentales para causar buen impresión a estos técnicos de selección de personal de una empresa.
Porque la imagen, que mostremos sea mucho más cercana, crucial e importante de lo que nos pensamos.
Si pones tu nombre completo, en un buscador como por ejemplo Google:
¿Qué encuentras?
¿Qué trasmites?
¿Qué ves?
Por ello la necesidad de revisar y actualizar tu perfil en Facebook, Twitter, Linkedin, y tengas un control lo que escribes y opinas en redes sociales de ti.
Espero que toda la información que he recopilado sea la clave para saber “la imagen” damos a las personas, que buscan información de nosotros en Internet.
Un saludo:
Antonio
En esta presentación vamos a explicar lo que es el concepto de marca personal,marketing personal, plan de marketing.
Y las nociones de cómo se realiza un plan de marketing.
En estas diapositivas vamos a tratar cómo mejorar un artículo de Blog para aumentar su posicionamiento orgánico (SEO) en buscadores, y conocer los factores que influyen en este posicionamiento natural.
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.
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.
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.
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Telefónica
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0xWord escrito por Ibón Reinoso ( https://mypublicinbox.com/IBhone ) con Prólogo de Chema Alonso ( https://mypublicinbox.com/ChemaAlonso ). Puedes comprarlo aquí: https://0xword.com/es/libros/233-big-data-tecnologias-para-arquitecturas-data-centric.html
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
Estructuras básicas_ conceptos de programación (1).docx
Maquetación web con html5
1. Realizado por:
Antonio Cruz Gómez
https://www.facebook.com/antonio.cruzgomez.98
https://twitter.com/acruzgomez
http://antoniocruzgomez.blogspot.com.es/
2. “Los que se enamoran de la
práctica sin la teoría son
como los pilotos sin
timón, ni brújula, que
nunca podrán saber a
dónde van.”
Leonardo Da Vinci (1452-1519)
Pintor, escultor e inventor italiano.
3. Índice:
∞ ¿Qué es HTML?
∞ ¿En qué consiste HTML?
∞ ¿Cómo se escriben las etiquetas?
∞ ¿Cómo se muestra una página Web?
∞ ¿Qué es la semántica HTML?
∞ ¿Qué es HTML5?
∞ ¿Por qué surge HTML5?
∞ ¿Qué va a pasar con las Web en HTML4?
∞ ¿Cómo se crea una página Web?
∞ ¿Cómo se declara un documento HTML5?
∞ ¿Qué etiquetas se usan para maquetar en
HTML5?
∞ ¿Qué herramientas usaremos?
4. ¿Qué es HTML?
HTML son las siglas de
HyperText Markup
Language (“lenguaje de
marcado de hipertexto”´.
5. ¿En qué consiste
HTML?
HTML consiste hacer una
estructura de marcado
de la información
mediante etiquetas.
6. ¿Cómo se escriben las etiquetas?
Las “etiquetas” de
HTML, van rodeadas
por corchetes angulares,
cada etiqueta tiene unos
atributos y eso atributos
tiene unos valores.
7. ¿Cómo se muestra una página Web?
HTML, es leído e
interpretado, por un
navegador la Web y
nos muestra el
contenido.
8. ¿Qué es la semántica HTML?
La semántica HTML
es la utilidad que
tienen las etiquetas.
Las etiquetas se
crearon para realizar
unas determinada
funciones.
9. ¿Qué es la semántica HTML?
Por ejemplo:
∞ <p></p>
∞ <blockquote></blockquote>
∞ <h1></h1>
10. ¿Qué es HTML5?
HTML5 es última la
actualización de HTML.
Pero en realidad, HTML5
agrupar varias tecnologías
de desarrollo de páginas
Web.
11. ¿Por qué surge HTML5?
HTML4, carece de
características necesarias
para soportar los nuevos
contenidos, que se estaban
incluyendo en las páginas
Web y se necesitaban
plugins.
12. ¿Por qué surge HTML5?
Flash ha sido usado para
reemplazar estas
carencias, a la hora de
desarrollar Web apps.
13. ¿Por qué surge HTML5?
HTML5 es capaz de
hacer esto sin plugins y
ha originado:
∞ compatibilidad
∞ competencia
14. ¿Por qué surge HTML5?
El uso de JavaScript y
de FrameWorks, cómo:
jQuery, Dojo.js, ExtJS,
etc., han ayudado para
mostrar los contenidos
sin necesidad de usar
plugins.
15. ¿Qué va a pasar con las Web en
HTML4?
HTML4 y HTML5 son
100% compatibles.
HTML4 seguirá funcionando sin problemas en los
navegadores.
16. ¿Cómo se crea una página Web?
Tenemos que saber que
una página Web, se crea
a partir de diferentes
tecnologías.
∞ HTML
∞ CSS
∞ JavaScript
17. ¿Cómo se crea una página Web?
Podemos hacer 2
cosas a la hora de
generar y maquetar
una página Web.
18. ¿Cómo se crea una página Web?
1. Podemos escribir el
código de JavaScript
y CSS, dentro del
documento HTML.
Pero cómo tengas que hacer alguna
modif icación, busca esta pistola.
19. ¿Cómo se crea una página Web?
2. Podemos escribir el
código de JavaScript y
CSS, en diferentes
archivos y luego
vincularlos al documento
HTML.
Esta opción te permite modif icar sólo
las parte que deseamos.
20. ¿Cómo se declara un documento
HTML5?
Para empezar a usar
HTML5, lo único que se
tiene que hacer es colocar el
DOCTYPE, al principio del
documento.
21. ¿Cómo se declara un documento
HTML5?
Ejemplo:
<!DOCTYPE html>
La declaración está mucho
más simplificada con HTML5.
22. ¿Cómo se declara un documento
XHTML?
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1
999/xhtml" xml:lang="es"
lang="es" dir="ltr">
23. ¿Qué etiquetas se usan para
maquetar en HTML5?
La mayoría de las nuevas
etiquetas de HTML5 no
tienen una representación
en pantalla y se comportan
cómo un <div> o un <span>.
Pero tienen un significado
semántico superior.
24. <header>
Hacer lo mismo, que la capa
de la cabecera:
<div id="header“>
<header> está diseñada para
reemplazar una capa (div) sin
significado semántico.
26. <hgroup>
Permite escribir un h1, h2
y h3 dentro del header sin
afectar el SEO.
Permite usar otra etiqueta
h1 dentro del contenido,
sin perder prioridad en
SEO.
27. <nav>
Está diseñada para
insertar la barra de
navegación.
Es recomendable usar listas
(<ul>). Es aconsejable que
sólo haya un elemento
<nav> por página Web.
28. <section >
Se usa para definir la
sección donde se incluye
el contenido.
Se puede crear distintas
secciones siempre y
cuando cada sección tenga
contenido diferentes.
29. <article >
Define zonas únicas de
contenido independiente.
Por ejemplo:
La página home de un Blog;
cada artículo y sus
comentarios sería un
<article>.
30. <aside>
El contenido que no esté
relacionado con el objetivo
primario de la página va en
un aside.
31. <aside>
Por ejemplo:
En un Blog, el aside es la
barra lateral de información
o de enlaces a otro
Blog, enlaces a redes
sociales, etc.
32. <footer>
Es el pie de página y
representa la sección
donde va la información
sobre el autor, enlaces a
contenido, información de
copyright, avisos
legales, etc.
33. E j e m p l o d e có d i go co n H T M L 5
<header>
<hgroup>
<h1>El Blog de Freddie Mercury</h1>
<h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2>
</hgroup>
</header>
<nav>
Aquí va la Barra de navegación con sus botones
</nav>
<section>
<article>Aquí va un post, con su titulo en h1</article>
<article>Aquí va un post, con su titulo en h1</article>
<article>Aquí va un post, con su titulo en h1</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts anteriores, etc.
</aside>
<footer>
Pie de página, copyright, avisos legales, etc.
</footer>
34. E j e m p l o G rá f i co d e l có d i go d e H T M L 5
35. Ejemplo de la etiqueta article
<section>
<article>
<header>
<hgroup>
<h1>El Blog de Freddie Mercury</h1>
<h2>Este Blog es un homenaje a la vida profesional de Freddie Mercury</h2>
Meta-datos, como fecha de creación del artículo.
</hgroup>
</header>
<p>
La etiqueta <b>Article</b> debe usarse para fragmento independientes de contenido...
</p>
<aside>
Enlaces con artículos relacionados.
</aside>
<footer>
Enlaces a las redes sociales.
</footer>
</article>
</section>
36. Atención : div no está muerto
Div se debe usar cuando
se necesite un
contendor de
objetos, como por
ejemplo una imagen. Div
es un contender y no van
a tener un significado
semántico.