1
Download 1. Planteamiento de objetivos para tu página web
Document related concepts
Transcript
Página web
Captura de una página web.
Una página web, también conocida como página de Internet, es un documento adaptado
para la Web y normalmente forma parte de un sitio web. Su principal característica son los
hiperenlaces a otras páginas web, siendo esto el fundamento de la Web.
Una página está compuesta principalmente por información (sólo texto o multimedia) e
hiperenlaces; además puede contener o asociar datos de estilo para especificar cómo debe
visualizarse o aplicaciones incrustadas para hacerla interactiva.
La página se escribe en un lenguaje de marcado que provea la capacidad de insertar
hiperenlaces, generalmente HTML.
El contenido de la página puede ser predeterminado ("página web estática") o generado al
momento de visualizarla o solicitarla a un servidor web ("página web dinámica"). Las
páginas dinámicas que se generan al momento de la visualización se hacen a través de
lenguajes interpretados, generalmente JavaScript, y la aplicación encargada de visualizar el
contenido es la que debe generarlo. La páginas dinámicas que se generan al ser solicitadas
son creadas por una aplicación en el servidor web que alberga las mismas.
Respecto a la estructura de las páginas web algunos organismos, en especial el W3C, suelen
establecer directivas con la intención de normalizar el diseño para facilitar y simplificar la
visualización e interpretación del contenido.
Según Wikipedia : ” Una página web, también conocida como página de Internet, es un documento
adaptado para la Web y normalmente forma parte de un sitio web.” Bueno hasta aqui como que es una
explicación simple, pero a la vez un poco vaga. Muchos autores, sobre todo los más técnicos quieren
diferenciar entre un “sitio web” y una “página web“, argumentando que la segunda es parte de la
primera; pero para la gente normal como nosotros vienen a ser prácticamente lo mismo.
La página web es todo aquel contenido que aparece en la internet, todo puede ser llamado “página web” y
las hay de varios tipos. Estan las páginas de buscadores, de portales, empresariales, catalogos, tiendas,
las interactivas, las informativas, los blogs, los foros y un largo etcetera que día a día se sigue creando.
Se estima que en la internet existen mas de 101 millones de páginas web en linea, y que cada año crece un
40%. Hay tantos temas y tanta información que va a ser imposible saber de todo; o mas bien, va a ser más
sencillo que antes saber un poco de todo.
Para efectos de marketing; esta gran cantidad de información y tan variada es importante, dado que nunca
fue tan sencillo segmentar audiencias por preferencias. Ni la radio, ni los periodicos y ni la TV ha tenido
este gran potencial de la internet para que un mensaje le llegue a la persona correcta.
Muchos tienen páginas web, pero no tienen una real estrategia de posicionamiento de la página,
desperdiciando así una gran oportunidad de llegar eficientemente a tu público objetivo. Para esto es
necesario invertir en estrategias SEO y de posicionamiento
Para crear una página web necesitamos conocer la estructura básica:
Ahora veamos la función de estas etiquetas (viñetas o marcadores)
<html>, Identificador del tipo de documento
Todas las páginas escritas usando lenguaje HTML deben tener la extensión .htm o .html
Al crear una página web, en el código debemos iniciar la página con la viñeta <html> y
finalizarla escribiendo al final de todo el código la viñetar </html>. Entre estas dos
etiquetas escribiremos el resto del código HTML de la página web, así:
<head>, Cabecera o Encabezado de la página
El encabezado de la página se utiliza para agrupar información sobre ella, como el título.
Está formado por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de
la etiqueta <html>.
Por ejemplo:
<title>, Título de la página
El título de la página es el texto que aparecerá en la barra de título, ubicada en la parte
superio de la ventana del navegador. Esta aparece cuando la página se ha cargado.
El texto deseado debe escribirse entre las etiquetas <title> y </title> .
Estas etiquetas deben estar dentro del encabezado, es decir, entre las etiquetas <head> y
</head>.
Ejemplo:
<body>, Cuerpo del documento
El cuerpo del documento contiene la información del documento, todo lo que deseemos que
se visualice, el texto de la página, las imágenes, texto, formularios, etc.
Todos los elementos que formarán el cuerpo de la página deben encontrarse entre las
etiquetas <body> y </body> y van justo depués de el encabezado.
Por ejemplo:
A través de la etiqueta <body> podemos establecer el color o la imagen de fondo para la
página web.
Para establecer el color de fondo utilizamos el atributo bgcolor asignandole un color
representado por un número hexadecimal o por un nombre predefinido.
Para saber los hexadecimales de cada color haz clic en la imagen
Para hacer que el color de fondo de una página sea de color azul, tendremos que escribir el
siguiente codigo:
Antes de nada, decir que el desarrollo web es un proceso creativo y personal en el que cada uno decide
cómo hacer las cosas, por lo que estos pasos que te propongo aquí son sólo eso, propuestas, ideas,
sugerencias o como quieras llamarlo. Cada uno después puede optar por hacer las cosas como prefiera.
No obstante, puede ser interesante que visites las secciones accesibilidad, usabilidad y posicionamiento en
buscadores antes de comenzar a elaborar tu trabajo, ya que cuando las leas comprenderás que hay que
tener muchas cosas en cuenta a la hora de elaborar una web y sus contenidos si queremos tener cierto
éxito.
Una vez aclarado esto, hay que decir que para el diseño de páginas web debemos tener en cuenta varias
etapas:
1. Planteamiento de objetivos para tu página web
Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el
proyecto y qué queremos conseguir al realizar nuestra web. La planificación de tu web debe incluir:
Breve descripción de los contenidos de la página, su título principal, etc.
Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi
público objetivo, etc.
Hardware, software, documentación que necesito para realizarla y de qué dispongo
realmente.
Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas
físicos, etc. para adaptar la página a sus características.
Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos,
etc.
2. Estructurar el contenido de la página
Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los
gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes,
mediante el cual ir creando la estructura de la página web. Antes de empezar a desarrollar tu página web
en el ordenador, debes tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página,
etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y
pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web:
En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales,
a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas web en niveles,
de tal modo que para llegar del primero al último se debe pasar por todos los intermedios. Esta estructura
es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama
tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.
En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en
el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una estructuración
muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente
una serie de páginas web para conseguir su objetivo.
Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles,
los cuales a su vez están conectados entre sí en forma de lista. Esta estructura es mucho más navegable y
práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página
principal para hacerlo.
En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una
estructura más compleja y menos ordenada. Su ventaja es que desde cada página podemos ir a cualquier
otra del sitio. No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces
innecesarios.
Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar información
para confeccionar cada sección de tu página web. Conforme vayas investigando sobre el tema de la web,
casi con seguridad irás realizando modificaciones tanto en su estructura como en sus contenidos para
adaptarla mejor a lo que has aprendido, por lo que es conveniente que trabajes sobre borradores, no con
versiones definitivas, te ahorrarás mucho trabajo. Por ejemplo, puedes haber decidido hacer una web sobre
Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las secciones principales, un
cuerpo central con el contenido de la sección y una última columna a la derecha donde insertar tu
publicidad. No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería encuentres
tanta y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de
navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por
la sección con rapidez. Por lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás
que retocarla para adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo
innecesario.
3. Diseñar la página web
Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de varias
secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo que puedes
empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los elementos interactivos y
gráficos que van a intervenir en cada una. Para esto, y fundamentalmente para manejar los vínculos entre
documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar
textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. A la hora de
empezar con el diseño, ten en cuenta que:
La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus
visitantes (es importante en este punto la usabilidad). Ninguna página puede quedar
huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto ocurre,
es probable que el usuario cierre nuestra página y entre en otra en la que le sea más fácil
navegar por los contenidos.
Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML, ya que
así podrás hacer todo lo que quieras sin depender de editores gráficos como Dreamweaver
(ver manual Dreamweaver), tendrás más flexibilidad y opciones a la hora de realizar tus
diseños, podrás corregir tu código y saber qué es lo que falla cuando te de errores,
entenderás cómo funcionan las páginas de otros webmasters, etc. En esta misma página,
hay un manual HTML muy completo que puedes mirar.
Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para crear
una página atractiva y bien diseñada. Con las hojas de estilo puedes crear un archivo que te
sirva para dar una mejor apariencia a todas tus páginas a la vez, y siempre que quieras
cambiar el aspecto de tu web, sólo tendrás que modificar ese archivo en lugar de ir una por
una revisando cada página de la misma. Si quieres aprender a usar este lenguaje, en esta
misma web hay un manual completo de hojas de estilo o CSS.
