Para entender los fundamentos de desarrollo web hay que conocer los diferentes protagonistas que interactúan entre sí en el terreno online, entidades que facilitan que lo que conocemos por “la web”, uno de los variados mecanismos y servicios de Internet, se haga posible.
Tanto si tu perfil es el de un usuario o navegante como si es el de un aspirante a introducirte en el mundo del desarrollo web, con esta publicación podrás podrás familiarizarte con los conceptos básicos relacionados y sus ámbitos de actuación. descubrirás aspectos muy interesantes que te vendrá muy bien conocer, ya que al fin y al cabo, tú también formas parte del complejo entramado que es Internet de una manera o de otra.
Qué es Internet
Internet es un sistema descentralizado de redes de ordenadores conectados, distribuidos en todo el mundo, que está disponible para ofrecer servicios de comunicación por medio de datos.
Su origen esta basado un sistema computacional cuyo objetivo era facilitar la colaboración científica en investigaciones de carácter militar, era el año 1969 y el nombre del invento de llamaba Arpanet.
El objetivo que se perseguía era evitar que las comunicaciones se cortaran por cualquier ataque enemigo, así que para conectar los ordenadores entre sí previnieron la posibilidad de utilizar diferentes rutas, favoreciendo que al fallar alguna se conservara la comunicación.
Además existían diferentes redes que se conectaban entre sí, por lo que se acuño el concepto de red de redes. Esta propiedad aún se conserva a día de hoya pesar de los numerosos avances tecnológicos que han contribuido a su evolución.
Internet hoy es una gran infraestructura física de comunicaciones que soporta un grandísimo conjunto de servicios, a la que nos conectamos habitualmente para interactuar con la infinita variedad de contenidos que existen. Para ello utilizamos diferentes dispositivos y software con diferentes lenguajes y protocolos.
Cómo funciona la web
La web es un sistema de distribución y recuperación de documentos basados en hipertexto que nació en un laboratorio de física nuclear a finales de los años 80. Se trata de un servicio que nos permite navegar a través de las numerosísimas páginas web que están alojadas en servidores de todo el planeta.
Encontramos lo que nos interesa gracias a buscadores que realizan un seguimiento de los enlaces gracias al protocolo “HTTP” y el lenguaje de marcado de hipertexto “HTML” que se encarga de componer las páginas en los navegadores.
El hecho de poner una dirección en nuestro navegador es comparable al de marcar un número de teléfono, nuestro ordenador como cliente que realiza llamada se pone en contacto con el servidor que está vinculado con esa dirección recibiendo la solicitud, este servidor la atiende enviándonos un lenguaje o código que nuestro navegador presenta después de interpretarlo.
Este proceso tan aparentemente sencillo y con el que estamos tan familiarizados implica una gran complejidad en su funcionamiento y la intervención de muchos actuadores.
Paradigma cliente-servidor
Los servidores son ordenadores que se conectan a internet con el software adecuado para permitir la consulta de información almacenada en ellos por parte de otros ordenadores conectados a la red. Un servidor puede ser cualquier equipo doméstico o pertenecer a una infraestructura de pequeños o grandes centros de datos, y es indispensable dentro del desarrollo web.
Las limitaciones de los equipos individuales o domésticos hacen inapropiado su uso para poder realizar tareas como servir la información a un gran número de solicitudes a la vez, además el tipo de conexiones y el ancho de banda de los equipos con estas características suele ser limitado. Otro inconveniente es el hecho de que la información debería estar disponible de forma permanente, y brindar la posibilidad de realizar copias de seguridad periódicas de esta información almacenada o actualizada, aparte de ofrecer otros requisitos mínimos de seguridad para su consulta y protección.
Estos motivos hacen que sea una práctica habitual elegir un proveedor de alojamiento web especializado para alquilar el espacio que ocuparán los archivos, sitios web de consulta o aplicaciones que dispongamos en los servidores que gestionan.
Estos servidores profesionales no siempre sirven la información con mayor rapidez, pero están preparados para soportar multitud de accesos de forma ininterrumpida y disponen de un ancho de banda considerablemente superior al que se puede utilizar en redes domésticas o del trabajo. Suelen estar apilados o dispuestos en rack y formando torres, con su ubicación en instalaciones especiales dotadas de medidas de seguridad.
Los usuarios que se conecten a la red para solicitar información a los servidores necesitan hacerlo mediante el uso de un software cliente web, se trata del navegador que utilizamos de forma habitual. También se puede utilizar software que permita interactuar a través de diferentes protocolos, como es el caso del protocolo FTP, permitiendo descargar íntegramente archivos del disco duro disponibles en el servidor.
Cuando en nuestro navegador hacemos una petición introduciendo una URL en la barra de dirección, esta solicitud es recogida por un servidor de nombres de dominio o DNS, este servidor traduce la URL en una dirección IP, que a su vez es utilizada por el navegador para localizar al servidor web que aloja la página concreta.
Según las características y enfoque en el desarrollo web de las páginas del sitio pueden ocurrir diferentes cosas:
Sitios web estáticos: En el caso de una página en HTML esta se transfiere al navegador junto a sus contenidos asociados almacenados en directorios por medio de rutas, tales como imágenes, vídeo o audio, hojas de estilo, etc. Si existe algún tipo de script en la composición de la página este se ejecutará en el lado del cliente gracias al de nuevo navegador.
Sitos web dinámicos: En este caso el proceso inicial es similar al anterior, pero después de que el navegador haga la solicitud de la página y el servidor DNS que le brinde la IP, en el lado del servidor tienen lugar otros procesos para buscar, encontrar y devolver información. Se trata de consultas a bases de datos que se ejecutan por medio de lenguajes del lado de servidor, como pueden ser PHP, .NET, Ruby, etc. gracias a las cuales se compone la página para enviarla al navegador junto al resto de elementos anteriormente descritos.
Qué son las DNS
Las direcciones IP identifican cada uno de los dispositivos que se conectan a internet, son como números de teléfono que interactúan a través de la red con el terminal correspondiente facilitando la conexión.
Las IP están formadas por grupos de números, por ejemplo… 897.657.210.345, pero como memorizarlas no sería viable debido a la cantidad de ellas que podemos consultar a lo largo del día, existe un sistema de nombres de dominio que facilitan una navegación fluida, se trata de los nombres de dominio queelegimos para definir las URL, y que a la vez son los alias de estas direcciones IP difíciles de recordar.
Las DNS (Domain name system) son precisamente las que se encargan de traducir esos nombres de dominio que nos benefician en las IP que interpretan las máquinas. Son tablas con las equivalencias entre los dominios y las direcciones IP, distribuidas y replicadas por distintos servidores en todo el mundo, y se actualizan ininterrumpidamente gracias a conexiones programadas. Nuestro distribuidor de acceso a internet nos proporciona dos direcciones de servidores de DNS.
Los proveedores de servicios de Internet suelen otorgar una IP diferente cada vez que se conectan los equipos domésticos o del trabajo, a no ser que se solicite una IP fija por un coste adicional. Sin embargo los servidores que alojan la información utilizan IPs fijas, evitando que el reconocimiento de su ubicación cambie de lugar.
Cuando un determinado contenido, página o sitio web cambia de asociación a un nuevo dominio e IP, se pone en marcha un proceso que se conoce como “propagación de DNS”. Es como se denomina al espacio conceptual de tiempo que tarda en asociarse la información con la nueva dirección para poder solicitarla, y se también se realiza en los servidores de todo el mundo.
Los protocolos de Internet en el desarrollo web
Los protocolos de internet, tan importantes para considerar en el desarrollo web, son conjuntos de normas que permiten compartir datos entre diferentes equipos y dispositivos independientemente de su arquitectura o su sistema operativo. Los protocolos son fundamentales en el sistema, ya que se utilizan a modo de estándares para garantizar el funcionamiento de todo en Internet.
Internet utiliza una familia de protocolos de red conocida como TCP/IP (protocolo de transmisión) y protocolo de Internet respectivamente. Este conjunto de protocolos es numeroso, aunque mayoritariamente se utiliza de forma consciente un pequeño grupo.
Cada uno de estos protocolos está diseñado para tareas muy específicas como por ejemplo HTTP para navegar, FTP para transferir archivos de una forma más eficiente, SMTP para transferir el correo de cliente a servidor, o POP para descargar los mensajes de correo desde el servidor hasta la bandeja de entrada del cliente de correo, IMAP que es similar a POP pero con características añadidas, RTP para la entrega de audio o vídeo a través de internet utilizado en las transmisiones de voz sobre IP y en las aplicaciones de chat, Telnet y SSH para crear conexiones remotas interactivas en forma de terminal virtual, etc.… existen unos cuántos más.
TCP/IP opera a través del uso de una pila de capas entre las que se distribuyen los protocolos necesarios para completar una transferencia de datos. Las capas son también los diferentes niveles por los que van pasando los datos.
Anatomía de una URL
Un URL (localizador uniforme de recursos) permite localizar el servidor correcto gracias a su sintaxis, y al servidor localizar el recurso solicitado, ya que los archivos de las páginas web están alojados en los discos duros de los servidores, y generalmente distribuidos en diferentes carpetas o directorios.
Las URL pueden ser muy largas y complejas o muy cortas y sencillas
Ejemplo: http://www.restaurantemanuel.es
Si analizamos sus partes, serían las siguientes:
El inicio “http” es el protocolo de navegación
Los dos puntos y barras “://” se encargan de separar el protocolo del nombre del recurso.
Los caracteres “www” hacen referencia al subdominio principal.
El nombre de “restaurantemanuel” representa el dominio de segundo nivel.
La extensión “.es” es el dominio de primer nivel.
Las dos últimas partes “restaurantemanuel” y “.es” conforman el concepto de dominio o nombre que utiliza el navegador para localizar al servidor y su contenido. Normalmente no es necesario utilizar el subdominio principal “www” ya que el mismo servidor suele seleccionar el que está por defecto, pudiendo introducir simplemente “restaurantemanuel.es” para ser redirigidos a la dirección completa y correcta de la página web.
Cómo funcionan los navegadores
Los navegadores son las aplicaciones que instalamos localmente en un ordenador y que nos permiten realizar consultas y navegar por las páginas web. Son indispensables para trabajar y realizar pruebas en el desarrollo web, disponen de una interfaz de usuario con un marco que envuelve la página web y contenidos que muestra, e incorpora la barra de direcciones y otros elementos como la barra de scroll, botones y otros que pueden variar en función del modelo y la configuración realizada o incluso diferentes extras que se hayan instalado.
Los navegadores disponen de un motor interno que se encarga de gestionar las comunicaciones a través de varios componentes.
También incorporan un motor de renderizado que interpreta en código HTML y CSS y controla la representación visual de las páginas. Esta interpretación puede variar ligeramente entre diferentes navegadores, motivo por el que muchas páginas no se ven exactamente igual en ellos.
Por supuesto incorporan el protocolo HTTP y otros adecuados que pueden variar según el modelo, la versión, la operatividad o incluso las necesidades del usuario.
El navegador dispone de capacidad para almacenar datos asociados a las cookies y otros archivos de las páginas que se visitan, y también de la gestión de sesiones que dependen de ellos. Aunque en HTML5 existen otros modelos de almacenamiento de datos en el cliente o navegador.
El intérprete de JavaScript se encarga de la ejecución del código JavaScript que tiene lugar en el navegador, y también puede haber diferencias sobre la interpretación de este código entre navegadores.
Existe contenido que los navegadores no pueden procesar o interpretar por si mismos, en algunos casos necesitan extensiones para poder hacerlo. También existen plugin, módulos o componentes añadidos para poder visualizar determinados contenidos cuyos archivos han sido generados con aplicaciones no estandarizadas, como es el caso de Flash player o Silverlight.
Estándares web y W3C
Los estándares web se hacen necesarios para establecer unas normas basadas en criterios que establezcan un equilibrio en el terreno online. Esto evita que los principales comercializadores de software y hardware enfoquen sus esfuerzos desde un punto de vista exclusivamente comercial y beneficioso solo para ellos, compitiendo además entre sí por dominar diferentes mercados, algo que era bastante habitual allá por el año 1995, en plena guerra de los navegadores.
Esto propiciaba por ejemplo que cada navegador interpretara los contenidos de manera muy diferente, obligando a los desarrolladores de sitios web a incluir indicaciones sobre el navegador concreto en el que debía visualizarse cada página y su qué versión.
Por suerte diferentes comités de estandarización fueron precedidos por el “Web Standards Project” o proyecto de estándares web, formado por un grupo de diseñadores y desarrolladores descontentos con la situación.
Ellos empezaron a recomendar de manera organizada la adopción de las recomendaciones de la World Wide Web, consorcio W3C, una comunidad internacional que promueve estándares para reducir el coste y complejidad del desarrollo, garantizando la accesibilidad y viabilidad de los documentos y el crecimiento de la web a largo plazo.
Las recomendaciones del W3C no empiezan a ser adoptadas por las principales empresas actuadoras hasta 1998. La entrada en la escena de otros navegadores de código abierto como Firefox, coordinado por la corporación y la Fundación Mozilla, contribuyeron a que otras compañías de software advirtieran las ventajas de a largo plazo de apoyar los estándares web.
Los diseñadores y desarrolladores actuales buscan que su trabajo se adapte a estos estándares para garantizar que funcione correctamente en diferentes plataformas y dispositivos. Aún así siempre hay diferentes interpretaciones por parte de los navegadores que obligan a los diseñadores a realizar ajustes para lograr los mejores resultados.
Los estándares web renuevan habitualmente las especificaciones para diferentes lenguajes como HTML y CSS, así que el desarrollo implica lógicamente mantenerse pendiente de novedades y actualizaciones. También hay que tener en cuenta que estos aspectos no son incorporados de forma inmediata por los navegadores, más bien es algo que sucede progresivamente.
Los servidores web para almacenar la información
Todos los servidores poseen una IP única, pero bajo el concepto de alojamiento virtual pueden servir diferentes sitos web almacenados en sus discos duros con nombres de dominios también diferentes bajo esta única IP. Este modelo recibe la denominación de “alojamiento compartido”, pero si el proyecto web es suficientemente grande en términos de almacenamiento, es posible contratar planes de servidores “dedicados” para hacer un uso exclusivo de ellos.
Según la naturaleza del sitio web puede ser posible la ejecución de código en el servidor, y para ello este debe contar con las aplicaciones web necesarias. Para ello existen diferentes combinaciones, entre las más conocidas e encuentra el conocido como “paradigma AMP” que integra un software de servidor Apache basado el el protocolo http para navegar, un gestor de bases de datos MySQL para almacenar el contenido, y el lenguaje de programación avanzada PHP que se encarga de solicitar datos a la base de datos para componer las páginas y servirlas posteriormente.
Este trío tiene en común la particularidad de ser de código abierto, pero existen otras alternativas que implican otros lenguajes, bases de datos y servidores, también libres o con un coste adicional. La elección de un sistema u otro dependerá de las preferencias y requerimientos, así como del tipo de proyecto.
La tecnología Front End
El término “front end” hace referencia a los lenguajes que operan del lado del cliente para ser interpretados por el navegador. Los lenguajes más extendidos para su utilización en el lado del cliente son HTML, CSS y JavaScript.
El primero HTML es un sencillo código de etiquetas que define la estructura del contenido, mientras que CSS se encarga de la apariencia visual de la página web interactuando con las etiquetas de HTML, y JavaScript cubre la necesidad de desarrollar comportamientos avanzados con multitud de posibles funcionalidades.
Aunque el front end se relaciona más con perfiles enfocados al diseño por el uso de HTML y CSS con sus características más estéticas, la verdad es que implica también la concepción y lógica de la programación pura y dura al incluir JavaScript en el proceso de desarrollo.
La tecnología Back end
El back end o programación del lado de servidor consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web. El objetivo es generar páginas web HTML dinámicamente como respuesta a esa petición.
Aunque cada lenguaje tiene sus diferencias, el proceso de scripting del lado de servidor es similar en ellos. Cuando el usuario realiza una solicitud, el código del lenguaje de lado de servidor realiza habitualmente una consulta en la base de datos, que puede incluir también cálculos y procesos para definir la respuesta.
Las páginas se devuelven al usuario componiéndose en el momento de la búsqueda o interacción, esto se conoce como una secuencia de comandos del servidor, y también sucede cuando nos damos de alta o nos registramos, al rellenar y enviar un formulario, si hacemos reservas o compramos un billete de tren, entre otros muchos casos.
El hecho de que el código se ejecute en el servidor implica la protección de esta información sensible que queda almacenada con seguridad. Por otro lado la carga de la ejecución recae sobre el servidor que debe estar preparado para ello.
El sistema en su conjunto es más lento, ya que la página debe descargarse y componerse por completo para mostrarse en el navegador, al contrario que con el código ejecutado solo y exclusivamente del lado del cliente.
Nota importante: Aunque la tecnología front end y back en son diferentes desde el punto de vista técnico, lo cierto es que a efectos prácticos el código del lado del cliente y del servidor se solapan. Generalmente se encuentran conectados y se hace un uso mixto de estas dos tecnologías.
Otras tecnologías complementarias en el desarrollo web
Hemos tratado algunos de los conceptos básicos sobre tecnologías de desarrollo web, pero existen además variedad de tecnologías complementarias basadas en las anteriores para facilitar la creación de sitios web. Entre los diferentes recursos se encuentran las plantillas con diseños y funcionalidades predefinidas, preprocesadores, gestores de contenidos, frameworks o marcos de desarrollo con activos que agilizan el proceso de diseño, y los IDE (inferfaces de desarrollo de aplicaciones) que ofrecen la combinación de todo tipo de accesorios y complementos.
Estos medios también pueden incluir fuentes tipográficas, iconos, librerías con funciones previamente desarrolladas de lenguajes de programación, archivos CSS, plantillas en HTML, etc.… y constituyen una base ideal sobre la que construir proyectos web personalizados partiendo de prototipos.
Conclusiones
El desarrollo web necesita y se alimenta de muy diferentes sistemas, enfoques, procedimientos y recursos, que comprenden una compleja trama de elementos que interactúan entre sí para lograr disponer contenidos interactivos con información y servicios a los que podamos acceder.
A la vez es un entorno cambiante, siempre para mejorar, y los avances se suceden de manera constante, sobre todo en el terreno del desarrollo de nuevas aplicaciones o complementos, que resuelven problemas u ofrecen una mejor solución a los que ya hay. Aunque como se suele decir “cada maestrillo tiene su librillo” o metodología, lo cierto es que el desarrollo web exige permanecer en constante aprendizaje.
2. Etapas para el diseño y desarrollo de sitios web
El diseño y desarrollo de sitios web asociados a cualquier actividad conlleva un planteamiento cuyas etapas es aconsejable definir para establecer unas expectativas en cuanto a objetivos a cumplir, plazos de tiempo de realización y presupuesto.
Tanto si decidimos crear nuestro propio sitio web nosotros mismos, como si decidimos encargar esta labor a terceros, el resultado dependerá en gran medida de una buena organización y los recursos de los que dispongamos, también a nivel de conocimiento y experiencia, ya que son muchos los factores que influyen en el proceso, te explicamos la mejor manera de gestionarlo de forma resumida para conseguir un resultado satisfactorio.
Recopilación de datos
En la primera etapa es importante recabar información entre las partes interesadas sobre los objetivos, el público al que va dirigido y el tipo de contenidos que albergarán las páginas que forman parte del sitio web según la temática, así como las funcionalidades necesarias que estas deberían realizar para los usuarios.
Cada parte de esta etapa influye directamente en las siguientes fases del proceso, así que las comentamos dedicandolas un sub-apartado para considerarlas por separado.
Definición de objetivos asociados a la actividad
El diseño web debe servir a los intereses de la marca, negocio o empresa, y puede estar sujeto a la definición de un plan de marketing onlinetambién asociado a estos intereseNo es lo mismo un sitio web enfocado a ofrecer servicios por ejemplo, que otro para promocionar un evento que tiene lugar entre fechas concretas. Ni tampoco uno cuyo objetivo es disponer información sobre los requisitos para realizar ciertos trámites que otro para realizar compras o descargas, aunque también puede que ambos conceptos formen parte del mismo proyecto.
Definición del público objetivo
Tener en cuenta el perfil o tipo de usuario hacia el que está enfocada la actividad online es importante, sobre todo para diseñar una estructura atractiva y seleccionar posteriormente los contenidos adecuados a su demanda, para exhibirlos en ella.
Así que definir al público objetivo dentro de un sector o ámbito de actuación aunque solo sea con características como la edad, localización o gustos y necesidades concretas, puede ser determinante para proyectar diferentes apartados que sirvan como reclamo al usuario.
Selección de contenidos
Al contrario de lo que se suele pensar, los contenidos de un sitio web y sus características se deberían concretar en esta primera etapa, antes de realizar cualquier boceto o representación de las páginas para su visualización, ya que estos determinarán otros aspectos importantes a considerar en la posterior maquetación de cada una de ellas.
Desde la redacción de textos para contenidos online hasta las fotografías o materiales multimedia como vídeos e interactivos deberían estar más o menos definidos antes de diseñar o buscar esquemas o plantillas. No será lo mismo por ejemplo una página que muestre una galería a otra que ofrezca una lista de archivos para descargar o productos similares dentro de una misma categoría, cada demanda en particular conllevará unos requisitos para resolverla.
Planificación
En casi cualquier proyecto de diseño y desarrollo de sitios web se hace necesariodividir planteamientos en fases más definidas o acotadas en el tiempo, para irse completando porpartes que pueden ensamblarse posteriormente y ser verificadas o testadasdurante todo el proceso.
La definición del mapa del sitio da pistas sobre las tecnologías que será necesario utilizar, y posteriormente las maquetas de las páginas ponen de relieve la disposición y localización de los contenidos y otras funcionalidades.
La correcta organización de los contenidos con una buena arquitectura de la información, beneficiarán la rápida asimilación del usuario a la hora de interactuar con los diferentes apartados. Elegir el nombre adecuado en los títulos y menús es también relevante para favorecer el posicionamiento desde el punto de vista del SEO, entre otras muchas cosas.
Tecnologías
En esta etapa se define qué plataforma o sistema, tecnologías web y lenguajes de programación o gestores de contenidos serán más adecuados para la creación del Sitio Web,. hay que valorar las características y ventajas a nivel de diseño y funcionalidad que debería tener.
Esta elección implica a su vez entender el protocolo de actuación para llevar a cabo labores de actualización y mantenimiento de cara al futuro, especificando también quién o quienes se harán cargo de ellas.
Adaptabilidad y resoluciones compatibles
La variedad de dispositivos existentes y las diferentes resoluciones en las que se puede visualizar un sitio web es otro punto importante que hay que considerar, para definir cómo se visualizarán las páginas en la mayoría de alternativas posibles con características responsive.
Puede que no sea buena idea que ciertos contenidos se muestren también en dispositivos móviles para evitar perjudicar la visualización del conjunto, ya que debido a su menor tamaño de pantalla y resolución, pueden obligar a hacer excesivo desplazamiento o scroll al usuario para alcanzar información relevante, que de no ser así puede ser omitida.
Bocetos y wireframes
Cada página que forma el sitio es susceptible de presentar un diseño más común o diferente y peculiar en función del tipo de información que muestre y cómo lo haga, siempre en beneficio de lograr una buena e intuitiva experiencia de usuario.
Los wireframes son esbozos o bocetos realizados con alguna aplicación de diseño digital o no, que muestran maquetas de las páginas con la disposición de los elementos que forman parte de ellas de forma conceptual, tal como la situación de los textos, colocación de las cajas de imágenes o vídeos, etc… permitiendo el estudio y la meditación para mejorar el resultado del conjunto.
Disposición del contenido
Elcontenido atractivo y relevante al fin y al cabo es lo más importante, ¿Qué páginas mostrarán qué materiales? y ¿de qué forma y dónde se mostrarán estos materiales en ellas?, ¡indiquemoslo en la maqueta! para facilitar la comprensión.
Pueden surgir variedad de cuestiones que se discutan colocando los contenidos en las maquetas del paso anterior más o menos definidas, y que a su vez obliguen a realizar cambios relacionados con otras etapas, siempre para encontrar el equilibrio aplicando la lógica.
Diseño estético, corporativo y funcional
En esta etapa se procede a trabajar en un diseño web moderno y funcional de las páginas del sitio utilizando las técnicas y aplicaciones necesarias para hacerlo o la combinación de ellas, como es el caso de IDES, frameworks, plataformas y plantillas considerando los requerimientos de anteriores etapas.
El diseño web debe cumplir las expectativas en cuanto a estética y corporativizad representativas de la empresa o marca, pero también otras en cuanto a la definición y localización de elementos a los que más adelante, en la siguiente etapa de desarrollo, habrá que dotar de cierta funcionalidad.
Desarrollo e implementación de tecnologías web
El concepto de desarrollo web está asociado a que los elementos que lo requieran incorporen las funcionalidades que necesitan, para responder sobre todo a las interacciones del usuario o visitante a través del navegador o de tecnologías de servidor.
A día de hoy los sitios web pueden incluir muchas funcionalidades que permitan por ejemplo desde enviar un formulario, suscribirse a un boletín o descargar archivos, hasta insertar publicidad programática, buscar contenidos en el sitio o realizar pagos. La utilización de los lenguajes de programación apropiados o selección de los módulos o plugins necesarios para su implementación, debe ser una labor de comprobación sistemática y cuidadosamente realizada, basada en la mayoría de los casos en ensayos de prueba y error.
Pruebas y lanzamiento del sitio web
El sitio web al completo incluyendo cada una de las páginas que lo componen y sus funcionalidades se ponen a prueba navegando entre sus diferentes apartados y menús en diferentes exploradores y dispositivos, para detectar y corregir posibles problemas de compatibilidad o navegabilidad.
Se verifica que las páginas y contenidos cumplan los estándares web actuales, así como unas normas básicas de accesibilidad para facilitar la consulta de las páginas del sitio también a personas con alguna discapacidad. Una vezelegido el proveedor de servicios de alojamiento o servidor particular, los archivos que componen el sitio web se cargan en los directorios correspondientes para empezar a recibir solicitudes de los usuarios a través de un nombre de dominio asociado a las diferentes URL, tanto si el trabajo de diseño y desarrollo se realiza en un ámbito local o directamente online, se verifica que los buscadores puedan acceder sin problema a la información de las páginas para su indexación.
Mantenimiento y actualizaciones
El sitio web enfocado a la consecución de objetivos asociados a la actividad de una empresa o negocio debe estar preparado para facilitar su mantenimiento y realizar futuras actualizaciones.
Además, casi cualquier estrategia online esta asociada en la mayoría de los casos a atraer visitantes nuevos y recurrentes hacia las publicaciones del sitio web de la empresa o marca. Así que es importante tener en cuenta desde el inicio la manera de llevar a cabo estos procesos para poder incorporar otros nuevos contenidos o renovar y actualizar los existentes.
Reflexiones
En el diseño web, planificar permite anticiparse a los problemas para ofrecer soluciones concretas y responder a las necesidades del sitio web optimizando los gastos, recursos y plazos de tiempo. El tiempo calculado en relación al presupuesto y los recursos disponibles son factores determinantes para lograr un buen diseño.
Con presupuestos limitados, por lo general es preferible hacer sitios web con menos páginas bien diseñadas que favorezcan la buena experiencia de usuario inicialmente, pero que sean escalables en cuanto a nuevas funcionalidades, a otros con muchas páginas o información desestructurada y diseño pobre.
En Ingenio Virtual realizamos sitios web para variedad de modelos y tipos de negocio, con diseños personalizados y un amplio rango de precios, siempre teniendo en cuenta los objetivos asociados a la actividad, si deseas disponer de un sitio web o renovar el que ya tienes, ponte en contacto y te asesoramos.
3. Metodología para la creación y desarrollo de sitios web
La elaboración de páginas Web comprende las fases de Análisis, Planificación, Contenido, Diseño, Programación, Testeo, Mercadeo y Publicidad.
El Método para Creación de Sitios Web comprende las fases de Análisis, Planificación, Contenido, Diseño, Programación Testeo, Mercadeo y Publicidad.
Fase de Análisis del Proyecto
A la hora del desarrollo de un sitio Web se debe comenzar por dar respuesta a un grupo muy concreto de interrogantes, que permitirán aclarar y definir de manera básica las expectativas existentes en torno a la aplicación Web e Interacción que se va a generar.
Selección de Objetivos
Todo proyecto debe contar con objetivos definidos, contra los cuales puede medirse la efectividad de las acciones que se desarrollen.
Green, chilcoott y Flick (2003) denominan esta etapa, resumen de objetivos, donde establecen tres puntos primordiales para esta selección, los cuales son:
Definir los usuarios
Lo que los usuarios esperan de la visita
Qué se pretende comunicar a través del sitio Web.
También podemos denominarlos: selección de usuarios, expectativas de usuario y expectativas de la organización; se describe a continuación:
Selección de usuarios
Los usuarios o la audiencia de Internet se refiere a aquella parte de la población a la que se pretende alcanzar o influir con el sitio Web; esto está estrechamente vinculado con la naturaleza del sitio que se propone. Toda la información que se obtenga servirá para establecer:
Criterios de diseño de contenido
Lenguajes
Estética
Entre otros.
"El modelado del usuario se basa en definir clases o perfiles de los usuarios y así poder diseñar con el objetivo de satisfacer las necesidades propias de cada grupo de usuarios"
Expectativas de Usuario
La organización puede o no, ser conocida por los usuarios en potencia del sitio. Al plantearse la puesta en marcha de un sitio Web es necesario conocer hacia quién va dirigido éste y qué podrían esperar dichos usuarios al visitarlo.
"Tómese un tiempo para contactar con sus clientes, proveedores y amigos, con el fin de averiguar cómo harían ellos para encontrar su sitio Web y qué les gustaría ver en él"
Expectativas de la organización
Es vital establecer o fijar qué resultados pretenden conseguir la organización con la creación del sitio Web. Con ello se busca definir el propósito del sitio Web, y se deben incluir aspectos que van desde los más generales, relacionados con el público de destino, hasta los más específicos relacionados con la organización.
Morrin y Dickson (2001) indican que se debe decidir si lo que se busca con el sitio Web es:
Aumentar ventas
Ofrecer servicios especializados y conocimientos
Publicidad y patrocinio
Incentivos (productos gratis para promoción),
Publicitar.
Fase de Planificación
Todo proyecto posee una fase de planificación. En ella se deben definir:
Cuáles son los requerimientos técnicos para este fin
Quiénes serán los miembros del equipo
Seleccionar la estructura
Planear un sitio bien organizado y
Realizar estudios de mercadeo comparativo
Selección de Software
En esta etapa de la metodología se busca determinar los requerimientos en cuanto al software que se utilizará para el desarrollo de la aplicación; es decir:
Sistemas operativos
Servidor (software)
Editores para diseño Web
Lenguajes de programación
Animaciones y
Otros componentes.
Esta definición dependerá de muchos aspectos como la existencia de licencias de software o los recursos técnicos y hardware.
Selección de Hardware
Antes de emprender el desarrollo de una aplicación Web, se deben determinar:
Los requerimientos de hardware de la aplicación
El equipo servidor
La capacidad de respuesta
Terminales
Requerimientos de red
Determinar si la aplicación ha de disponerse de una intranet o extranet
En el caso que la aplicación vaya a estar publicada en Internet, se debe reservar el dominio y ubicar el servicio de hospedaje de empresas que se especializan en este servicio (Morrison y Dickinson)
Selección del equipo de trabajo adecuado
"El entorno de trabajo en equipos surge de la necesidad de segmentar el proceso de producción en varias funciones diferentes"
Parte de la planificación de un sitio Web consiste en pensar en términos de equipo de trabajo.
Se trata del conjunto de técnicos que estarán a cargo de la concepción, construcción, evaluación y mantenimiento del sitio.
Los miembros del equipo Web serán los responsables de todas aquellas estructuras no visibles que hacen a la operatividad de un sitio.
El equipo se basará en la convergencia de saberes y experiencias. Debe estar integrado por técnicos de muy diversas disciplinas, capaces de contemplar los distintos aspectos que están en juego.
Inicialmente, la mayoría de las organizaciones tenían a cargo del sitio Web un Webmaster que trabajaba solo, preparaba el servidor, editaba las páginas, hacía el diseño gráfico, y escribía o reunía los textos. Con el tiempo, se ha comprendido la complejidad de estos proyectos.
Es muy importante que el equipo tenga un líder (que puede en un futuro ser el Webmaster o no) porque formar un equipo Web requiere un gran compromiso personal e institucional.
Los equipos no se construyen de la noche a la mañana, ni a partir de una decisión administrativa o un mandato. Requieren un proceso de consolidación, que pasa por tiempos de búsqueda, acuerdos y adecuación.
Un equipo Web debe estar en constante comunicación tanto con aquellos que le han asignado su misión, como con sus destinatarios (clientes o usuarios). Su éxito se basa además, en una estrecha colaboración y comunicación entre sus miembros.
Cada miembro del equipo Web debe estar capacitado en su campo de trabajo (la presencia o el nivel de experiencia de ciertos miembros del equipo puede variar dependiendo del proyecto).
Se sugiere una lista de miembros que podrían ser parte de este equipo, de esta lista se extrajeron los siguientes:
Jefe de proyecto: Encargado de la supervisión y control del resto del equipo. Actúa como enlace entre el usuario y los demás miembros.
Productor: Este se encarga de establecer el aspecto, percepción y funcionalidad del sitio.
Editor: Ayuda a establecer y mantener el estilo, además de la integridad del sitio. Tiene la responsabilidad de controlar la corrección y el flujo de texto y en algunos casos el contenido multimedia del sitio.
Escritor: Los escritores deben interesarse por los detalles técnicos y la incorporación al desarrollo de estándares con ro al sitio, utilización de las palabras apropiadas, ortografía y gramática. Es necesario que el escritor tenga conocimiento de HTML, o de herramientas con FrontPage u otra aplicación.
Diseñador de bases de datos: Desarrolla las bases de datos que gestiona el sitio Web, se ocupa de definir sus relaciones.
Diseñador de scripts: Trabajar en conjunto con el diseñador de base de datos. Desarrolla y depura los scripts, los componentes Activex y otros elementos interactivos en la Web.
Diseñador Gráfico: Se encarga de crear los archivos visuales del sitio, también puede encargarse de la creación de los archivos de sonido y de película. Trabaja con imágenes y pequeñas labores de programación
Técnico de Hardware: Configura, prueba, opera y mantiene las computadoras, impresoras y máquinas necesarias para la ejecución y mantenimiento del sitio.
Técnico de pruebas: Si se dispone de un sitio grande o complejo puede resultar provechoso la incorporación de un Técnico de prueba al equipo. Su labor consiste en garantizar que todo funcione como debería, se encarga de probar los elementos de todas las páginas.
Aunque estas funciones podrían tomarse como esenciales, la estructura siempre vendrá determinada por el alcance del proyecto.
Benchmarking
Es una manera de detallar, observar y evaluartodas aquellas páginas Web calificadas como las mejores que se encuentre en la red, con la finalidad de diseñar una forma que permita crear un producto de alta calidad, productividad y competitividad.
Una manera práctica de realizar el benchmarking es plantearse una serie de preguntas al momento de visitar las páginas que se han seleccionado como las mejores del ramo, Morris y Dickson (2002) sugieren las siguientes:
Estructura de navegación
“La base de un sitio bien diseñado es una estructura definida con precisión”
Las relaciones de las páginas entre sí configuran la estructura del sitio.
A partir de la página principal se vinculan mediante enlaces al resto de las páginas, esto es bastante sencillo mediante código HTML, pero es más complicado decidir el orden, de qué manera y con qué configuración se establecerán los vínculos.
La estructura de un conjunto de páginas Web es muy importante, ya que permitirá al lector visualizar todos los contenidos de una manera fácil y clara (buena estructura), o provocar en el lector una sensación de estar perdido, por lo cual no encontrará rápidamente lo que busca y terminará por abandonar el sitio (mala estructura).
Los autores Green, Chilcott y Flick (2003), destacan los tipos de estructura de navegación:
ESTRUCTURA LINEAL
Esta estructura consiste en una línea recta que recorre el sitio desde la página de inicio hasta la página final.
Es muy útil cuando se desea que el lector siga un camino fijo y guiado, además el de impedir que se distraiga con enlaces a otras páginas. Por otra parte se puede causar al lector la sensación de estar encerrado si el camino es muy largo o poco interesante.
Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.
ESTRUCTURA JERÁRQUICA
La estructura jerárquica, como se observa en la siguiente figura:
Es la típica estructura de árbol, en el que la raíz es la página de bienvenida, ésta se puede también sustituir por la de contenido, en la que se exponen las diferentes secciones que contiene el sitio.
La ventaja de esta estructura es que el usuario siempre está ubicado y puede moverse fácilmente por el sitio.
Todo gracias a que la mayoría de las páginas secundarias permiten regresar a la página de inicio, los visitantes controlan completamente la navegación.
ESTRUCTURA RADIAL
En este modelo las páginas secundarias no se conectan entre sí, y se debe navegar por la página principal para ir de una secundaria a otra, es decir, la principal contiene enlaces a todas las secundarias, pero las secundarias sólo contienen un entorno a la principal, tal cual se aprecia en la figura que sigue:
La ventaja de esta estructura es que facilita la navegación, los visitantes sólo tendrán que efectuar uno o dos clics para retornar a la página principal; sin embargo, esto podría también ser un inconveniente porque obliga al usuario a regresar siempre a la página de inicio.
ESTRUCTURA DE RED
En ella se plantea un modelo en el que todas las páginas están relacionadas entre sí. Es una estructura ideal para sitios especializados en un tema, en la que se le permite al usuario una navegación libre y sin limitaciones como la que vemos a continuación:
Costos de inversión
A la hora de planificar un sitio Web, se debe realizar un estudio de viabilidad que refleje el costo financiero a invertir, y que abarque:
Tiempo
Personal
Hospedaje Web
Dominio
Licencias en caso de necesitarse
Mantenimiento
Contar con un método de control de tiempo se hace pertinente en el desarrollo Web, al igual que en otros proyectos, ya que el tiempo implica dinero.
Una técnica para el control del costo de cierta actividad, es el sistema de agenda, que consiste en dividir cada hora en segmentos de seis minutos llamadas unidades, y es a partir de la cantidad de unidades por actividad que se medirá el costo de ésta.
Beneficios a obtener
La puesta en marcha del sitio no lo es todo, la planificación del desarrollo de un sitio Web debe abarcar aspectos como beneficios a adquirir con el funcionamiento del mismo.
Antes de establecer el desarrollo de un sitio Web se debe estimar el tiempo de retorno de la inversión, ya que de esa forma tangible, como por ejemplo un retorno monetario, o intangible como la mejora de las relaciones interpersonales de la organización.
Fase de Contenido
Básicamente el éxito de un sitio Web se debe a su contenido. El contenido del sitio será probablemente una combinación de la información que actualmente se posee y de la que se tendrá que crear.
Es conveniente presentar un contenido acorde a los objetivos planteados para desarrollar el sitio, y que la información a plasmar cubra las necesidades e intereses del público a quien va dirigido.
Fase de Diseño
El diseño Web supone un trabajo extenso y detallado, puesto que abarca no sólo la interacción de múltiples elementos, como tecnología multimedia (audio, sonido, imágenes, animaciones, entre otros); sino, que abarca también su integración con una estructura lógica basada en el propósito del sitio.
Representando una labor que va más allá de la simple necesidad e inquietudes de sus potenciales usuarios.
Al momento de diseñar sitios Web, es necesario tener en cuenta aspectos como la usabilidad y accesibilidad.
Usabilidad
Referido al tiempo, esfuerzo y capacidad requerido por el visitante, para que alcance un determinado nivel de adaptación al sistema, esta puede estar vinculada en ocasiones al número de pasos necesarios para lograr determinada actividad, y al nivel de conocimientos que requieran los usuarios para el uso de la aplicación.
Accesibilidad
Un sitio Web se desarrolla con la idea de que sea visto por el mayor número de visitantes, pero hay que tener presente que cada uno de estos puede acceder a la información con equipos, navegadores e idiomas distintos, estos factores pueden impedir que el sitio no pueda ser apreciado en su totalidad.
Romero (1999) señala tres áreas fundamentales para determinar la accesibilidad de un sitio Web, estas son:
Accesibilidad a la computadora: Referida a la capacidad de hardware con la que se debe contar para el uso de la aplicación Web, lo ideal en esta área es que la aplicación se adapte a la computadora cualquiera que este sea.
Accesibilidad del navegador utilizado: En ocasiones mismos contenidos se visualizan de distintas maneras en diferentes navegadores Web, se recomienda utilizar un diseño que se pueda visualizar en la mayoría de los navegadores y apegado al estándar.
Accesibilidad del diseño de las páginas Web: Los usuarios pueden tener desactivadas algunas funcionalidades de los navegadores Web, lo que podría incidir en la correcta visualización del contenido de el sitio Web.
Fase de programación
Esta etapa corresponde a la utilización de las herramientas de programación Web. En este punto es primordial seleccionar:
Los lenguajes de programación en los que se desarrollará el sitio Web
La base de datos
Definir qué contenido del sitio será estático y cuál será dinámico.
Una vez definidos estos criterios se pasa a una etapa denominada Arquitectura de tres fases, la cual expone lo siguiente:
Bases de datos: Se diseña y crea la base de datos.
Programación intermediaria: Programas o códigos que se ejecutarán en el servidor Web. Acá se establecerá la comunicación entre la base de datos y la interfaz.
Interfaz: Programas y códigos que desplegarán el contenido a los usuarios a través del navegador Web. Se refiere aplicaciones que el usuario visualizará y a través de la cual operará con ella.
Fase de Testeo
Se ejecutan pruebas exhaustivas para asegurar el perfecto funcionamiento del sitio Web con usuarios que vayan a utilizar el sitio:
Comprobación en navegadores: El primer paso y también el más importante, es comprobar que las páginas se pueden visualizar de forma correcta en diferentes navegadores.
Detectar los vínculos rotos: Es necesario detectar documentos que existen en el sitio pero que no están conectados a través de vínculos; ellos deben ser reparados o eliminados en caso de no ser necesarios puesto que ocupan espacio en el servidor y tienden a crear confusión.
Comprobar tiempo de descarga: Uno de los puntos clave en el éxito de un sitio Web es su rapidez de descarga, en base a ello se recomienda un tiempo mínimo descarga.
En este punto los administradores deben reciben la capacitación para el desarrollo de sus tareas.
Fase de Mercado y Publicidad
En esta fase se debe tomar en cuenta los Derechos Internacionales del Autor, por el cual:
Todas las copias realizadas incluyen derecho de autor.
Se anexa en el sitio los créditos de los desarrolladores, o un enlace que le permita a los usuarios contactarlos.
Luego se define el dominio del sitio, se verifica que esté disponible para poder registrarlo, y se transfieren los archivos al servidor remoto por FTP, o desde la página del servidor. Se debe verificar que todos los archivos estén en su carpeta correspondiente de la Web.
Después de publicada la Web, su difusión depende de la publicidad que se le pueda dar mediante papelería de la organización, banners en sitios específicos, por medio de buscadores y otros.
Maybel Gil (2002)
4. Tipos de tecnologías, herramientas y programas en Diseño Web
Software que se utilizaría para el desarrollo Web: sistemas operativos, servidor, editores Web, lenguajes de programación, animaciones, entre otros.
Selección de la tecnología para el diseño y programación Web
Para un buen diseño y programación de un sitio Web hay que tener en cuenta algunos elementos tales como:
Programas para el diseño Web
La utilización de hojas de estilo en cascada
Tecnologías de programación del lado del cliente y del servidor.
Programas para el diseño Web
Herramientas para la creación y edición Web
Para la construcción de una página Web son primordiales los programas que se utilizan para su diseño, pues de ellos depende la rapidez con que se obtenga el resultado esperado. La elección de estos programas se verá influenciada por lo que se quiera hacer y la complejidad del diseño en cuestión.
Entre estos existe una gran gama de precios. Lo ideal es seleccionar uno que facilite el trabajo y a su vez permita dividir de manera fácil y óptima el tamaño de las imágenes y la estructura dentro de las páginas. En ocasiones sólo se escoge alguno que posibilite ordenar la información y las imágenes de manera adecuada.
Entre los programas más utilizados para el diseño Web se encuentran:
Photoshop (Editor de imágenes)
CorelDRAW (Editor de imágenes)
Dreamweaver (Editor HTML y otros lenguajes)
WordPress (CMS)
Adobe Muse (WYSIWYG)
Sublime Text (Editor HTML)
Notepad ++ (Editor HTML)
Atom (Editor HTML)
Brackets (Editor HTML)
Entre otros.
Inicialmente se realiza un diseño en forma de dibujo en el programa y después utilizando algunos elementos de optimización se lleva esta imagen a código para que puedan ser vistas de la mejor manera posible. Para lograrlo se utiliza un recurso muy conocido llamado CSS (Cascading Style Sheets, Hojas de Estilo en Cascada).
Selección de Software
En esta etapa de la metodología se busca determinar los requerimientos en cuanto al software que se utilizará para el desarrollo de la aplicación; es decir:
Sistemas operativos
Servidor (software)
Editores para diseño Web
Lenguajes de programación
Animaciones y otros componentes.
Esta definición dependerá de muchos aspectos como la existencia de licencias de software o los recursos técnicos y hardware.
Selección de Hardware
Antes de emprender el desarrollo de una aplicación Web, se deben determinar:
Los requerimientos de hardware de la aplicación
El equipo servidor
La capacidad de respuesta
Terminales
Requerimientos de red
Si la aplicación ha de disponerse de una intranet o extranet.
En el caso que la aplicación vaya a estar publicada en Internet, se debe reservar el dominio y ubicar el servicio de hospedaje de empresas que se especializan en este servicio (Morrison y Dickinson).
5. Estructura básica de una página web
Para crear una página web se necesita un documento HTML utilizando tres elementos o tags principales que cualquier sitio Web usa: html, head y body.
Un documento web (o página web) es, como hemos apuntado en la introducción, un conjunto de tags HTML que se escriben en un editor de texto plano (sin formato) y se ejecutan en un navegador web.
El esqueleto básico de HTML
CÓMO CREAR UNA PÁGINA WEB
Para crear un verdadero documento HTML comenzará con tres elementos contenedores:
<html>
<head>
<body>
Estos tres se combinan para describir la estructura básica de la página:
<html>: Este elemento envuelve todo el contenido de la página (excepto la DTD)
<head>: Este elemento designa la parte de encabezado del documento. Puede incluir información opcional sobre la página Web, como puede ser el título (el navegador lo muestra en la barra de título), palabras clave de búsqueda opcionales y una hoja de estilo opcional.
<body>: Este elemento alberga el contenido de su página Web, es decir, aquello que queremos que aparezca en el área de navegación del navegador..
Sólo hay una manera correcta de combinar estos tres elementos. He aquí su colocación exacta, con el doctype al comienzo de la página:
Toda página Web utiliza esta estructura básica. Los puntos suspensivos (...) muestran dónde insertaría la información adicional.
Una vez colocado el esqueleto XHTML, debe añadir dos conectores más a la mezcla.
Toda página Web requiere un elemento <title> en la sección del encabezado. A continuación, deberá crear un contenedor para el texto en la sección del cuerpo de texto (<body>).
Un elemento contenedor de texto multiuso es <p>, que representa un párrafo. Veamos con más detalle los elementos que hay que agregar:
<title>: Establece el título de la página Web, el cual tiene varias funciones. Primero, los navegadores lo muestran en la parte superior de la ventana. Segundo, cuando un visitante crea un marcador para la página, el navegador emplea el título para etiquetarlo en el menú Marcadores (o favoritos). tercero, cuando la página aparece en una búsqueda Web, el motor de búsqueda suele enseñar este título como primera línea en los resultados, seguido de un fragmento del contenido de la página.
<p>: Indica un párrafo. Los navegadores no los sangran pero añaden un pequeño espacio entre varios consecutivos para mantenerlos separados.
He aquí la página con estos dos nuevos ingredientes:
<!DOCTYPE html> <html> <head> <title>Bienvenido a mi sitio Web</title> </head> <body> <p></p> </body> </html>
Si abre este documento en un navegador Web, verá que la página está vacía, pero ahora aparece el título.
Cuando un navegador muestra una página Web, el título se presenta en la parte superior de la ventana, con el texto al final. Si el suyo utiliza la navegación por pestañas, el título también aparece en ellas.
Tal y como está ahora, este documento HTML es una buena plantilla para futuras páginas. La estructura básica está en su lugar; simplemente necesita cambiar el título y añadir algo de texto.
Lo primero que tenemos que saber es que en toda página web existen dos partes claramente diferenciadas: la cabecera, o head, y el cuerpo, o body.
Vamos hacer es crear una carpeta, dentro de "Mis documentos", para almacenar los ficheros de prueba que vayamos a usar.
A esta carpeta la llamaremos pruebas-html en el resto de los ejercicios. Con la carpeta abierta, haga doble clic sobre el ícono que representa al bloc de notas.
Se le abrirá un documento en blanco.
Escriba el siguiente texto:
<!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> </body> </html>
Cuando lo tenga escrito, guárdelo en la carpeta con el nombre plantilla.html.
Es vital que la extensión sea .html, ya que sólo por la extensión el sistema operativo reconoce este archivo como un documento web, y no como un simple y archivo de texto.
El nombre del archivo deberá escribirse como está, en minúsculas y sin espacios ni caracteres especiales.
Los únicos signos de puntuación admitidos son el punto (sólo uno), que lo usaremos para separar el nombre de la extensión y el guión bajo.
El nombre podrá contener letras y números, pero deberá empezar por una letra. Así mismo, nos abstendremos de meter en el nombre de un archivo letras acentuadas, eñes, cedillas, o cualquier otro carácter de algún alfabeto local.
Únicamente se admiten los caracteres del alfabeto internacional (ingles).
Observe los siguientes ejemplos:
página1.htm es incorrecto, pues tiene una letra acentuada.
Pagina 1.htm es incorrecto, pues tiene un espacio en blanco y una mayúscula
cañas.htm es incorrecto, pues tiene una eñe.
pagina/1.htm es incorrecto, pues tiene un carácter no permitido (la barra)
pagina1-htm es incorrecto, porque la extensión no está separada del nombre por un punto y porque emplea un carácter no permitido. (el guión normal).
pagina.1.htm es incorrecto, porque hay más de un punto. Sólo debe usarse uno, para separar el nombre de la extensión.
pagina1.htm es correcto
pagina_1.html es correcto
pagina-1.html es correcto
Puede que todas estas precauciones le parezcan excesivas ahora. La mayoría de ellas son realmente innecesarias en Windows, pero no olvide que está trabajando en la Red.
Los servidores web son mucho más sensibles a determinados aspectos del nombre de los ficheros que su máquina local.
Otra norma importante es que los archivos llevan una extensión, pero las carpetas en las que las guardamos no. Así pues, en el nombre de una carpeta nunca incluiremos puntos.
Una vez que haya guardado su código en su carpeta con el nombre adecuado, cierre el bloc de notas. En su carpeta, además del bloc de notas, verá el ícono que representa al archivo que acaba de grabar.
Observe que el ícono recuerda al de Explorer o Google Chrome (suponiendo que alguno de ellos sea su navegador por defecto).
Esto es así porque al haber guardado el fichero con la extensión .htm el sistema operativo reconoce este fichero como documento web (también llamado documento html).
Si graba incorrectamente la extensión, el ícono será diferente y no podrá usar su archivo como documento web.
Para ejecutar la página que acaba de crear, haga doble clic sobre el ícono. Automáticamente, se abrirá el navegador y se cargará la página. La ruta completa de acceso y el nombre del fichero aparecerán en la barra de dirección.
Ahora veamos en detalle cuál es el código de esta página que hemos creado y qué es lo que hace.
En primer lugar, encontramos el tag <html>. Este tag se emplea siempre para iniciar el código html.
Es la forma de decirle al navegador que en este punto empieza el código. Por esta razón se pone esta línea siempre como la primera del código.
No incluiremos ningún tag antes de este, con excepción del DOCTYPE. Por el contrario, al final del código tenemos el tag </html> , que le indica al navegador que el código finaliza en ese punto.
No deberemos incluir ningún tag ni nada más después de esta línea. Observe que el tag de finalización es igual al de inicio, pero incluyendo la barra inclinada al principio.
Dentro del código html encontraremos claramente diferenciados los dos bloques que mencionamos antes: el head (cabecera) y el body (cuerpo de la página).
Veamos el código de la cabecera:
<head> <title> Título de la página </title> </head>
Al igual que el código general, la cabecera tiene un principio indicado por <head> y un final indicado por </head>.
Todo lo que queramos incluir en la cabecera irá colocado entre estas dos líneas.
Como decíamos antes, en la cabecera incluiremos algunos datos generales de configuración de la página. En esta plantilla sólo hemos incluido el título de la página.
El título de la página se incluye entre los tags <title> y </title>, que indican, respectivamente, el comienzo y final de dicho título.
El título es un literal (una cadena de texto) que aparecerá en la barra de título del navegador en tiempo de ejecución (cuando se ejecute la página), tal como muestra el detalle de la figura siguiente:
Quiero recalcar que este título es solamente eso: un texto libre para que aparezca en la página y no tiene nada que ver con el nombre que le dimos al fichero.
Una vez completado el head, pasamos a la segunda sección de toda la página web: el body o cuerpo.
El body incluye, tal como lo mencionaba anteriormente, todo lo que queramos visualizar en el área de navegación.
Se inicia con el tag <body> y se finaliza con el tag </body>. Como vemos en el archivo que hemos creado, de momento no hemos incluido nada.
Por esta razón, al ejecutar la página, se ve el área de navegación vacía. Dentro del body iremos metiendo código e iremos visualizando los resultados.
Lo primero que vamos hacer es incluir texto en la página para que se muestre en el área de navegación.
Para ello, cierre el navegador y, dentro de la carpeta en la que está trabajando, arrastre el ícono de plantilla.html sobre el bloc de notas. De esta forma, se abrirá el bloc de notas y cargará el código fuente que había tecleado anteriormente.
En la zona del código reservada para body de la página entre las líneas <body> y </body> teclee lo siguiente:
Esto es una línea de texto.
Por lo tanto, su código quedará como sigue:
<!DOCTYPE html>
<html><
head>
<title>
Título de la página
</title>
</head>
<body>
Esto es una línea de texto
</body>
</html>
A continuación haga clic en el menú ARCHIVO y, dentro de éste, elija la opción GUARDAR COMO … asegúrese de guardarlo en su carpeta.
Como nombre de fichero ponga texto-simple.html. Una vez guardado, cierre el bloc de notas y ejecute el fichero haciendo doble clic sobre su ícono.
El resultado en la pantalla será como el que se muestra:
Como ve para mostrar un texto en el área de navegación, basta con incluir dicho texto dentro del cuerpo de la página.
En el próximo artículo vamos a aprender muchas cosas acerca del texto: su presentación, su color, etc.
6. Dominios
¿Alguna vez has escuchado a alguien hablando sobre dominios de Internet? Puede que sí como puede que no, ya que fuera del ámbito de Internet y sitios web el dominio web es un concepto que no muchas personas conocen.
Se les conoce de diferentes maneras, tales como: dominio en Internet, dominios, dominio web, dominios web, etc. Los dominios son uno de los principales componentes de Internet y es gracias a ellos que puedes visitar toda clase de sitios web.
¿Qué es un dominio web?
Los dominios se pueden definir de una manera muy sencilla: un dominio web es el nombre de un sitio web, el cual es único e irrepetible. Sirve para identificar y diferenciar a un sitio web de otros. Es decir que en el caso del sitio web donde lees esto, TecnoMagazine, nuestro dominio viene a ser tecnomagazine.net. En el caso de Google por ejemplo su dominio principal es google.com, mientras que Facebook tiene facebook.com como dominio.
Un dominio es el nombre único de un sitio, aunque si dicho sitio tiene variantes regionales, es decir, versiones de un mismo sitio pero en distinto idioma u orientadas a distintos países, entonces puede que existan varios dominios. Tomando nuevamente el caso de Google, para Google España veremos que el dominio es google.es, mientras que por ejemplo en Google México el dominio correspondiente es google.com.mx
Como podemos ver, un dominio web está directamente relacionado con los sitios web a los que les dan nombre, y para las variantes de un sitio web se pueden utilizar distintos TLDs (más adelante explicamos qué es un TLD) para definir una región, como puede ser .es, .com.mx, .cl, etc.
¿Para qué sirve un dominio de Internet?
Esta respuesta es simple:
Para montar tu empresa online
Para darle presencia a tu empresa offline en el mundo virtual
Para subir proyectos personales de tu escuela o colegio a tu hosting gratuito
Para abrir un blog o portfolio personal de tus trabajos freelance
Para comunicar en ùltima instancia
¿Cómo funciona un dominio web?
Y esto es lo importante: la función de los dominios de Internet. Los dominios no existen porque sí, de hecho cumplen una función extremadamente importante que nos facilita mucho la vida a la hora de acceder a un sitio web. ¿Pero acaso acceder a un sitio web puede ser algo difícil? Pues si no tuviéramos dominios lo sería, y te diré por qué.
Como ya sabemos, un dominio da nombre a un sitio web, así que por ejemplo si ingresamos en tecnomagazine.net estaremos entrando al sitio web de Tecnomagazine. Ahora bien, ¿en dónde se hospeda o se alojan los sitios web? En servidores por supuesto, y es gracias a un sistema conocido como DNS que cuando colocamos el nombre de un dominio en la barra de direcciones del navegador nos lleva a una página.
El sistema DNS es el enlace que existe entre un servidor y un dominio de Internet. Básicamente, mediante el DNS lo que se hace es apuntar un dominio a un servidor, es decir, enlazarlo al server, de forma que el dominio en cuestión comenzará a responder desde el servidor indicado. Gracias a esto, cuando nosotros escribimos un dominio y le damos Enter lo que hacemos es ver un sitio web que está alojado en un servidor.
¿Qué pasaría si no hubiera dominios? ¿Cómo podríamos ingresar a un sitio web? Pues sería necesario hacerlo mediante IPs, y créeme que es mucho más difícil acordarte de 7-9 números que de unas pocas palabras. ¿Y te imaginas tener que aprender de memoria las IPs de todos tus sitios web favoritos? Si eso sucediera Internet se volvería un lugar mucho más complicado.
Por suerte tenemos a los dominios para poder identificar los sitios web mediantes nombres y así recordarlos de forma rápida y sencilla.
Tipos de Dominio Web
¿Has notado que los dominios tienen diferentes terminaciones? Es decir, algunos terminan en .com, otros en .net, otros en .org, etc. Estas “terminaciones” o extensiones reciben el nombre de TLD. TLD son las siglas de “top level domain” que vienen a ser dominios de una clase superior al resto. En palabras claras, son diferentes tipos de dominio de Internet.
Los principales TLDs son los llamados gTLD, que son los top level domain genéricos. Los gTLD hacen referencia a distintos conceptos y nos sirven para relacionar un dominio con el tipo de actividad que puede llevar a cabo.
La extensión .com por ejemplo se suele usar en sitio comerciales, mientras que otras como .org son utilizados por parte de organizaciones. Otro gTLD popular es el .info que lo usan más que nada sitios informativos, y no debemos olvidar a los .net, cuya utilización está orientada principalmente a compañías relacionadas con redes o Internet.
Pero entonces, ¿por qué Tecnomagazine lleva una extensión .net? En nuestro sitio claramente tenemos una relación con Internet y redes desde el punto de vista de la tecnología, pero no somos una compañía que opera en dichas áreas. ¿Qué quiere decir esto? Que un TLD no necesariamente va a representar el ámbito de un dominio. En la gran mayoría de los casos esto sí aplica, pero como estamos viendo existen excepciones.
Otro tipo de dominios de Internet son los dominios regionales, es decir, los dominios que finalizan en una extensión que representa a un país. Este tipo de TLD recibe el nombre de ccTLD, es decir son top level domains con código de país (cc corresponde a country code en inglés en este caso).
Los dominios regionales o geográficos se utilizan para indicar que un determinado sitio web tiene relación con un país o región en particular, puede ser por ejemplo que la empresa tenga oficinas en dicho país o algún otro tipo de relación, o que los servicios estén orientados para una región en particular.
Hay tantos TLD regionales como nombres de países, y algunos de los más populares son los siguientes:
.ar: refiere al TLD de Argentina.
.cl: corresponde al TLD de Chile.
.co: hace referencia a Colombia (aunque también se usa en el mercado para referirse a la palabra “company”).
.cn: es el TLD que corresponde a China.
.es: TLD correspondiente a España.
.mx: es la extensión que aplica a México.
.uk: es el TLD de Reino Unido (United Kingdom por su nombre en inglés)
3. Metodología para la creación y desarrollo de sitios web La elaboración de páginas Web comprende las fases de Análisis, Planificación, Contenido, Diseño, Programación, Testeo, Mercadeo y Publicidad. El Método para Creación de Sitios Web comprende las fases de Análisis, Planificación, Contenido, Diseño, Programación Testeo, Mercadeo y Publicidad. Fase de Análisis del Proyecto A la hora del desarrollo de un sitio Web se debe comenzar por dar respuesta a un grupo muy concreto de interrogantes, que permitirán aclarar y definir de manera básica las expectativas existentes en torno a la aplicación Web e Interacción que se va a generar. Selección de Objetivos Todo proyecto debe contar con objetivos definidos , contra los cuales puede medirse la efectividad de las acciones que se desarrollen. Green, chilcoott y Flick ( 2003 ) denominan esta etapa, resumen de objetivos , donde establecen tres puntos primordiales para esta selección, los cuales son: Definir los usuarios Lo que los usuario
Comentarios
Publicar un comentario