Ecomerce HTML

7/25/2019 Ecomerce HTML

1/53

IntroduccinHTML

1.HTML

Atributosdeetiquetas

.

EtiquetasHTML.

TablasenH

TML.

2.HTML5

NovedadesHTM

L5

Etiquetasdeest

ructuraHTML5

EtiquetasdeMe

diosHTML5

Elementodedib

ujoHTML5


2/53Introduccin HTML

2

INTRODUCCIN HTML

Contenido

1. HTML1.1 Atributos de etiquetas.1.2 Etiquetas HTML.1.3 Tablas en HTML.2. HTML52.1 Novedades HTML52.2 Etiquetas de estructura HTML5

Etiqueta Etiqueta Etiqueta Etiqueta Etiqueta Etiqueta y Etiqueta Etiqueta 2.3 Etiquetas de Medios HTML 5 Etiqueta Etiqueta Etiqueta Etiqueta Etiqueta 2.4 Elemento de dibujo HTML5 Etiqueta Etiqueta Scalable Vector Graphics


3/53

1. HTMLHyper Text Markup Language(Lenguaje marcado de hper textos)

El HTML es el lenguaje para codificar y desarrollar pginas web, sunombre proviene de una sigla Hyper Text Markup Language (Lenguajemarcado de hper textos), este lenguaje lo codifican los navegadores paraque el usuario pueda ver la informacin. Para trabajar con html se requie-re un simple editor de texto, se podra empezar a trabajar con el bloc denotas que trae Windows por defecto o el textmate de Mac.Las instrucciones HTML son palabras clave que se encuentran entre lossignos menor que y mayor que, < x > a esto se le llama etiqueta o tag.Ejemplo:

En la mayora de los casos estas etiquetas se encuentran por pares, unaque abre y otra que cierra con un slash(/) precediendo la palabra clave.Ejemplo: Este texto estar en negrilla Como se puede ver en el ejemplo, se tiene un texto entre dos etiquetascon la misma denominacin; una es la etiqueta que abre y la otra cierra,el texto que se encuentre entre estas dos se ver afectado por la accinde la etiqueta, en este caso es la negrilla del tag que es la abrevia-cin de BOLD en ingles.El HTML no es case sensitive, es decir no reconoce entre maysculas yminsculas, para este lenguaje es lo mismo

y

, para fomentarlas buenas prcticas la codificacin html se trabajar siempre en minscu-la, ya que en lenguajes hermanos solo aceptan minscula.Para construir una pgina web se maneja la siguiente estructura bsica:

Estas estructuras html son ledas por los navegadores (Mozilla Firefox,Safari, Chrome, Internet Explorer, etc.), imprimiendo en pantalla la infor-macin que se quiere trasmitir.

Introduccin HTML

3


4/53

Actividad escribir sintaxis de mi primera pgina.

Ahora vaya al editor de texto y codifique la primera pgina webMi primera WebEste es mi primer ejercicio con HTML

espero aprender muy bien HTML

Luego gurdela como miPagina.html, se debe definir el tipo de archivo

para eso se le da la extensin (.html) y ejecute en el navegador.Explicacin de la estructura de la pgina

En este ejemplo se observan tres nuevas etiquetas, que seencuentran dentro del head del documento que sirve para darle el ttulo ala pgina en el navegador y el ubicado en el body del documentoque define el encabezado y la etiqueta

que define un prrafo.A continuacin se presenta la estructura de una pgina para darse unaidea de cmo unas etiquetas contienen a otras etiquetas.

Introduccin HTML

4


5/53

1.1 Atributos de etiquetas

Los atributos sirven para dar ciertas caractersticas a las etiquetas, comocambiar el color de fondo o texto; de hecho ciertos casos los tags no fun-cionan por si solos, deben llevar un atributo de apoyo para ejecutarse demanera apropiada, esto se define en la etiqueta de apertura. Ejemplo:

Para que le quede ms claro a continuacin se har uso de un atributobgcolor en la etiqueta body.

ejercicio 2

Usando propiedades

Una etiqueta puede contener ms de un atributo, muchas etiquetas com-parten atributos o tienen unos propios predefinidos que se conocern msadelante cuando profundice en l.

Estructura etiqueta con atributo.

Introduccin HTML

5


6/53

1.2 Etiquetas HTMLConozca esta primera lista de etiquetas, para luego ponerlas en prctica.

Introduccin HTML

6

Etiqueta

Definicin

Lleva la informacin respecto al documento web,tambin pueden incluir secuencias de comandos,estilos, informacin de meta, y libreras de cdigo.Esta etiqueta define el ttulo del documento y esrequerido en todas las pginas.

Contiene todo lo que comprende en un documentoHTML, como texto, hipervnculos, imgenes, tablas,listas, toda la informacin que se imprimir en la

interfaz de usuario.Define un prrafo.

hasta

Salto de lnea.

Define encabezados del documento de manerajerrquica desde h1 que es el mayor hasta h6 quees el menor.

Define texto en negrilla.

Define texto en itlica .

Define el texto como escritura de teletipo.

Define un hipervnculo.

Inserta imagen en el documento.

Define el formato y estilo de la fuente tipogrfica(Nota: esta etiqueta desaparece en html5 ya que

los elementos estticos se definen con el CSS).

Define una abreviacin.


7/53Introduccin HTML

7

Etiqueta

Definicin

Define que elemento debe estar centrado. (Nota:esta etiqueta desaparece en html5 ya que loselementos estticos se definen con el CSS.)

Define una lista ordenada (Necesita de la etiqueta para definir sus objetos de lista).

Define una lista desordenada (Necesita de laetiqueta para definir sus objetos de lista).

Define un objeto de la lista.

Crea una lista de definiciones.

Especifica el color de fondo de la pgina

Pone una imagen de fondo de la pgina.

Especifica el color de un enlace (link)no visitado.Especifica el color de un enlace (link)activo.

Especifica el color de un enlace (link)que ya fue visitado.

Especifica el color de texto del documento.

Define un trmino de una lista de definiciones.

Define la descripcin de un trmino en una lista dedefiniciones.

Define en el documento una lnea horizontal con unsalto de lnea antes y despus.

Ejemplos

Etiqueta Atributos del body


8/53

Los valores se pueden ingresar en RGB, Hexadecimal y el nombre eningls.

color en RGB color en hexadecimal color en hexadecimal

Nota: Para HTML5 todo lo esttico de la pgina se har con los estilos CSSEtiqueta

Me permite determinar los prrafos.

Esto es un prrafo, debe contener una etiqueta que abre y

cierra en cada prrafo de la informacin

En la interfaz de usuario estos dos textos se vern separa-

dos por prrafos

La etiqueta adems de los atributos estndares cuenta con el atributoalign

Introduccin HTML

8
Ubica el prrafo hacia la izquierda(est por defecto). Ubica el prrafo hacia la derecha. Justifica el prrafo hacia el centro. Justifica el prrafo de texto.
Nota: En html5 todo lo que es esttico se hace a travs del CSSEtiqueta
EL
permite hacer un salto de lnea dentro de un prrafo, no necesitade otra etiqueta que cierre, en XHTML se cierra de esta manera
.

este prrafo se parte

en dos lneas

Etiqueta Define el ttulo del artculo o segmentoEste es el encabezado principal de la pgina

Este encabezado es el segundo en importancia

Este podra ser otro encabezado


9/53

9

Introduccin HTML

La etiqueta adems de los atributos estndares cuenta con el atributoalign

Ubica el titular hacia la izquierda

(est por defecto). Ubica el titular hacia la derecha.

Ubica el titular hacia el centro.

Nota: En html5 todo lo que es esttico se hace a travs del CSS

Etiqueta Necesito que darle importancia a este lenguajeHTML

EtiquetaEl siguiente texto estar en itlicaEtiquetaEl siguiente texto estar en teletipoEtiqueta

La etiqueta no puede funcionar por s sola, es necesario declararalguno de los atributos que ella maneja.

Estos son los atributos de la etiqueta

charset coords href hreflang name rel rev shape

target


10/53

10

Introduccin HTML

Solo se har nfasis en estos tres:

Ejemplos

Marca una zona que visitar el

vnculo.. Realiza el enlace donde saltar la

pgina.

Marca una zona que visitar el vnculo.

. Especifica cmo har el vnculo a laotra pgina.


11/53

11

Introduccin HTML

Tambin se puede vincular de una pgina local a otra como explica lasiguiente grfica.

Tambin se puede vincular a otras pginas externasVisita nuestra pgina

Abre el documento vinculado en unanueva ventana o pestaa.

Abre el documento vinculado en lamisma ventana (esto es el valor pordefecto).

Abre el documento vinculado en elmarco contenedor.

Abre el documento vinculado en elcuerpo de la ventana.

Etiqueta

La etiqueta img requiere de los siguientes atributos: src que llevarcomo valor la ruta de la imagen y alt que especifica el texto alternativode la imagen.Esta etiqueta no necesita otra de cierre, en XHTML se cierra al final de la

etiqueta de apertura similar al


12/53

12

Introduccin HTML

Segn el valor indicado ubica la imagenen el navegador sus posibles valores son: Top Bottom Middle Left right

Genera un borde en la imagen, el grosor

se especifica en el nmero de pixeles.

Modifico el alto de la imagen ya sea enpixeles o porcentaje (50px) (50%).

Modifico el ancho de la imagen ya sea enpixeles o porcentaje (50px) (50%).

Agrega un espacio horizontal en la i

magen con un valor de px.

Agrega un espacio vertical en la imagencon un valor de px.

Ejemplo:

Nota: los formatos clsicos para adjuntar la imagen son: gif, jpg y png.

Los atributos opcionales que posee la etiqueta son:


13/53

13

Introduccin HTML

Nota: Al utilizar HTML5 todas las modificaciones estticas se hacen atravs del CSS.

Etiqueta

Esta etiqueta necesita los siguientes atributos.

Este texto es rojo, est en Arial y tamao 6

Como ya se cerr la etiqueta Font este texto vuelve a la normalidad Este texto es verde

No necesariamente se deben usar todos los atributos, puede usar el querequiera en el momento.

Cambia el color de la fuente, se puedeinsertar el nombre en ingls, hexadecimalo rgb.Modifica el tamao de la fuente, losposibles valores son de 1 a 7, el tamaopor defecto del navegador es 3.

Cambia la fuente tipografa deldocumento.

Agrega un espacio horizontal en la imagen con un valor de px.

Agrega un espacio vertical en la imagencon un valor de px.


14/53

14

Introduccin HTML

Etiqueta

Para trabajar con la etiqueta abreviacin es necesario el atributo (Title),donde se especificar el significado de la abreviacin que luego se mos-trar en el navegador.

SENA En el navegador veremos algo como esto al pasar el mouse sobre el textoSENA.

Etiqueta

Define qu elementos deben aparecer centrados en el navegador.

este prrafo tambin est centrado

Ejemplo de vista en el navegador.

este prrafo tambin est centrado


15/53

15

Introduccin HTML

Etiquetas

Define una lista ordenada en el navegador, pero necesita de la etiqueta para definir cada tem de lista.

Etiquetas Define una lista no numerada en el navegador, pero necesita de la etique-ta para definir cada tem de lista.

Atributos del

1. tem 12. tem 23. tem 34. tem 4

Cdigo HTML

tem 1tem 2tem 3tem 4

Vista del Navegador

Define desde que nmero debe empezarla lista.

Define la forma de numeracin de la lista.: Lista numrica ordenada(por defecto) .: Lista ordenada alfabtica-mente, en minsculas.

: Lista ordenada alfabtica-mente, en mayscula.: Nmeros romanos, en mi-nsculas (i, ii, iii, iv): Nmeros romanos, de lasmaysculas (I, II, III, IV).

Cdigo HTML

Vista del Navegador

Cdigo HTML Vista del Navegador tem 1 tem 2 tem 3 tem 4

tem 1 tem 2 tem 3 tem 4


16/53

16

Introduccin HTML

Cdigo HTML Vista del Navegador

tem 1 tem 2 tem 3 tem 4

Atributo

Etiquetas

Crea una lista de definiciones en el navegador, para crearlas es necesariomanejar las tres etiquetas.


17/53

Segn el valor indicado ubica la lneahorizontal en el navegador susposibles valores son: left center right

Elimina el efecto de sobra que traepor defecto la lnea horizontal.

Especifica el alto de la lnea horizontalen pixeles.

Especifica el ancho en pixeles oporcentaje de la lnea horizontal, encaso que no se utilice el atributo widhtel ancho de la lnea seria del ancho dela pgina.

17

Introduccin HTML

Etiquetas

Crea una lnea horizontal en el documento HTML, no tiene una etiqueta decierre, en XHTML se cerrara de esta manera .Estos son los atributos de la etiqueta


18/53

18

Introduccin HTML

1.3 Tablas en HTML

El objetivo de las tablas es mostrar los datos en forma ordenada, organi-zndolas por filas y columnas, antiguamente se estructuraba toda lapgina a travs de tablas, hacer esto en la actualidad sera una mala prc-tica ya que con las nuevas etiquetas HTML5 y los estilos en cascada sepueden lograr mejores resultados, pero en ocasiones pueden ser tiles.Las tablas se definen con la etiqueta .

Un cuadro est dividido en filas (con la etiqueta ), cada fila se divideen celdas (con la etiqueta ). Una etiqueta puede contenertexto, enlaces, imgenes, listas, formularios, otras tablas.

Ejemplo de tabla

fila 1, celda 1

fila 1, celda 2

fila 2, celda 1

fila 2, celda 2

Etiqueta

La etiqueta necesita de para estructurarse bien,cuenta con los siguientes atributos.


19/53

19

Introduccin HTML

Define que parte interior de los bordesse debe mostrar.Estos son sus posibles valores none groups rows cols all

Segn el valor indicado ubica la tablaen el navegador, sus posibles valoresson: Left Center Right

Especifica el color de fondo de la tabla,los valores pueden ir en rgb, hexadeci-mal o el nombre del color en ingls.

Especfica el tamao de borde enpixeles de la tabla, Si no se especificala tabla se muestra sin bordes.

Define el espacio en pixeles entre lacelda y el contenido de la celda.

Define el espacio en pixeles entre lasceldas.

Especifica que parte de los bordes dela tabla sern visibles.Estos son sus posibles valores void above below hsides lhs rhs vsides box border


20/53

20

Introduccin HTML

EL summary contiene una pequeadescripcin de lo que contiene la tabla,no tiene ningn efecto visual en lainterfaz, pero podr ser utilizado por lectores de pantalla.

Describe una versin corta delcontenido de la celda.

Especifica la alineacin del contenidoal interior de la celda.Estos son sus posibles valores. left right center justify char

Especifica el color de fondo de la celda,los valores pueden ir en rgb,hexadecimal o el nombre del color eningls.

Especifica el nmero de columnas queabarcar la celda.

Especifica el nmero de filas queabarcar la celda.

Determina la alineacin vertical en elcontenido de la celda.Estos son los posibles valores. top middle bottom baseline

Especifica el ancho de la tabla enpixeles o porcentaje.

Etiqueta

Define una celda dentro de una tabla, estos son sus diferentes atributos.


21/53

21

Introduccin HTML

Determina el alto de la celda.

Especifica el color de fondo de la fila,los valores pueden ir en rgb,hexadecimal o el nombre del color eningls.

Determina la alineacin vertical en elcontenido de la fila.Estos son los posibles valores. top middle bottom baseline

Especifica la alineacin del contenidoal interior de la fila.Estos son sus posibles valores.

left right center justify char

Determina el ancho de la celda.

Etiqueta

Define una fila dentro de una tabla, estos son sus diferentes atributos.

La etiqueta Esta etiqueta define los encabezados de las celdas, es muy simi-lar al de hecho manejan los mismos atributos.


22/53

22

Introduccin HTML

Ejemplo

Encabezado 1

Encabezado 2

fila 1, celda 1

fila 1, celda 2

fila 2, celda 1fila 2, celda 2


23/53

16

Introduccin HTML

23

Introduccin HTML

2. HTML5

2.1 Novedades

HTML5 es la ltima versin de HTML, es creado entre el Consorcio WorldWide Web (W3C) y la Red de hipertexto Aplicacin de Tecnologa delGrupo de Trabajo (WHATWG).Desde el 2006 se est trabajando en la implementacin del HTML 5,estas son algunas novedades que se establecieron para el HTML5: Las nuevas caractersticas se basan en HTML, CSS, DOM y JavaS-cript. Reducir la necesidad de plugins externos (como Flash). Mejor manejo de errores. Nuevas etiquetas para reemplazar programaciones estandarizadas

por los diseadores. Nuevas etiquetas de formulario para el mejor manejo de datos. Permite la integracin de diferentes medios (Audio, Video), sinlenguajes complementarios. Soporte completo a CSS3. Grficos 2d y 3d. Nuevas etiquetas y atributos, contenidos especficos como , , , , .HTML5 se est estandarizando en todos los navegadores, se espera quepara el 2014 este totalmente soportado en los diferentes navegadores.


24/53

24

Introduccin HTML

2.2.Estructura HTML5

Hacer un documento de HTML5 es simple a continuacin se muestra laestructura con el mnimo de etiquetas necesarias:

Titulo del documento

Contenido del documento

La declaracin , es una instruccin para que el navega-dor identifique en qu versin de HTML estaest realizada la pgina, estadebe ir antes de abrir la etiqueta .Los cambios en estructura bsica no son muchos en comparacin con elHTML4.

Cuando se implementa las etiquetas de contenido es donde se empieza amarcar la diferencia entre ambas versiones.Ejemplo de estructuras en HTML4 y HTML5.


25/53

25

Introduccin HTML

Se aplicar la misma estructura pero desde HTML5

Se pueden identificar muchas nuevas etiquetas las cuales se explicarn

en el transcurso del documento.2. Etiquetas de Estructura HTML 5

Se implementan nuevas etiquetas para mejorar la estructuracin de lapgina web, a continuacin se listan algunas.Etiquetas principales de estructura: , , , , .Etiquetas complementarias de estructura: , ,, , , , , ,, , , , , ,.


26/53

26

Introduccin HTML

Etiqueta

La etiqueta especifica un encabezado de documento o seccinse utiliza como contenedor para un texto introductorio o un conjunto deenlaces de navegacin.

En una misma pgina web se pueden tener varias etiquetas .Nota: Una etiqueta no se puede ubicar dentro de un , u otro elemento .

es compatible en todos los navegadores, excepto con las ver-siones inferiores a INTERNET EXPLORER 8.

Ejemplo cdigo

HTML5

HTML5 (HyperText Markup Language, versin 5) es la quinta

revisin importante del lenguaje bsico de la World Wide We-

b

Etiqueta

La etiqueta especifica las secciones de un documento. Talcomo captulos, encabezados, pies de pgina o cualquier otra seccin del

documento.

En un mismo documento se pueden tener tantas etiquetas como sean necesarias.

es compatible en todos los navegadores, excepto con las ver-siones inferiores a INTERNET EXPLORER 8.

Ejemplo cdigo

What is WebFonts?

WebFonts is a technology that enables people to use fonts

on demand over the Web without requiring installation in the

operating system. W3C has experience in downloadable fonts

through HTML, CSS2, and SVG. Until recently, downloadable fonts

have not been common on the Web due to the lack of an interope-

rable font format. The WebFonts effort plans to address that

through the creation of an industry-supported, open font format

for the Web (called "WOFF").


27/53

27

Introduccin HTML

Etiqueta

La etiqueta define un contenido independiente de la pgina, dis-tribuible o reusable. Es decir que si se elimina la etiqueta , secambia de lugar en la pgina o se traslada para otra pgina, esta accinno afectar el contenido del resto de la pgina.

Las fuentes potenciales para el elemento : Mensajes Foro Masajes de Blogs Noticias Comentarios es compatible en todos los navegadores, excepto con las versio-nes inferiores a INTERNET EXPLORER 8.

Ejemplo cdigo

Impresionismo

El movimiento plstico impresionista se desarroll a partir

de la segunda mitad del siglo XIX en Europa principalmente en

Francia caracterizado, a grandes rasgos, por el intento de

plasmar la luz (la impresin visual) y el instante, sin repa-

rar en la identidad de aquello que la proyectaba.

Etiqueta

La etiqueta especifica una seccin de enlaces de navegacin.El elemento debe contener solo el bloque principal de los vnculosde navegacin y no debe utilizarse para especificar vnculos asilados.

El ideal es utilizar solo una vez por pgina la etiqueta< nav>, solo para elbloque principal de vnculos (men botonera).

Ejemplo cdigo

Teora del color |

Ley de tercios |

Concepto de la imagen |

es compatible en todos los navegadores, excepto con las versionesinferiores a INTERNET EXPLORER 8.


28/53

28

Introduccin HTML

Etiqueta

La etiqueta define un extra del contenido principal de la pgina,es decir una informacin complementaria ya sea relacionada con el temao no.Es utilizado en ocasiones para elementos publicitarios o comerciales.Con ayuda del CSS se puede ubicar como barra lateral del artculo.Ejemplo cdigo

Al cliente le gusto la propuesta del diseo realizado en

photoshop.

Photoshop: Software de edicin de imgenes

es compatible en todos los navegadores, excepto con las versio-nes inferiores a INTERNET EXPLORER 8.

Etiquetas y

La etiqueta define un texto de detalles tipo apndice, el cual semuestra o se oculta segn la demanda del usuario. Por defecto el textoencabezado de la pestaa dice Detalles.

Ejemplo cdigo:El sitio web fue realizado en Ajax

AJAX, acrnimo de Asynchronous JavaScript And XML (JavaS-

cript asncrono y XML), es una tcnica de desarrollo web para

crear aplicaciones interactivas o RIA (Rich Internet Applica-

tions).


29/53

29

Introduccin HTML

Vista usuario inactivo

Vista usuario activo al click del mouse.

Tiene el atributo open que declara si la pestaa debe estar desplegada al

momento de cargar la pgina.

Ejemplo

< summary >La etiqueta especifica el texto encabezado de la pestaacreada por la etiqueta

Ejemplo cdigo.

El sitio web fue realizado en Ajax

Ver ms

AJAX, acrnimo de Asynchronous JavaScript And XML (JavaS-

cript asncrono y XML), es una tcnica de desarrollo web para

crear aplicaciones interactivas o RIA (Rich Internet Applica-

tions).

Vista usuario y inactivo

Las etiquetas y a la fecha de creacin de estedocumento 2012, solo tiene soporte por el navegador Google CHROME.Nota: Recuerde poner en prctica cada ejemplo para tener una mayor cla-ridad del concepto.


30/53

30

Introduccin HTML

Etiqueta

Define un texto marcado tipo resaltador, esto con el fin de darle ms

importancia o remarcar parte del contenido.Ejemplo Cdigo.

Recuerda estudiar el cdigo todos los das

Vista Navegador

Etiqueta

La etiqueta define un indicador escalado de un valor conocido,ejemplo: los resultados de una encuesta, examen, etc.


31/53

31

Introduccin HTML

Para optimizar el uso de la etiqueta se cuenta con los siguientesatributos:

Ejemplo cdigo:Resultados Examen

Carlos:

Andrs:

Juan:

Pedro:

Atributo Descripcin

value Especfica el valor actual en el que se encuentra el porcentaje,este valor es obligatorio, ya que sin l la grfica se mostraravaca.

min Especfica el valor mnimo del rango de porcentaje.

max Especfica el valor mximo del rango de porcentaje.

high Especfica a partir de qu valor se debe considerar como unporcentaje alto.

low Especfica a partir de qu valor se debe considerar como unporcentaje bajo.

optimum Especfica cul es el valor ptimo del porcentaje.


32/53

32

Introduccin HTML


33/53

25

Introduccin HTML

33

Introduccin HTML

Atributo Descripcin

src Especifica la url o direccin de donde se encuentra el archivo deaudio que ser incrustado en el documento web.

autoplay Indica que el audio comenzar a reproducirse de maneraautomtica en cuanto la pgina est totalmente cargada.

controls Especifica si los controles de reproduccin se deben mostrar demanera automtica.

El diseo de los controles de reproduccin viene por defecto segn

el navegador.

Google Chorme

Mozzila Firefox

Opera

Safari

Internet Explorer

loop Especifica si el audio debe repetirse una y otra vez en un ciclointerminable.

Debe usarse con cuidado ya que un sonido continuo puede sermolesto para el usuario.

preload Indica la forman en la que el navegador har la precarga delsonido.Tiene tres posibles valores:


34/53

34

Introduccin HTML

Formatos de audio soportados en la web.

Diferentes extensiones de audio pueden ser utilizadas en HTML5.

Estos son los formatos ms comunes.

Formato Audio Detalles

Ogg vorbis Puede ser comprimido a un archivo de poco peso y aunas mantener una buena calidad en el sonido, es idealpara reducir el costo en el ancho de banda y el trabajo enstreaming.

Extensin de archivo (.ogg)

MP3 Un MP3 puede comprimirse usando una mayor o menortasa de bits por segundo, resultando directamente en unamayor o menor calidad de audio final, as como en eltamao del archivo resultante.

MP3 es uno de los formatos de archivos ms populares.

Extensin de archivo (.mp3)

WAV Se utiliza principalmente sin ningn tipo de compresin loque genera una excelente calidad de audio, es adecuadopara uso profesional principalmente en CD de Audio.

Su uso en internet no es muy popular ya que los archivossin compresin consumen gran cantidad de ancho debanda.

Extensin de archivo (.wav)

ACC Es un formato que logra una gran compresin de datossin perder calidad.

Fue diseado para ser el sucesor del MP3, por esa raznpuede lograr archivos de menos peso y con una mejorcalidad de audio al MP3.

Extensin de archivo (.m4a, .m4b, .m4p, .m4v, .m4r,.3gp, .mp4 y .aac)


35/53

25

Introduccin HTML

Soportes de los navegadores para formatos de audio.

Cada navegador presta diferente soporte a los distintos archivos de audio.

Se mostrar en la tabla a partir de que versin del navegador est dispo-nible el soporte al archivo de audio.

Ejemplo Mtodo 2

Este mtodo es ms utilizado ya que con ell se pueden vincular variosformatos de audio en la misma etiqueta, evitando posibles problemas desoporte con los navegadores.

Con la ayuda de la etiqueta ms el atributo src, se puedenespecificar varias fuentes de audio.

Nota: Si el navegador no soporta el archivo de audio, el sonido no se re-producir.

Aplicacin etiqueta Audio.

Los archivos de audio se pueden incrustar de dos maneras, con el atributosrc de la etiqueta o con la ayuda de la etiqueta .

Ejemplo mtodo 1.

Formato Navegador

OggVorbis

Firefox 3.5 Chorme 5 Opera 10.5

MP3 Safari 5 Chorme 6 IE 9 IOS 3

WAV Firefox 3.6 Chorme 8 Safari 5 Opera 10.5

ACC Safari 3 Chorme 5 IE 9 IOS 3 Android 2

35

Introduccin HTML


36/53

Soportes de los navegadores para formatos de audio.

Cada navegador presta diferente soporte a los distintos archivos de audio.

Se mostrar en la tabla a partir de que versin del navegador est dispo-nible el soporte al archivo de audio.

Cdigo:

Your browser does not support the audio tag.

La etiqueta toma el papel del atributo src en la etiqueta deapertura

Etiqueta

es una nueva etiqueta la cual permite incrustar archivos de videoen el documento web.

HTML 5 implementa la etiqueta para no tener que recurrir a len-guajes y pluguins externos a la hora de insertar un video.La etiqueta cuenta con los siguientes atributos:

36

Introduccin HTML


37/53

Atributo Descripcin

src Especifica la url o direccin de donde se encuentra el archivo devideo que ser incrustado en el documento web.

autoplay Indica que el video comenzar a reproducirse de maneraautomtica en cuanto la pgina est totalmente cargada.

controls Especifica si los controles de reproduccin se deben mostrar demanera automtica.

El diseo de los controles de reproduccin viene por defectosegn el navegador.

Google Chorme

Mozzila Firefox

37

Introduccin HTML


38/53

38

Introduccin HTML

Opera

Safari

Internet Explorer


39/53

loop Especifica si el video debe repetirse una y otra vez enun ciclo interminable.

preload Indica la forman en la que el navegador har la precargadel video.Tiene tres posibles valores:

preload=none: le informa al navegador de no hacer laprecarga del video.

preload=metadata: le informa al navegador de solo

hacer la precarga de los metadatos del archivo de video(ancho, alto, duracin, nombre etc).

preload=auto: Accin por defecto, el navegador decidesi hace la precarga de metadatos o no. Por lo general elarchivo se precarga al momento de cargar la pgina.

muted Especifica que el archivo de video debe tener el canal de

audio en silencio, sin importar si se est reproduciendoel video.

poster Especifica una imagen de muestra mientras el video esten estado de carga o sin reproducirse.

Si el poster no est especificado, se mostrar el primerfotograma del video.

39

Introduccin HTML


40/53

Formatos de video soportados en la web.

Diferentes extensiones de video pueden ser utilizadas en HTML5.

Estos son los formatos ms comunes.

40

Introduccin HTML

Formato Audio Detalles

Theora OGG Theora es un mtodo de compresin de vdeo.

El vdeo comprimido puede ser almacenado en cualquiercontenedor multimedia conveniente.

Uno de los principales propsitos de este tipo de video esel bajo consumo de CPU.

MP4 MP4 permite transmitir flujos de audio, vdeo y texto conuna buena compresin de peso y conservando unacalidad alta de imagen y audio.

Es un formato muy comn en Ipod y Itunes gracias a subajo peso en relacin con la calidad de imagen y sonido.

WebM Es un formato de video desarrollado por GOOGLE,orientado a usarse en HTML5.

Est compuesto por el cdec de vdeo VP8 (desarrolladooriginalmente por On2 Technologies).

Cuenta con el apoyo de grandes compaas como Adobe,Microsoft, Mozilla.


41/53

41

Introduccin HTML

Soportes de los navegadores para formatos de video.

Cada navegador presta diferente soporte a los distintos archivos de video.

Se mostrar en la tabla a partir de que versin del navegador est dispo-nible el soporte al archivo de video.

Nota: Si el navegador no soporta el archivo de video, este no se reprodu-cir.

Aplicacin etiqueta Video.

Los archivos de video se pueden incrustar de dos maneras, con el atributosrc de la etiqueta o con la ayuda de la etiqueta .

Ejemplo mtodo 1.Cdigo

Formato Navegador

OggVorbis

Firefox 3.5 Chorme 5 Opera 10.5

Mp4 Safari 3 Chrome 5 IE9 IOS Android 2

WebM Firefox 4 Chrome 6 Opera 11 IE9 Android 2.3


42/53

42

Introduccin HTML

Ejemplo Mtodo 2

Este mtodo es ms utilizado ya que con ell se pueden vincular varios

formatos de video en la misma etiqueta, evitando posibles problemas desoporte con los navegadores.

Con la ayuda de la etiqueta ms el atributo src, se puedenespecificar varias fuentes de video.Cdigo:

Your browser does not support the video tag.

La etiqueta toma el papel del atributo src en la etiqueta deapertura .

Etiqueta

La etiqueta se utiliza para especificar varios tipos de archivosde alternativos para mejorar el soporte en los navegadores.

los siguientes atributos son los ms usados en la etiqueta :

Atributo Descripcin

src Especifica la url o direccin de donde se encuentra el archivo devideo que ser incrustado en el documento web.

type Indica el formato del medio que ayuda al navegador a determinarsi puede reproducir cierto recurso o no.

Los tipos de archivos ms comunes son:

Formatos audio

audio/ogg

audio/mp3

Formatos video

video/mp4

video/ogg

video/webm

Estos valores son dados por MIME type of the media resource.


43/53

Ejemplo cdigo

Etiqueta

La etiqueta especfica pistas de texto para los elementos multi-media ( y ).Se utiliza para introducir subttulos o leyendas de texto al momento deestar reproduciendo un video o cancin.La etiqueta a la fecha de creacin de esta documento ao 2012,no est soportada por ninguno de los navegadores.

2.4. Elemento de dibujo HTML5

HTML 5 incluye la forma de crear dibujo por medio de vectores, estasherramientas pueden parecer simples pero implementndolas con JAVAS-CRIPT se pueden crear las mejores interacciones y hasta juegos.

Etiqueta

Canvas crea un lienzo el cual se utiliza para dibujar grficos sobre lamarcha, a travs de secuencias de comandos principalmente en JAVAS-CRIPT.El elemento es slo un lienzo que contendr los grficos.

Etiqueta

Es la sigla en ingls de (Scalable Vector Graphics), es utilizado para definirvectores basados en grficos para la web.Define los grficos en formato XML y no pierden calidad por ms que seescale la imagen, adems de esto cada elementos del SVG se puedeanimar.

Para utilizar SVG se deben conocer ciertas funciones creadas por la W3Cpara aplicar formas y figuras.

43

Introduccin HTML

43

Introduccin HTML


44/53

3. Actividades de afianzamiento

44

Introduccin HTML

1. Cul es la estructura correcta de html4?a.

b.

c.


45/53

2. Cul es la estructura correcta de html5?a.

c.

b.

45

Introduccin HTML


46/53

3. Cul de la siguientes etiquetas NO es de las nuevasincluidas en HTML5?

4. es la etiqueta que se utiliza para relacionar lanavegacin de la pgina, es recoemndable utilizar una

etiqueta por cada tem de men

Verdadero( ) Flaso( )

a. b. c. d.

46

Introduccin HTML


47/53

5. Cul es el consorcio responsable de regular losestandares de HTML?

a. HTMLb. W3Cc. CSSd. XHTML

6. La etiqueta que se utiliza para especificar varios tiposde archivos alternativos para mejorar el soporte enlos navegadores es:

a. b. c.

47

Introduccin HTML


48/53

7. De la siguiete lista cul NO es parte de los atributos dela etiqueta ?

a. valueb. srcc. maxd. high

8. Cul es una estructura correecta de usar la etiqueta?

a. .b. .c. .d. .

48

Introduccin HTML

Para ver las respuestas correctas gira el texto 180R/.1b;2a;3d;4Falso;5b;6b;7b;8c.


49/53

49

Introduccin HTML

4. Recursos Bibliogrficos

Guia HTML5, En maestros del web, Foro de desarrollo web, recuperadoel 15 de junio de 2013, Disponible:http://www.maestrosdelweb.com/-guias/#guia-html5

Glosario HTML, En Codeacademy, Portal de aprendizaje, recuperado el15 de junio de 2013,Disponible: http://www.codecademy.com/es/glos-sary/html

HTML, En w3schools, Escuela de desarrollo, recuperado el 15 de junio de2013, Disponible:http://www.w3schools.com/html/default.asp

Pginas Wen HTML5, en Programando la, Formacin para desarrollado-res, recuperado el 15 de junio de 2013, Disponible:http://programan-do.la/

Diccionario de etiquetas, en HTML5Facil, formacin para desarrolladores,Diponible: http://html5facil.com/diccionario-etiquetas


50/53

50

Introduccin HTML

5. Glosario

Navegador:Programa que permite leer documentos en la Web y seguirenlaces (links) de documento en documento de hipertexto. Sin ellos no sepodra acceder a los recursos de la WWW. Los navegadores ms usadosson google chrrhome, Mozilla Firefox, Internet Explorer y Safari

Banner:Grfico publicitario dentro de una pgina Web, en general ubica-do en la parte superior al centro. Haciendo un clic sobre l, se puedellegar al sitio del anunciante.

Buscador: Herramienta que permite encontrar contenidos en la Red,buscando a travs de palabras clave. Los masms utilizados son Google y

Bind

Chat: Sistema de conversacin en lnea que permite que varias personasde de diferentes lugares con conexin a internet se escriban en mensajesinstantaneosinstantneos.

Direccin IP:La direccin IP de una mquina conectada a Internet es unnmero que identifica a esa mquina Las direcciones IP constan de cuatronmeros separados por puntos, como 123.456.1.1 Como estos nmerosson difciles de recordar, a cada mquina se le asigna tambin un nombre,su nombre de dominio.

Dominio:El dominio, o nombre de dominio, sirve para identificar cadaservidor conectado a Internet con un nombre que sea ms fcil de recor-dar (para un humano) que una direccin IP. Un nombre de dominio estcompuesto de varias partes que suelen dar una idea de la localizacinfsica de la mquina. Un ejemplo de dominio puede ser www.sena.edu.-cowww.sena.edu.co

Download:Es el proceso de descargar archivos desde la web al discoduro de la computadora

Flash: Tecnologa que permite desplegar animaciones, sonidos e interac-tividad en un browser a travs de un plug-in.

FTP (File Transfer Protocol, Protocolo de Transferencia de Archi-vos):Servicio de Internet que permite transferir archivos (upload y down-load) entre computadoras conectadas a Internet.


51/53

51

Introduccin HTML

Hipertexto: Forma de organizar informacin donde ciertos trminosestn unidos a otros mediante links. El hipertexto permite saltar de unpunto a otro en un texto o en otros textos al hacer clic en un link.

Hiperlink : Enlace entre dos nodos de un hipertexto.

Index.html: La primera pgina que aparece cuando un usuario entra aun sitio Web, que generalmente tiene links a las dems pginas

Host o Hosting: Servidor que alberga a uno o varios sitios.

HTML (Hypertext Markup Language: Lenguaje de Marcado de Hipertexto)

HTTP: (Hypertext Transfer Protocol: Protocolo de Transferencia de Hiper-texto) Es el mecanismo de intercambio de informacin que constituye labase de la WWW., el protocolo a travs del cual se comunican el cliente yel servidor.

Internet : La red ms grande de computadoras en el mundo, literalmenteuna "red de redes", que utilizan un mismo protocolo de comunicacinpara intercambiar informacin, ya sea en forma de e-mail, pginas web,ftp, etc.

Intranet: Utilizacin de la tecnologa de Internet dentro de la red local(LAN) de una organizacin. Permite crear un sitio pblico donde se cen-traliza el acceso a la informacin de la compaa. Una Intranet permiteoptimizar el acceso a los recursos de una organizacin, organizar losdatos existentes en las PCs de cada individuo y facilitar la colaboracinentre los miembros de equipos de trabajo.

IP: (Internet Protocol: Protocolo de Internet) Estndar de comunicacio-nes de Internet. El IP provee un mtodo para fragmentar (deshacer enpequeos paquetes) y rutear (llevar desde el origen al destino) la infor-

macin.Java: Llenguaje de programacin diseado para Internet, utilizado paracrear aplicaciones completas o pequeas aplicaciones (applets) para serinsertados en una pgina Web.


52/53

52

Introduccin HTML

Javascript: Lenguaje de derivado de Java, pero con instrucciones muchoms simples para utilizar en pginas Web, que permite aumentar la inte-ractividad y la personalizacin de un sitio.

Link: Conexin entre dos documentos web, que puede ser a travs de untexto, grfico, o botn, y permiten al usuario saltar a otro documento (enel mismo sitio o en otro) al hacer clic sobre l

Pgina Web: Archivo hecho con el lenguaje de programacin HTML. Ge-neralmente, contiene textos y especificaciones que le indican en donde sedeben desplegar las imgenes o los archivos multimedia. Cada pginaWeb es un archivo creado en HTML con su propia direccin en Internet

(URL).Resolucin: Cantidad de pixeles, o puntos de color, que se encuentran enuna determinada rea (la medida estndar son pixeles por pulgada oppp). Un archivo de 300 ppp tiene mejor calidad que uno de 150 ppp,pero tambin tendr un peso mayor. El estndar para internet son 72 ppp.Resolucin de monitor: Nmero de pixeles que se pueden desplegar, esdecir, el tamao de la "pantalla". Puede variar enormemente, pero para eldiseo en internet se toma 800x600 pixeles como medida mnima.


53/53

Control de documentoConstruccin Objeto de Aprendizaje

Introduccin a HTML

Carlos Alberto Espinosa GmezProduccin multimedia

Programador

Lder expertos temticos

Lder lnea de produccin Santiago Lozada Garcs

Tatiana Acosta Patio

Roberto Chajn Ortz

Jesualdo Morantes MezaDesarrollador de contenidoExperto temtico

Asesor pedaggicoLuis Antonio Surez Martnez

Maria Teresa Camargo Serrano

6. Crditos

Ecomerce HTML

Documents

Transcript of Ecomerce HTML