Desarrollo y servicios web

Transcripción

1 Desarrollo y servicios web Luisa Fernanda Rincón Pérez

2 Qué vimos la clase pasada? 1.Presentación general 2. Presentación del curso 3. Conceptos introductorios e ingeniería web 4. Arquitectura web básica

3 3 Sesión 2. Arquitectura de la web HTML- HTML 5

4 Qué haremos hoy? 1. Presentación sitios web 2. HTML conceptos básicos 3. HTML tutorial online 4. HTML5 nuevos conceptos

5 Cómo hacer que un sitio web sea accesible vía web? Hosting: tomado de wikipedia Es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. TIPOS Alojamiento gratuito Alojamiento compartido Alojamiento dedicado

6 Componentes básicos de la web 6 HTTP HTTP INTERNET BROWSER (HTLM) & URL Javascript, ajax, jquery UI, HTML, CSS SERVIDORES Php, Jsp, ASP. Net, Razor.net, rails, etc

7 Ubicar el main.xhtml en una carpeta llamada serviciosweb en elservidor web 7

8 Componentes básicos de la web 8 HTTP HTTP INTERNET BROWSER (HTLM) & URL Javascript, ajax, jquery UI, HTML, CSS SERVIDORES Php, Jsp, ASP. Net, Razor.net, rails, etc

9 Qué es HTML? 9 «lenguaje de marcas de hipertexto» Es un estándar que, en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, etc.

10 W3C (World Wide Web Consortium) 10 Creada en 1994 por Tim Berners Lee Comunidad internacional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo Sito de formación en tecnologías web

11 Estructura básica de un documento en html 5 11

12 Historia de HTML Un estándar fue recomendado para HTML5 en octubre del

13 Ejemplo estructura básica

14 14 HTML elementos en línea y elementos de bloque INLINE a, b, br, em, font, i, i mg, input, select, span, textar ea, No ocupan una nueva línea No tienen alto y ancho BLOCK div, h1, h2, h3, h4, h5, h 6,OL, p, table, ul, li Siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Tienen alto y ancho

15 Hacer tutorial en línea de HTML

16 HTML5

17 HTML5: Algunos datos interesantes Nació de la alianza entre la WHATWG y W3C. Reemplaza a HTML4.0 y XHTML. Diseñada para mostrar mas contenido multimedia si la necesidad de usar plugins en el navegador. Diseño multiplataforma. Ultimo estándar oficial para HTML.

18 Elementos semánticos ( facilitan la búsqueda de información)

19

20 Elementos semánticos ( details - summary) Details. Permite ocultar información no relevante Summary: Envuelve el encabezado visible de summary

21 Elementos semánticos ( Mark) Mark: Resalta texto

22 Elementos semánticos ( Figure Figcaption)

23 Input derivaciones Range Datepicker Number Search Input Url

24 Ejemplos

25 Atributos input <input> min and max <input> pattern <input> list Placeholder height and width Attributes Atributos input Required

26 Algunos atributos de formularios Autofocus novalidate formaction autocomplete Form Formmethod

27 Etiquetas formulario Fieldset: Agrupa campos de un formulario con un cuadro

28 Video/ Video Fuente w3school

29 Escribir HTML Mejores prácticas W3school Usar minúsculas

30 Escribir HTML Mejores prácticas W3school Cerrar las etiquetas

31 Escribir HTML Mejores prácticas W3school Cerrar etiquetas vacías Mejor la segunda cerrar etiquetas

32 Escribir HTML Mejores prácticas W3school Usar minúsculas en los atributos

33 Escribir HTML Mejores prácticas W3school Usar comillas en los atributos de los valores

34 Escribir HTML Mejores prácticas W3school Definir atributo alt para imágenes, lo hace usable si no se pueden cargar

35 Escribir HTML Mejores prácticas W3school Usar salto de línea para separar bloques de instrucciones y evitara espacios innecesarios

36 Ejercicio Identificar las etiquetas propias de HTML5 de este sitio: rms-example.html