Arquitectura 2

Fascculo 3
Arquitectura de sitios web

Cuaderno 2: Cdigos de programacin
Qu es un cdigo de programacin?
Un cdigo de programacin es un lenguaje que permite transmitir y recibir
informacin a las computadoras. A travs de los lenguajes de programacin podemos interactuar con una pgina web. El cdigo de programacin puede ser binario
(compuesto solo por ceros y unos) o cdigo fuente, que es interpretable por los
seres humanos.
Al igual que con los lenguajes humanos, esta comunicacin se realiza mediante un
vocabulario y una gramtica ya establecidos.
La programacin, cualquiera sea el cdigo especfico que utilicemos, se rige
por reglas y normas similares a las de las lenguas naturales, pero con menor
ambigedad. Generalmente, los lenguajes de programacin cuentan con reglas semnticas y sintcticas propias; es por eso que usualmente se dice
que aprender un lenguaje de programacin es casi como aprender una nueva
lengua.
En este cuaderno vamos a analizar las caractersticas de diferentes lenguajes de
programacin, y algunos criterios que permitirn seleccionar cul es el ms conveniente para la pgina web que deseamos desarrollar.
HTML
HTML es la sigla en ingls de Hypertext Markup Language o lenguaje de marcado
hipertextual, y es el cdigo creado primariamente para el desarrollo de pginas
web. En lneas generales, este cdigo permite describir la estructura de un sitio
en internet, dar formato al contenido, insertar imgenes y generar vnculos con
otras pginas.
Caractersticas estructurales del cdigo HTML: marcado estructural
El cdigo HTML se compone de etiquetas que se indican entre corchetes angulares < >. Las etiquetas funcionan como categoras u rdenes que definen cmo
se organizar y qu caractersticas tendr la informacin de nuestra pgina web.
Fascculo 3
http://competenciastic.educ.ar
Una premisa fundamental del cdigo de programacin HTML es que

cada etiqueta que se abre debe cerrarse. Por lo tanto, cuando se
abre una etiqueta: < etiqueta >; se cierra una etiqueta que tiene
la misma estructura pero agrega una barra: < /etiqueta >
Para comprender el cdigo HTML es preciso pensar en trminos estructurales
una pgina web. El nivel superior de esa estructura ser la delimitacin de todo el
documento con la etiqueta de inicio y cierre que indica qu cdigo estamos usando: <html> y </html>. En sntesis, toda pgina web comenzar con la etiqueta
<html>, y deber finalizar con la etiqueta </html>.
El siguiente nivel de la estructura es el encabezado, donde se coloca por ejemplo el ttulo de la pgina web, y responde a la etiqueta <head>, que deber
cerrarse con la etiqueta </head>. Y por ltimo, en este orden estructural se
encuentra el cuerpo de nuestra pgina web, que ser donde figure todo el contenido de la pgina, y que responde a las etiquetas de inicio y cierre <body> y
</body>.
Para saber algo ms
Haciendo clic derecho sobre cualquier pgina web y seleccionando la opcin ver cdigo fuente, se puede ver la programacin
HTML de esa pgina. Les recomendamos que hagan el ejercicio
de encontrar cada parte de las aqu descriptas en el cdigo fuente
de una pgina. Pueden elegir una pgina sencilla para encontrar
fcilmente todas sus partes estructurales.
Elementos del cdigo HTML
Para dar formato al contenido y crear hipervnculos en el cuerpo de la pgina
(enmarcado entre las etiquetas <body> y </body>) tambin se utilizan etiquetas
que indican a los navegadores web cmo debe visualizarse la pgina. Las etiquetas de marcado de presentacin ms comunes son:
<b>: texto en negrita
<i>: texto en cursiva
<u>: texto subrayado
<imagen>: insertar una imagen
Si el cuerpo de nuestra pgina web tiene el siguiente texto: Informe especial
sobre educacin y tecnologas de la informacin y la comunicacin, y queremos destacarlo usando negrita, la lnea de cdigo quedara de la siguiente
manera:
Fascculo 3
<b>Informe especial sobre educacin y tecnologas de la informacin y la comunicacin</b>

En nuestra pgina web se vera del siguiente modo:
Informe especial sobre educacin y tecnologas de la informacin y la comunicacin
La etiqueta para incluir hipervnculos requiere de dos componentes: una etiqueta
que se denomina ancla <a>, junto con un atributo href que indicar la direccin
web a la que vincula el enlace, y la palabra que funcionar como vnculo.
Si el enlace que queremos poner en nuestra pgina es a Wikipedia,
la lnea de cdigo sera:
<a href=es.wikipedia.org>Wikipedia</a>
En nuestra pgina web se vera del siguiente modo:
Wikipedia
CSS
El cdigo HTML permite dar formato al contenido de una pgina web, pero tiene
tambin muchas limitaciones. Con el desarrollo y la expansin de internet comenzaron a requerirse tecnologas que permitieran ver el contenido de una pgina web
en distintos dispositivos, desde un monitor de PC Personal Computer o computadora personal hasta un telfono celular.
El cdigo CSS Cascading Style Sheets u hoja de estilo en cascada se basa en
reglas que determinan el estilo de uno o ms elementos de una pgina web. Este
cdigo podr ser escrito dentro de la pgina web o en un archivo independiente
agregando la referencia al mismo dentro de la pgina web.
Utilizar hoja de estilo CSS (u otras confeccionadas con lenguajes similares) dentro de los HTML tiene grandes ventajas, entre ellas:
Separar el contenido que se encuentra dentro de la estructura que le brinda el
HTML del formato que se encuentra definido en la hoja de estilo CSS.
Mayor control sobre el diseo de una pgina web.
Agilizar las actualizaciones.
Permitir que los usuarios personalicen el diseo de las pginas (aumento del
tamao tipogrfico, cambio de fondos y paleta de colores, etc.).
Disminuir el tamao y peso del HTML de la pgina.
Fascculo 3
El espritu detrs del desarrollo de CSS es diferenciar y separar

la estructura de una pgina web de su presentacin o diseo.
La creacin de esta tecnologa permiti grandes avances, entre ellos la evolucin
de lo que hoy conocemos como Web 2.0. As, la posibilidad de crear diferentes
hojas de estilo para un mismo contenido permite acceder a pginas por medio de
dispositivos mviles, o que las pginas sean ledas por dispositivos de voz.
Las declaraciones en CSS,se agregan a un cdigo HTML a travs de una etiqueta
<style>. Dichas declaraciones se separan por punto y coma (;). El siguiente es un
ejemplo de lnea de cdigo en CSS:
Con la sintaxis:
<p style=color:green;font-weight:bold>Informe especial sobre
educacin y tecnologas de la informacin y la comunicacin</p>
En la pgina web se vera:
Informe especial sobre educacin y tecnologas de la informacin y la comunicacin
PHP
En sus inicios, el cdigo PHP se cre para facilitar el desarrollo de pginas web personales, de ah su nombre inicial Personal Home Page. Sin embargo, a partir de los
avances y la evolucin del mismo, actualmente la sigla PHP se define como pre procesador de hipertextos (Hypertext Preprocesor). El cdigo PHP es un lenguaje gratuito con licencia GNU GPL y compatible con cualquier plataforma (Windows, Unix).
PHP es un lenguaje del lado del servidor, es decir que es un lenguaje que se
ejecuta en el servidor web y no en la computadora del usuario de la pgina.
Este tipo de cdigo permite que el usuario acceda a travs de una pgina web a
bases de datos, conexiones de red, etc., recibiendo en su computadora solo una
pgina con el cdigo HTML, que es resultado de los procesos del PHP que se realizaron en el servidor. Veamos un diagrama que explica este proceso:
Fascculo 3
El principal beneficio de una pgina programada con PHP es que podemos utilizar
recursos tales como bases de datos manteniendo una velocidad de ejecucin
ptima, y no requiere recursos especiales al sistema operativo del usuario.
ASP
El cdigo ASP Active Server Pages es, al igual que el PHP, un lenguaje del lado
del servidor que permite hacer pginas dinmicas con accesos a bases de datos,
conexiones de red, envo de mails, etc. Este tipo de tecnologas tiene como ventaja
la seguridad que le dan al programador: es l quien tiene acceso al cdigo, ya que
el mismo se encuentra solo en los servidores.
El ASP es el lenguaje estndar que cre Microsoft para su servidor web, por lo tanto solo funciona en plataformas de esa firma (Windows).
Para desarrollar pginas web con ASP se necesita contar con un servidor con Windows NT
4.x o mayor y el Internet Information Server (IIS), que es el servidor web de Microsoft.
Javascript: dinamismo y programas dentro de HTML

Javascript es un lenguaje de programacin del lado del cliente, dado que no se
ejecuta en el servidor sino que es el propio navegador del usuario el que lo procesa. Es importante tener en cuenta que no es posible desarrollar un programa en
Javascript que se ejecute fuera de un navegador.
Este tipo de cdigo es compatible con todos los navegadores modernos (Firefox,
Explorer, Chrome) y est muy extendido en las actuales pginas web para validar
usuarios, crear cookies, detectar navegadores, etctera.
La tecnologa de Javascript permite crear contenidos dinmicos en pginas web,
por ejemplo elementos con movimiento o que cambien de color. Tambin permite
desarrollar pginas interactivas con programas propios como calculadoras, formularios, agendas, tablas de clculo, etctera.
Javascript surge como un modo de ampliar las capacidades del cdigo HTML, por lo
que el cdigo desarrollado en este lenguaje se puede embeber en un HTML o bien
puede ser guardado en un archivo externo al HTML con extensin .js, que es la extensin propia de los archivos en Javascript, agregando tan solo la referencia
a la ubicacin del mismo.
Una lnea de cdigo que llamara a un archivo de Javascript sera:
<head>
<script src=ArchivoJavaScript.js type=text/javascript></script>
</head>
Fascculo 3
Fuentes
lvaro Martnez Echevarra, Manual prctico de HTML, Universidad Politcnica de Madrid, Espaa, 1995. Versin digital en: http://www-app.etsit.upm.es
http://www.apache.org/
http://www.desarrolloweb.com/
http://www.guiaweb.gob.cl/
http://www.javascriptya.com.ar/
http://www.nic.ar
http://www.programacion.com/
http://www.tawdis.net/
http://www.webtaller.com/
Autores: Sebastin Otero

Carla Maglione
Coordinacin editorial: Mara Mobilia
Fascculo 3

Arquitectura 2

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Arquitectura 2

Cargado por

Copyright:

Formatos disponibles

Fascculo 3

Arquitectura de sitios web

Cuaderno 2: Cdigos de programacin

Una premisa fundamental del cdigo de programacin HTML es que

Cuaderno 2: Cdigos de programacin

<b>Informe especial sobre educacin y tecnologas de la informacin y la comunicacin</b>

Cuaderno 2: Cdigos de programacin

El espritu detrs del desarrollo de CSS es diferenciar y separar

Cuaderno 2: Cdigos de programacin

Javascript: dinamismo y programas dentro de HTML

Cuaderno 2: Cdigos de programacin

Autores: Sebastin Otero

Cuaderno 2: Cdigos de programacin

También podría gustarte