INSTITUTO TECNOLGICO DE OCOTLN

Maestro: Snchez Flores Vernica ElizabethAlumno: Juan Carlos Salazar CastaedaMateria: PROGRAMACION WED

INDICE

INTRODUCCIN LENGUAJE DE PRESENTACIN3Sintaxis4SELECTORES5TIPOS DE MEDIOS LENGUAJE DE PRESENTACIN6MODELO DE CAJA LENGUAJE DE PRESENTACIN7Aplicacin en documento web12CONCLUSIN13BIBLIOGRAFIA14

INTRODUCCIN LENGUAJE DE PRESENTACIN

Un lenguaje de presentacin define un conjunto de etiquetas y atributos vlidos y que ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un nmero de reglas sintcticas para poder crear documentos. Uno de los lenguajes ms comunes para presentar informacin web es HTML.El lenguaje de presentacin es aquel que indica el formato del texto. Este tipo de marcado es til para maquetar la presentacin de un documento para su lectura, pero resulta insuficiente para el procesamiento automtico de la informacin.El marcado de presentacin resulta ms fcil de elaborar, sobre todo para cantidades pequeas de informacin. Sin embargo resulta complicado de mantener o modificar, por lo que su uso se ha ido reduciendo en proyectos grandes en favor de otros tipos de marcado ms estructurados.Se puede tratar de averiguar la estructura de un documento de esta clase buscando pistas en el texto. Por ejemplo, el ttulo puede ir precedido de varios saltos de lnea, y estar ubicado centrado en la pgina. Varios programas pueden deducir la estructura del texto basndose en esta clase de datos, aunque el resultado suele ser bastante imperfecto.Explicacin: Funciona por medio de reglas especficas las cuales presentan un soporte adecuado para la correcta interpretacin y estructuracin de un documento en el que se exprese la informacin necesaria solicitada. En este lenguajes se expresan los atributos de los elementos de tal forma que se definen los diseos y contenidos, por ejemplo; Mrgenes Tipo de ttulos Color de fondo Tipo de lera Etc.

Sintaxis

Cuando se habla de la sintaxis de un lenguaje se trata de un elemento que se le conoce como etiqueta, la cual alberga instrucciones especficas del lenguaje de programacin, estas sealizaciones se determinan encapsulando las palabras reservadas entre un smbolo de mayor y uno de menor que se ubican al principio y al final de la palabra respectivamente. Las etiquetas funcionan para instrucciones como; Letras cursivas, negritas, subrayadas Alineacin del texto Salto de lnea Salto de prrafo Insercin de nombre de pagina (titulo) Inicio y final del cuerpo del documento Considrese que la sintaxis no solo se limita al lenguaje HTML, sino que cada lenguaje de programacin tiene sus propias palabras reservadas y sintaxis con la cual se podr ejecutar cada elemento que se desee, algunas de las palabras reservadas HTML pueden encajar con PHP, siempre y cuando se delimiten el inicio y el final de cada uno de los elementos, pues a pesar de que estos lenguajes pueden trabajar juntos es necesario delimitar cada uno pues podr crear confusin en el medio compilador y no ejecutar nada ni iniciar ninguna tarea. Algunos de los lenguajes que trabajan con HTML son; PHP SAP MySQL Etc.EXPLICACION: Estos son importantes porque de esta forma sabremos la forma de dar a conocer los medios que deseamos, sea pgina web, aplicacin, software o cualquier otro elemento. La correcta aplicacin de esto se da conociendo la sintaxis y las palabras reservadas de la misma que pueden ser diferentes para una misma accin, pero saber diferenciarlas darn los mejores resultados pues algunas acciones aunque iguales pueden presentar mejor resultados que otras.SELECTORES

Los selectores son los encargados de identificar los elementos dentro de un sitio web para poder identificar sus atributos y/o propiedades, os elementos pueden ser, texto, imagen, video, animacin, etc. Los selectores en su variedad comprenden del nombre de las etiquetas utilizadas dentro de os documentos HTML, por ejemplo; Body P Code Table Ul Etc.

Actualmente existen programas de cmputo que facilitan crear los elementos y aplicarlos a diferentes hojas de estilos como CSS permitiendo nicamente la identificacin de los selectores mas relevantes. Dentro de los selectores encontramos distintas categoras, las cuales son; Selectores de clases Selectores de ID Selectores de atributos Selector universal Los cuales presentan distintas formas de funcionamiento y elementos de identificacin que cambiaran dependiendo de la informacin de estructura HTML que se encuentra en el documento en proceso.

TIPOS DE MEDIOS LENGUAJE DE PRESENTACIN

HTML permite a los autores disear documentos que saquen partido de las caractersticas de los medios en los que el documento vaya a ser representado (p.ej., pantallas grficas, pantallas de televisin, dispositivos de mano, navegadores basados en voz, dispositivos tctiles Braille, etc.). Al especificar el atributo media, los autores permiten a los agentes de usuario cargar y aplicar las hojas de estilo de manera selectiva.Las siguientes declaraciones de ejemplo se aplican a elementos H1. Cuando se proyecten en una reunin de negocios, todos ellos aparecern en azul. Cuando se impriman, aparecern centrados.El control de medios es particularmente interesante cuando se aplica a hojas de estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si obtienen de la red nicamente aquellas hojas de estilo que se apliquen el dispositivo actual. Por ejemplo, los navegadores basados en voz pueden evitar la descarga de hojas de estilo diseadas para la representacin visual.

MODELO DE CAJA LENGUAJE DE PRESENTACIN

El modelo de caja describe las cajas que se generan a partir de los elementos HTML. El modelo de caja tambin contiene opciones detalladas en lo referente al ajuste de mrgenes, bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cmo se construye el modelo de caja:

En realidad, todos los elementos de una web (prrafos, enlaces, imgenes, tablas, etc.) son cajas rectangulares. Los navegadores sitan estas cajas de la forma que nosotros les hayamos indicado para maquetar la pgina. Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetacin. Esto es, aparecen solos, insertando saltos de lnea.

Los elementos inline siguen el flujo, y estn contenidos dentro de elementos de bloque. Por ejemplo, un prrafo sera un elemento block (no podemos tener un prrafo al lado del otro, sino que dos prrafos seguidos aparecern uno abajo del otro. En cambio, un enlace es un elemento inline, ya que no corta el texto donde est metido Estas dos diferencias son importantes, pero hay que tener en mente que ambos tipos comparten el modelo de caja, que es el que aparece en la siguiente figura:Las propiedades ms importantes de una caja son: width (ancho), height (alto), padding (relleno), border (borde) y margin (margen).Ancho y altoWidth representa el ancho de la caja. Pero es el ancho interior, es decir, si bordes, mrgenes, ni padding. Podemos indicar este ancho en medidas absolutas (normalmente pxeles) o relativas (normalmente %).Aunque los elementos inline tienen width, si la modificamos con CSS no veremos ningn resultado visual. Esto es porque el ancho de estos elementos se establece automticamente para que se ajuste a las dimensiones del elemento inline.Por ejemplo, si tenemos un enlace que consiste en un texto de cinco caracteres, el ancho (width) de este elemento ser lo que ocupen esos cinco caracteres.Sobre el alto de la caja, se controla con la propiedad height, y todo lo que hemos dicho antes sobre el ancho, tambin se aplica aqu.PaddingCon padding establecemos la distancia de relleno entre el lmite interior de la caja y el exterior (borde).Si queremos poner un padding de 20 pxeles para toda la caja, lo haramos as:padding : 20 px;Podemos establecer un padding distinto para cada lado, usando los sufijos -top (superior), -bottom (inferior), left (izquierda) y right (derecha):padding-top: 10px;padding-bottom: 5px;padding-left: 30px;padding-right: 20px;Podemos abreviar lo anterior en una sola lnea, indicando primero el padding superior y luego siguiendo el orden de las agujas del reloj. Es decir, nos quedara: arriba, derecha, abajo, izquierda. El ejemplo anterior se acortara as: padding: 10px 20px 5px 30px;Otro atajo til es especificar slo dos medidas: una corresponderan al padding superior e inferior, y la otra al lateral. Si queremos que los paddings superior e inferior sean de 10 pxeles, y los laterales (izquierdo y derecho) de 20 pxeles, escribimos: padding: 10px 20px;BordesSi queremos que nuestra caja tenga bordes, lo conseguimos con la propiedad border. Tiene la siguiente sintaxis: border: width | style | colorComo habrs supuesto, width especifica el grosor del borde. Normalmente es una medida en pxeles, pero tambin podemos utilizar las palabras thin (fino), medium (normal) y thick (grueso). Por supuesto, cmo de gordo es thick queda a interpretacin del navegador.En cuanto a style, es el tipo de borde. Hay bastantes, pero los ms comunes son: solid (lnea continua), dashed(lnea discontinua), dotted (lnea de puntos) y double (lnea continua doble).Por ltimo, color indica el color del borde.

Podemos escoger un tipo de borde diferente para cada lado con los sufijos -top, -bottom, -left y -right. Por ejemplo, para poner que algo tenga el borde inferior de 1 pxel a puntitos rojos: border-bottom: 1px dotted #f00;Para eliminar el borde, simplemente ponemos que tiene de grosor 0 pxeles o que el estilo del borde es none. Esto es muy importante con las imgenes, ya que si tenemos una imagen enlazando a algo, los navegadores la ponen con un reborde muy feo. As que esto se ha convertido ya en un fijo de las hojas de estilos: img { border: none; }MrgenesLos mrgenes se controlan con la propiedad margin, y es la distancia entre el borde de la caja y los elementos que la rodean.En cuanto a la forma de usarla, es igual que con la propiedad padding, as que la forma de escribir y los atajos es exactamente la misma. Por ejemplo, si queremos mrgenes superior e inferior de 20 pxeles, y laterales de 5 pxeles: margin: 20px 5px; Para centrar un elemento de bloque, podemos hacer uso de auto: margin: 0px auto;CapasVamos a hablar de una etiqueta XHTML que nos qued por ver y est estrechamente ligada con CSS: . Esta etiqueta se encarga de crear una capa, que es un elemento de bloque que sirve de contenedor a otros elementos de bloque e inline.Para qu nos sirven? Primero, para organizar semnticamente nuestra pgina. El atributo id tiene carga semntica, as que si queremos poner en la cabecera3 de nuestra web el ttulo y el men, haramos esto: Ojo! Cabecera en cuanto a maquetacin. No tiene nada que ver con la etiqueta head! Mi blog

Principal

Acerca de

Enlaces

El otro uso de las capas es el de maquetar. Por ejemplo, el layout tpico de un blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra lateral y la del pie de pgina. Mediante CSS, podemos controlar la disposicin de estas capas, y as conseguir el diseo que queramos.FloatsLos floats son probablemente una de las cosas que ms cuesta dominar. Lo que hacen los floats es alterar el flujo de la pgina, incrustando en l un elemento de bloque. El ejemplo ms tpico es el de si queremos poner una imagen acompaando a un texto, y que el texto envuelva a la imagen. Esto lo conseguimos creando una clase como la siguiente:.izquierda { float: left; }Podemos indicar tanto left (izquierda) como right(derecha). Despus de un float, suelen ocurrir sucesos paranormales. La mayora de ellos suelen desaparecer mediante la propiedad clear, que se encarga de anular los floats. Los valores que admiten son left, right y both (que significa ambos).Volviendo al ejemplo de layouts de blogs, lo normal es poner el contenido y la barra lateral mediante floats. Lo que suele pasar es que una de estas dos columnas pasa por encima del pie de pgina, en lugar de quedar el pie al final de todo. Esto se suele arreglar as: #footer { clear: both; }

Aplicacin en documento web

Consiste en aplicar los temas anteriores en un documento web, una practica con los temas:3.2 Sintaxis Lenguaje de presentacion.3.3 Selectores Lenguaje de presentacion.3.4 Tipos de medios Lenguaje de presentacion.3.5 Modelo de caja Lenguaje de presentacionSe podra disear una prctica donde se empleen los conceptos y lleguen a:

CONCLUSIN

Para que una pagina Web funcione sin colapsar, es necesario contar con una buena arquitectura de elementos y ubicacin de informacin, pues depende de varias herramientas que al momento de su ejecucin pueden mejorar el funcionamiento del servicio que se ofrece a los usuarios. Cuando se desea tener un buen sitio Web es importante presentar un elemento dinmico, es decir que no siga una sola lnea de diseo, puede usar juegos tipogrficos, cambio de colores, implementacin de animaciones, presentacin de elementos multimedia, pues gracias a la evolucin de los medios de distribucin de informacin el manejo de los datos es mas fcil para su envo y recepcin a casi cualquier parte del mundo.

BIBLIOGRAFIA

Alvares R. (2012) Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML, as como la estructura que tendr el documento bsico HTML. Consultado el 9 de mayo de 2013, en: http://www.desarrolloweb.com/articulos/535.php

Codina L. (2012) Tutoriales Web. Consultado el 9 de mayo de 2013, en: http://www.lluiscodina.com/tutoriales/

s/a. Estructuras y Programacin, Unidad 3 Lenguaje de presentacin. Consultado el 9 de mayo de 2013, en: http://www.estructurayprogramacion.com/materias/programacion-web/lenguaje-de-presentacion/

s/a.(2012) Estructuras y Programacin, Sintaxis Lenguaje de presentacin. Consultado el 9 de mayo de 2013, en: http://www.estructurayprogramacion.com/materias/programacion-web/sintaxis-de-lenguaje-de-presentacion/

s/a.(2012) Estructuras y Programacin. Selectores Lenguaje de presentacin.Consultado el9de mayo de2013,en:http://www.estructurayprogramacion.com/materias/programacion-web/selectores-lenguaje-de-presentacion/

15