creación de contenidos en web con ejemplos
DESCRIPTION
Creación de contenidos en Web con ejemplos. Carlos Guerrero Tomé [email protected] http://www.guerrerotomé.com 15 de febrero del 20089. Objetivos / Contenidos. ¿Qué vamos a ver? Pedid vosotros! ¿Qué pensais que os va a aportar? ¿Qué sabeis?. - PowerPoint PPT PresentationTRANSCRIPT
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!!!!
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
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