SlideShare una empresa de Scribd logo
Blogger desde dentro
HTML para incrustar
contenidos
X
Javier Blanco (2015)
bloggerdesdedentro.blogspot.com
Blogger desde dentro
X: HTML para incrustar contenidos
1
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Los servidores WEB y tu navegador
hablan un lenguaje que desconoces
<td><div class="separator" style="clear: both; text-align: center;">
<a href="http://bloggerdesdedentro.blogspot.com/p/guia-de-
contenidos.html"><img
alt="http://bloggerdesdedentro.blogspot.com/p/guia-de-
contenidos.html" border="0" src="http://4.bp.blogspot.com/-
OKHpaaKXpEw/VLFxBTDNZYI/AAAAAAAAC28/gKuY6xigtYg/s1600/logo_ty
peweriter.png" /></a></div>
</td>
<td>Continuar aquí aprendiendo cómo trabajar con Blogger</td>
Es el HTML: HiperText Mark-Up
Language.
Un lenguaje ligero y rápido de
interpretar para el navegador.
Blogger construye sus páginas
realmente en HTML, aunque nos
facilita el trabajo “engañándonos” con
el editor y algunas herramientas más.
Pero para
conseguir algunas
cosas necesitas
tocar HTML
Blogger desde dentro
X: HTML para incrustar contenidos
2
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Acceder a la edición del código HTML
en Blogger es tan fácil como hacer clic
en un botón
Edición normal
(Wysiwyg): Lo
que ves es lo
que obtienes
Edición HTML
(RAW): En crudo.
Lo que
realmente hay
A menos que
seas un experto,
naturalmente
Cuando editas HTML es como
si entraras en terreno
comanche: ¡Hay que entrar,
hacer lo que tengas que
hacer, y salir a toda leche!
Blogger desde dentro
X: HTML para incrustar contenidos
3
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Para conseguir algunas cosas
necesitamos usar HTML directamente
HTML
Poner un Menú
Plasmar una tabla
Crear efectos complejos
Crear formularios
Incrustar objetos
Blogger desde dentro
X: HTML para incrustar contenidos
4
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Entraremos en HTML para poder
incrustar objetos de otros sitios como
Youtube, Slideshare o Google Drive
Un objeto incrustado (Embedded) no está realmente
en nuestro blog, pero aparece en él como si lo
estuviera.
Incrustar objetos de otras
páginas da a la nuestra un
aspecto profesional,
moderno y útil.
Blogger desde dentro
X: HTML para incrustar contenidos
5
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Incrustando un vídeo
desde YouTube (1)
1
Localiza el vídeo
que desees
incrustar
Puedes subir tus
propios vídeos con tu
cuenta Google
• Resolución
• Subtítulos
• Minuto de comienzo
2
Ajusta los
parámetros de
vísualización
• Resolución
• Subtítulos
• Minuto de comienzo
3 Pulsa en
“Compartir”
Blogger desde dentro
X: HTML para incrustar contenidos
6
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Incrustando un vídeo
desde YouTube (2)
4 Elige la opción
“INSERTAR”
5
Ajusta los
parámetros y copia
el código
Tamaño del vídeo
Opciones del
reproductor
Muestra
Código HTML a
incrustar. Cuando
hayas ajustado los
parámetros
cópialo (Ctrl + C)
8
Blogger desde dentro
X: HTML para incrustar contenidos
7
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Incrustando un vídeo
desde YouTube (3)
6
Marca el lugar
donde quieres
incrustarlo
En edición normal
Usa tu propia
marca
¡Es un
truco!
7
En HTML sustituye
la marca por el
código
Vuelve a Redactar
para ver el
resultado
La marca es más
fácil de encontrar
en medio de esa
maraña de código
Blogger desde dentro
X: HTML para incrustar contenidos
8
Javier Blanco
2015
bloggerdesdedentro.blogspot.com.
Concepto de iFrame o marco
electrónico
Acabas de
incrustar un vídeo
a través de la
utilidad iframe de
HTML.
Numerosas
páginas facilitan
iframes de sus
contenidos para
que los incrustes
en tu blog de la
misma manera.
La gente más famosa de
la blogosfera sabe hacer
uso de todas las
herramientas que
tienen a mano
Pero recuerda que
todo está
supeditado al valor
de tus entradas
Javier Blanco (2015)
bloggerdesdedentro.blogspot.com

Más contenido relacionado

PDF
Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...
DOC
Trabajo práctico nº 1
PPT
Slideshare 2
PDF
Cómo "embeber" / insertar contenidos multimedia en blogger
PPTX
Como crear un bloggerman
PPTX
Pasos para crear un blog 2
PPTX
Presentación1
Dixio ForWeb, el diccionario inteligente para tu web. Manual para instalar Di...
Trabajo práctico nº 1
Slideshare 2
Cómo "embeber" / insertar contenidos multimedia en blogger
Como crear un bloggerman
Pasos para crear un blog 2
Presentación1

La actualidad más candente (16)

DOCX
Trabajo practico nº1
DOCX
Trabajo practico 3
PPTX
Segunda evaluacion
DOC
Trababo practico1
ODT
Trabajo practico n° 4
PDF
Cómo publicar mi presentación prezi en mi blog wordpress
PDF
Entradas multimedia blog
DOCX
Trabajo práctico nº 5
PPTX
Presentación1
PDF
Algunas ideas sobre blogger
PDF
Html5 img gif_sonido_video-comprimido
PPTX
TUTORIAL DE SLIDESHARE
ODT
Trabajo practico n° 6
DOCX
Explicacion html
ODT
t R a B a jO .i N f OR m a t i ca!!
PPTX
Tema 1 Wordpress 2
Trabajo practico nº1
Trabajo practico 3
Segunda evaluacion
Trababo practico1
Trabajo practico n° 4
Cómo publicar mi presentación prezi en mi blog wordpress
Entradas multimedia blog
Trabajo práctico nº 5
Presentación1
Algunas ideas sobre blogger
Html5 img gif_sonido_video-comprimido
TUTORIAL DE SLIDESHARE
Trabajo practico n° 6
Explicacion html
t R a B a jO .i N f OR m a t i ca!!
Tema 1 Wordpress 2
Publicidad

Destacado (7)

PDF
V recuperar documento
PDF
III alta documento
PDF
IV firma documento
PDF
Enlaces externos e internos
PDF
I acceso
PPTX
3 datagrama ip
PDF
Modelos TCP/IP y OSI
V recuperar documento
III alta documento
IV firma documento
Enlaces externos e internos
I acceso
3 datagrama ip
Modelos TCP/IP y OSI
Publicidad

Similar a HTML para incrustar objetos (20)

PDF
Blog pasos para crear entradas 2016
ODP
Contenido multimedia en blogger
PPT
Blog pale coria blogger
PDF
Blog pale coria blogger
PPT
Clase 04.
PPT
Ponencia 30 de Noviembre Seminario_blogs
PPT
Primeros Pasos En Blogger.2
PPTX
codigos HTML para blogs y paginas web Karina
PPTX
El blog
ODP
Presentación de blogger
PPTX
Pasos de un blogger.
PPT
Historia De Las Medidas Del Tiempo
PPTX
Escribir en blog
PPTX
Tutorial como hacer un video blogger (1)
PPTX
PPT
Desarrollo De Un Blog
PPT
Desarrollodeunblog 1234740307376014-1
PPTX
Cómo hacer un blog
PPTX
Tutorial como hacer un video blogger (1)
PPTX
Tutorial como hacer un video blogger (1)
Blog pasos para crear entradas 2016
Contenido multimedia en blogger
Blog pale coria blogger
Blog pale coria blogger
Clase 04.
Ponencia 30 de Noviembre Seminario_blogs
Primeros Pasos En Blogger.2
codigos HTML para blogs y paginas web Karina
El blog
Presentación de blogger
Pasos de un blogger.
Historia De Las Medidas Del Tiempo
Escribir en blog
Tutorial como hacer un video blogger (1)
Desarrollo De Un Blog
Desarrollodeunblog 1234740307376014-1
Cómo hacer un blog
Tutorial como hacer un video blogger (1)
Tutorial como hacer un video blogger (1)

Más de javiblan (20)

PDF
Personalización de plantillas
PDF
Diseño y Gadgets 1
PDF
Páginas vs Entradas
PDF
Configuración e interacción con Blogger
PDF
Incluir imágenes en Blogger
PDF
Formato del texto en Blogger
PDF
Elegir una plantilla para tu blog
PDF
Creación de Blog con Blogger
PDF
J3 Humanos como Máquinas
PDF
M5 Securización de Redes
PDF
M4 Dispositivos de Red
PDF
M3 Paquetes, Segmentos y Datagramas
PDF
II pantalla principal
PDF
Lo importante es estar cerca
PDF
Cómo poner una foto en liferay
PDF
Práctica para Generar una Base de Datos
PDF
Open Office Base: Formato de campos en Tablas
PDF
Ayuda práctica1
PDF
Mactec
PDF
Curso ESPA: Actividad 1 M 3
Personalización de plantillas
Diseño y Gadgets 1
Páginas vs Entradas
Configuración e interacción con Blogger
Incluir imágenes en Blogger
Formato del texto en Blogger
Elegir una plantilla para tu blog
Creación de Blog con Blogger
J3 Humanos como Máquinas
M5 Securización de Redes
M4 Dispositivos de Red
M3 Paquetes, Segmentos y Datagramas
II pantalla principal
Lo importante es estar cerca
Cómo poner una foto en liferay
Práctica para Generar una Base de Datos
Open Office Base: Formato de campos en Tablas
Ayuda práctica1
Mactec
Curso ESPA: Actividad 1 M 3

Último (15)

PDF
Mesopotamia y Egipto.pptx.pdf historia universal
PDF
Frases de Fidel Castro. Compilación Norelys Morales Aguilera
PDF
LA INTELIGENCIA ARTIFICAL SU HISTORIA Y EL FUTURO
PPTX
Presentación de un estudio de empresa pp
PPT
laser seguridad a la salud humana de piel y vision en laser clase 4
PPTX
Evolución de la computadora ACTUALMENTE.pptx
PPTX
presentacion_energias_renovables_renovable_.pptx
PPTX
Qué es Google Classroom Insertar SlideShare U 6.pptx
PDF
[Ebook gratuito] Introducción a la IA Generativa, Instalación y Configuración...
PPTX
FUNCIONES DE CLASSROOM EN EL FUNCIONAMIENTO ESCOLAR
PDF
Herramientaa de google google keep, maps.pdf
PPTX
tema-2-interes-.pptx44444444444444444444
PDF
CAPACITACIÓN MIPIG - MODELO INTEGRADO DE PLANEACIÓN Y GESTIÓN
PPTX
Plantilla-Hardware-Informático-oficce.pptx
PPTX
Guia de power bi de cero a avanzado detallado
Mesopotamia y Egipto.pptx.pdf historia universal
Frases de Fidel Castro. Compilación Norelys Morales Aguilera
LA INTELIGENCIA ARTIFICAL SU HISTORIA Y EL FUTURO
Presentación de un estudio de empresa pp
laser seguridad a la salud humana de piel y vision en laser clase 4
Evolución de la computadora ACTUALMENTE.pptx
presentacion_energias_renovables_renovable_.pptx
Qué es Google Classroom Insertar SlideShare U 6.pptx
[Ebook gratuito] Introducción a la IA Generativa, Instalación y Configuración...
FUNCIONES DE CLASSROOM EN EL FUNCIONAMIENTO ESCOLAR
Herramientaa de google google keep, maps.pdf
tema-2-interes-.pptx44444444444444444444
CAPACITACIÓN MIPIG - MODELO INTEGRADO DE PLANEACIÓN Y GESTIÓN
Plantilla-Hardware-Informático-oficce.pptx
Guia de power bi de cero a avanzado detallado

HTML para incrustar objetos

  • 1. Blogger desde dentro HTML para incrustar contenidos X Javier Blanco (2015) bloggerdesdedentro.blogspot.com
  • 2. Blogger desde dentro X: HTML para incrustar contenidos 1 Javier Blanco 2015 bloggerdesdedentro.blogspot.com. Los servidores WEB y tu navegador hablan un lenguaje que desconoces <td><div class="separator" style="clear: both; text-align: center;"> <a href="http://bloggerdesdedentro.blogspot.com/p/guia-de- contenidos.html"><img alt="http://bloggerdesdedentro.blogspot.com/p/guia-de- contenidos.html" border="0" src="http://4.bp.blogspot.com/- OKHpaaKXpEw/VLFxBTDNZYI/AAAAAAAAC28/gKuY6xigtYg/s1600/logo_ty peweriter.png" /></a></div> </td> <td>Continuar aquí aprendiendo cómo trabajar con Blogger</td> Es el HTML: HiperText Mark-Up Language. Un lenguaje ligero y rápido de interpretar para el navegador. Blogger construye sus páginas realmente en HTML, aunque nos facilita el trabajo “engañándonos” con el editor y algunas herramientas más. Pero para conseguir algunas cosas necesitas tocar HTML
  • 3. Blogger desde dentro X: HTML para incrustar contenidos 2 Javier Blanco 2015 bloggerdesdedentro.blogspot.com. Acceder a la edición del código HTML en Blogger es tan fácil como hacer clic en un botón Edición normal (Wysiwyg): Lo que ves es lo que obtienes Edición HTML (RAW): En crudo. Lo que realmente hay A menos que seas un experto, naturalmente Cuando editas HTML es como si entraras en terreno comanche: ¡Hay que entrar, hacer lo que tengas que hacer, y salir a toda leche!
  • 4. Blogger desde dentro X: HTML para incrustar contenidos 3 Javier Blanco 2015 bloggerdesdedentro.blogspot.com. Para conseguir algunas cosas necesitamos usar HTML directamente HTML Poner un Menú Plasmar una tabla Crear efectos complejos Crear formularios Incrustar objetos
  • 5. Blogger desde dentro X: HTML para incrustar contenidos 4 Javier Blanco 2015 bloggerdesdedentro.blogspot.com. Entraremos en HTML para poder incrustar objetos de otros sitios como Youtube, Slideshare o Google Drive Un objeto incrustado (Embedded) no está realmente en nuestro blog, pero aparece en él como si lo estuviera. Incrustar objetos de otras páginas da a la nuestra un aspecto profesional, moderno y útil.
  • 6. Blogger desde dentro X: HTML para incrustar contenidos 5 Javier Blanco 2015 bloggerdesdedentro.blogspot.com. Incrustando un vídeo desde YouTube (1) 1 Localiza el vídeo que desees incrustar Puedes subir tus propios vídeos con tu cuenta Google • Resolución • Subtítulos • Minuto de comienzo 2 Ajusta los parámetros de vísualización • Resolución • Subtítulos • Minuto de comienzo 3 Pulsa en “Compartir”
  • 7. Blogger desde dentro X: HTML para incrustar contenidos 6 Javier Blanco 2015 bloggerdesdedentro.blogspot.com. Incrustando un vídeo desde YouTube (2) 4 Elige la opción “INSERTAR” 5 Ajusta los parámetros y copia el código Tamaño del vídeo Opciones del reproductor Muestra Código HTML a incrustar. Cuando hayas ajustado los parámetros cópialo (Ctrl + C)
  • 8. 8 Blogger desde dentro X: HTML para incrustar contenidos 7 Javier Blanco 2015 bloggerdesdedentro.blogspot.com. Incrustando un vídeo desde YouTube (3) 6 Marca el lugar donde quieres incrustarlo En edición normal Usa tu propia marca ¡Es un truco! 7 En HTML sustituye la marca por el código Vuelve a Redactar para ver el resultado La marca es más fácil de encontrar en medio de esa maraña de código
  • 9. Blogger desde dentro X: HTML para incrustar contenidos 8 Javier Blanco 2015 bloggerdesdedentro.blogspot.com. Concepto de iFrame o marco electrónico Acabas de incrustar un vídeo a través de la utilidad iframe de HTML. Numerosas páginas facilitan iframes de sus contenidos para que los incrustes en tu blog de la misma manera. La gente más famosa de la blogosfera sabe hacer uso de todas las herramientas que tienen a mano Pero recuerda que todo está supeditado al valor de tus entradas