Creación de contenidos Creación de contenidos en Web con ejemplos en Web con ejemplos Carlos Guerrero Tomé Carlos Guerrero Tomé [email protected][email protected]http://www.guerrerotomé.com http://www.guerrerotomé.com 15 de febrero del 20089 15 de febrero del 20089
38
Embed
Creación de contenidos en Web con ejemplos Carlos Guerrero Tomé [email protected]é.com 15 de febrero del 20089.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Creación de contenidos Creación de contenidos en Web con ejemplosen Web con ejemplos
Carlos Guerrero ToméCarlos Guerrero Tomé[email protected]@uib.eshttp://www.guerrerotomé.comhttp://www.guerrerotomé.com
15 de febrero del 2008915 de febrero del 20089
Objetivos / ContenidosObjetivos / Contenidos
¿Qué vamos a ver? Pedid vosotros!¿Qué vamos a ver? Pedid vosotros! ¿Qué pensais que os va a aportar?¿Qué pensais que os va a aportar? ¿Qué sabeis?¿Qué sabeis?
web 2.0 web 2.0 htmlhtml httphttp DNS DNS CSSCSS ftp ftp
Los elementos son los componentes fundamentales del HTMLLos elementos son los componentes fundamentales del HTML Cuentan con 2 propiedades básicas:Cuentan con 2 propiedades básicas:
AtributosAtributos ContenidoContenido
En general se conforman con una Etiqueta de Apertura y otra Cierre.En general se conforman con una Etiqueta de Apertura y otra Cierre. Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca
entre la etiqueta de apertura y la de cierre.entre la etiqueta de apertura y la de cierre.
ElementoEtiqueta de Apertura Etiq. de CierreContenido
<p class=“texto”>Curso HTML CEMA</p>Nombre Valor
Atributo
Elementos del HEADElementos del HEAD
Alguno de los elementos factibles de incluir en el HEAD son:Alguno de los elementos factibles de incluir en el HEAD son:
<TITLE> … </TITLE><TITLE> … </TITLE> Define el título del documento HTMLDefine el título del documento HTML
<SCRIPT> … </SCRIPT><SCRIPT> … </SCRIPT> Se utiliza para incluir programas al documento. En general se tratan Se utiliza para incluir programas al documento. En general se tratan
de Javascripts.de Javascripts.
<STYLE> … </STYLE><STYLE> … </STYLE> Especifica un estilo CSS para ser utilizado en el documento.Especifica un estilo CSS para ser utilizado en el documento.
<META> … </META><META> … </META> Permite especificar información de interés como: autor, fecha de Permite especificar información de interés como: autor, fecha de
publicación, descripción, palabras claves, etc.publicación, descripción, palabras claves, etc.
Ayudando a Ayudando a promocionarnospromocionarnos
ParrafosParrafos Es el contenedor mas común.Es el contenedor mas común. Su sintaxis es: <P> … </P>Su sintaxis es: <P> … </P>
EncabezadosEncabezados Indican una jerarquía de secciones dentro del documentoIndican una jerarquía de secciones dentro del documento Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>, Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>,
ListasListas Listas de Definiciones (consistente de pares de términos y definiciones)Listas de Definiciones (consistente de pares de términos y definiciones)
<dl>…</dl> Crea la lista<dl>…</dl> Crea la lista <dt>…</dt><dt>…</dt> Crea un nuevo término Crea un nuevo término <dd>…</dd><dd>…</dd> Crea una nueva definición Crea una nueva definición
Lista Ordenada EnumeradaLista Ordenada Enumerada <ol> … </ol> Crea una nueva lista<ol> … </ol> Crea una nueva lista <li> … </li> Crea un nuevo ítem en la lista<li> … </li> Crea un nuevo ítem en la lista
Lista Ordenada No EnumeradaLista Ordenada No Enumerada <ul> … </ul> Crea una nueva lista<ul> … </ul> Crea una nueva lista <li> … </li> Crea un nuevo ítem en la lista<li> … </li> Crea un nuevo ítem en la lista
CapasCapas Permiten agrupar y diagramar contenidos en los documentos.Permiten agrupar y diagramar contenidos en los documentos. Su sintaxis es: <DIV> … </DIV>Su sintaxis es: <DIV> … </DIV>
Contenedores (Tablas)Contenedores (Tablas)
<table> … </table><table> … </table> Crea la tablaCrea la tabla <tr> … </tr><tr> … </tr> Crea una nueva filaCrea una nueva fila <td> … </td><td> … </td> Crea una nueva celda dentro de la filaCrea una nueva celda dentro de la fila
Por ejemplo: Creación de una tabla de 2 x 2Por ejemplo: Creación de una tabla de 2 x 2
<table><table>
<tr><tr>
<td> … </td><td> … </td>
<td> … </td><td> … </td>
</tr></tr>
<tr><tr>
<td> … </td><td> … </td>
<td> … </td><td> … </td>
</tr></tr>
</table></table>
HipervínculosHipervínculos
¿Qué es un hipervínculo?¿Qué es un hipervínculo?
Ubicación y rutas de documentos.Ubicación y rutas de documentos.
Rutas AbsolutasRutas Absolutas
Rutas RelativasRutas Relativas
Rutas relativas a la raíz del sitioRutas relativas a la raíz del sitio
Vínculos a otras páginas. Vínculos a otras páginas. Etiqueta <A>.Etiqueta <A>.
Uso del atributo target (Destino).Uso del atributo target (Destino).
Anclaje de nombre. Atributo name.Anclaje de nombre. Atributo name.
Comportamientos del Navegador ante distintosComportamientos del Navegador ante distintos tipos de tipos de
archivos enlazados.archivos enlazados.
ImágenesImágenes
Elemento <IMG> Elemento <IMG> ¿Qué imágenes se pueden usar?¿Qué imágenes se pueden usar? Ventajas y desventajas de cada formato.Ventajas y desventajas de cada formato. Imágenes e HipervínculosImágenes e Hipervínculos
<b>...</b>Negrita<b>...</b>Negrita <i>...</i>Cursiva<i>...</i>Cursiva <u>...</u>Subrayado<u>...</u>Subrayado <em>...</em>Enfatizar. Se suele presentar en cursiva<em>...</em>Enfatizar. Se suele presentar en cursiva <dfn>...</dfn>Definiciones. Se suele presentar en cursiva<dfn>...</dfn>Definiciones. Se suele presentar en cursiva <cite>...</cite>Para citas textuales. En cursiva<cite>...</cite>Para citas textuales. En cursiva <kdb>...</kdb>Para palabras clave. Se suele presentar con <kdb>...</kdb>Para palabras clave. Se suele presentar con
texto de ancho fijo en tipo courier.texto de ancho fijo en tipo courier. <var>...</var>Variable<var>...</var>Variable <samp>...</samp>Errores<samp>...</samp>Errores <strong>...</strong>Gran énfasis<strong>...</strong>Gran énfasis <code>...</code>Código fuente<code>...</code>Código fuente <sup>...</sup>Superíndice<sup>...</sup>Superíndice <sub>...</sub>Subíndice<sub>...</sub>Subíndice <s>...</s>Tachado<s>...</s>Tachado <br /> Nueva línea<br /> Nueva línea <hr /> Línea horizontal<hr /> Línea horizontal <!– texto -> Comentarios<!– texto -> Comentarios
Códigos ISO 8859-1Códigos ISO 8859-1Descripción Elemento Código en html
Estilos CSSEstilos CSS Antes de la aparición de los estilos, la presentación se manejaba directamente dentro de los Antes de la aparición de los estilos, la presentación se manejaba directamente dentro de los
elementos HTML por medio de atributos. Por ejemplo:elementos HTML por medio de atributos. Por ejemplo:
<h2 align="center"> <h2 align="center"> <font color=“blue" size=“3" face="Times New Roman, serif"><font color=“blue" size=“3" face="Times New Roman, serif">
<i>Seminario de HTML UCEMA</i> <i>Seminario de HTML UCEMA</i> </font> </font>
</h2> </h2> CSS permite separar el contenido de un documento de su presentación. CSS permite separar el contenido de un documento de su presentación.
En el documento HTML:En el documento HTML:
<h2>Seminario de HTML UCEMA</h2><h2>Seminario de HTML UCEMA</h2>
En el documento HTML:En el documento HTML:
<h2>Seminario de HTML UCEMA</h2><h2>Seminario de HTML UCEMA</h2>En la hoja de estilos se define el formato de losEn la hoja de estilos se define el formato de los
encabezados h2:encabezados h2:
h2 { h2 { text-align: center; text-align: center; color: blue; color: blue; font: italic large "Times New Roman", font: italic large "Times New Roman",
serif; serif; }}
En la hoja de estilos se define el formato de losEn la hoja de estilos se define el formato de los
encabezados h2:encabezados h2:
h2 { h2 { text-align: center; text-align: center; color: blue; color: blue; font: italic large "Times New Roman", font: italic large "Times New Roman",
serif; serif; }}
Ventajas del uso de CSSVentajas del uso de CSS
Estandarizar la presentación de un sitio web completo. Estandarizar la presentación de un sitio web completo.
Haciendola fácil de mantener.Haciendola fácil de mantener.
Diferentes usuarios pueden contar con diferentes estilos acordes Diferentes usuarios pueden contar con diferentes estilos acordes
a sus necesidades. Ejemplos:a sus necesidades. Ejemplos:
Estilos para personas con dificultades visuales,Estilos para personas con dificultades visuales,
Estilos para dispositivos móviles,Estilos para dispositivos móviles,
Estilos para dispositivos monocromos,Estilos para dispositivos monocromos,
Estilos para impresión,Estilos para impresión,
Etc.Etc.
Los documentos HTML se reducen en tamaño y complejidad.Los documentos HTML se reducen en tamaño y complejidad.
Margin (Margen)
Border (Borde)
Formatos CSSFormatos CSS
Propiedades de fuentes Propiedades de fuentes
Propiedades de color y fondo Propiedades de color y fondo
Propiedades de texto Propiedades de texto
espaciado de palabras espaciado de palabras
alineación alineación
Propiedades de caja Propiedades de caja
Margen Margen
Borde Borde
Relleno Relleno
Estilos de listas Estilos de listas
Padding (Relleno)
Contenido
Estilos CSSEstilos CSSUna hoja de estilos consiste en un conjunto de reglas.Una hoja de estilos consiste en un conjunto de reglas.
Cada regla esta formada por:Cada regla esta formada por:
El Selector (nombre del estilo)El Selector (nombre del estilo)
La Declaración (define el estilo)La Declaración (define el estilo)
PropiedadPropiedad
ValorValor
¿Qué podemos hacer con los estilos?¿Qué podemos hacer con los estilos?
Redefinir estilos de Etiquetas HTML.Redefinir estilos de Etiquetas HTML.
Crear Estilos Personalizados para Crear Estilos Personalizados para
uso genérico (Clases)uso genérico (Clases)
Crear Estilos para un elemento Crear Estilos para un elemento
HTML específico (por Id)HTML específico (por Id)
h2 { h2 { text-align: center; text-align: center; color: blue; color: blue; font: italic large "Times New Roman", serif; font: italic large "Times New Roman", serif;
}}.textoresaltado {.textoresaltado {
font-family: Arial, Helvetica, sans-serif;font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-size: 12px;font-style: normal;font-style: normal;font-weight: bold;font-weight: bold; /* Esto es un comentario */ /* Esto es un comentario */color: #000000;color: #000000;
¿Qué puede ofrecerme ¿Qué puede ofrecerme Internet?Internet?
Comunicaciones básicasComunicaciones básicas
Correspondencia escritaCorrespondencia escrita Mensajería instantáneaMensajería instantánea VideoconferenciasVideoconferencias Abaratamiento de los costes de Abaratamiento de los costes de
comunicación (VoIP)comunicación (VoIP)
Promoción de capacidadesPromoción de capacidades
Página webPágina web WeblogsWeblogs Grupos de noticiasGrupos de noticias Servicios de búsquedas sectorialesServicios de búsquedas sectoriales
Mejora de mi gestión Mejora de mi gestión comercialcomercial
Venta directaVenta directa Fidelización de clientesFidelización de clientes Prestación de serviciosPrestación de servicios TeletrabajoTeletrabajo
MIEDOS / PELIGROSMIEDOS / PELIGROS
Ni yo ni mis clientes usan InternetNi yo ni mis clientes usan Internet Internet es demasiado grande para Internet es demasiado grande para
que vean mi empresaque vean mi empresa Mi sobrino ha hecho un cursilloMi sobrino ha hecho un cursillo Internet no es seguroInternet no es seguro
¿Cómo consigo estos ¿Cómo consigo estos servicios?servicios?
Gratuitos y genéricos (Software Gratuitos y genéricos (Software libre)libre)
Contratación de empresasContratación de empresas Departamento de informáticaDepartamento de informática
Estudie su empresa y el Estudie su empresa y el mercadomercado
Sopese la inversión en su desarrollo webSopese la inversión en su desarrollo web Busque el profesional adecuadoBusque el profesional adecuado Investigue y pregunteInvestigue y pregunte Exija un presupuesto detalladoExija un presupuesto detallado Estudie las diferentes posibilidadesEstudie las diferentes posibilidades Asegúrese un mantenimiento posteriorAsegúrese un mantenimiento posterior Asegúrese que su web sigue la normativa Asegúrese que su web sigue la normativa
legallegal Asegúrese de que sea una página seguraAsegúrese de que sea una página segura No cierre el proyecto a posible ampliacionesNo cierre el proyecto a posible ampliaciones
Consejos de marketing en Consejos de marketing en InternetInternet
Debería estar en los más importantes servicios de Debería estar en los más importantes servicios de búsqueda y enlazar con todas las páginas relacionadas búsqueda y enlazar con todas las páginas relacionadas con nuestra empresa.con nuestra empresa.
Dar algo gratis. A los internautas les encantan las cosas Dar algo gratis. A los internautas les encantan las cosas gratis. Si hay algo gratis en nuestra página aumentará la gratis. Si hay algo gratis en nuestra página aumentará la popularidad de la misma. Un descuento, un catálogo.popularidad de la misma. Un descuento, un catálogo.
Publicitar la Web en páginas muy visitadas.Publicitar la Web en páginas muy visitadas. Incluir la dirección de la página Web y el correo Incluir la dirección de la página Web y el correo
electrónico en toda la papelería, publicidad, etc…, de la electrónico en toda la papelería, publicidad, etc…, de la empresa.empresa.
Actualice de vez en cuando los contenidos, haga que sea Actualice de vez en cuando los contenidos, haga que sea una web viva y motive al visitante volver a entrar.una web viva y motive al visitante volver a entrar.
Haga un formulario de contacto desde la web que le Haga un formulario de contacto desde la web que le permita captar los correos electrónicos de quien lo permita captar los correos electrónicos de quien lo rellene y posteriormente y de forma periódica envíele rellene y posteriormente y de forma periódica envíele información de su empresa.información de su empresa.
BloggerBlogger Google MapsGoogle Maps Videos on demand (youtube)Videos on demand (youtube) Google NewsGoogle News Grupos de noticiasGrupos de noticias Busquedas por directorioBusquedas por directorio Espacios de disco virtualEspacios de disco virtual SkypeSkype MeneameMeneame Restaurantes hoyRestaurantes hoy OrkutOrkut Delicious Delicious Marcadores GoogleMarcadores Google Google CalendarGoogle Calendar BloglinesBloglines Discos Duros VirtualesDiscos Duros Virtuales CMSCMS WordPressWordPress KMSKMS
¿ USO EMPRESARIAL?¿ USO EMPRESARIAL?
¿USO ¿USO PERSONAL?PERSONAL?
Creación de contenidos Creación de contenidos en Web con ejemplosen Web con ejemplos
Carlos Guerrero ToméCarlos Guerrero Tomé[email protected]@uib.eshttp://www.guerrerotomé.comhttp://www.guerrerotomé.com