2013-URoma-Sapienza-PracticasLab-JesusFlores-UCM

Departamento Periodismo II
(Estructura y Tecnologías de la Información)

“Estudio de perfiles profesionales del
periodismo en la era digital.
Perspectivas del ciberperiodismo.
Casos España y Latinoamérica”
PRÁCTICAS LABORATORIO
Dr. Jesús Miguel Flores Vivar
Profesor Titular UCM
@jesusflores

Dipartimento di
Comunicazione e Ricerca
Sociale

Prácticas de laboratorio
 Herramientas HTML
 Narrativas transmedias en blogs (proyecto
blog)
 Narrativas para maps (Mashups)
 Narrativas para redes sociales (Paperli)

Pautas para el diseño y estructura de una
publicación digital
 La idea
 Visitar otras páginas
web, similares al
proyecto de
publicación
 Papel y lápiz
 Los trazos
 Estructura
 Arquitectura

© JMFV - Multimedia

Hiper Text Markup Language
 ¿Qué es HTML y para que se utiliza?
 Herramientas
 Sintaxis de las etiquetas
 Etiquetas Abiertas 
 Etiquetas cerradas

Herramientas

 Editor de textos [Wordpad, block de
notas(Windows), Simple Text (Mac), Vi (Unix),
Pico (Linux)]
 Navegador [Explorer, Netscape, Firefox]
 Editor de imágenes [Corel Draw, Paint Shop
Pro, Fireworks, Photoshop]
 Editor Text Ortográfico [Corel Word Perfect
Star Office, Microsoft Office]


Sintaxis de las etiquetas HTML
 Etiqueta <HTML> (apertura de la página)
</HTML>
 Etiquetas <HEAD>(cabecera)</HEAD> y
<HEAD>
<TITLE> nombre del documento</TITLE>
 Etiqueta <BODY> (cuerpo o
contenido)</BODY>
 (retorno de párrafo-deja un espacio más
grande que al anterior)
 NEGRITA

 ITÁLICA

Html…..(OTROS CARACTERES 1)
 FUERTE

 <BLINK>INTERMITENTE</BLINK>
<BLINK>
 <CODE>CLAVE</CODE>
<CODE>
 RESALTADO

 <ADDRESS>DIRECCIÓN</ADDRESS>
<ADDRESS>
 <CITE>CITA</CITE>
<CITE>
 <BLOCKQUOTE>PARA INSERTAR CITAS,
<BLOCKQUOTE>
CON UNA TABULACIÓN

Html…(OTROS CARACTERES 2)
 <SAMP>MUESTRA</SAMP>
<SAMP>
 <BIG>GRAN IMPRESIÓN</BIG>
<BIG>
 PEQUEÑA IMPRESIÓN
 SUB ÍNDICE
 SUPER ÍNDICE

 <TT>TELETIPO</TT>
<TT>
 <KEY> KEY WORD</KEY>
 <STRIKE>TACHADO</STRIKE>
<STRIKE>

Html….(OTROS CARACTERES 3)
 SALTO DE LÍNEA
 <CENTER> CENTRAR</CENTER>
 <HR>LINEAS SEPARADORAS
<HR>
 <ABBR> SE UTILIZA PARA INDICAR EL
SIGNIFICADO DE UNA ABREVIATURA
 <ABBR TITLE=“WORLD WIDE WEB”>WWW</ABBR>
 <INS>SUBRAYAR
<INS>

Html….(OTROS CARACTERES 4)
 <DEL>TACHAR</DEL>
<DEL>
 <DIV> PARA USAR CON LOS
ATRIBUTOS <CLASS>
 <ID>PARA GENERAR ESTILOS: (EJ: )
<ID>
 <DIV CLASS=“EJEMPLO3”ID=“MUESTRA3”>
 <UL>
 <LI> Uno
 <LI> Dos
 <LI> Tres
 </UL>
 </DIV>
 EL TEXTO
FACE=“ALGERIAN”>
APARECE EN EL TIPO DE LETRA QUE SE
INDIQUE

Html…(OTROS CARACTERES 5)
 Colores:
 Al comienzo del documento
 <BODY BGCOLOR=“#ffffff
´TEXT=“#ffff00”LINK=“#00aaff
´VLINK=“#ffff00”K=“#00ff00”></body>
 Colores en el lugar
 TEXTO
COLOR

Principios básicos en la construcción de
una página con HTML básico
 El primer principio esencial del lenguaje HTML
es el uso de etiquetas o marcas (tags).
 Funcionan de la siguiente manera. P.e:
<xxx> Este es el inicio de una etiqueta
</xxx> Este es el cierre de una etiqueta
 2do.: Las letras de las etiquetas pueden
estar en mayúsculas o minúsculas,
indistintamente.
 3ro.: El contenido que hay entre las
etiquetas es lo que estará influenciada
por ellas.

Principios básicos en la construcción
de…
 4to.: Una vez que se ha escrito todo el
código deseado (texto con las etiquetas
incluidas), se ha de guardar los ficheros
con las extensiones .html o .htm
 5to.:La página principal debe guardarse
con el nombre de: index
 Para ver como va quedando nuestra
página web inicial, utilizamos alguno de
los navegadores que se tiene por defecto.


Empezando a redactar...
<html>
<head>
<title> Infolider </title>
</head>
<body>
<h1> <center> INFOLIDER Liderando información y conocimiento para los
negocios digitales </center> </h1>
<hr>
Este es el primer modelo de la página de Infolider , agencia virtual de
comunicación, cuyos objetivos se centran en proporcionar información y
conocimiento a las empresas de cualquier entorno para desarrollar negocios
digitales. Hoy en día, las empresas buscan estar más y mejor informadas para
ser cada vez mas competitivas. Pero ante el cúmulo de información, tanto analógica
como digital, Infolider se presenta como la gran alternativa para dar a las
empresas, la información puntual de lo que necesitan. </body>
</html>

Primer ejemplo


Empezando a redactar...
<html>
<head>
<title> Infolider </title>
</head>
<body> <BODY BGCOLOR=“#ffffff´TEXT=“#ffff00”LINK=“#00aaff´VLINK=“#ffff00”K=“#00ff00”>
<h1> <center> INFOLIDER Liderando información y conocimiento para los negocios
digitales </center> </h1>
<hr>
Este es el primer modelo de la página de Infolider , agencia virtual de comunicación,
cuyos objetivos se centran en proporcionar información y conocimiento a las empresas de
cualquier entorno para desarrollar negocios digitales. Hoy en día, las empresas buscan estar
más y mejor informadas para ser cada vez mas competitivas. Pero ante el cúmulo de
información, tanto analógica como digital, Infolider se presenta como la gran alternativa
para dar a las empresas, la información puntual que necesitan. </body>
</html>

Segundo ejemplo


Historia a través de mapas
 Lugares de la bella Italia que sugiero
conocer (Recorrido de lavado de dinero
de la cosa nostra)


Utilizar Paper.Li
 Como crear un periódico personalizado
con la aplicación Paper.li, desde Twitter o
facebook


2013-URoma-Sapienza-PracticasLab-JesusFlores-UCM

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (8)

Similar a 2013-URoma-Sapienza-PracticasLab-JesusFlores-UCM

Similar a 2013-URoma-Sapienza-PracticasLab-JesusFlores-UCM (20)

Más de Universidad Complutense de Madrid

Más de Universidad Complutense de Madrid (18)

2013-URoma-Sapienza-PracticasLab-JesusFlores-UCM

Notas del editor