Descargar la presentación
La descarga está en progreso. Por favor, espere
1
Creación de contenidos en Web con ejemplos Carlos Guerrero Tomé carlos.guerrero@uib.eshttp://www.guerrerotomé.com 15 de febrero del 20089
2
Objetivos / 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 html http DNS CSS ftp internet dirección IP navegador protocolo google apache e- mail SGBD ethernet buscador ISP tcp/ip www web 2.0 html http DNS CSS ftp internet dirección IP navegador protocolo google apache e- mail SGBD ethernet buscador ISP tcp/ip www
3
Bibliografía http://www.google.es si no está en google no existe ¡¡¡¡CUIDADO!!!!
4
Web y HTML
5
Página Web HTML – 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.
6
Estructura documento HTML Documento HTML CABECERA CUERPO
7
Documento HTML básico <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> Ejemplos curso Ejemplos curso </head><body> Hola Mundo </body></html>
8
Documento HTML básico
9
Elementos HTML Los elementos son los componentes fundamentales del HTML Los elementos son los componentes fundamentales del HTML Cuentan con 2 propiedades básicas: Cuentan con 2 propiedades básicas: Atributos Atributos Contenido Contenido 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 entre la etiqueta de apertura y la de cierre. Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la etiqueta de apertura y la de cierre. Elemento Etiqueta de AperturaEtiq. de CierreContenido Curso HTML CEMA NombreValor Atributo
10
Elementos del HEAD Alguno de los elementos factibles de incluir en el HEAD son: … … Define el título del documento HTML Define el título del documento HTML … … Se utiliza para incluir programas al documento. En general se tratan de Javascripts. Se utiliza para incluir programas al documento. En general se tratan de Javascripts. … … Especifica un estilo CSS para ser utilizado en el documento. Especifica un estilo CSS para ser utilizado en el documento. … … Permite especificar información de interés como: autor, fecha de publicación, descripción, palabras claves, etc. Permite especificar información de interés como: autor, fecha de publicación, descripción, palabras claves, etc.
11
Ayudando a promocionarnos Fernandezcoca.com Fernandezcoca.com
12
Contenedores (Block-Level Elements) Parrafos Parrafos Es el contenedor mas común. Es el contenedor mas común. Su sintaxis es: … Su sintaxis es: … Encabezados Encabezados Indican una jerarquía de secciones dentro del documento Indican una jerarquía de secciones dentro del documento Su sintáxis: …, …, …,.. …, Su sintáxis: …, …, …,.. …, Listas Listas Listas de Definiciones (consistente de pares de términos y definiciones) Listas de Definiciones (consistente de pares de términos y definiciones) … Crea la lista … Crea la lista … Crea un nuevo término … Crea un nuevo término … Crea una nueva definición … Crea una nueva definición Lista Ordenada Enumerada Lista Ordenada Enumerada … Crea una nueva lista … Crea una nueva lista … Crea un nuevo ítem en la lista … Crea un nuevo ítem en la lista Lista Ordenada No Enumerada Lista Ordenada No Enumerada … Crea una nueva lista … Crea una nueva lista … Crea un nuevo ítem en la lista … Crea un nuevo ítem en la lista Capas Capas Permiten agrupar y diagramar contenidos en los documentos. Permiten agrupar y diagramar contenidos en los documentos. Su sintaxis es: … Su sintaxis es: …
13
Contenedores (Tablas) … Crea la tabla … Crea la tabla … Crea una nueva fila … Crea una nueva fila … Crea una nueva celda dentro de la fila … Crea una nueva celda dentro de la fila Por ejemplo: Creación de una tabla de 2 x 2 <table><tr> … … </tr><tr> </tr></table>
14
Hipervínculos ¿Qué es un hipervínculo? ¿Qué es un hipervínculo? Ubicación y rutas de documentos. Ubicación y rutas de documentos. Rutas Absolutas Rutas Absolutas Rutas Relativas Rutas Relativas Rutas relativas a la raíz del sitio Rutas relativas a la raíz del sitio Vínculos a otras páginas. Etiqueta. Vínculos a otras páginas. Etiqueta. Uso del atributo target (Destino). Uso del atributo target (Destino). Anclaje de nombre. Atributo name. Anclaje de nombre. Atributo name. Comportamientos del Navegador ante distintos tipos de archivos enlazados. Comportamientos del Navegador ante distintos tipos de archivos enlazados.
15
Imágenes Elemento Elemento ¿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ínculos Imágenes e Hipervínculos
16
... Negrita... Negrita... Cursiva... Cursiva... Subrayado... Subrayado... Enfatizar. Se suele presentar en cursiva... Enfatizar. Se suele presentar en cursiva... Definiciones. Se suele presentar en cursiva... Definiciones. Se suele presentar en cursiva... Para citas textuales. En cursiva... Para citas textuales. En cursiva... Para palabras clave. Se suele presentar con texto de ancho fijo en tipo courier.... Para palabras clave. Se suele presentar con texto de ancho fijo en tipo courier.... Variable... Variable... Errores... Errores... Gran énfasis... Gran énfasis... Código fuente... Código fuente... Superíndice... Superíndice... Subíndice... Subíndice... Tachado... Tachado Nueva línea Nueva línea Línea horizontal Línea horizontal Comentarios Comentarios
17
Códigos ISO 8859-1 DescripciónElementoCó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ÿÿ
18
Ejercicio http://kb.guerrerotome.com/?p=90 http://kb.guerrerotome.com/?p=90 http://www.guerrerotome.com http://www.guerrerotome.com Knowledge Base Knowledge Base Curso de HTML y CSS Curso de HTML y CSS Ayuda / referencias: Ayuda / referencias: www.google.es www.google.es http://kb.guerrerotome.com/?p=86 http://kb.guerrerotome.com/?p=86
19
Estilos CSS 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: 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: Seminario de HTML UCEMA Seminario de HTML UCEMA 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: Seminario de HTML UCEMA Seminario de HTML UCEMA En el documento HTML: Seminario de HTML UCEMA Seminario de HTML UCEMA En la hoja de estilos se define el formato de los encabezados h2: h2 { text-align: center; color: blue; font: italic large "Times New Roman", serif; } En la hoja de estilos se define el formato de los encabezados h2: h2 { text-align: center; color: blue; font: italic large "Times New Roman", serif; }
20
Ventajas del uso de CSS Estandarizar la presentación de un sitio web completo. Haciendola fácil de mantener. Estandarizar la presentación de un sitio web completo. Haciendola fácil de mantener. Diferentes usuarios pueden contar con diferentes estilos acordes a sus necesidades. Ejemplos: Diferentes usuarios pueden contar con diferentes estilos acordes 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.
21
Margin (Margen) Border (Borde) Formatos 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
22
Estilos CSS Una hoja de estilos consiste en un conjunto de reglas. 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) Propiedad Propiedad Valor Valor ¿Qué podemos hacer con los estilos? Redefinir estilos de Etiquetas HTML. Redefinir estilos de Etiquetas HTML. Crear Estilos Personalizados para uso genérico (Clases) Crear Estilos Personalizados para uso genérico (Clases) Crear Estilos para un elemento HTML específico (por Id) Crear Estilos para un elemento HTML específico (por Id) h2 { text-align: center; color: blue; font: italic large "Times New Roman", serif; }.textoresaltado { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; /* Esto es un comentario */ color: #000000; } #logo { background-image: url("/img/logo.gif"); background-position:center;background-repeat:no-repeat; height: 50px; width: 150px; position: absolute; left: 0px; top: 0px; }
23
Como incluir estilos CSS Inline Styles Utilizando el atributo “style” se define el estilo de un elemento HTML en forma individual. Inline Styles Utilizando el atributo “style” se define el estilo de un elemento HTML en forma individual. Embedded Style Se define la regla CSS dentro de un documento HTML. Se puede aplicar a cualquier elemento de ese documento. Embedded Style Se define la regla CSS dentro de un documento HTML. Se puede aplicar a cualquier elemento de ese documento. Hojas de Estilos externas Un archivo CSS independiente que se encuentra referenciado en cada uno de los documentos HTML que desean utilizarlo. Hojas de Estilos externas Un archivo CSS independiente que se encuentra referenciado en cada uno de los documentos HTML que desean utilizarlo. Curso HTML UCEMA </h2> Curso HTML UCEMA </h2> <head> h2 { font-style: italic; font-weight: bold; color: blue; }</style></head><body> Curso HTML UCEMA Curso HTML UCEMA </body><head> h2 { font-style: italic; font-weight: bold; color: blue; }</style></head><body> Curso HTML UCEMA Curso HTML UCEMA </body> <head> </head><head> </head>
24
Algunas cosas más
25
Warriors of the net http://www.youtube.com/watch?v=IhIMOqdEEio http://www.youtube.com/watch?v=CS8sSU-0_1o
26
Tipos de web Corporativa Corporativa Servicios Servicios Comercial Comercial Portal Portal Estática Estática Dinámica Dinámica Arquitecturas de tres capas Arquitecturas de tres capas
27
Pero... Pero... ¿para que me sirve una web? ¿para que me sirve una web?
28
Comunicar Comunicar Productos, novedades, información, servicios, publicidad Productos, novedades, información, servicios, publicidad Globalizar Globalizar En tiempo (7x24) y espacio (llegar al extranjero) En tiempo (7x24) y espacio (llegar al extranjero) Imagen, confianza Imagen, confianza Acercar, interactuar Acercar, interactuar Clientes, proveedores, trabajadores Clientes, proveedores, trabajadores
29
¿Qué puede ofrecerme Internet?
30
Comunicaciones básicas Correspondencia escrita Correspondencia escrita Mensajería instantánea Mensajería instantánea Videoconferencias Videoconferencias Abaratamiento de los costes de comunicación (VoIP) Abaratamiento de los costes de comunicación (VoIP)
31
Promoción de capacidades Página web Página web Weblogs Weblogs Grupos de noticias Grupos de noticias Servicios de búsquedas sectoriales Servicios de búsquedas sectoriales
32
Mejora de mi gestión comercial Venta directa Venta directa Fidelización de clientes Fidelización de clientes Prestación de servicios Prestación de servicios Teletrabajo Teletrabajo
33
MIEDOS / PELIGROS Ni yo ni mis clientes usan Internet Ni yo ni mis clientes usan Internet Internet es demasiado grande para que vean mi empresa Internet es demasiado grande para que vean mi empresa Mi sobrino ha hecho un cursillo Mi sobrino ha hecho un cursillo Internet no es seguro Internet no es seguro
34
¿Cómo consigo estos servicios? Gratuitos y genéricos (Software libre) Gratuitos y genéricos (Software libre) Contratación de empresas Contratación de empresas Departamento de informática Departamento de informática
35
Estudie su empresa y el mercado Sopese la inversión en su desarrollo web Sopese la inversión en su desarrollo web Busque el profesional adecuado Busque el profesional adecuado Investigue y pregunte Investigue y pregunte Exija un presupuesto detallado Exija un presupuesto detallado Estudie las diferentes posibilidades Estudie las diferentes posibilidades Asegúrese un mantenimiento posterior Asegúrese un mantenimiento posterior Asegúrese que su web sigue la normativa legal Asegúrese que su web sigue la normativa legal Asegúrese de que sea una página segura Asegúrese de que sea una página segura No cierre el proyecto a posible ampliaciones No cierre el proyecto a posible ampliaciones
36
Consejos de marketing en Internet Debería estar en los más importantes servicios de búsqueda y enlazar con todas las páginas relacionadas con nuestra empresa. Debería estar en los más importantes servicios de búsqueda y enlazar con todas las páginas relacionadas con nuestra empresa. Dar algo gratis. A los internautas les encantan las cosas gratis. Si hay algo gratis en nuestra página aumentará la popularidad de la misma. Un descuento, un catálogo. Dar algo gratis. A los internautas les encantan las cosas gratis. Si hay algo gratis en nuestra página aumentará la 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 electrónico en toda la papelería, publicidad, etc…, de la empresa. Incluir la dirección de la página Web y el correo electrónico en toda la papelería, publicidad, etc…, de la empresa. Actualice de vez en cuando los contenidos, haga que sea una web viva y motive al visitante volver a entrar. Actualice de vez en cuando los contenidos, haga que sea una web viva y motive al visitante volver a entrar. Haga un formulario de contacto desde la web que le permita captar los correos electrónicos de quien lo rellene y posteriormente y de forma periódica envíele información de su empresa. Haga un formulario de contacto desde la web que le permita captar los correos electrónicos de quien lo rellene y posteriormente y de forma periódica envíele información de su empresa.
37
Blogger Blogger Google Maps Google Maps Videos on demand (youtube) Videos on demand (youtube) Google News Google News Grupos de noticias Grupos de noticias Busquedas por directorio Busquedas por directorio Espacios de disco virtual Espacios de disco virtual Skype Skype Meneame Meneame Restaurantes hoy Restaurantes hoy Orkut Orkut Delicious Delicious Marcadores Google Marcadores Google Google Calendar Google Calendar Bloglines Bloglines Discos Duros Virtuales Discos Duros Virtuales CMS CMS WordPress WordPress KMS KMS ¿ USO EMPRESARIAL? ¿USO PERSONAL?
38
Creación de contenidos en Web con ejemplos Carlos Guerrero Tomé carlos.guerrero@uib.eshttp://www.guerrerotomé.com 15 de febrero del 20089
Presentaciones similares
