UNIVERSIDAD POLITCNICA DE EL SALVADOR FACULTAD DE INGENIERIA Y ARQUITECTURA INGENIERIA EN CIENCIAS DE LA COMPUTACIN

MATRIA: Introduccion al desarrollo Web CATEDRATICA: Ing Vilma Beatriz olivares TEMA Conceptos aplicados al diseo web

ALUMNO: FRANKLIN RONY CORTEZ BARRERA CB201101

San Salvador, sbado 06 de agosto de 2011

MISION: Formar profesionales con alto sentido critico y tico, con capacidad de autoformacin y aptos para resolver problemas Mediante soluciones tcnico cientficas y adecuadas al contexto social.

1. DEFINICIONES HTML, DHTML Y XHTML

HTML: HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas Web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. El mime type (el identificador para documentos que terminan con la extensin .HTML) es text/HTML. HTML no debe confundirse con un lenguaje de programacin, puesto que carece de algunas de las funcionalidades de los mismos, como operaciones aritmtica y designacin de variables, para comprender mejor el significado de las iniciales veamos por separado su significado Hyper Texto: La Web se basa en hipervnculos o comnmente llamados links, es decir enlaces hacia otras paginas dentro de un mismo sitio Web u otro externo, HTML posee la facilidad de crearlos y es la esencia de Internet. Marcas: Al ser un lenguaje de marcado, se utilizan las etiquetas propias de HTML para poder cambiar la presentacin del texto embebido en los documentos HTML. En HTML las etiquetas de inicio y cierre junto con el contenido entre ellas forman lo que se conoce como element HTML, el elemento tambin puede tener atributos, que van dentro de la etiqueta de inicio y proporcionan informacin extra sobre el elemento que se este utilizando. Lenguaje: Como en el espaol HTML es un lenguaje que consta de su propia gramtica: elementos, etiquetas, atributos, por lo que se deben aprender para disear paginas Web. XHTML: Es la ultima versin de HTML la X corresponde a Extendible lo que quiere decir que las reglas gramaticales de XHTML son mas rgidas que las de HTML, en los inicios de la Web, ni los mismos desarrolladores de software respetaban los standards desarrollados por la W3C, tal es el caso de Internet Explorer 6, por lo que los creadores de sitios Web tenan que hacer prcticamente dos versiones de una misma pagina, con el fin que se pudiese visualizar bien en cualquier navegador. Con XHTML se pretende que todas las pginas cumplan las mismas reglas de diseo para que sean validas. La siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. Muchas de estas diferencias vienen con el cambio de ser una aplicacin SGML a ser una aplicacin del ms estricto XML:

Los elementos vacos deben cerrarse siempre: o Incorrecto: <br> <br></br> o <br/> o <br /> o Correcto: Nota: Cualquiera de las tres formas es vlida en XHTML. Para compatibilidad segn el "Apndice C" debe usarse <br />. Los elementos no vacos tambin deben cerrarse siempre: o Incorrecto: <p>Primer prrafo<p>Segundo prrafo o Correcto: <p>Primer prrafo</p><p>Segundo prrafo</p> Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre ltimo, debe cerrarse primero). o Incorrecto: <em><strong>Texto</em></strong>

o Correcto: <em><strong>Texto</strong></em> Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles). o Incorrecto: <td rowspan=3> o Correcto: <td rowspan="3"> o Correcto: <td rowspan='3'> Los nombres de elementos y atributos deben ir en minsculas. o Incorrecto: <A HREF="http://www.domname.com">Domname</A> o Correcto: <a href="http://www.domname.com">Domname</a> No est permitida la minimizacin de atributos (se usa el nombre del atributo como valor). o Incorrecto: <textarea readonly>Solo-lectura</textarea> <textarea readonly="readonly">Soloo Correcto:

Los atributos desaprobados en HTML 4.01 no forman parte de XHTML. o Incorrecto: <font color="#0000FF">Blue text</font> o Correcto: <span style="color: #0000FF;">Blue text</span>

lectura</textarea>

DHTML: El HTML Dinmico o DHTML (del ingls Dynamic HTML) designa el conjunto de tcnicas que permiten crear sitios Web interactivos utilizando una combinacin de lenguaje HTML esttico, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarqua de objetos de un DOM. Una pgina de mi libro HTML Dinmico es cualquier pgina Web en la que los scripts en el lado del cliente cambian el HTML del documento, despus de que ste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la pgina. La caracterstica dinmica del DHTML, por tanto, es la forma en que la pgina interacta con el usuario cuando la est viendo, siendo la pgina la misma para todos los usuarios. En contraste, el trmino ms general "pgina Web dinmica" lo usamos para referirnos a alguna pgina especfica que es generada de manera diferente para cada usuario, en cada recarga de la pgina o por valores especficos de variables de entorno. Este trmino no debe ser confundido con DHTML. Estas pginas dinmicas son el resultado bien de la ejecucin de un programa en algn tipo de lenguaje de programacin en el servidor de la pgina Web (como por ejemplo ASP.NET, PHP o Perl), el cual genera la pgina antes de enviarla al cliente, o bien de la ejecucin en la parte cliente de un cdigo que crea la pgina completa antes de que el programa cliente (usualmente, un navegador) la visualice. En una pgina DHTML, una vez sta ha sido cargada completamente por el cliente, se ejecuta un cdigo (como por ejemplo en lenguaje JavaScript) que tiene efectos en los valores del lenguaje de definicin de la presentacin (por ejemplo CSS), logrando as una modificacin en la informacin presentada o el aspecto visual de la pgina mientras el usuario la est viendo. Entre los usos ms habituales del DHTML estn el hacer mens desplegables, imgenes que cambian al pasar el cursor sobre ellas, objetos en movimiento, botones que permiten

desplazar el texto que se est mostrando, textos explicativos que aparecen al situar el cursor sobre ciertas palabras clave, cronmetros, etc. Otro uso interesante de esta tecnologa es la creacin de juegos de accin que utilizan el navegador Web para funcionar, aunque tradicionalmente este tipo de desarrollos han sido complicados debido a las diferencias en el lenguaje y las caractersticas soportadas por los distintos navegadores existentes. Recientemente los navegadores ms populares han empezado a soportar estndares comunes, como el DOM, lo cual ha facilitado mucho la creacin de este tipo de aplicaciones

2. FORMATOS DE IMAGEN
Existen diferentes tipos de formato de imagen enfocados al diseo de sitios Web. Los que mas han perdurado han sido 3: Gif, PNG y jpg. El formato GIF, propietario de CompuServe, corresponde a las siglas de Graphics Interchange Format. Es el formato ms utilizado para mostrar grficos de colores indexados e imgenes en documentos HTML (hypertext markup language) sobre World Wide Web y otros servicios online. Gif es un formato de imgenes comprimidas diseado para minimizar el tiempo de transferencia de archivos sobre las lneas telefnicas. El nico inconveniente que tiene es que solamente se pueden representar 256 colores, con lo cual no hay muchas alternativas para mejorar la calidad de una imagen El JPEG (Joint Photographic Experts Group) es el formato que se utiliza comnmente para almacenar fotografas y otras imgenes de tono continuo, y tambin se utiliza en documentos HTML para Internet. A diferencia del formato GIF, JPEG guarda toda la informacin referente al color en RGB. JPEG tambin utiliza un sistema de compresin, que de forma eficiente reduce el tamao de los archivos mediante la identificacin y el descarte de los datos redundantes que no esenciales para mostrar la imagen. PNG es grfico libre con compresin sin prdida que ofrece profundidades desde 8 bits con paleta optimizada, 24, 48 bits: 281 trillones de colores y en escala de grises se puede obtener archivos desde 8 y 16 bits igual a 65536 tonos de grises. Tambin se puede salvar un canal ms con alpha channel para video e interlaced. Fue diseado para reemplazar al GIF en la Web.

3. ETIQUETAS DE ENCABEZADO:
Las etiquetas de encabezado se utilizan para colocar los ttulos(como en un libro) en una pagina Web, estos no deben utilizarse por el tamao de la letra, sino por el nivel de importancia que posea el encabezado, los niveles van desde el h1, que es el de mayor relevancia, hasta el h6, el de menor jerarqua, en un sitio Web raramente se utilizan niveles de encabezado mas alla del nivel3. Las etiquetas de encabezado son elementos de bloque, es decir generan un salto de lnea y ocupan todo el espacio del elemento que los contiene. La forma de utilizar las etiquetas es <hx>contenido</hx> donde x es cualquier valor entre 1 y 6. Con CSS se puede cambiar el tamao, color, tipo de fuente, etc.

4. CMO ALINEAR UNA IMAGEN?

De acuerdo a la W3C, encargada de proporcionar los estndares para el diseo Web, la alineacin de imgenes se puede hacer utilizando los siguientes valores para el atributo align: top, bottom, middle, Left, right. De la siguiente manera <img src=ruta de la imagen Align=valor> aun que de acuerdo a su sitio Web1 este atributo ha quedado anticuado, prefirindose la utilizacin de hojas de estilo para la alineacin de imgenes.

5. ETIQUETAS QUE NO NECESITAN CERRARSE

Antiguamente haban unos elementos que no necesitaban etiqueta de cierre, sobre todo aquellos elementos vacos (sin contenido) tal es el caso de Img, hr y br Pero con la evolucin del estndar, y con las nuevas normas de XHTML. Todas las etiquetas necesitan cerrarse, pudiendo hacerlo de la siguiente manera: <etiqueta>contenido</etiqueta> O bien <etiqueta /> Dejando un espacio despus del nombre de la etiqueta

6. CMO TACHAR UN TEXTO EN HTML?

Para hacer un tachado de texto como este se utiliza elemento strike, siguiendo el mismo procedimiento de etiquetado que se usa en HTML <strike>Este texto aparece tachado</strike> Aun que ese elemento quedo obsoleto en xhtml, utilizndose en su lugar el elemento del (deleted). Por compatibilidad con navegadores antiguos se puede usar strike o s

7. COLORES EN HTML
Los colores en HTML se representan mediante un nmero hexadecimal. Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F. Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF. Existen 216 colores seguros para Web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
1

http://www.w3schools.com/tags/tag_img.asp

Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal. A continuacin se muestran los 216 colores seguros para Web,
#000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #660033 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF

Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes: Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 Nombre white black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow