Tipos de webs: estáticas, animadas, dinámicas

Diferencia los tipos de webs, con ejemplos fáciles de comprender

Este no va a ser un artículo como los habituales, en los que suelo entrar más al detalle en aspectos técnicos.

Lo que pretendo, es explicar con un lenguaje llano y fácil de entender para el tipo de cliente al que me dirijo (ver sección Servicios), las diferentes páginas webs que existen.

Principalmente hay 3 tipos diferentes según su lenguaje de programación, otra cosa muy diferente es el uso que le demos a cada una de ellas, que en este artículo no vamos a detallar esto.

Dependiendo de nuestras necesidades (personal, empresa, obra social, etc) y envergadura, tendrán diferentes precios que no voy a detallar porque cada cliente requiere diferentes cosas.

Lo que hoy vale “x” dinero o se utiliza, pasado un tiempo, su precio se ha devaluado o cambiado por algo más utilizado en esa otra época.

Quien quiera saber un precio aproximado (presupuesto) a cerca de lo que quiere, le invito a rellenar el formulario de la sección Contacto.

Nos guste o no, la tecnología en este medio de comunicación (diseño web) está en continua evolución.

Tipos de páginas webs: estáticas, animadas, dinámicas

Vamos a ver con un ejemplo extraído de la propia naturaleza, detallado en la imagen superior (clic para agrandar), una forma de comprender mejor el cometido y tamaño de estos 3 tipos diferentes de páginas webs.

[showhide type=”Estaticas” more_text=”↓ Web estática = Bonsái” less_text=”↑ Web estática = Bonsái” hidden=”yes”]

Web estática.

Algunos de los aspectos aquí tratados, son propios en el mundo de los bonsáis, por ejemplo tamaño pequeño y vistosidad.

Estos árboles no crecen demasiado y sin embargo resultan muy bonitos (vistosidad), que es lo que se puede hacer también en las webs estáticas.

La sensación de tranquilidad que otorgan estos pequeños árboles, está vinculado al color que pongo de telón de fondo, el verde.

El fondo de la foto-composición pertenece a un monje taoísta, propio de China, para los cuales la cultura del bonsái es algo propio de la eternidad.

Para nuestro cometido una web estática puede permanecer inalterable en el tiempo (no actualizada) por muchos años que pasen.

Tamaño pequeño.

No cambia con el tiempo, salvo si editamos algún texto informativo.

Es utilizada a modo de curriculum vitae o como carta de presentación o incluso como tarjeta de visita, para alguna Empresa que así lo requiera.

Vistosidad.

Puede contener pequeños elementos decorativos e incluso animados*.
(*): Algo que no es común a todas las webs de este tipo.

La animación sea con la tecnologia antigua Flash o la actual HTML5 & CSS3, consiste normalmente en contar una historia (portada web) o atraer la atención sobre algún producto/mensaje específico (banner) o algún juego de fácil uso.

Pocas secciones.

Las más habituales: portada, quienes somos, servicios, productos, contacto.

En casos muy excepcionales puede contener alguna sección más, como de hecho yo he realizado en tiempos en que no tenia el conocimiento para desarrollar webs dinámicas o estaban en un proceso poco avanzado en referencia a WordPress.

Visita la sección Portfolio para ver este tipo de webs en HTML & CSS.

No actualiza usuario.

Dependemos de persona cualificada, sea agencia o freelance, para actualizar la información, pues no disponemos de un panel gráfico como en las webs dinámicas.

Resulta muy pesado cuando se tienen varias secciones y hay que modificar algo común a todas (nueva sección e inclusión en pestaña menú). Hay que ir página por página, efectuando el cambio, algo que no ocurre en una web dinámica.

Otros detalles.

• No tiene un mantenimiento tan pesado como una web dinámica.
• Pueden pasar años hasta que haya que cambiar alguna línea de código para adaptar/optimizar algún elemento a los nuevos navegadores.
• No ofrece la herramienta de buscador, dado que tampoco tiene muchas secciones aunque se puede incluir un mapa web, si es que fuera muy enrevesada la página.
• Funciona en todos los navegadores y dispositivos de sobremesa o móviles.
• Hay que tener cuidado si para alguna pequeña animación utilizamos aún la tecnología Flash (antigua), donde los dispositivos de la marca Apple no lo acepta, para estos hay que pasarla a la tecnología HTML5 y CSS3 (actual).
• Por otro lado, aún sigue habiendo Empresas que prefieren este tipo de páginas web porque no van a actualizar habitualmente la información y a nivel de personalización desde cero resultan más baratas que las webs dinámicas.
• El coste de personalización desde cero en una web dinámica, podría triplicar el coste en comparación con el de una web estática.

[/showhide]

[showhide type=”Animadas” more_text=”↓ Web animada = Planta carnívora” less_text=”↑ Web animada = Planta carnívora” hidden=”yes”]

Web animada.

Los aspectos tratados en esta web, son propios del mundo de las plantas carnívoras, tamaño pequeño y vistosidad pero también interacción y animación.

Las plantas carnívoras tienden a ser de tamaño pequeño y encontrarse en suelos con pocos nutrientes, para suplir esta falta tiene un aspecto llamativo (vistosidad).

De todos es sabido que estas plantas adquieren la mayor parte de sus nutrientes a través de la captura de insectos o pequeños animales (clientes).

El proceso para atraer su atención, son sus colores llamativos (vistosidad), néctar interior y consecuente trampa, que al ser tocada por estos (interactúan).

La planta tiene un mecanismo autoreflejo que hace posible un movimiento de esta (animación) para cerrar la planta y de esta manera cazan a sus presas (clientes).

El color elegido de fondo, es el amarillo. En España es considerado el color de los locos. En muchas ocasiones es como se considera a una mente creativa dado que se sale de los patrones preestablecidos.

Estas webs derrochan mucha creatividad, una forma diferente de ver las cosas.

Tras el fondo de color amarillo, vemos una foto que pertenece así mismo a la primera persona que escribió acerca de estas plantas, Charles Darwin, más conocido hoy en día por su trabajo relacionado con: ‘El origen de las especies’ (la evolución de las webs estáticas son las webs animadas).

Darwin, también fue tachado de loco en su época (1809-1882) por asegurar que el hombre descendía del mono, y no era una creación divina.

No fue hasta su muerte y pasados unos años que la gente le reconoció su trabajo y de hecho hoy nos servimos de él para explicar nuestro origen.

Es más, si visitan mi ciudad Burgos (Spain), tienen una visita obligada al Museo de la Evolución Humana (MEH) donde hay un apartado exclusivo para Charles Darwin.

Tamaño pequeño.

Solo es utilizada para cosas concretas.

Normalmente se utilizan para webs de productos muy concretos como: nuevos films, nuevos videojuegos, espectáculos artísticos, o lanzamientos de nuevos productos o historia de alguno de ellos.

Pasado un tiempo, estas webs dejan de funcionar porque son lanzadas por tiempo determinado en los casos citados (excepto casos muy concretos).

En otras ocasiones también forman parte de la mente de algún freelance o creativo, como una forma de dar rienda suelta a su imaginación y comprender de una forma más amena, su percepción de la vida o trabajo.

Aunque realmente cada día son más las grandes compañías (Coca Cola, una de ellas) que apuestan por estas como una forma de atraer la atención de los clientes, dada su vistosidad.

Si bien desde la crisis es más evidente la falta de inversión en ellas, recurriendo cada vez más a las webs dinámicas, dejando la animación únicamente en la portada.

Por ejemplo, esto ocurre hoy en día con la web de ‘Moulin Rouge’ (cabaret parisino), ha pasado de ser una web animada por entero en la tecnología Flash (antigua) a ser una web dinámica (WordPress.org), donde la única animación existente está en la portada de la web y no podemos interactuar con ella, es solo una película animada.

Vistosidad, interacción, animación.

Elementos decorativos atraen atención, podemos interactuar con ellos y estos muestran una animación.

Un ejemplo: Imaginen una bombilla que al hacer click sobre ella, ilumina una estancia, por ejemplo del despacho de la Casa Blanca, y vemos un montón de cosas con las que poder realizar una acción (interactuar). Con un solo clic del ratón sobre algún objeto de la estancia, interactuaremos con ella.

Supongamos que hay una silla caída y la queremos poner bien, clic con el ratón y la rueda adelante o atrás y esta ejerce el buen posicionamiento de la silla, otro clic y dejamos donde queramos (animación).

Ahora supongamos que hay una botella de champan, y situamos el ratón cerca del tapón, con un movimiento de la rueda descorchamos y salta una animación, que es el tapón saliendo disparado hacia cualquier parte de la estancia, incluso pudiendo romper un cristal.

Es otra forma de animar y por consiguiente de captar nuestra atención. Hay diversas formas de interactuar y animar, este solo es un par de ejemplos de los muchos que hay.

Pocas secciones.

Las habituales de la web estática o productos muy concretos a destacar cualquier detalle de los mismos.

Antiguamente cuando las webs se elaboraban en tecnología Flash (actualmente la tecnología utilizada es HTML5 & CSS3), todas las secciones por pocas que fueran tenían algún tipo de animación.

Hoy en día aún cuando se hacen webs de este tipo (resultan caras), la animación como tal es más simple aunque no deja de atraer la atención.

Por ejemplo hace tiempo pude ver la web original que se hizo para el videojuego de Wii, Red Steel 2, donde manejamos a un samurai y la pantalla que daba paso a esta web, teníamos que partirla en diferentes trozos.

Para ello utilizábamos el ratón a modo de katana, y efectuábamos el corte en la dirección que quisiéramos. Cada corte simbolizaba una sección o apartado diferente de la web (prueba tu concentración, prueba tu precisión, vídeos, personajes, armas).

Este tipo de webs tienen un alto coste y como vemos actualmente esta web ya no conserva dicha animación, aunque resulta vistosa por los cortes asimétricos que contiene para dar paso a cualquier sección del menú.

No actualiza usuario.

Dependemos de persona cualificada, agencia o freelance, para actualizar la información, pues no disponemos de un panel gráfico como en las webs dinámicas.

Si por ejemplo está hecha con tecnología Flash, dependemos de un programa específico de la marca Adobe (propietarios de Photoshop, entre otros) y dicho programa no está al alcance del bolsillo de cualquiera.

En cualquier caso esta tecnología está siendo desplazada por HTML5 y CSS3, que funciona en cualquier dispositivo móvil o de sobremesa.

Aun estando realizada con la nueva tecnología, estamos ante el mismo problema, necesitamos de los conocimientos de alguien especializado en este campo, bien sea una agencia o freelance.

Otros detalles.

• Tienes los mismos problemas que la web estática, no dispone de buscador, dado que su fin es muy concreto, viene a ser como un micro site (pequeña web) y a veces de tiempo limitado.
• Su utilización es tan intuitiva como la vida misma, como en el ejemplo que cite de la Casa Blanca.
• Este tipo de webs aunque pequeñas tienden a ser bastante caras, ya que además de pagar esta tecnología estamos pagando una idea de una mente creativa, y las ideas de este tipo son más caras que la tecnología utilizada.
• Las ideas no se producen en masa, es algo que sale de personas muy concretas y creativas (a veces tildadas de locos) y en momentos de inspiración, que tampoco llueve del cielo (y si lo hace no moja a cualquiera).
• Si tenéis una web de este tipo realizada con la tecnología Flash, debéis saber que no se ve en todos los dispositivos móviles, especialmente de la marca Apple (aunque sí de sobremesa).
• Es recomendable adoptar la nueva tecnología HTML5 y CSS3. De hecho a mí me ocurre con webs antiguas que realice motivado por dicha tecnología (hoy anticuada) y cuya animación aún es con tecnología Flash, como la web de “V Los Visitantes” (portada web y banner superior animado) ó “Proyecto Rubare” (banner superior animado).

[/showhide]

[showhide type=”Dinamicas” more_text=”↓ Web dinámica = Secuoya” less_text=”↑ Web dinámica = Secuoya” hidden=”yes”]

Web dinámica.

Los aspectos tratados en esta web, son propios de estos árboles tan grandes, llamados secuoyas.

Estos árboles son los más grandes de la naturaleza. El de la imagen podría tener una edad aproximada a los setenta años (dos personas abrazadas a su tronco).

Pero se sabe que pueden llegar a tener más de tres mil años. Nosotros no esperamos crecer y durar tanto con estas webs.

Guardan mucho parecido con el tipo de web que vamos a explicar, debido a que su tamaño puede ser muy grande si así lo deseamos.

A mayor tamaño mayor mantenimiento, estos árboles tienen grandes raíces (bases de datos) que son los que sustentan su vida (interacción).

Estos necesitan mantenerse siempre a salvo de cualquier inclemencia (guardar a diario las bases de datos), para no perder la riqueza de este árbol (web e interacción).

El concepto que persigo al mostrar este árbol como sinónimo de una web dinámica, es que estos árboles tienen un crecimiento a lo largo del tiempo, pudiendo tener numerosas ramificaciones (muchas secciones y artículos).

Conforme va creciendo (gracias a nuevas actualizaciones), va teniendo una mejor visibilidad para el reino animal y humano (posicionamiento en los buscadores).

E incluso pueden ser vistos por aves, como águilas (clientes potenciales), que pocas veces descienden al suelo, sino es para atrapar a alguna presa (cliente habitual).

El color elegido de fondo, es el naranja. Como muestra que cada día es un nuevo amanecer para seguir creciendo, con algo nuevo que nuestra web puede aportar en forma de nuevos artículos.

Nuevos artículos que pueden ser noticias o eventos e incluso participación en los mismos, que es lo que habitualmente hace un blog.

Tras el fondo de color naranja, vemos una foto que pertenece a una persona que tras su muerte, su nombre fue acuñado a este árbol y era alguien excepcional para su época, y tiene cierta vinculación con lo que aquí intento transmitir.

Sequoyah (1767-1843), también conocido como George Guess, Guest o Gist, fue un platero cheroqui (en inglés cherokee) que inventó el silabario cheroqui, se llevó para ello la friolera de 12 años, siendo ayudado por mucha gente.

Como platero, Sequoyah trataba con regularidad con blancos que se habían asentado en la zona. Los otros indios estaban impresionados por la escritura, a la que se referían como “hojas que hablan”.

Alrededor de 1809, Sequoyah comenzó a crear este sistema de escritura para la lengua cheroqui. Su sueño era ver a la dividida nación cheroqui (Cherokee Nation) unida de nuevo.

Al crear una página web dinámica, nuestro interés es crear contenido de calidad que perduré en el tiempo, y para ello vamos a necesitar la ayuda de mucha gente, sean colaboradores o comentaristas.

Todos aquellos que nos ayuden o hablen bien de nuestro negocio, son los que nos ayudarán a seguir creciendo día tras día.

Tamaño grande.

Crecerá en la medida que necesitemos año tras año.

Cuando yo he realizado una web de este tipo ha comenzado teniendo las secciones más básicas, conforme ha pasado el tiempo se ha ido reconfigurando mejor, en la dirección en la cual queremos enmarcar nuestro negocio.

Cuando hablo de crecimiento me refiero a crear nuevo contenido o recibir comentarios acerca del mismo, así como un numero elevado de visitas que irán en detrimento de estos dos aspectos.

Los negocios que emplean este tipo de webs normalmente son aquellos que están continuamente ofreciendo nuevas cosas: cadenas de televisión, productoras de cine, periódicos, sitios de moda, espectáculos, etc.

Vistosidad, interacción.

Tiene pequeños elementos decorativos o animados y su interacción radica en comentarios a artículos (blog), chats, foros, tiendas online.

El ejemplo práctico, sería hacer un comentario a un artículo y a su vez ser contestado por el autor del mismo o por otras personas que gusten de compartir sus experiencias en relación al tema del artículo.

En el caso del chat, este puede estar habilitado para una persona que entre en nuestra web y necesite ser guiado por personal que pueda atender alguna duda concreta que quizás la web no haya especificado, pero sí el negocio a pie de calle, desde el cual se atiende el chat por personal del negocio.

Los foros a su vez sirven además de para intercambiar comentarios sobre algo más concreto, también exponer fotos o videos, que ayuden a asimilar mejor el mensaje.

En el caso de las tiendas online, nos facilitan la compra de un producto con solo hacer click sobre el mismo, ahorrándonos desplazamientos innecesarios a pie de calle.

Muchas secciones.

Las habituales de la estática, así como artículos, noticias o eventos.

En realidad están las secciones básicas que todos conocemos, más algunas otras que complementan a estas secciones principales y se desglosan en diferentes apartados, comúnmente vistos dentro del menú es forma de cascada, al pasar por cada una de las pestañas principales del menú.

Donde mayor crecimiento de secciones vamos a tener, es en las relacionadas con nuevos artículos, que pueden ser tomados a modo de noticias o eventos.

Sí, actualiza usuario.

Información, diseño, ítems. Así como sistema (CMS), plugins y temas.

Con las webs dinámicas cualquier actualización resulta más cómoda, incluso cuando hablamos de incluir o borrar pestañas de menú, que en realidad son secciones.

Un cambio por ejemplo en el menú desde el panel gráfico correspondiente, se efectúa por igual para todas las páginas de la web aunque tuviera 300, no es necesario ir una a una, como en las webs estáticas.

Estas webs facilitan esta acción de forma online desde cualquier ordenador y lugar y son de fácil aprendizaje para el usuario aunque como todo, necesitan seguir una guía sea por escrito o visual.

Dependiendo del alojamiento web que elijamos (en Strato), tendremos oportunidad de tener servicio de guardados automáticos de la información de nuestros ficheros web o base de datos.

Mantenimiento usuario.

Estas webs poseen ‘bases de datos’ que almacenan información con cada nuevo cambio (sean comentarios o actualización contenido).

Es muy importante que si tenemos nuevo contenido habitualmente, guardemos con la misma frecuencia las bases de datos, ya que si ocurriera un ataque hacker la única forma de recuperar toda esa información seria a través de estas bases de datos.

Para ello existen numerosos ítems (plugins) que pueden hacernos este trabajo más fácil, incluso mandando las mismas a nuestro correo de e-mail habitual, cada cierto periodo de tiempo.

Dependiendo del alojamiento web que elijamos, tendremos oportunidad de tener servicio de guardados automáticos de la información de nuestros ficheros web o base de datos.

Otros detalles.

• A pesar de todo lo dicho y las posibilidades de crecimiento de una web dinámica, cada día son más los usuarios que prefieren tener una web de este tipo aunque su negocio no crezca continuamente a través de su web.
• Prefieren escoger el gestor de contenidos (CMS) WordPress.org para gestionar ellos mismos su web (crear o editar su propio contenido).
• Tal es el caso de mi restaurante favorito en San Sebastian, ‘Asador Alaia’.

[/showhide]

---

Conclusión

Para el tipo de cliente al que me dirijo, recomiendo la web dinámica (WordPress.org). Es más, yo tengo una web dinámica (en la que están ahora mismo).

Me permite combinar secciones fijas (contenido concreto sobre mi trabajo) y otras tipo blog, en una sección correspondiente pero también en la portada, aportando de este modo información actual de mis últimos trabajos o contenido de interés.

La mayoría de clientes, me especifica que quieren ser ellos los que crean o editen nuevo contenido y no tener que depender de un freelance o agencia para esto.

En este caso, lo que hago es preparar la página web con todas las secciones y apartados que necesiten, a parte de la edición correspondiente en materia de diseño (web y gráfico), color, tipografía.

La dejo apta para que solo tengan que crear/editar contenido, o crear eventos si fuera necesario.

Igualmente instalo los items (plugins) necesarios para el mejor acondicionamiento del sitio, en materia de: seguridad, navegación, posicionamiento (SEO), galería de imágenes, slider (pase de diapositivas), acceso redes sociales (si las hubiera), calendario eventos (si los hubiera), maquetación, mejora buscador, herramienta análisis, chat (si fuera necesario), y pantalla mantenimiento.

Estos ítems (plugins) cada cierto tiempo hay que actualizarlos a nuevas versiones, como sucede con la propia interfaz de WordPress.org, que recibe actualizaciones de seguridad (parecidas al sistema operativo Windows 7 y superiores).

Del mismo modo, en ocasiones (las menos) la persona que diseño nuestro tema (plantilla), también decide actualizar este.

Cuando algo se utiliza mucho es más vulnerable a ataques, de ahí estas numerosas actualizaciones de seguridad, que terminan siendo realmente de mantenimiento.

En el caso de elegir este tipo de web, les explico en persona si me es posible (sino por Skype), totalmente gratuito, la forma en que deben actualizar información (no mantenimiento). Si aun así no lo comprenden, les hago un videotutorial específico (coste extra) para que asimilen mejor la información.

El mantenimiento es un gasto extra anual. Si bien hay compañías que se encargan de este mantenimiento incluyéndolo ya en su precio anual, caso de WebEmpresa (paquete más barato 500MB espacio).

Yo para comenzar recomiendo Strato AG, donde solo se paga por el costo real del alojamiento y dominio web (paquete más barato 25.0ooMB espacio) que es válido para cualquier tipo de web, de las que vimos.

Es importante mirar el espacio, porque a pocas fotos que subamos estas ya tienen un peso considerable por cada artículo o sección (si pusiéramos una galería de imágenes).

Por ejemplo mi sitio web (este en el que están ahora), actualmente cuenta con un peso aproximado de 270MB y cómo ven no soy una persona habituada a escribir artículos con mayor frecuencia, casi uno por mes.

Hay gente que escribe casi todos los días y no tiene problema si pone pocas imágenes o solo una pero con el tiempo tendrán que mudarse de servicio de alojamiento web y dominio.

Si yo tengo que hacer este mantenimiento en Strato AG, sería un coste extra anual por valor de 40€. No obstante tengo un artículo donde explico al detalle cómo hacer esta labor de mantenimiento de WordPress, en Strato AG.

A veces otros clientes (los menos) me piden una web estática (HTML & CSS) porque tiene un costo menor a la hora de partir desde cero en su diseño (algo que si hiciera en web dinámica, triplicaría su costo).

Pueden tener algo vistoso, con alguna animación y sin más interés que sea mostrado como su carta de presentación o tarjeta de visita (acorde incluso con la versión física).

En este tipo de web, no va a haber cambios en mucho tiempo, y si estos se producen no les importa pagarme por hacer la actualización informativa pertinente porque estas personas prefieren pagar porque otros hagan ese trabajo y centrarse en el suyo propio.

El coste de mantenimiento de esta web no existe, porque no necesita un mantenimiento al nivel que una web dinámica, solo se paga por actualizaciones de información.

---

Videoblog

Toco un tema un poco difícil de entender para el cliente que necesita una página web y no sabe muy bien los tipos que hay dependiendo de su lenguaje de programación y características.

• Tipos de webs: estáticas, animadas, dinámicas
  Características explicadas en el vídeo con un ejemplo comparativo con la naturaleza. Esperando que la explicación sea más fácil de comprender, y no tan técnica como habitualmente solemos hacer en mi gremio.

En esta ocasión por suerte pude mejorar la pantalla croma, no sin llevarme varios quebraderos de cabeza y programas de edición.

Un día explicaré como lo hago, para los que tenéis el mismo problema que yo: poco espacio y mala iluminación para esta pantalla verde (croma) que permite reflejar de fondo la imagen o vídeo que queramos.