Elementos de sitio web

Las pginas Web

Posiblemente el trmino pgina Web sea el ms utilizado en Internet,
precisamente porque cuando navega por la red lo hace en busca de pginas Web.
Los Sitios Web
Un sitio Web es una localizacin en la Web que contiene varias pginas Web
organizadas jerrquicamente.
Cada sitio tiene una pgina de inicio que corresponde a la pgina principal,
llamada en ingls Home Page.
Elementos de la pgina Web
Los principales elementos que tiene una pgina son:
Texto
El texto es el elemento ms significativo de cualquier sitio Web porque los
usuarios navegan por la Web fundamentalmente en busca de informacin
expresada en texto.
Imgenes
Aunque no debe abusar de las imgenes por el riesgo de aumentar el peso de la
pgina, y por lo tanto, los tiempos de descarga, las imgenes constituyen un
elemento esencial para ofrecer informacin visual del contenido y mostrar un
diseo atractivo y personal.
Espacio Web
Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un
servidor.
Un nombre de dominio
Es la primera parte de una direccin Web que identifica al servidor que almacena y
sirve su sitio.
Hipervnculos
Por s misma, una pgina Web no puede hacer mucho. La magia de verdad
comienza cuando relaciona varias pgina mediante enlaces.

Video
Mientras Internet es cada vez ms asequible, confiable y veloz, los programas de
edicin de video se hacen ms cercanos a los usuarios.
Animaciones en Flash
Es una imagen animada, fcil de crear y sobre todo que ocupa poca memoria.
Tiene diferentes usos, desde la creacin de dibujos animados hasta el despliegue
de dibujos interactivos.
Sonidos
Un elemento cada vez ms importante. La comercializacin de nuevos dispositivos
digitales mviles como el iPhone ha potencializado este elemento.
Formulario
Zona para introducir datos o comentarios. Una plantilla o pgina con espacios
vacos para llenarse con alguna finalidad.

HERRAMIENTAS DE DISEO
1. Adobe Dreamweaver
Dreamweaver tiende a ser el software de diseo de sitios web elegido por muchos
diseadores con experiencia moderada y tambin por expertos. Definitivamente,
es mucho ms que un editor de HTML, Dreamweaver logra integrar
completamente el diseo visual con las herramientas de codificacin. Tambin es
compatible con una variedad de diferentes lenguajes de scripting, incluyendo PHP,
ASP y CSS.
2. Microsoft Expressions Web
Igual que Dreamweaver, el Microsoft Expressions Web program tiene funciones
de edicin hbrida en una configuracin de doble panel, lo que permite a los
usuarios trabajar en WYSIWYG y con el cdigo manual al mismo tiempo.
Microsoft Web Expressions viene con plantillas web integradas que hacen el
diseo web ms fcil. Pero esto no significa necesariamente que el programa es
para principiantes, ya que no existen herramientas de dibujo, ni colocacin a
travs de la herramienta de arrastrar y soltar. As que si ests luchando con los
conceptos bsicos de diseo de pginas web, asegrate de revisar un curso
como este y as poner al da tus habilidades.

3. Coda 2
Coda es un programa de software de diseo web exclusivo para Mac. Fue lanzado
por primera vez en 2007 y una versin actualizada se public en 2012. El
programa cuenta con una interfaz de usuario increblemente conveniente. Toda la
idea de Coda es el diseo web de una sola ventana, lo que significa que no
tendr que cambiar entre programas o aplicaciones durante el proceso de diseo.
Y la interfaz Coda 2 es an ms fcil de usar que la versin original. Cuenta con
una Sper Barra lateral, que tiene una serie de herramientas bsicas para
facilitar el acceso.
4. Amaya
Amaya es una herramienta gratuita y de cdigo abierto de WYSIWYG. Su
propsito es una creacin de sitios web que es ejecutable en Linux, en Mac y en
Windows. Amaya ha existido entre las opciones disponibles por un buen tiempo;
apareci por primera vez en 1996 y fue actualizada por ltima vez en enero de
2012. Es ideal para principiantes sin mucha experiencia de codificacin, esta
herramienta de WYSIWYG es compatible con HTML, CSS y XML.
5. Bluefish
Bluefish es un editor de texto avanzado gratuito y de cdigo abierto. Es compatible
con mltiples plataformas, incluyendo Linux, Solaris y Mac OS X y Windows. Es
muy verstil y flexible; ofrece una variedad de herramientas para la programacin
en general y permite el desarrollo de HTML, XHTML, CSS, XML, PHP, C, C + +,
JavaScript, Java, Google Go, Vala, Ada, C, SQL, Perl, ColdFusion, JSP, Python,
Ruby y concha, entre otros. Sin embargo, es un programa de software
codificacin inteligente, no es un WYSIWYG; as que s hace falta saber
codificar.
LENGUAJES DE PROGRAMACIN
HTML
La informacin publicada en la Web debe ser mediante un lenguaje que sea
entendido universalmente. El lenguaje utilizado por la World Wide Web es el
HTML, actualmente el lenguaje hipermedia ms aceptado a nivel mundial. Por
tanto, es uno de los lenguajes de programacin web ms importante y uno de los
ms usados para la creacin de documentos. El HyperText Markup Language
(HTML) es un lenguaje de marcado que se dise con el objetivo de estructurar
documentos y mostrarlos en forma de hipertexto. El mismo brinda la informacin
correspondiente relacionada con el contenido a mostrar en cada fragmento de
informacin, y permite establecer relaciones unidireccionales entre documentos.

Los archivos pueden tener las extensiones (htm, html). Este lenguaje cumple con
dos objetivos fundamentales para el diseo y visualizacin de un documento
digital:
Organiza un documento en elementos lgicos, tales como: encabezado, prrafo,
etc.
JAVASCRIPT
JavaScript es un lenguaje de programacin orientado a objetos. Es un lenguaje
dinmico, las variables no necesitan ser introducidas antes de su uso y los tipos
de variables se resuelven dinmicamente durante su ejecucin. Se trata de un
lenguaje de programacin del lado del cliente, porque es el navegador el que
soporta la carga de procesamiento. Fue creado por Brendan Eich en la empresa
Netscape Communications. El cdigo JavaScript que se encuentra dentro de las
pginas web puede ser interpretado por todos los navegadores. Permite que las
definiciones de funciones y otro tipo de cdigo sean modificados mientras el
programa se est ejecutando. El modelo de ejecucin de JavaScript se basa en la
interpretacin del cdigo fuente. Es un lenguaje de alto nivel, multiplataforma y no
necesita compilacin. Est basado en objetos, admite la programacin
estructurada y maneja la mayora de los eventos que se pueden producir sobre la
pgina web. La mayora de los navegadores en sus ltimas versiones interpretan
el cdigo Javascript integrado dentro de las pginas web.
Hojas de Estilo en Cascada
Las Hojas de estilo en Cascada, en ingls Cascading Style Sheets (CSS), fueron
diseadas y desarrolladas por la World Wide Web Consortium (W3C). Una hoja de
estilos CSS es el tipo de documento que utiliza un navegador Web para redefinir
las propiedades de los distintos elementos y las etiquetas en el cdigo HTML.
Permite dar formato a los documentos de forma global. Proporciona al diseador
de pginas web definir un conjunto de ampliaciones HTML especiales y aplicarlas
al documento. Provee la especificacin e intercambio de los fondos para textos y
documentos, as como sus tipos y tamaos de fuente. Las definiciones del formato
de un documento se pueden colocar en archivos separados y aplicarlas a un
grupo de documentos. Posibilitan adems aplicar un formato modificado a
documentos HTML ya existentes. Con los CSS se puede aplicar a un documento
diferentes estilos de orgenes. Los CSS constituyen una herramienta poderosa
para el diseo de documentos HTML, pues permiten modificar la representacin
del documento mediante la asignacin de un nuevo estilo.
Lenguajes del lado servidor

Son aquellos lenguajes que se ejecutan por el propio servidor y son enviados al
cliente en un formato claro para l.
PHP
Es un lenguaje que est implementado especialmente para el desarrollo web.
PHP: Hypertext Preprocessor (PHP) es un lenguaje de programacin web de alto
nivel que se ejecuta en el servidor.
PHP 5
PHP 5 se lanz oficialmente en septiembre del 2004, utilizando el motor Zend
Engine 2.0 (o Zend Engine 2). El objetivo principal de PHP 5 ha sido perfeccionar
los mecanismos de la Programacin Orientada a Objetos para dar solucin a las
carencias de las versiones anteriores. Incluye modificadores de control de acceso
para implementar el encapsulamiento y el manejo de excepciones, lo cual no
exista en versiones anteriores. En PHP 5, no es necesario pasar objetos por
referencia. Incluye numerosas funcionalidades explcitas como constructores y
destructores, objeto de clonacin, la clase de abstraccin, herencia, no requiere
definicin de tipos de variables ni manejo detallado del bajo nivel. Se pueden
aplicar tantas interfaces como quiera y brinda un mejor soporte para la
programacin orientada a objetos y la lectura de archivos XML. Es un lenguaje
que se caracteriza por ser Open-Source y de obtencin gratuita, lo que lo
convierte en una alternativa de fcil acceso para todos. Su flexibilidad lo convierte
en un lenguaje muy sencillo de aprender; principalmente para los desarrolladores
que han trabajado con lenguajes como Perl, C o Java, ya que posee similitudes de
sintaxis con los mismos. Es portable y multiplataforma (Linux, Windows, entre
otros). Trabaja sobre la mayora de servidores web y est preparado para
interactuar con la mayora de Sistemas de Gestin de Bases de Datos (MySQL,
PostgreSQL, Oracle, SQL Server, entre otros).
TIPOS DE SITIOS
Con respecto a la "visibilidad" de los contenidos, debemos estructurar los sitios
web en:
Intranets Una intranet es un sitio web instalado en una red privada con un fin
principalmente empresarial u organizacional.
Extranets La extranet se entiende como una "intranet llevada a internet", es decir,
sigue siendo un sitio web con una finalidad privada, restringida a un nmero
determinado de personas, pero cuyo alcance requiere que est en Internet. Como

ejemplos de extranets podemos considerar cualquier rea privada de un sitio web

que permite al usuario consultar, modificar, crear y eliminar datos internos de la
empresa.
Sitios web pblicos Este es un sitio web "al uso", de informacin pblica,
originado para ser utilizado por todos los usuarios.
Con respecto a la actualizacin de contenidos, tenemos tres tipos de sitios
Sitios web estticos Sitios web en los que los contenidos no se modifican. Son
sitios web que se han creado y cuya informacin permanece inalterada con el
paso del tiempo
Sitios web dinmicos Aquellos cuyos contenidos varan de forma permanente.
Las redes sociales, los peridicos, etc., son claros ejemplos de estos tipos de
sitios web
Sitios web que combinan ambos tipos En el sector de las webs de tipo
empresarial, suele ser habitual combinar cierta informacin esttica (Quienes
somos, Donde estamos, Filosofa, etc.) con informacin dinmica (Noticias de la
empresa, proyectos realizados, etc.)
Si atendemos a la actividad que realizan los sitios web, una clasificacin podra
ser la siguiente
Comercial/publicitaria Los sitios web de la mayor parte de la empresa tienen
este objetivo principal: dar a conocer la empresa y publicitar sus servicios.
Incluiramos aqu los minisites de productos o campaas especficas.
Venta Los sitios web de comercio electrnico tienen como objetivo principal la
venta de productos.
Sociales Sitios web en los que toda la informacin que incluyen es generada por
los usuarios del sitio web. Los foros, blogs, redes como facebook o myspace, etc.
pertenecen a este tipo de sitios web
Informativos Basados principalmente en contenidos presentados por el sitio web,
son la contraposicin a las redes sociales, ya que aqu los contenidos se
actualizan muy frecuentemente pero por usuarios "dentro" de la empresa.
Podemos incluir aqu peridicos, informacin del tiempo, bolsa, etc.
Buscadores Sitios web que permiten encontrar a un usuario lo que busca.
Incluimos aqu los buscadores propiamente dichos (Google, Bing, Yahoo...) y los
directorios de servicios, productos, etc.