1

INSTITUTO TECNOLGICO DE OCOTLN

Maestro: Snchez Flores Vernica Elizabeth
Alumno: Juan Carlos Salazar Castaeda
Materia: PROGRAMACION WED






2


INDICE


INTRODUCCIN LENGUAJE DE PRESENTACIN .................................................................. 3
Sintaxis ................................................................................................................................................. 4
SELECTORES .................................................................................................................................... 5
TIPOS DE MEDIOS LENGUAJE DE PRESENTACIN .............................................................. 6
MODELO DE CAJA LENGUAJE DE PRESENTACIN .............................................................. 7
Aplicacin en documento web ........................................................................................................ 13
CONCLUSIN .................................................................................................................................. 14
BIBLIOGRAFIA ................................................................................................................................. 15












3

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.


4

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.
5

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.


6

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.
7


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:
8


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
9

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 alto
Width 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.
Padding
Con 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;
10

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;
Bordes
Si queremos que nuestra caja tenga bordes, lo conseguimos con la
propiedad border. Tiene la siguiente sintaxis: border: width | style | color
Como 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
11

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; }
Mrgenes
Los 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;
Capas
Vamos a hablar de una etiqueta XHTML que nos qued por ver y est
estrechamente ligada con CSS: <div>. 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! <div id="header"> <h1>Mi blog</h1>
<ul id="menu"> <li><a href="..." title="...">Principal</a></li> <li><a
href="..." title="...">Acerca de</a></li> <li><a href="..."
title="...">Enlaces</a></li> </ul> </div>
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.
Floats
12

Los 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; }









13

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 presentacion
Se podra disear una prctica donde se empleen los conceptos y
lleguen a:












14


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.











15

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 el 9 de mayo de 2013,
en: http://www.estructurayprogramacion.com/materias/programacion-
web/selectores-lenguaje-de-presentacion/