Diseño web

            Sitio Web

Un sitio web o cibersitio1 es una colección de páginas de internet relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet2Una página web es un documento HTML/XHTML que es accesible generalmente mediante el protocolo HTTP de Internet.

Todos los sitios web públicamente accesibles constituyen una gigantesca World Wide Web de información (un gigantesco entramado de recursos de alcance mundial).

A las páginas de un sitio web se accede frecuentemente a través de un URL raíz común llamado portada, que normalmente reside en el mismo servidor físico. Los URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan más particularmente cómo el lector percibe la estructura general y cómo eltráfico web fluye entre las diferentes partes de los sitios.

Algunos sitios web requieren una subscripción para acceder a algunos o todos sus contenidos. Ejemplos de sitios con subscripción incluyen algunos sitios de noticias, sitios de juegos, foros, servicios de correo electrónico basados en web, sitios que proporcionan datos de bolsa de valores e información económica en tiempo real, etc.

Página web

Una página web, página electrónica o ciberpágina, es un documento o información electrónica capaz de contener texto,sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente también incluyen otros recursos como ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).

HTML

hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, entre otros. Es un estándar a cargo de laW3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web. Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

hipervínculo

Un hipervínculo (también llamado enlace, vínculo, o hiperenlace) es un elemento de un documento electrónico que hace referencia a otro recurso, como por ejemplo otro documento o un punto específico del mismo o de otro documento. Combinado con una red de datos y un protocolo de acceso, un hipervínculo permite acceder al recurso referencia do en diferentes formas, como visitarlo con un agente de navegación, mostrarlo como parte del documento reverenciador o guardarlo localmente.

Los hipervínculos son parte fundamental de la arquitectura de la World Wide Web, pero el concepto no se limita al HTML o a la Web. Casi cualquier medio electrónico puede emplear alguna forma de hiperenlace.

Editor de páginas web

Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.

• Editor de texto sin formato

También llamado editor de texto plano. Este tipo de editor suele ser muy sencillo. Dos ejemplos son Notepad o Bloc de Notas (incluido en Windows) y Kate (GNU/Minix). Con cualquiera de los dos bastaría para escribir las líneas de código necesarias para diseñar una página Web.

Existen editores de texto específicamente diseñados para la edición Web, que como Kate, incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto. Dichos editores incluyen una serie de botones para insertar rápidamente las etiquetas, o combinaciones de estas, más corrientes, salvar el documento con un clic y visionarlo posteriormente en una nueva ventana.

• Editor de texto con ventanas

Es una versión ligeramente más sofisticada que la anterior. Suelen constar de un par de ventanas. Una area de trabajo, donde se teclea el código HTML y el texto que se quiere incluir en la página, y en la otra se visualiza el resultado en tiempo real. En otras palabras se obtiene una previsualización del documento generado. Lo que significa que no se tiene que guardar el documento, previamente, antes de volver a abrirlo con el navegador para comprobar el resultado.

• Editores WYSIWYG

El término WYSIWYG es el acrónimo de What You See Is What You Get, que traducido al castellano quiere decir: "lo que tú ves es lo que obtienes", en los que de manera visual se pueden colocar distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML. La manera de trabajar en este tipo de editores, es muy similar a la que se usa cuando se trabaja con un procesador de texto. Esto quiere decir que un usuario no tiene por qué teclear las etiquetas del lenguaje de marcado. En lugar de eso, el usuario escribe el texto, lo formatea, e inserta las imágenes en los lugares deseados, trabajando igual a como lo haría con Writer, (el procesador incluido en la suite ofimática OpenOffice.org),1 o Word. Posteriormente el editor transforma la vista por pantalla en código HTML perfectamente configurado.

Servidor o Hosting

es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía de "hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos etc. en internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones o páginas web.

Las compañías que proporcionan espacio de un servidor a sus clientes se suelen denominar con el término en inglés web host.

El hospedaje web aunque no es necesariamente un servicio, se ha convertido en un lucrativo negocio para las compañías de internet alrededor del mundo.

 FTP

Es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.

El servicio FTP es ofrecido por la capa de aplicación del modelo de capas de red TCP/IP al usuario, utilizando normalmente el puerto de red 20 y el 21.Un problema básico de FTP es que está pensado para ofrecer la máxima velocidad en la conexión, pero no la máxima seguridad, ya que todo el intercambio de información, desde el login y password del usuario en el servidor hasta la transferencia de cualquier archivo, se realiza en texto plano sin ningún tipo de cifrado, con lo que un posible atacante puede capturar este tráfico, acceder al servidor y/o apropiarse de los archivos transferidos.

ISP  

An Internet service provider (ISP) is an organization that provides services for accessing, using, or participating in the Internet. Internet service providers may be organized in various forms, such as commercial, community-owned, non-profit, or otherwise privately owned.

Internet services typically provided by ISPs include Internet access, Internet transit, domain name registration, web hosting, Usenet service, and colocation.

URL  

Un localizador de recursos uniforme es un identificador de recursos uniforme (Uniform Resource Identifier, URI) cuyos recursos referidos pueden cambiar, esto es, la dirección puede apuntar a recursos variables en el tiempo.1 Están formados por una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que designa recursos en una red, como Internet.

Los URL fueron una innovación en la historia de la Internet. Fueron usadas por primera vez por Tim Berners-Lee en 1991, para permitir a los autores de documentos establecer hiperenlaces en la World Wide Web (WWW). Desde 1994, en los estándares de Internet, el concepto de "URL" ha sido incorporado dentro del más general de URI, pero el término URL todavía se utiliza ampliamente.

webmaster

Un webmaster (contracción de las palabras inglesas web y master) es también conocido con las denominaciones de arquitecto web, desarrollador web, autor de sitio digital, administrador de sitio digital, y coordinador de sitio digital, es la persona responsable de mantenimiento y/o programación de un sitio web. La definición específica de este cargo puede variar según el ámbito en el que se presente a la persona: en ciertos casos es el responsable de los contenidos del sitio,1 mientras que en otros es el encargado de la operatividad, programación y mantenimiento de la disponibilidad de un sitio web sin que necesariamente intervenga en la creación de contenidos.

De acuerdo a la definición del Diccionario de Oxford, el webmaster es la persona responsable por un servidor de Internet,3 sin embargo en la jerga informática se puede indicar que el webmaster es el dueño del sitio web o el encargado de mantener el sitio web habilitado.

 Estructura de una página Web  

La estructura básica de una página web es la siguiente:

<html>

<head></head>

<body>

</body>

</html>

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.

La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).

La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código

<html>

<head>

<title>Esto es el t&iacute;tulo de la p&aacute;gina.</title>

</head>

<body>

Hola mundo!<br>

<b>Esto es negrita.</b><br>

<i>Y esto it&aacute;lica.</i><br>

</body>

</html>

generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página):

Ver ejemplo en una página aparte.

Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:

<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).

<b></b> => Indica comienzo y fin de negrita.

<i></b> => Itálica.

También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.

Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.

CSS

Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales con el elemento «style» o en cada etiqueta particular mediante el atributo «style».

contenido web.

En este artículo se trata del contenido web. El contenido es el recurso más importante de una web, más que el diseño, los gráficos o cualquier otro elemento. Su estructura es:

Contenido apropiado para tus lectores.

El diseño de autoservicio.

El formato de los textos.

Estructura del contenido.

Palabras clave y enlaces de calidad .

Contenido apropiado para tus lectores:

Tus textos han de tratar sobre las preocupaciones de los usuarios, lo que es importante para ellos, y en su lenguaje. Explica el problema que resuelves y cómo lo haces. Esto es lo que les importa a las personas que visitan tu web, mucho más que tu historia o la oferta de productos de tu empresa. Es mucho más importante la calidad que la cantidad de los contenidos. Éstos han de estar bien redactados y actualizados.

 Proceso de Desarrollo de un Sitio Web  

• Planificar: este factor va de la mano del brief creativo, debes saber cómo harás que suceda lo que has puesto en el contrato y cumplir con las exigencias de tu cliente. Debes pensar en los dispositivos que se utilizarán para navegan en el sitio web, si harás aplicaciones y así contemplar todos los factores. Además, para @betobeto es importante definir calendarización, fijar fechas factibles, términos de acuerdo y conveniencia mutua tanto para el cliente como para el desarrollador.
• Diseñar: cuando piensas en diseñar quiere decir que varios de los puntos anteriores ya los tienes resueltos, entonces puedes empezar a maquetar la idea, trabajar los logotipos, los detalles, iconos, menú de opciones y todo el concepto de le estrategia del diseño. Es importante en esta fase contemplar la retroalimentación de otras personas, incluso las del mismo cliente.
• Desarrollar: existen proyectos sencillos que no requieren de mayor desarrollo porque puedes utilizar alguna plantilla, pero otros proyectos te obligan a empezar de cero y desarrollar algo más complejo. En esta fase, debes definir qué lenguajes de programación utilizaras y sobre todo las herramientas adecuadas, evaluar qué tan grande es el proyecto como para utilizar una u otra herramienta.
• Definir condiciones de pago: lo ideal es cobrar de antemano al desarrollo del proyecto una cantidad significativa, como 1/3 o el 50% de lo presupuestado. Sin embargo a veces las condiciones del cliente pueden variar y, dependiendo de la situación y la relación costo-beneficio que percibas, quizás pienses que sea mejor negociar estos términos de forma diferente.
• Lanzamiento: es importante definir desde la planificación si el lanzamiento tendrá estrategia de comunicación que será manejada por el mismo diseñador o serán otras personas las encargadas de dar a conocer el proyecto cuando este sea publicado en línea al público. Además, puedes evaluar la usabilidad, accesibilidad y validar el sitio para que todo quede adecuado.
• Ajustes: el diseñador Ruben Araiza de Trost Media afirma que de alguna forma es inevitable que luego de publicar el sitio web, surjan algunos cambios o ajustes por el cliente.
• Mantenimiento: en el contrato debe contemplarse el mantenimiento del sitio, ya sea porque se le proporciona servicio de hosting, dominio o incluso un pago periódico por el mantenimiento del sitio en cuanto a manejo de contenido o simples cambios. Es importante dejar claro esta parte para que el cliente comprenda que un sitio web no se mantiene por sí mismo.

 Etiqueta

•  Concepto

—Las etiquetas son marcas que se dejan en un texto para que luego sean interpretadas, generalmente para realizar una acción sobre el mismo texto marcado. Por ejemplo, el lenguaje HTML se basa en la ampliación de múltiples etiquetas para dar formato y darle características a un texto. Este texto es interpretado y mostrado por un navegador.

•  Principales etiquetas en HTML 5

<!Doctype HTML>

Es una declaración del estándar usado al construir un documento HTML o XHTML.

<HTML> 

Indica al navegador que este archivo es un documento HTML. </HTML> significa el final del documento.

<title>

La etiqueta <title> define el título de un documento.
Esta etiqueta es obligatoria dentro de la sección head.

<Head>

El elemento head define la cabecera del documento y contiene información del mismo (metadatos, scripts, estilos, ubicación de documentos de estilos, título de la página, etc.).

<meta>

son instrucciones HTML que se utilizan para dar información de nuestra página web a los buscadores y robots de búsqueda de Internet que usan estos datos para crear sus índices.

<body> 

Esta etiqueta tiene unos atributos que nos permiten especificar el fondo, el tipo de letra el tamaño, el color, tanto de el texto como el de los enlaces que iremos añadiendo a nuestro trabajo.

<a>

Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y el navegador lo interpretará así.

<strong>

El elemento strong es el apropiado para marcar con especial énfasis las partes más importantes de un texto.

<p>

La etiqueta <p> se utiliza para representar un párrafo.

<h1>, <h2>. <h3>, <h4>

Esta son utilizadas como encabezado de secciones.

<em>

La etiqueta <em> se usa para indicar énfasis.

</strike> 

La etiqueta <strike> se usa para representar un texto con un estilo de fuente tachado.

<span> 

La etiqueta <span> se utiliza para añadir estructura a una parte de un texto.

<sup>

La etiqueta <sup> se utiliza para representar un superíndice.

<sub> 

La etiqueta <sub> se utiliza para representar un subíndice.

<small> 

La etiqueta <small> se usa para representar un texto con un estilo de fuente pequeña.

<ol> 

La etiqueta <ol> se utiliza para crear una lista ordenada.

<li> 

La etiqueta <li> nos define los objetos de la lista.