1 / 38

Creación de contenidos en Web con ejemplos

Creación de contenidos en Web con ejemplos. Carlos Guerrero Tomé carlos.guerrero@uib.es 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?.

lysa
Télécharger la présentation

Creación de contenidos en Web con ejemplos

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creación de contenidos en Web con ejemplos Carlos Guerrero Tomé carlos.guerrero@uib.es http://www.guerrerotomé.com 15 de febrero del 20089

  2. Objetivos / Contenidos • ¿Qué vamos a ver? Pedid vosotros! • ¿Qué pensais que os va a aportar? • ¿Qué sabeis? web 2.0 htmlhttp DNS CSS ftp internetdirección IPnavegador 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. HTML – CSS – Javascript Página Web Estructura • Párrafos • Encabezados • Listas • Tablas • Capas • Etc. HTML • Textos • Imágenes • Enlaces Contenido • Colores • Tipografías • Alineación • Fondos • Tamaños • Etc. Apariencia CSS Comportamiento • Efectos • Validaciones • Automatización Javascript

  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> <title>Ejemplos curso</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> Hola Mundo </body> </html>

  8. Documento HTML básico

  9. Elementos HTML • Los elementos son los componentes fundamentales del HTML • Cuentan con 2 propiedades básicas: • Atributos • Contenido • 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. Elemento Etiqueta de Apertura Contenido Etiq. de Cierre <p class=“texto”>Curso HTML CEMA</p> Nombre Valor Atributo

  10. Elementos del HEAD Alguno de los elementos factibles de incluir en el HEAD son: • <TITLE> … </TITLE> • Define el título del documento HTML • <SCRIPT> … </SCRIPT> • Se utiliza para incluir programas al documento. En general se tratan de Javascripts. • <STYLE> … </STYLE> • Especifica un estilo CSS para ser utilizado en el documento. • <META> … </META> • Permite especificar información de interés como: autor, fecha de publicación, descripción, palabras claves, etc.

  11. Ayudando a promocionarnos • Fernandezcoca.com <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META name=origen content=fernandezcoca.com > <META name="verify-v1" content="l6hk+a/OhkVYqpp8tp1+Y0K0Jlhyy+P2gcjjevvaRzw=" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <META name=author content=fernandezcoca > <META name=organization content="Antonio Fernández-Coca" > <META name=locality content="España, Spain" > <META name=lang content="es, com" > <META NAME="DESCRIPTION" LANG="ES" CONTENT="Ilustrador creativo y original fernandezcoca. Ilustrador de éxito. Provocadora mente original"><META NAME="DESCRIPTION" LANG="en-us" CONTENT="Illustrator creative and original Fernandezcoca, an wellnamed Spanish Illustrator"> <META NAME="author" CONTENT="ilustrador creativo original Fernandezcoca, fernandez coca"> <META NAME="DC.Rights" CONTENT="Derechos reservados del autor, fernandezcoca"> <META name="keywords" LANG="ES" content=" ilustrador, creativo, original, dibujantes, dibujante, dibujo, ilustracion, ilustradores, humor, chistes, grafico, illustrator, professional illustrator, animacion, 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 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, 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=" drawing, freelance illustrator, illustration, advertising, cartoonist, realism, original artworks, watercolours, pencils, airbrush, computers, digital, pictures, design, spain, fashion illustration ,christmas illustration ,stock illustration ,illustration art ,book illustration ,free illustration ,illustration jobs ,fantasy illustration ,digital illustration ,fashion illustration portfolio ,vector illustration ,editorial illustration ,illustration gallery ,packaging illustration,advertising illustration,art director illustration,royalty free illustration ,illustration of painting ,fashion design illustration ,skin illustration ,graphic illustration ,angel illustration ,movie illustration ,fashion illustration template ,portrait illustration ,illustration technique ,illustration artist ,illustration design ,vogue illustration, computer illustration ,vintage illustration ,fashion illustrator ,freelance illustrator ,illustrator portfolio, book illustrator"> <META name=revisit 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=GENERATOR>

  12. Contenedores (Block-Level Elements) • Parrafos • Es el contenedor mas común. • Su sintaxis es: <P> … </P> • Encabezados • Indican una jerarquía de secciones dentro del documento • Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>, • Listas • Listas de Definiciones (consistente de pares de términos y definiciones) • <dl>…</dl> Crea la lista • <dt>…</dt> Crea un nuevo término • <dd>…</dd> Crea una nueva definición • Lista Ordenada Enumerada • <ol> … </ol> Crea una nueva lista • <li> … </li> Crea un nuevo ítem en la lista • Lista Ordenada No Enumerada • <ul> … </ul> Crea una nueva lista • <li> … </li> Crea un nuevo ítem en la lista • Capas • Permiten agrupar y diagramar contenidos en los documentos. • Su sintaxis es: <DIV> … </DIV>

  13. Contenedores (Tablas) • <table> … </table> Crea la tabla • <tr> … </tr> Crea una nueva fila • <td> … </td> Crea una nueva celda dentro de la fila Por ejemplo: Creación de una tabla de 2 x 2 <table> <tr> <td> … </td> <td> … </td> </tr> <tr> <td> … </td> <td> … </td> </tr> </table>

  14. Hipervínculos • ¿Qué es un hipervínculo? • Ubicación y rutas de documentos. • Rutas Absolutas • Rutas Relativas • Rutas relativas a la raíz del sitio • Vínculos a otras páginas. Etiqueta <A>. • Uso del atributo target (Destino). • Anclaje de nombre. Atributo name. • Comportamientos del Navegador ante distintostipos de archivos enlazados.

  15. Imágenes • Elemento <IMG> • ¿Qué imágenes se pueden usar? • Ventajas y desventajas de cada formato. • Imágenes e Hipervínculos

  16. <b>...</b>Negrita • <i>...</i>Cursiva • <u>...</u>Subrayado • <em>...</em>Enfatizar. Se suele presentar en cursiva • <dfn>...</dfn>Definiciones. Se suele presentar en cursiva • <cite>...</cite>Para citas textuales. En cursiva • <kdb>...</kdb>Para palabras clave. Se suele presentar con texto de ancho fijo en tipo courier. • <var>...</var>Variable • <samp>...</samp>Errores • <strong>...</strong>Gran énfasis • <code>...</code>Código fuente • <sup>...</sup>Superíndice • <sub>...</sub>Subíndice • <s>...</s>Tachado • <br /> Nueva línea • <hr /> Línea horizontal • <!– texto -> Comentarios

  17. Códigos ISO 8859-1

  18. Ejercicio • http://kb.guerrerotome.com/?p=90 • http://www.guerrerotome.com • Knowledge Base • Curso de HTML y CSS • Ayuda / referencias: • www.google.es • 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: <h2 align="center"> <font color=“blue" size=“3" face="Times New Roman, serif"> <i>Seminario de HTML UCEMA</i> </font> </h2> • CSS permite separar el contenido de un documento de su presentación. En el documento HTML: <h2>Seminario de HTML UCEMA</h2> 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. • Diferentes usuarios pueden contar con diferentes estilos acordes a sus necesidades. Ejemplos: • Estilos para personas con dificultades visuales, • Estilos para dispositivos móviles, • Estilos para dispositivos monocromos, • Estilos para impresión, • Etc. • Los documentos HTML se reducen en tamaño y complejidad.

  21. Formatos CSS • Propiedades de fuentes • Propiedades de color y fondo • Propiedades de texto • espaciado de palabras • alineación • Propiedades de caja • Margen • Borde • Relleno • Estilos de listas Margin (Margen) Border (Borde) Padding (Relleno) Contenido

  22. Estilos CSS 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; } Una hoja de estilos consiste en un conjunto de reglas. Cada regla esta formada por: • El Selector (nombre del estilo) • La Declaración (define el estilo) • Propiedad • Valor ¿Qué podemos hacer con los estilos? • Redefinir estilos de Etiquetas HTML. • Crear Estilos Personalizados para uso genérico (Clases) • Crear Estilos para un elemento HTML específico (por Id)

  23. Como incluir estilos CSS <h2 style="color: blue; background: green;"> Curso HTML UCEMA </h2> • Inline StylesUtilizando el atributo “style” se define el estilo de un elemento HTML en forma individual. • Embedded StyleSe define la regla CSS dentro de un documento HTML. Se puede aplicar a cualquier elemento de ese documento. • Hojas de Estilos externasUn archivo CSS independiente que se encuentra referenciado en cada uno de los documentos HTML que desean utilizarlo. <head> <style type="text/css"> h2 { font-style: italic; font-weight: bold; color: blue; } </style> </head> <body> <h2>Curso HTML UCEMA</h2> </body> <head> <link rel=stylesheet type="text/css“ href=“estilos.css"> </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 • Servicios • Comercial • Portal • Estática • Dinámica • Arquitecturas de tres capas

  27. Pero... ¿para que me sirve una web?

  28. Comunicar • Productos, novedades, información, servicios, publicidad • Globalizar • En tiempo (7x24) y espacio (llegar al extranjero) • Imagen, confianza • Acercar, interactuar • Clientes, proveedores, trabajadores

  29. ¿Qué puede ofrecerme Internet?

  30. Comunicaciones básicas • Correspondencia escrita • Mensajería instantánea • Videoconferencias • Abaratamiento de los costes de comunicación (VoIP)

  31. Promoción de capacidades • Página web • Weblogs • Grupos de noticias • Servicios de búsquedas sectoriales

  32. Mejora de mi gestión comercial • Venta directa • Fidelización de clientes • Prestación de servicios • Teletrabajo

  33. MIEDOS / PELIGROS • Ni yo ni mis clientes usan Internet • Internet es demasiado grande para que vean mi empresa • Mi sobrino ha hecho un cursillo • Internet no es seguro

  34. ¿Cómo consigo estos servicios? • Gratuitos y genéricos (Software libre) • Contratación de empresas • Departamento de informática

  35. Estudie su empresa y el mercado • Sopese la inversión en su desarrollo web • Busque el profesional adecuado • Investigue y pregunte • Exija un presupuesto detallado • Estudie las diferentes posibilidades • Asegúrese un mantenimiento posterior • Asegúrese que su web sigue la normativa legal • Asegúrese de que sea una página segura • 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. • 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. • 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. • 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 • Google Maps • Videos on demand (youtube) • Google News • Grupos de noticias • Busquedas por directorio • Espacios de disco virtual • Skype • Meneame • Restaurantes hoy • Orkut • Delicious • Marcadores Google • Google Calendar • Bloglines • Discos Duros Virtuales • CMS • WordPress • KMS ¿ USO EMPRESARIAL? ¿USO PERSONAL?

  38. Creación de contenidos en Web con ejemplos Carlos Guerrero Tomé carlos.guerrero@uib.es http://www.guerrerotomé.com 15 de febrero del 20089

More Related