Taller de Pg.

Web

Ing. Alonso Veloz Arce

# 0994170604
alonsoveloz3010@gmail.com
Tw: @alonsoveloza

Estandarizaci
n WEB

Los estndares web son un conjunto de recomendaciones

dadas por elWorld Wide Web Consortium (W3C)y otras
organizaciones internacionales acerca de cmo crear e
interpretar documentos basados en el Web.

Son un conjunto de tecnologas orientadas a brindar

beneficios a la mayor cantidad de usuarios, asegurando la
vigencia de todo documento publicado en el Web.

El objetivo es crear un Web que trabaje mejor para todos,

con sitios accesibles a ms personas y que funcionen en
cualquier dispositivo de acceso a Internet.

Validador CSS

Para hacer ms fcil el cumplimiento con elestndar CSS, el

W3C ha creado lo que se ha denominado comovalidador, que
es un programa que interpreta las hojas de estilo y devuelve un
informe de estado en el que se listan los errores y avisos, en el
caso de que el cdigo CSS no sea vlido.

Para facilitarte la validacin de tus hojas de estilo, lo puedes

hacer directamente desde esta pgina
http://jigsaw.w3.org/css-validator/. Reemplaza sin ms la URL
que aparece en el cuadro de texto con la URL de tu hoja de
estilo y haz clic para validarla. Posteriormente, se te informar
desde el sitio del W3C si se han encontrado errores.

Si el validador no encuentra ningn error, se mostrar la

imagen siguiente, que podrs poner en tu sitio web para
demostrar que usas cdigo validado.

Estandarizaci
n de imgenes

 La Web es algo ms que texto e informacin, sino que tambin es un

medio para la expresin de la creatividad artstica, la visualizacin de
datos, y la optimizacin de la presentacin de la informacin para
diferentes audiencias con diferentes necesidades y expectativas.
El uso de grficos en los sitios Web mejora la experiencia de los
usuarios.

Qu son los grficos?

Grficos web son representaciones visuales utilizados en un sitio Web
para mejorar o permitir la representacin de una idea o sentimiento,
con el fin de llegar al usuario del sitio Web.
Los grficos pueden entretener, educar, o impactan emocionalmente
al usuario, y son cruciales para la fuerza de la marca, la claridad de la
ilustracin, y la facilidad de uso de interfaces.
Ejemplos de grficos incluyen mapas, fotografas, diseos y patrones,
rboles genealgicos, diagramas, planos de arquitectura o ingeniera,
grficos de barras y grficos circulares, tipografa, esquemas, dibujos
lineales, diagramas de flujo, y muchas otras formas de imagen.

Qu es PNG?
Portable Network Graphics (PNG) es un formato de archivo esttico
para la prdida, porttiles, almacenamiento bien comprimido y el
intercambio de imgenes raster (bitmaps).Cuenta con control de color,
con color indexado, escala de grises y color verdadero apoyo y la
transparencia de canal alfa.PNG est diseado para la web, con
capacidades de renderizacin progresiva y fluida.Es apoyado por
doquier en los navegadores Web, herramientas grficas, herramientas
de edicin de imgenes, y otras partes de la cadena de herramientas
creativas.PNG tienen la extensin ". PNG" o ". Png" y deben ser
desplegados utilizando el tipo "image / png" Media.Imgenes PNG
pueden usar con HTML, CSS, SVG, la API Canvas y WebCGM.

Qu es JPEG?
El formatoJPEGse utiliza habitualmente para mostrar fotografas y otras
imgenes de tono continuo en documentos HTML en Internet y otros
servicios en lnea. El formato JPEG admite los modos de color CMYK, RGB
y Escala de grises pero no admitecanales alfa(No preserva la
transparencia). A diferencia del formato GIF, JPEG retiene toda la
informacin de color de una imagen RGB pero comprime el tamao del
archivo descartando datos selectivamente.

Qu es SVG?
Grficos vectoriales escalables (SVG) es como HTML para grficos.Es
un lenguaje de marcado para la descripcin de todos los aspectos de
una aplicacin Web o imagen, de la geometra de las formas, el estilo
del texto y formas, a la animacin, presentaciones multimedia,
incluyendo vdeo y audio.Es totalmente interactivo, e incluye un DOM
de secuencias de comandos, as como la animacin declarativa (a
travs de la especificacin SMIL).Es compatible con una amplia gama
de caractersticas visuales tales como gradientes, opacidad, filtros,
recorte y enmascarado.
El uso de SVG permite totalmente escalables, reutilizables, grficos
lisas, de grficos simples para mejorar las pginas HTML, al grfico
completamente interactivo y visualizacin de datos, a los juegos, a las
imgenes estticas independientes de alta calidad.SVG es soportado
nativamente por la mayora de los navegadores modernos (con plugins
para permitir su uso en todos los navegadores), y est ampliamente
disponible en los dispositivos mviles y set-top boxes.Todos los
grandes grficos vectoriales de dibujo herramientas de importacin y
exportacin de SVG, y tambin se pueden generar a travs del lado
del cliente o lenguajes de scripting del lado del servidor.

Y cual usamos?
Como veremos GIF y PNG son los formatos web por naturaleza y la
verdad recomiendo ampliamente el formato PNG, sobre todo si tus
archivos son con transparencia, este puede ser una opcin inmediata y
dejar el GIF solo para animaciones o imgenes que tengan colores
planos y cosas muy sencillas (lo que nos har un tamao de imagen
extremadamente pequeo y sobre todo que cargara de manera
inmediata.
Por otro lado las nicas observaciones que le hara el png es que si se
tratan de fotografas, o imgenes muy elaboradas solo se use si se
necesita transparencias, la calidad de la imagen es muy bueno pero
suele ser un poco ms pesado que un JPG.
El JPG es mi formato favorito cuando en nuestra web o blog ponemos
fotos, ilustraciones, etc, la calidad del JPG la manejo en high o
medium lo cual no me hace un gran perdida de calidad, una de los
tips que me han funcionado mucho es dejar la imagen del tamao
exacto a usarse, sucede que muchas veces tenemos la imagen mas
grande y eso nos da un peso innecesario en el archivo. Su nico
problema son las transparencias pero para eso existe PNG.

Por ltimo. el peso es lo

importante en web
Quizs les parezca extremo, pero
debo decirles que un JPG o PNG
de Kb de peso pueden parecer
poco, pero les invito a pensar de
manera integral en su proyecto
web, Qu les gusta ms cuando
navegan cargar una imagen de
manera rpida o lenta?, Opino
que aunque no deba de ponerse
en riesgo nuestra calidad de las
imgenes siempre tratemos de
guardar un estndar en el peso
de estas que nos brinde la
certeza de una experiencia de
usuario buena ante una web que
se carga en segundos, esto va
muy de la mano con no
desperdiciar bits con imgenes
ms grandes de lo necesarias.

Hojas de
estilos o CSS

CSS

CSS es el acrnicmo deCascadingStyleSheets (es decir,

hojas de estilo en cascada).

Qu puedo hacer con CSS?

CSS es un lenguaje de estilo que define la presentacin de

los documentos HTML. Por ejemplo, CSS abarca cuestiones
relativas a fuentes, colores, mrgenes, lneas, altura,
anchura, imgenes de fondo, posicionamiento avanzado y
muchos otros temas.
Es posible usar HTML, o incluso abusar del mismo, para
aadir formato a los sitios web. Sin embargo, CSS ofrece
ms opciones y es ms preciso y sofisticado. CSS est
soportado por todos los navegadores hoy da.

CSS bsicos

Los estilos se pueden aplicar

a etiquetas bsicas de HTML
como es el caso de la
etiqueta <h1> a <h6>, <p>.
Dentro del archivo css
podemos dar las siguientes
propiedades relacionadas al
texto.

Font-family
Font-size
Font-style
Font-weight
Font-variant

Font-family

Sirve para indicar que tipo de

fuente se usar en cada
estilo. Dentro de las fuentes
ms comunes que se pueden
acceder son:
Arial, Arial Black, Arial
Narrow
Courier New, Georgia,
Impact
Tahoma, Times New
Roman
Verdana

Ejemplo:

En el caso que la fuente font-family: verdana, arial,

georgia;
a usar no est en el

Font-size

Indicar el tamao de la fuente

Ejemplo:
font-size:30px;

Font-style

Indicar el estilo de la fuente:

Normal
Italic
Oblique (de forma visual es parecido al italic, este usa el
diseo de normal e inclina los caracteres)
Italic
Oblique

Font-weight

Esta propiedad indica el peso de la fuente (mientras tenga

un valor mayor los caracteres sern ms rellenos).

Font-variant

que puede asumir estos dos valores:

small-caps
normal
Define si la fuente se muestra en maysculas tipo
normal o pequeas.

Color

nos permite definir el color del texto, lo podemos indicar por

medio de tres valores hexadecimales que indican la mezcla
de rojo, verde y azul.
Ejemplo:
color:#ff0000; Rojo
color:#00ff00; Verde
color:#0000ff; Azul

Otra forma de indicar el color, si tenemos los

valores en decimal, es por medio de la siguiente
sintaxis:
Ejemplo:

color:rgb(255,0,0);
(red, green, blue)

Text-align

Alineacin del texto: left, right, center, justify

text-align:center;

Text-decoration
permite que aparezca subrayado el texto, tachado
o una lnea en la parte superior, los valores
posibles de esta propiedad son:
none
underline
overline
line-through

Selector de identificacin
Un identificador debe (id-#)
ser nico dentro de una pgina, por lo
que debe utilizar el selector de ID cuando se quiere
encontrar un solo, nico elemento.

Selector de clase (class - .)

El selector de clase encuentra elementos con la

clase especfica.
En el siguiente ejemplo, todos los
elementos p con class = "center"
sern centro alineado:

Formulario

Un formulario se crea con la etiqueta<FORM> </FORM>,

dentro de la cual se insertan otras que crean los controles:
botones, entrada de texto, casillas de verificacin, etc.

Text inputs HTML5

HTML5 text inputs

Permite cambiar el menu a utilizar en algunos navegadores

y ms an en el caso de smartphone, en el cual se
habilitan por ejemplo la opcin de .com o solo se
muestran nmeros.
Dentro de las nuevas etiquetas tenemos las siguientes:

<input
<input
<input
<input

type
type
type
type

=
=
=
=

search> Search field

email>
Email address
tel>
Telephone number
url>
Location (URL)