Contenu connexe Similaire à 2013-URoma-Sapienza-PracticasLab-JesusFlores-UCM (20) Plus de Universidad Complutense de Madrid (18) 2013-URoma-Sapienza-PracticasLab-JesusFlores-UCM1. 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
2. Prácticas de laboratorio
Herramientas HTML
Narrativas transmedias en blogs (proyecto
blog)
Narrativas para maps (Mashups)
Narrativas para redes sociales (Paperli)
3. 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
4. Hiper Text Markup Language
¿Qué es HTML y para que se utiliza?
Herramientas
Sintaxis de las etiquetas
Etiquetas Abiertas <BR>
Etiquetas cerradas <B> </B>
© JMFV - Multimedia
5. 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]
© JMFV - Multimedia
6. 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>
<P> (retorno de párrafo-deja un espacio más
grande que al anterior)
<B>NEGRITA</B>
<B>
<I>ITÁLICA</I>
<I>
© JMFV - Multimedia
7. Html…..(OTROS CARACTERES 1)
<STRONG>FUERTE</STRONG>
<STRONG>
<BLINK>INTERMITENTE</BLINK>
<BLINK>
<CODE>CLAVE</CODE>
<CODE>
<EM>RESALTADO</EM>
<EM>
<ADDRESS>DIRECCIÓN</ADDRESS>
<ADDRESS>
<CITE>CITA</CITE>
<CITE>
<BLOCKQUOTE>PARA INSERTAR CITAS,
<BLOCKQUOTE>
CON UNA TABULACIÓN
© JMFV - Multimedia
8. Html…(OTROS CARACTERES 2)
<SAMP>MUESTRA</SAMP>
<SAMP>
<BIG>GRAN IMPRESIÓN</BIG>
<BIG>
<SMALL>PEQUEÑA IMPRESIÓN</SMALL>
<SUB> SUB ÍNDICE</SUB>
<SUP>SUPER ÍNDICE</SUP>
<SUP>
<TT>TELETIPO</TT>
<TT>
<KEY> KEY WORD</KEY>
<STRIKE>TACHADO</STRIKE>
<STRIKE>
© JMFV - Multimedia
9. Html….(OTROS CARACTERES 3)
<BR> 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>
© JMFV - Multimedia
10. Html….(OTROS CARACTERES 4)
<DEL>TACHAR</DEL>
<DEL>
<DIV><SPAN> 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>
<FONT FACE=“ALGERIAN”>EL TEXTO
FACE=“ALGERIAN”>
APARECE EN EL TIPO DE LETRA QUE SE
INDIQUE</FONT>
© JMFV - Multimedia
11. 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
<FONT
COLOR=“#RRGGBB”>TEXTO</FONT>
COLOR
© JMFV - Multimedia
12. 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.
© JMFV - Multimedia
13. 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.
© JMFV - Multimedia
14. Empezando a redactar...
<html>
<head>
<title> Infolider </title>
</head>
<body>
<h1> <center> INFOLIDER <p> <i>Liderando información y conocimiento para los
negocios digitales </i> </center> </h1>
<hr>
Este es el primer modelo de la página de <b> Infolider </b>, 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. <p> 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, <b> Infolider </b> se presenta como la gran alternativa para dar a las
empresas, la información puntual de lo que necesitan. </body>
</html>
© JMFV - Multimedia
16. Empezando a redactar...
<html>
<head>
<title> Infolider </title>
</head>
<body> <BODY BGCOLOR=“#ffffff´TEXT=“#ffff00”LINK=“#00aaff´VLINK=“#ffff00”K=“#00ff00”>
<h1> <center> INFOLIDER <p> <i>Liderando información y conocimiento para los negocios
digitales </i> </center> </h1>
<hr>
Este es el primer modelo de la página de <b> Infolider </b>, 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. <p> 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, <b> Infolider </b> se presenta como la gran alternativa
para dar a las empresas, la información puntual que necesitan. </body>
</html>
© JMFV - Multimedia
18. Historia a través de mapas
Lugares de la bella Italia que sugiero
conocer (Recorrido de lavado de dinero
de la cosa nostra)
© JMFV - Multimedia
19. Utilizar Paper.Li
Como crear un periódico personalizado
con la aplicación Paper.li, desde Twitter o
facebook
© JMFV - Multimedia
Notes de l'éditeur Periodismo II © Jesus Flores Vivar Periodismo II © Jesus Flores Vivar Periodismo II © Jesus Flores Vivar HERRAMIENTAS Después de una larga introducción (que probablemente muchos de ustedes ni leyeron) entramos de lleno a esto del HTML. Antes de comenzar tenemos que saber cuales son las herramientas que necesitaremos para aprender HTML. En si lo único que necesitamos es un simple editor de textos como el Notepad de Windows o Pico en Linux. Cualquier otro editor que encontremos por ahí también puede que sirva. Por otra parte cabe mencionar que usar un procesador de textos no es una buena idea (como por ejemplo el Word) pues este tiende a modificar el texto que vamos escribiendo. En pocas palabras necesitamos un editor que guarde en formato ASCII. ¿Para que aprendo HTML si ya hago páginas muy bonitas con el Dreamweaver o con el Front Page? No es que critiquemos a los programas WYSIWYG (What You See Is What You Get), de hecho este tutorial esta hecho en uno de estos. Pero hay muchísimas etiquetas que no son manejadas por estos programas y por lo tanto perdemos una parte importante de características adicionales. Por otra parte muchas veces es casi imposible obtener el resultado deseado y es entonces necesario meterse a descifrar el código. Además del editor de textos necesitaremos un navegador, de preferencia mas, pero con uno es suficiente para empezar. Muchas veces es necesario probar la página HTML en navegadores distintos para ver si en los dos se ve igual. Para comenzar a editar un sitio entero podremos utilizar una cantidad indefinida de programas de todo tipo, estos son algunos de los que yo he utilizado en estos años pero recuerden, no son necesarios para aprender HTML: