Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Publicación de contenido en Web.

Se habla de la estructura y comunicación de contenido web, los diferentes lenguajes, protocolos y programas de edición.
by

Dabi Lahiguera Albericio

on 18 April 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Publicación de contenido en Web.

La publicación WEB
está sustentada en ...
La estructura de
Internet

Adopta y generaliza el
Protocolo TCP/IP
http://es.wikipedia.org/wiki/Internet
Soporta diversas maneras
de compartir información
Correos Electrónicos (smtp, pop, imap)
Listas de noticias
Foros
Transferencias de ficheros (FTP)
...
WEB (HTTP)

descrita como...
Servidor (hardware y
software)
Soporta los contenidos de la red para los...
Clientes (hardware)
Navegador (software)
el usuario crea un sitio web que aloja en el...
del cual los usuarios visitan y descargan las web
IP -DNS - URL
SITIOS WEB
Aloja
editados a través de...
Un editor WYSIWYG
lenguaje HTML
con páginas web estática en...
con páginas web dinámicas en...
lenguajes: PHP
ASP.NET
JAVA script
Organizado respondiendo
a estas preguntas
1. ¿Cuál es el tema fundamental sobre el que trata la web? ¿A quién va dirigida nuestra web?
2. ¿Qué contenidos queremos que figuren en la web?
3. ¿Cómo organizaremos esos contenidos?
4. ¿Cuántas páginas de nuestro sitio web dedicaremos a cada contenido?
Organizado según
estas estructuras
Lineal
Jerárquica
Mixta
Web
Uso limitado del color en la web por capacidad de navegadores. (216 colores, hasta 256 reservados para interfaz)
Contraste suficiente para poder leer los textos correctamente (mejor oscuro sobre claro, el blanco de fondo romperlo).
Fondos de imagen en web:
respetar el contraste para lectura correcta
No gran tamaño para agilizar carga.
Suficiente resolución para correcta visualización.
Pocas variaciones de color.
Para imágenes con fondo transparente gif o png.
El encabezado formado por banner con título de web y logotipo.
El pie de la página reservarlo para información técnica de la web (resolución mínima, actualización, permisos).
Todas las páginas con enlaces para seguir navegando.
Longitud de páginas sin exceso de scroll. Exceso de contenido dividido en varias páginas.
Informar de última actualización de web.
No cambiar de color de hipervínculos al estar acostumbrados al estándar podrían confundirse.
Comprobar que funciona bien en todos los navegadores importantes y sin enlaces rotos.
Diseña con tamaños relativos (porcentaje), para imágenes, textos, tablas. Se adapta a distintas resoluciones.
Revisar bien la ortografia.
Tipos de letra sencillos y sin adornos para facilitar lectura. No abuses de las mayúsculas (es como gritar).
Texto alternativo a imágenes para mejorar accesibilidad y la posibilidad de navegar sin imágenes.
Diseñado ...
A través de CMS o gestores de contenidos como: Joomla, Moodle, Mediawiki, Wordpress,
Con herramientas de streaming
Subido al servidor (alojamiento o hosting) a través de un cliente FTP (Filezilla)
Protocolo de Control de Transmisión (TCP) Protocolo de Internet (IP)
http://es.wikipedia.org/wiki/TCP_IP
FTP (File Transfer Protocol)
http://es.wikipedia.org/wiki/File_Transfer_Protocol
http://es.wikipedia.org/wiki/HTTP
http://es.wikipedia.org/wiki/SMTP
http://es.wikipedia.org/wiki/Post_Office_Protocol
http://es.wikipedia.org/wiki/Imap
Dreamweaver
Kompozer
Amaya
Adobe Golive
Frontpage
http://es.wikipedia.org/wiki/WYSIWYG
http://es.wikipedia.org/wiki/HTML
http://www.cyberhades.com/2012/03/24/html-examples-ejemplos-de-codigo-html/
https://es.wikipedia.org/wiki/Sistema_de_gesti%C3%B3n_de_contenidos
<html>

<head>
<meta http-equiv="Content-Language" content="es">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Historia de las Relaciones Internacionales durante el siglo XX</title>

<link rel="stylesheet" type="text/css" href="text.css">


</head>

<body topmargin="0" leftmargin="0" link="#D2DFDE" vlink="#FFFFFF" alink="#FFFFFF" hlink="#FFFFFF" bgcolor="#D2DFDE" >
<STYLE TYPE="text/css">
BODY
{scrollbar-base-color: #333333;
scrollbar-arrow-color: #D2DFDE;
scrollbar-DarkShadow-Color: #333333;}
</STYLE>

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="780" id="AutoNumber4" height="28">
<tr>
<td width="780" height="23" bgcolor="#FFFFFF" style="color: #FFFFFF; font-family:News Gothic MT; font-weight: bold">
<p align="left"><a href="http://www.historiasiglo20.org">
<img border="0" src="images/Logo.gif" width="780" height="30"></a></td>
</tr>
<tr>
<td width="780" height="50" bgcolor="#333333" style="color: #D2DFDE; font-family:News Gothic MT">
<p align="left">
<a href="http://www.historiasiglo20.org/RI/index.htm">
<img border="0" src="images/logohrriisXX.jpg" width="780" height="40"></a></td>
</tr>
<tr>
<td width="780" height="16" bgcolor="#333333" style="color: #FFFFFF; font-family:News Gothic MT">
<p align="center"><b><font face="News Gothic MT" style="font-size: 8pt">
<a class="c" href="http://www.historiasiglo20.org/RI/acerca.htm">
<span lang="es">ACERCA</span></a>&nbsp;|
<a class="c" href="http://www.historiasiglo20.org/GLOS/index.htm">GLOSARIO</a>&nbsp;|
<a class="c" href="http://www.historiasiglo20.org/BIO/index.htm">BIOGRAFÍAS</a> &nbsp;|
<a class="c" href="http://www.historiasiglo20.org/TEXT/index.htm">TEXTOS</a>&nbsp;|
<a class="c" href="http://www.historiasiglo20.org/MAPA/index.htm">MAPAS</a>&nbsp;|
<a class="c" href="http://www.historiasiglo20.org/ESTADIS/index.htm">ESTADÍSTICAS</a>&nbsp;|
<a class="c" href="http://www.historiasiglo20.org/IMAG/index.htm">IMÁGENES</a>&nbsp;|
<a class="c" href="http://www.historiasiglo20.org/CRONO/index.htm">CRONOLOGÍA</a>&nbsp;|
<a class="c" href="http://www.historiasiglo20.org/ACTIV/index.htm">ACTIVIDADES</a>&nbsp;|
<a class="c" href="http://www.historiasiglo20.org/RI/enlaces.htm">ENLACES</a>&nbsp;
</font><hr color="#D2DFDE" size="1">
</b></td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0" width="780" height="339" id="AutoNumber2">
<tr>
<td width="506" height="339" bgcolor="#800000">
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-style:inset; border-color:#C0C0C0; border-collapse: collapse; " bordercolor="#111111" width="480" id="AutoNumber3" bgcolor="#D2DFDE">
<tr>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/antecedentesIGM1.jpg" alt="El camino hacia la I Guerra Mundial. La política de alianzas" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/antecedentesIGM3.jpg" alt="El camino hacia la I Guerra Mundial. La política de alianzas" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/tversalles1.jpg" alt="La Guerra y la organización de la paz. La Paz de París y el nuevo mapa de Europa" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/tversalles3.jpg" alt="La Guerra y la organización de la paz. La Paz de París y el nuevo mapa de Europa" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/MiroGuerra1.gif" alt="La Sociedad de Naciones y las relaciones internacionales en el período de entreguerras. &nbsp;Los virajes hacia la guerra" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/MiroGuerra3.gif" alt="La Sociedad de Naciones y las relaciones internacionales en el período de entreguerras. &nbsp;Los virajes hacia la guerra" width="80" height="80"></td>
</tr>
<tr>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/antecedentesIGM2.jpg" alt="El camino hacia la I Guerra Mundial. La política de alianzas" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<a href="http://www.historiasiglo20.org/ISXX/index.htm">
<img border="0" src="images/Nicolas2.jpg" alt="Nicolás II - El camino hacia la I Guerra Mundial. La política de alianzas" width="80" height="80"></a></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/tversalles2.jpg" alt="La Guerra y la organización de la paz. La Paz de París y el nuevo mapa de Europa" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<a href="http://www.historiasiglo20.org/IGM/index.htm">
<img border="0" src="images/hindemb.jpg" alt="Hindemburg - La Guerra y la organización de la paz. La Paz de París y el nuevo mapa de Europa" width="80" height="80"></a></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/MiroGuerra2.gif" alt="La Sociedad de Naciones y las relaciones internacionales en el período de entreguerras. &nbsp;Los virajes hacia la guerra" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0" bgcolor="#D2DFDE">
<a href="http://www.historiasiglo20.org/EG/index.htm">
<img border="0" src="images/chamberlain.jpg" alt="Chamberlain - La Sociedad de Naciones y las relaciones internacionales en el período de entreguerras. &nbsp;Los virajes hacia la guerra" width="80" height="80"></a></td>
</tr>
<tr>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/yalta1.jpg" alt="La II Guerra Mundial y el diseño de un nuevo orden mundial. La O.N.U." width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/yalta2.jpg" alt="La II Guerra Mundial y el diseño de un nuevo orden mundial. La O.N.U." width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/pragaprimavera1.jpg" alt="La Guerra Fría y la política de bloques: la formación de los bloques, crisis y coexistencia. El movimiento de los no alineados" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/pragaprimavera3.jpg" alt="La Guerra Fría y la política de bloques: la formación de los bloques, crisis y coexistencia. El movimiento de los no alineados" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/berlinwall1.jpg" alt="El derrumbamiento del bloque soviético y el Nuevo Orden Mundial" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/berlinwall3.jpg" alt="El derrumbamiento del bloque soviético y el Nuevo Orden Mundial" width="80" height="80"></td>
</tr>
<tr>

<img border="0" src="images/berlinwall3.jpg" alt="El derrumbamiento del bloque soviético y el Nuevo Orden Mundial" width="80" height="80"></td>
</tr>
<tr>
<td width="80" height="80" bordercolor="#C0C0C0">
<a href="http://www.historiasiglo20.org/IIGM/index.htm">
<img border="0" src="images/gaulle.jpg" alt="De Gaulle - La II Guerra Mundial y el diseño de un nuevo orden mundial. La O.N.U." width="80" height="80"></a></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/yalta3.jpg" alt="La II Guerra Mundial y el diseño de un nuevo orden mundial. La O.N.U." width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<a href="http://www.historiasiglo20.org/GF/index.htm">
<img border="0" src="images/mao.JPG" alt="Mao Zedong - La Guerra Fría y la política de bloques: la formación de los bloques, crisis y coexistencia. El movimiento de los no alineados." width="80" height="80"></a></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<img border="0" src="images/pragaprimavera4.jpg" alt="La Guerra Fría y la política de bloques: la formación de los bloques, crisis y coexistencia. El movimiento de los no alineados" width="80" height="80"></td>
<td width="80" height="80" bordercolor="#C0C0C0">
<a href="http://www.historiasiglo20.org/FGF/index.htm">
<img border="0" src="images/reagan.jpg" alt="Reagan - El derrumbamiento del bloque soviético y el Nuevo Orden Mundial" width="80" height="80"></a></td>
<td width="80" height="80" bordercolor="#C0C0C0" bgcolor="#D2DFDE">
<img border="0" src="images/berlinwall4.jpg" alt="El derrumbamiento del bloque soviético y el Nuevo Orden Mundial" width="80" height="80"></td>
</tr>
</table>

</center>
</div>
</td>
<td width="286" align="left" valign="top" bgcolor="#800000" style="font-family: Verdana; font-size: 8pt">

<p align="center"><font color="#C0C0C0"></p>
<b>
<p align="center">
<font color="#FFFFFF" face="Verdana">
<a class="c" href="http://www.historiasiglo20.org/ISXX/index.htm">
El camino hacia la I Guerra Mundial. <br> La política de alianzas</a></font></p>
<p align="center">
<p align="center"><font face="Verdana"><font color="#FFFFFF">
<a class="c" href="http://www.historiasiglo20.org/IGM/index.htm">
La Guerra y la organización de la paz. <br> La Paz de París y el nuevo mapa de Europa</a></font></p>
<p align="center"><font face="Verdana"><font color="#FFFFFF">
<a class="c" href="http://www.historiasiglo20.org/EG/index.htm">
La Sociedad de Naciones y las relaciones internacionales en el período de entreguerras. &nbsp;Los virajes
hacia la guerra</a></font></p>
<p align="center"><font face="Verdana"><font color="#FFFFFF">
<a class="c" href="http://www.historiasiglo20.org/IIGM/index.htm">
La II Guerra Mundial y el diseño de un nuevo orden mundial. La O.N.U.</a></font></p>
<p align="center"><font face="Verdana"><font color="#FFFFFF">
<a class="c" href="http://www.historiasiglo20.org/GF/index.htm">
La Guerra Fría y la política de bloques: la formación de los bloques, crisis y coexistencia.<br>
El movimiento de los no alineados</a></font></p>
<p align="center"><font face="Verdana"><font color="#FFFFFF">
<a class="c" href="http://www.historiasiglo20.org/FGF/index.htm">
El derrumbamiento del bloque soviético y el Nuevo Orden Mundial</a></font><p>
<p align="center"><font face="Verdana"><font color="#FFFFFF">
<a class="c" href="http://www.historiasiglo20.org/europa/index.htm">Historia de la Unión Europea</a></font>
<br>&nbsp;</font></td>

</tr>
</table>
</center>
</div>

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="780" id="AutoNumber5" bgcolor="#333333" height="66">
<tr>
<td height="66" align="center" valign="top">
<hr color="#D2DFDE" size="1">
<p align="center"><!-- Search Google -->
<center>
<FORM method=GET action=http://www.google.com/custom>
<TABLE bgcolor=#D2DFDE cellspacing=0 border=0 style="border-collapse: collapse" bordercolor="#111111" cellpadding="0">
<tr valign=top><td>
<a class="c" href=http://www.google.com/search>
<IMG SRC=http://www.google.com/logos/Logo_40wht.gif border=0 ALT=Google align=middle width="128" height="53"></a>
</td>
<td>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT type=submit name=sa VALUE="Google Search">
<INPUT type=hidden name=cof VALUE="AH:center;S:http://www.historiasiglo20.org;AWFID:8dff5377b8167752;">
<font face=arial,sans-serif size=-1><input type=hidden name=domains value="historiasiglo20.org"><br><input type=radio name=sitesearch value=""
checked> </font>
<font face=Verdana size=1 color="#333333">Search WWW</font><font face=Verdana size=1> </font>

<font face=arial,sans-serif size=-1> <input type=radio name=sitesearch value="www.historiasiglo20.org"> </font>

<font face=Verdana size=1>Search www.historiasiglo20.org </font><br>
</td></tr></table>
</form>
</center>
<!-- Search Google --></p>

<p align="center">
<b>
<font face="Arial" color="#D2DFDE" style="font-size: 8pt">2003 © Juan Carlos Ocaña <br>

</font>
<a href="mailto:historiasiglo20@yahoo.es">
<img border="0" src="images/sobre.gif" width="13" height="10"></a></b><p align="center">
<b><font color="#FFFFFF" face="Arial" style="font-size: 8pt">Este sitio
web está alojado en el<br>
</font><font color="#006699" style="font-size: 9pt">
<a class="c" href="http://www.cnice.mecd.es">Centro Nacional de
Información y Comunicación Educativa</a><br>
<a href="http://www.cnice.mecd.es">
<img border="0" src="images/lg_cnice.gif" width="143" height="38"></a></font></b>
</p>
<p align="center">
<a href="http://www.historiasiglo20.org">
<img border="0" src="images/Logo2.gif" width="150" height="36"></a></td>
</tr>
</table>
</center>
</div>

</body>

</html>
Etiquetas principales de HTML
html: inicio y final de un documento html
head: cabecera del documento HTML
title: define el título de la página (va dentro de head, pero es obligatoria)
body: cuerpo del documento HTML
Etiquetas que van dentro de head
link: vínculo a hojas de estilo CSS
style: estilo de la página incrustado
script: script o guion.
Etiquetas que van dentro de body
form: inicio de un formulario
Encabezados
h1: encabezado de primer nivel
h2: encabezado de segundo nivel
h3: encabezado de tercer nivel
h4: encabezado de cuarto nivel
h5: encabezado de quinto nivel
h6: encabezado de sexto nivel
Tabla
table: define una tabla
tr: fila de una tabla
td: celda de datos de una tabla
th: celda de cabecera de una tabla
Listas
li: Elemento de lista
ol: Lista ordenada
ul: Lista desordenada
Formato
b: texto en negrita (desaprobada)
i: texto en cursiva (desaprobada)
s: texto tachado (desaprobada)
Otros
a: Enlace.
div: Capa de la página.
img: imagen.
p.ej.
Internet Explorer
Mozilla Firefox
GoogleChrome
...
<!-- Búsqueda Google -->
<center>
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value=es>
<INPUT type=submit name=btnG VALUE="Búsqueda Google">
</td></tr></TABLE>
</FORM>
</center>
<!-- Búsqueda Google -->
Insertar buscador de google
Insertar video youtube
<iframe width="640" height="360" src="https://www.youtube.com/embed/XWHEFi-AOtg" frameborder="0" allowfullscreen></iframe>
Full transcript