Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2015-1
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 Sesión 2. Arquitectura de la web HTML- HTML 5
Qué haremos hoy? 1. Presentación sitios web 2. HTML conceptos básicos 3. HTML tutorial online 4. HTML5 nuevos conceptos
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
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
Ubicar el main.xhtml en una carpeta llamada serviciosweb en elservidor web 7
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
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.
W3C (World Wide Web Consortium) 10 Creada en 1994 por Tim Berners Lee http://www.w3.org/ Comunidad internacional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo Sito de formación en tecnologías web
Estructura básica de un documento en html 5 11
Historia de HTML Un estándar fue recomendado para HTML5 en octubre del 2014 http://cdn.tripwiremagazine.com/wp-content/uploads/2012/10/html5-infographic.jpg
Ejemplo estructura básica
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
Hacer tutorial en línea de HTML
HTML5
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.
Elementos semánticos ( facilitan la búsqueda de información)
Elementos semánticos ( details - summary) Details. Permite ocultar información no relevante Summary: Envuelve el encabezado visible de summary
Elementos semánticos ( Mark) Mark: Resalta texto
Elementos semánticos ( Figure Figcaption)
Input derivaciones Range Datepicker Number Email Search Input Url
Ejemplos
Atributos input <input> min and max <input> pattern <input> list Placeholder height and width Attributes Atributos input Required
Algunos atributos de formularios Autofocus novalidate formaction autocomplete Form Formmethod
Etiquetas formulario Fieldset: Agrupa campos de un formulario con un cuadro
Video/ Video Fuente w3school
Escribir HTML Mejores prácticas W3school Usar minúsculas
Escribir HTML Mejores prácticas W3school Cerrar las etiquetas
Escribir HTML Mejores prácticas W3school Cerrar etiquetas vacías Mejor la segunda cerrar etiquetas
Escribir HTML Mejores prácticas W3school Usar minúsculas en los atributos
Escribir HTML Mejores prácticas W3school Usar comillas en los atributos de los valores
Escribir HTML Mejores prácticas W3school Definir atributo alt para imágenes, lo hace usable si no se pueden cargar
Escribir HTML Mejores prácticas W3school Usar salto de línea para separar bloques de instrucciones y evitara espacios innecesarios
Ejercicio Identificar las etiquetas propias de HTML5 de este sitio: http://html5doctor.com/demos/forms/fo rms-example.html