Presentación ATI

Repblica Bolivariana de Venezuela Ministerio del Poder Popular para la Educacin Universitaria Universidad Bolivariana de Venezuela PFG Informtica
para la Gestin Social Aplicaciones Basadas en Tecnologas de Internet
Tema IV. Estndares de Internet. (HTML, CCS, Javascript, XML, XSL, XSP)
Waro Gil Christiam Chivico Moiss Icaza
<HTML>
Lenguaje de marcado de hipertexto.
No es un lenguaje de programacin.
No posee compilador.
Es un lenguaje de etiquetas.
No es sensible a maysculas y minsculas.
</HTML>
<title> Historia </title>

Primera versin: 1989. Hipertexto: encargado de conectar dos elementos ente s. SGML (lenguaje estndar de marcacin general): Especifica las reglas de etiquetado y no impone ningn conjunto de etiquetas en especial. HTML 2.0 versin mas cercana a ser estndar oficial.
<title> Historia </title>

HTML 3.0 (tablas, ecuaciones matemticas, etc). HTML 3.2 Refinacin. HTML 5 (<nav> <footer> <audio> <video>, validaciones). XHTML (lenguaje extensible de marcado de hipertexto).
<title> Nociones bsicas </title>

Gedit, Notepad, inType. What you see is what you get. ( Frontpage, Kompozer, Dreamweaver).

Etiquetas bsica s o mnimas:

Elementos: estructura bsica.
<BR>
CSS (Cascada Sheet Style)

Hojas de estilo en cascada.
Apariencia: describe como deben ser mostrados los elementos

Niveles e historia
CHSS (Cascada HTML Style Sheets) Hakon Wium Lie
SSP (Stream-based Style Sheet proposal). Bert Bos

CSS 1994-1995.

Niveles e historia
CSS Nivel 1
Propiedades de las fuentes. Color de texto, fondos, bordes u otros elementos. Atributos del texto, como espaciado entre palabras, letras, lneas, etc. Alineacin de textos, imgenes, tablas u otros. Propiedades de caja, como margen, borde, relleno, espaciado. Propiedades de identificacin y presentacin de listas.

Niveles e historia
CSS Nivel 2
Publicada en mayo de 1998, abandonada en abril 2008. <Div>. Texto bidireccional. Sombras, etc.
CSS Nivel 2.1 Corrige errores, elimina funcionalidades poco soportadas, aade nuevas especificaciones.

Uso
JavaScript
Lenguaje de programacin interpretado (no es necesario compilarse), orientada a objeto, dinmico que soporta construccin de objetos basados en prototipos. Se puede decir que su sintaxis es similar a java y c++.
Breve Historia
A principios de los aos 90, los usuarisos de internet conectaban a una velocidad maxima de 28.8 kbps. Y empezaron a desarrollarse las primeras aplicaciones web. Por lo que surge la necesidad de un lenguaje de programacion que se ejecutara en el navegador.
Brendan Eich (programador de Netscape), adapta tecnologias ya existentes como (ScriptEase) al navegador de Netscape que iba a lanzarse en 1995.
Breve Historia
Se denomino por primera vez LiveScript, en 1997 Netscape decidi estandarizar el lenguaje enviando las especificaciones del mismo a Manufactures Association, para as evitar una guerra tecnolgica. El primer estndar que se creo se denomino ECMA-262 o (ECMAScript), debido a que en esta poca Java era muy popular, decidieron colocarle el nombre de JavaScript.
Script
Se define como cada uno de los programas, aplicaciones o trozos de cdigos creados con el lenguaje de JavaScript.
Palabras reservadas
Son palabras en ingles que se utilizan para construir sentencias de JavaScript: *break. *case *cath *continue *Return *swicht *while *for *Etc.
Sintaxis
Es el conjunto de reglas que deben seguirse al escribir el cdigo fuente de los programas.
Sintaxis de JavaScript
Es muy similar a la de otros lenguajes como java y c++, las normas bsicas de JavaScrip son las siguientes. No se tiene en cuenta los espacios en blancos y las nuevas lineas. El interprete ignora cualquier espacio por lo que se puede ordenar el codigo de manera que sea mas entendible (tabulando las lineas, creando nuevas lineas, saltos de lineas, etc.).
Sintaxis de JavaScript
Se distingue la mayscula con la minscula, en el caso de que se lleguen a intercambiar el cdigo script no funcionara. No es necesario definir el tipo de dato de una variable. No es obligatorio terminar cada sentencia con punto y coma (;). Se pueden incluir comentarios de una sola lnea o de un grupo de lnea.
Primer Script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <title>El primer script</title> <script type="text/javascript"> alert("Hola Mundo!"); </script> </head> <body>< p>Esta pgina contiene el primer script</p> </body> </html>
Primer Script
Se crea una pagina correcta XHTML que incluya la declaracin del DOCTYPE, el atributo xmlns, las secciones <head>, <body>, <title>, etc. El cdigo de Java Script se incluye dentro de las etiquetas <script></script>, al igual se define el atributo type el es un estndar para identificar los diferentes tipos de contenido. Una vez definido la zona donde se incluir el script, se escribe la sentencia en este caso : alert("Hola Mundo!");.
JavaScript en XHTML
Se puede incluir cdigo Java Script en un documento XHTML de tres formas: JavaScript en el mismo documento XHTML. JavaScript en un archivo externo. JavaScript en los elementos XHTML.
JavaScript en el mismo XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de cdigo JavaScript en el propio documento</title> <script type="text/javascript"> alert("Un mensaje de prueba"); </script> </head> <body> <p>Un prrafo de texto.</p> </body> </html>
JavaScript en el mismo XHTML

Se crea el cdigo a partir de las etiquetas <script>.</script>
Dentro de la etiqueta <script>se define el atributo (type), es un estndar para identificar los diferentes tipos de contenidos.
El cdigo JavaScript se puede incluir en cualquier lugar del documento pero se recomienda definir este mismo dentro de las etiquetas <head>, esto para que el cdigo se vea mas limpio.
JavaScript en un archivo externo

Archivo codigo.js alert("Un mensaje de prueba"); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de cdigo JavaScript en el propio documento</title> <script type="text/javascript" src="/js/codigo.js"></script> </head> <body> <p>Un prrafo de texto.</p> </body> </html>
JavaScript en un archivo externo

El cdigo se crea <script>.</script> igual a partir de las etiquetas
Dentro de la etiqueta <script>se define el atributo (type). Se define el atributo src, el cual indica la URL correspondiente al archivo JavaScript que se guarda con la extensin (js) ej. Codigo.js. Este modelo tiene como ventaja que simplifica el codigo XHTML, as mismo diversos archivos del sitio web pueden enlazarse con este archivo.
JavaScript en los XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-88591" /> <title>Ejemplo de cdigo JavaScript en el propio documento</title> </head> <body> <p onclick="alert('Un mensaje de prueba')">Un prrafo de texto.</p> </body> </html>
JavaScript en los XHTML

Este ultimo modelo es el menos utilizado , ya que consiste en introducir trozos de codigos de JavaScript en el XHTML. El codigo se declara dentro de la etiqueta <p> agregandole a su vez el atributo (onclick).
Este modelo ensucia inecesariamente el codigo XHTML y complica el mantenimiento del codigo JavaScript.
Etiqueta noscript
La etiqueta <noscript> se define en el lenguaje HTML para lanzar un mensaje que indique al usuario cuando su navegador no puede ejecutar JavaScript, o el funcionamiento de este se encuentr bloqueado.
<head> ... </head> <body> <noscript> <p>Bienvenido a Mi Sitio</p> <p>La pgina que ests viendo requiere para su funcionamiento el uso de JavaScript. Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p> </noscript> </body>
Variables
Es un elemento que se emplea para almacenar y hacer referencia a otro valor. En Java Script se crean mediante la palabra reservada var, esta se debe de definir solo al declara por primera vez la variable. Por lo que al declarar una variable, esta se realiza de la siguiente manera: var numero_1 = 3; var numero_2 = 1; var resultado = numero_1 + numero_2;
Modelo de Objeto del Documento (DOM)

Es una interfaz de programacin para los documentos HTML y XML, En el cual se representa la estructura del documento y define de que manera se puede acceder. El DOM da una representacin al documento como un grupo de nodos y objetos estructurados que tienes propiedades y mtodos. DOM transforma todos los documentos XHTML en un conjunto de elementos llamados nodos, que estn interconectados y que representan los contenidos de las pginas web y las relaciones entre ellos. Por su aspecto, la unin de todos los nodos se llama "rbol de nodos".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Pgina sencilla</title> </head> <body> <p>Esta pgina es <strong>muy sencilla</strong></p> </body> </html>
XHTML
(Lengueje de de Marcado de Hipertexto Extensible), es una version mas estricta y limpia de HTML, nace con el objetivo de remplazar HTML ante su limitacin. Su lenguaje en mucho mas estricto que HTML, el cual permite una correcta interpretacion de la informacion. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semntica, donde la informacin, y la forma de presentarla estn claramente separadas
XHTML
Para utilizar una versin concreta, se debe incluir antes del elemento html del cdigo de la pgina Web, la Definicin del Tipo de Documento (DTD) que se pretende utilizar. Por ejemplo, un documento en XHTML 1.1 podra especificarse de la siguiente forma:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <title>Ttulo</title> </head> <body> . . . </body> </html>
Funcionamiento de XHTML
XHTML, al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos bsicos a cumplir en lo que a cdigo se refiere. Entre estos requisitos bsicos se puede mencionar: Estructuracin coherente dentro del documento donde se incluiran elementos correctamente anidados. Etiquetas en minsculas. Elementos cerrados correctamente. Atributos de valores entrecomillados, etc.
XHTML
Los documentos deben estar bien formados: todos los elementos deben tener su etiquetas cerradas y anidados correctamente.
<p>Ejemplo de elementos bien <em>anidados</em>.</p>
<p>Ejemplo de elementos mal <em>anidados</p>.</em>
XHTML
Los nombres de atributos y elementos deben ir en minusculas: esto es importante ya que XML interpreta las mayusculas y minusculas de forma diferente
<body>Ejemplo correcto</body>
<BODY>Ejemplo incorrecto</BODY>
XSL (Extensible Stylesheet Language)

Es una tecnologa que permite describir cmo la informacin contenida en un documento XML cualquiera, debe ser transformada o formateada para su presentacin en un medio. Est compuesta por 3 partes:
XSLT (Extensible Stylesheet Language Transformations) XSL-FO (lenguaje de hojas extensibles de formateo de objetos) XPath, o XML Path Language
Nota: Estas tres especificaciones son recomendaciones oficiales del W3C.
Para que sirve XSL?

Para especificar el estilo y formato de los documentos XML (aplica negrita, titulares, etc.) Para indicar la estructura con la que debe mostrarse el archivo XML Transforma el XML a otros formatos (HTML, DOC, PDF, etc.) o a otro XML. Maneja el contenido de los datos XML (ordenndolos por distintos criterios, haciendo operaciones con ellos, etc.)
Cmo funciona XSL?

Mediante el XPath, XSLT identifica las partes del documento XSL que coinciden con patrones determinados, navegando a travs de elementos y atributos en los documentos XML Luego XSLT realiza la transformacin de esos datos y muestra el resultado.
Transformacin
Seleccin XSLT
XPATH
XSL-FO
Formato
Elementos de XSL
Elemento raz: Elemento template: Elemento value-of: Elemento foreach: Elemento sort: Elemento if: Elemento choose: Elemento apply-templates:
< xsl:stylesheet> o < xsl:transform>

< xsl:template> < xsl:value-of> < xsl: for-each> < xsl: sort> < xsl: if> < xsl: choose> < xsl:apply-templates>
Ejemplo
XSP (Extensible Server Pages)
Es una tecnologa de Apache Cocoon para desarrollar aplicaciones web basadas en contenido XML. Una pgina XSP es un documento XML del Cocoon que contiene directivas que especifican cmo generar contenido dinmico en el momento de servir el documento. Cuando Cocoon sirve esos documentos, procesa esas directivas sustituyndolas por el cdigo XML correspondiente.
Ejemplo
Recursos
www.htmlya.com.ar http://www.w3schools.com/html/ http://www.quackit.com/html_5/tags/ http://www.quackit.com/html/tags/ http://www.w3.org/Style/CSS/ http://www.w3.org/DOM/ http://www.maestrosdelweb.com/editorial/introcss/ http://www.quirksmode.org/ http://hotwired.lycos.com/webmonkey/authoring/dynamic_html/
Bibliografa
http://es.wikipedia.org/wiki/HTML http://www.monografias.com/trabajos7/html/html.shtml http://es.wikipedia.org/wiki/DOCTYPE http://es.wikipedia.org/wiki/Definici%C3%B3n_de_tipo_de_docume nto http://www.w3schools.com/tags/ref_html_dtd.asp http://www.w3schools.com/tags/tag_doctype.asp http://www.w3schools.com/html/ http://www.quackit.com/html_5/tags/
Bibliografa
http://www.quackit.com/html/tags/ http://techtastico.com/post/%C2%BFcuales-son-las-versiones-delhtml/ http://www.maestrosdelweb.com/editorial/htmlhis/ http://es.wikipedia.org/wiki/HTML5#Diferencias_entre_HTML5_y_H TML4.2FXHTML http://librosweb.es/css/capitulo_1/breve_historia_de_css.html http://www.cssya.com.ar/temarios/descripcion.php?cod=1 http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada

Presentación ATI

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Presentación ATI

Uploaded by

Copyright:

Available Formats

Repblica Bolivariana de Venezuela Ministerio del Poder Popular para la Educacin Universitaria Universidad Bolivariana de Venezuela PFG Informtica

para la Gestin Social Aplicaciones Basadas en Tecnologas de Internet

Waro Gil Christiam Chivico Moiss Icaza

No es sensible a maysculas y minsculas.

<title> Historia </title>

<title> Historia </title>

<title> Nociones bsicas </title>

<title> Nociones bsicas </title>

<title> Nociones bsicas </title>

<title> Nociones bsicas </title>

CSS (Cascada Sheet Style)

Apariencia: describe como deben ser mostrados los elementos

CSS (Cascada Sheet Style)

SSP (Stream-based Style Sheet proposal). Bert Bos

CSS (Cascada Sheet Style)

CSS (Cascada Sheet Style)

CSS (Cascada Sheet Style)

JavaScript en el mismo XHTML

JavaScript en el mismo XHTML

JavaScript en un archivo externo

JavaScript en un archivo externo

JavaScript en los XHTML

JavaScript en los XHTML

Modelo de Objeto del Documento (DOM)

Modelo de Objeto del Documento (DOM)

Modelo de Objeto del Documento (DOM)

<p>Ejemplo de elementos mal <em>anidados</p>.</em>

XSL (Extensible Stylesheet Language)

Nota: Estas tres especificaciones son recomendaciones oficiales del W3C.

Para que sirve XSL?

Cmo funciona XSL?

< xsl:stylesheet> o < xsl:transform>

XSP (Extensible Server Pages)

You might also like