Creación de contenidos en Web con ejemplos

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

internetinternet dirección IPdirección IP

navegadornavegador protocolo protocolo googlegoogle

apache apache e-maile-mail SGBD ethernet SGBD ethernet

buscadorbuscador ISP ISP tcp/ip tcp/ip wwwwww

BibliografíaBibliografía

http://www.google.eshttp://www.google.es

si no está en google no existesi no está en google no existe

¡¡¡¡CUIDADO!!!!¡¡¡¡CUIDADO!!!!

http://www.google.es/

Web y HTMLWeb y HTML

Página Web

HTML – CSS – JavascriptHTML – CSS – Javascript

Estructura

Contenido

Apariencia

Comportamiento

HTML

CSS

Javascript

• Colores• Tipografías• Alineación

• Efectos• Validaciones• Automatización

• Párrafos• Encabezados• Listas

•Tablas• Capas• Etc.

• Textos• Imágenes• Enlaces

• Fondos• Tamaños • Etc.

Estructura documento Estructura documento HTMLHTML

Documento HTML

CABECERA

CUERPO

Documento HTML básicoDocumento HTML básico

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">"http://www.w3.org/TR/html4/loose.dtd"><html><html><head><head><title>Ejemplos curso</title><title>Ejemplos curso</title><meta http-equiv="Content-Type" content="text/html; <meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">charset=iso-8859-1"></head></head>

<body><body>Hola MundoHola Mundo

</body></body></html></html>

Documento HTML básicoDocumento HTML básico

Elementos HTMLElementos HTML

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

Fernandezcoca.comFernandezcoca.com

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><META name=origen content=fernandezcoca.com ><META name=origen content=fernandezcoca.com ><META name="verify-v1" content="l6hk+a/OhkVYqpp8tp1+Y0K0Jlhyy+P2gcjjevvaRzw=" /><META name="verify-v1" content="l6hk+a/OhkVYqpp8tp1+Y0K0Jlhyy+P2gcjjevvaRzw=" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta

name="MSSmartTagsPreventParsing" content="true" />name="MSSmartTagsPreventParsing" content="true" /><META name=author content=fernandezcoca ><META name=author content=fernandezcoca ><META name=organization content="Antonio Fernández-Coca" ><META name=organization content="Antonio Fernández-Coca" ><META name=locality content="España, Spain" > <META name=lang content="es, com" ><META name=locality content="España, Spain" > <META name=lang content="es, com" ><META NAME="DESCRIPTION" LANG="ES" CONTENT="Ilustrador creativo y original fernandezcoca. <META NAME="DESCRIPTION" LANG="ES" CONTENT="Ilustrador creativo y original fernandezcoca.

Ilustrador de éxito. Provocadora mente original"><META NAME="DESCRIPTION" LANG="en-us" Ilustrador de éxito. Provocadora mente original"><META NAME="DESCRIPTION" LANG="en-us" CONTENT="Illustrator creative and original Fernandezcoca, an wellnamed Spanish Illustrator"> CONTENT="Illustrator creative and original Fernandezcoca, an wellnamed Spanish Illustrator"> <META NAME="author" CONTENT="ilustrador creativo original Fernandezcoca, fernandez coca"> <META NAME="author" CONTENT="ilustrador creativo original Fernandezcoca, fernandez coca"> <META NAME="DC.Rights" CONTENT="Derechos reservados del autor, fernandezcoca"> <META <META NAME="DC.Rights" CONTENT="Derechos reservados del autor, fernandezcoca"> <META name="keywords" LANG="ES" content=" ilustrador, creativo, original, dibujantes, dibujante, dibujo, name="keywords" LANG="ES" content=" ilustrador, creativo, original, dibujantes, dibujante, dibujo, ilustracion, ilustradores, humor, chistes, grafico, illustrator, professional illustrator, animacion, ilustracion, ilustradores, humor, chistes, grafico, illustrator, professional illustrator, animacion, publicidad, comunicación en general, diseño, fantasía, fantástica, infantil, juvenil, adulto, publicidad, comunicación en general, diseño, fantasía, fantástica, infantil, juvenil, adulto, camisetas, tarjetas postales, storyboard, story board, bocetos, mascotas, publicidad, campañas camisetas, tarjetas postales, storyboard, story board, bocetos, mascotas, publicidad, campañas publicitarias, galerias de dibujo, fernandez coca, antonio coca, antonio fernandez, ilustraciones, publicitarias, galerias de dibujo, fernandez coca, antonio coca, antonio fernandez, ilustraciones, drawings, diseño web, web design, web courses, conferencias, words, web books, graphic interface, drawings, diseño web, web design, web courses, conferencias, words, web books, graphic interface, interfaz gráfica de usuario, el país, digipersonajes, ecovidrio, recliclaje, vidrio, tentaciones, visual, interfaz gráfica de usuario, el país, digipersonajes, ecovidrio, recliclaje, vidrio, tentaciones, visual, netmagazine, lycos magazine, españa "> <META NAME="KEYWORDS" LANG="EN-US" CONTENT=" netmagazine, lycos magazine, españa "> <META NAME="KEYWORDS" LANG="EN-US" CONTENT=" drawing, freelance illustrator, illustration, advertising, cartoonist, realism, original artworks, drawing, freelance illustrator, illustration, advertising, cartoonist, realism, original artworks, watercolours, pencils, airbrush, computers, digital, pictures, design, spain, fashion watercolours, pencils, airbrush, computers, digital, pictures, design, spain, fashion illustration ,christmas illustration ,stock illustration ,illustration art ,book illustration ,free illustration ,christmas illustration ,stock illustration ,illustration art ,book illustration ,free illustration ,illustration jobs ,fantasy illustration ,digital illustration ,fashion illustration illustration ,illustration jobs ,fantasy illustration ,digital illustration ,fashion illustration portfolio ,vector illustration ,editorial illustration ,illustration gallery ,packaging portfolio ,vector illustration ,editorial illustration ,illustration gallery ,packaging illustration,advertising illustration,art director illustration,royalty free illustration ,illustration of illustration,advertising illustration,art director illustration,royalty free illustration ,illustration of painting ,fashion design illustration ,skin illustration ,graphic illustration ,angel illustration ,movie painting ,fashion design illustration ,skin illustration ,graphic illustration ,angel illustration ,movie illustration ,fashion illustration template ,portrait illustration ,illustration technique ,illustration artist illustration ,fashion illustration template ,portrait illustration ,illustration technique ,illustration artist ,illustration design ,vogue illustration, computer illustration ,vintage illustration ,fashion ,illustration design ,vogue illustration, computer illustration ,vintage illustration ,fashion illustrator ,freelance illustrator ,illustrator portfolio, book illustrator"> <META name=revisit illustrator ,freelance illustrator ,illustrator portfolio, book illustrator"> <META name=revisit content="1 days" > <META name=all> <META NAME="robots" CONTENT="index, follow"> <META content="1 days" > <META name=all> <META NAME="robots" CONTENT="index, follow"> <META NAME="DISTRIBUTION" CONTENT="global"> <META content="MSHTML 6.00.2800.1276" NAME="DISTRIBUTION" CONTENT="global"> <META content="MSHTML 6.00.2800.1276" name=GENERATOR> name=GENERATOR>

Contenedores (Block-Level Contenedores (Block-Level Elements)Elements)

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

Comillas “ "

“Ampersand” & &

Signo menos que... < <

Signo más que... > >

Exclamación (entrada) ¡ ¡

Símbolo del céntimo ¢ ¢

Símbolo de la libra esterlina £ £

Símbolo de cambio general ¤ ¤

Símbolo del euro € €

Símbolo del yen ¥ ¥

Barra vertical rota ¦ ¦

Diéresis ¨ ¨

copyright © ©

Ordinal femenino ª ª

Comillas hacia izquierda « «

No señal ¬ ¬

Guión largo

Marca registrada ® ®

Guión superior ¯ ¯

Signo de “grados” ° °

Más o menos ± ±

Elevado al cuadrado... ² ²

Elevado al cubo.. ³ ³

Acento suelto ´ ´

Signo “micro” µ µ

Signo “salto de párrafo” ¶ ¶

Punto medio (geminado) · ·

Cedilla ¸ ¸

Elevado al uno ¹ ¹

Ordinal masculino º º

Comillas hacia derecha » »

Fracción de ¼ ¼ ¼

Fracción de ½ ½ ½

Fracción de ¾ ¾ ¾

Interrogación invertida ¿ ¿

Signo multiplicar × ×

Signo dividir ÷ ÷

Letra A mayúscula acentuada grave À À

Letra A mayúscula acentuada aguda Á Á

Letra A mayúscula acentuada circumflexa Â Â

Letra A mayúscula con tilde Ã Ã

Letra A mayúscula con diéresis Ä Ä

Letra A mayúscula con círculo Å Å

El resto de las vocales en mayúsculas se hacen igual, sustituyendo la A por la letra en sí. Para las vocales en minúscula se sigue el mismo proceso

Letra AE mayúscula Æ Æ

Letra cedilla ç Ç

Letra Eth mayúsculas (Islandés) Ð Ð

Letra eht minúscula (Islandés) ð ð

Letra EÑEmayúscula Ñ Ñ

Letra eñe minúscula ,ñ ñ

Letra Y acentuada mayúscula Ý Ý

Letra Y acentuada minúscula ý ý

Letra THORN mayúscula (Islandés) Þ Þ

Letra thorn minúscula (Islandés) þ þ

Letra SHARP.S minúscula (Alemán) ß ß

Letra a minúscula con acento grave à à

Letra a minúscula con acento agudo á á

Letra a minúscula con acento circumflexo â â

Letra a minúscula con tilde ã ã

Letra a minúscula con diéresis ä ä

Letra a minúscula con círculo å å

Letra ae minúscula æ æ

Letra o cruzada ø ø

Letra Y con diéresis y minúscula ÿ ÿ

EjercicioEjercicio

http://kb.guerrerotome.com/?p=90http://kb.guerrerotome.com/?p=90 http://www.guerrerotome.comhttp://www.guerrerotome.com

Knowledge BaseKnowledge Base Curso de HTML y CSSCurso de HTML y CSS

Ayuda / referencias:Ayuda / referencias: www.google.eswww.google.es http://kb.guerrerotome.com/?p=86http://kb.guerrerotome.com/?p=86

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;

}}#logo {#logo {

background-image: url("/img/logo.gif");background-image: url("/img/logo.gif");background-position:center; background-position:center; background-repeat:no-repeat;background-repeat:no-repeat;height: 50px; width: 150px;height: 50px; width: 150px;position: absolute; left: 0px; top: 0px;position: absolute; left: 0px; top: 0px;

}}

Como incluir estilos CSSComo incluir estilos CSS Inline StylesInline Styles

Utilizando el atributo “style” se define el Utilizando el atributo “style” se define el

estilo de un elemento HTML en forma estilo de un elemento HTML en forma

individual.individual.

Embedded StyleEmbedded Style

Se define la regla CSS dentro de un Se define la regla CSS dentro de un

documento HTML. Se puede aplicar a documento HTML. Se puede aplicar a

cualquier elemento de ese documento.cualquier elemento de ese documento.

Hojas de Estilos externasHojas de Estilos externas

Un archivo CSS independiente que se Un archivo CSS independiente que se

encuentra referenciado en cada uno de los encuentra referenciado en cada uno de los

documentos HTML que desean utilizarlo.documentos HTML que desean utilizarlo.

<h2 style="color: blue; background: green;"><h2 style="color: blue; background: green;">Curso HTML UCEMA Curso HTML UCEMA

</h2> </h2>

<h2 style="color: blue; background: green;"><h2 style="color: blue; background: green;">Curso HTML UCEMA Curso HTML UCEMA

</h2> </h2>

<head> <head> <style type="text/css"> <style type="text/css">

h2 {h2 {font-style: italic;font-style: italic;font-weight: bold; font-weight: bold; color: blue;color: blue;

} } </style> </style>

</head></head><body><body>

<h2>Curso HTML UCEMA</h2> <h2>Curso HTML UCEMA</h2> </body></body>

<head> <head> <style type="text/css"> <style type="text/css">

h2 {h2 {font-style: italic;font-style: italic;font-weight: bold; font-weight: bold; color: blue;color: blue;

} } </style> </style>

</head></head><body><body>

<h2>Curso HTML UCEMA</h2> <h2>Curso HTML UCEMA</h2> </body></body>

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

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

Algunas cosas másAlgunas cosas más

Warriors of the netWarriors of the net

http://www.youtube.com/watch?v=IhIMOqdEEiohttp://www.youtube.com/watch?v=IhIMOqdEEio

http://www.youtube.com/watch?v=CS8sSU-0_1http://www.youtube.com/watch?v=CS8sSU-0_1oo

http://www.youtube.com/watch?v=IhIMOqdEEio

http://www.youtube.com/watch?v=CS8sSU-0_1o

http://www.youtube.com/watch?v=CS8sSU-0_1o

Tipos de webTipos de web

CorporativaCorporativa ServiciosServicios ComercialComercial PortalPortal

EstáticaEstática DinámicaDinámica

Arquitecturas de Arquitecturas de tres capastres capas

Pero...Pero...

¿para que me sirve una web?¿para que me sirve una web?

ComunicarComunicar Productos, novedades, información, Productos, novedades, información,

servicios, publicidadservicios, publicidad GlobalizarGlobalizar

En tiempo (7x24) y espacio (llegar al En tiempo (7x24) y espacio (llegar al extranjero)extranjero)

Imagen, confianzaImagen, confianza Acercar, interactuarAcercar, interactuar

Clientes, proveedores, trabajadoresClientes, proveedores, trabajadores

¿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

15 de febrero del 2008915 de febrero del 20089

Creación de contenidos en Web con ejemplos

Documents

Transcript of Creación de contenidos en Web con ejemplos