"Apple" (c) Copyright 1767, Isaac Newton

Isaac Newton enchorándosela a Steve Jobs

Desarrollo Web (I): Conceptualidad

Publicado por Baku el Miércoles, 20 enero, 2010

Quizá sea muy temprano para lanzar una entrada de este tipo, sin embargo, creo que es hora de abrir un bloque de tutoriales y artículos de toda índole informática, que además, podrían atraer algunas visitas interesadas desde el mágico mundo de Google (por respeto, procuren siempre escribir la primera letra en mayúscula).

La verdad es que mis -pocos- lectores en su mayoría son conocedores del arte del diseño, pero se muy bien que habrá gente que agradecerá esta nueva sección.

En esta primera entrega hablaremos del desarrollo de la Internet, la Web y las tecnologías relacionadas, básicamente pura historia, historia que hace falta comprender antes de envolverse en esto.

Primeramente, creo que es necesario dejar en claro algunas aclaraciones: yo no soy ningún experto (de hecho, carezco de experiencia) en la rama de las comunicaciones y la información, sin embargo, como diseñador me veo constantemente empapado de información al respecto. La Internet se ha convertido en un medio que revolucionó por completo la forma de ver la información. Sigan leyendo…

Desarrollo Web

La era del Desarrollo Web

La Internet es una inmensa red informática, una red que de hecho tuvo competencia en el pasado, donde la gente podía contratar diversas redes, como la Fidonet; todas estas solían brindar una plataforma sólida para la transferencia de datos y la publicación de información en los “Bulletin Boards“, hasta Microsoft intentó competir contra Internet, con una red mundial llamada MSN (Microsoft Network), red que, frente al gran progreso de la Internet, tuvo que pasar al plan “B”, convirtiendo MSN en un servicio de esta.

Pero, ¿qué hizo que Internet impusiera su fatal hegemonía? protocolos.

La Internet se había afianzado una gran cantidad de tecnologías que facilitaron y revolucionaron las tareas del trabajo en redes mundiales, creando una serie de plataformas y protocolos que se convirtieron en un éxito, tales como: el TCP/IP (Protocolo de Control de Tansferencias – Protocolo de Internet), FTP (Protocolo de Transferencia de Archivos), SMTP (Protocolo Simple de Transferencia de Mails), el HTTP (Protocolo de Transferencia de Hipertexto), etcétera.

A mi forma de ver, yo creo que la tecnología que popularizó realmente a la Internet, fue la creación de la World Wide Web (la WWW, mejor conocida como “Web”), un nuevo concepto que creció gracias al protocolo HTTP, los navegadores web y como no, los sitios porno (?).

La piedra angular tras el éxito de la Web fue sin duda la creación del HTML (Hypertext Markup Language) y los navegadores web.

¿Porqué fue importante la creación del HTML?, yo pienso que, frente a la creciente popularidad y dependencia de las Interfaces Gráficas de Usuario (“GUI” por sus siglas en inglés) en los Sistemas Operativos, la necesidad de un servicio de hipertexto gráfico (dotado por las redes) era fundamental para la evolución de la misma. HTML (de la mano de los navegadores) vino a ser esa -casi inesperada- evolución.

HTML y los estándares

html

HTML

HTML es un lenguaje, pero no un lenguaje hablado: es un lenguaje de computadoras, rígido, en el que se emplean palabras clave (comandos) que designan la estructura visual y el contenido de una página web, esto brinda muchas posibilidades: puedes darle formato al texto, insertar imágenes, darle una forma al contenido, crear hipervínculos y muchas cosas más. Se basa en “etiquetas” (markups), las cuales señalan comienzos y fines de bloques de contenido o que enlazan algún parámetro (una imagen por ejemplo). Después hablaremos sobre esto un poco mas detalladamente.

Pero en realidad, HTML no es una tecnología creada a base de ciencia matemática ni similar, solo son ficheros de texto, vil e inmundo texto; ¿cómo se visualiza entonces?… fue allí donde nació la magia de los navegadores web.

El nacimiento de varios navegadores como Mosaic, Netscape e Internet Explorer, representó un hito completo para la historia. Los navegadores se encargan de enlazar (a través de direcciones de Internet) los sitios/páginas web existentes en la red de redes, y no solo eso, también se encargan de renderizar (darle forma visual) el contenido de los ficheros HTML, interpretando susodicho lenguaje, es decir, toman los comandos existentes del HTML y los ejecutan en forma gráfica.

W3CA pesar de todo, el renderizado del HTML se convirtió en un inmenso problema: los diseñadores escribían su HTML, pero no podían asegurar que su página se vería igual en todos los navegadores web, ya que estos navegadores, renderizaban el contenido HTML de manera distinta (interpretaban los comandos de lenguaje a su modo). Toda esta problemática obligó a construir un consorcio, un consorcio que marcara estándares sobre la visualización del HTML, y en un esfuerzo unido, se crea la W3C (World Wide Web Consortium), la cual le dotaría a los programadores la documentación necesaria sobre la forma estandarizada del HTML, para lograr así, que las páginas se visualizaran igual en cualquier navegador, bueno, o al menos esa era la intención.

Estilo en Cascada (Nacimiento del CSS)

Antes de seguir hablando de los estándares, haré una breve introducción a lo que son las “Hojas de Estilo en Cascada” (“CSS” por sus siglas en inglés).

A pesar de que el HTML estaba cumpliendo su función de generar hipertexto gráfico, su capacidad visual era realmente limitada; era necesario darle mas carácter a la Web, dotándole de una mayor capacidad visual, artística. Con el paso del tiempo, algunos de estos elementos fueron siendo integrados al HTML, sin embargo, ya no era suficiente, su efecto avasallador pedía a gritos la creación de un lenguaje específico para esta tarea.

Motivados por el progreso, se lanza CSS, las hojas de estilo en cascada, que no es mas que un lenguaje complementario de HTML para rellenar (y posteriormente suplantar) el hueco respecto al estilo visual de las páginas web, lenguaje que también terminó siendo estandarizado por la W3C.

CSS es un lenguaje sumamente sencillo, que hace honor a su nombre, pero de esto hablaremos después.

Microsoft: siempre aventando la piedra

No hay diseñador web que no tenga un odio acérrimo contra la tecnología de Microsoft en la web. Hablemos de historia.

Microslave

¡Sálvese quien pueda!

Como sabrán, Microsoft en sus días (por allá, entre el 93-95) intentó desbancar a Internet de su lugar con su red masiva “MSN”,  y no creo que haga falta la expresión “pobres ilusos“. Tras el fracaso del proyecto, Microsoft decidió “apoderarse” de la Internet, definiendo sus propios estándares, siempre en vista de meter las narices en todo medio que le generase beneficios, ¡y casi les funciona!

Por aquellos años, Netscape era el navegador web mas popular, reconocido por ser robusto y eficiente, pero era comercial. El primer paso para la dominación de Microsoft, era adueñarse del mercado de los navegadores, pero ¿cómo iba el tío Bill a desbancar un navegador tan bien posicionado?

Microsoft tomó (si no me equivoco) el código del añejo Mosaic, y lanzó “Internet Explorer”. El potencial de IE no radicaba en su eficiencia o rendimiento, si no en el hecho de que era incluido automáticamente en Windows (por lo cual se hizo gratuito), un plan francamente acertado: la gente no tuvo la necesidad de comprar Netscape, se iban por lo que tenían a la mano, todo un juego sucio (aprovechándose de poseer Windows como la plataforma mas popular). ¿Cuál era el siguiente paso?

La creciente “popularidad” de Internet Explorer hizo que Microsoft pudiera aprovechar su posición dominante, así que decidió pasarse por el forro los dictámenes de la W3C, e hizo con los estándares web lo que vino en gana, y dada la posición dominante de Internet Explorer, los diseñadores tuvieron que centrarse en adaptar sus páginas para el navegador de Microsoft, dejando a un lado a la competencia (era IE el que se veía “bien” y el resto el que se veía “mal”).

Microsoft no solo tomó ventaja en lo que respecta a los estándares, también declaró “MSN Search” el buscador hegemónico (al ser incluido en los servicios satélite de IE), al igual que su servicio de correo “Hotmail”. Microsoft definitivamente estuvo a un paso de ser dueño de Internet, pero ¿¿qué sucedió entonces??

La caída de la dictadura

Hay una gran razón por la que el mundo respeta a Google: su función “libertadora”. Google hizo una revolución en la red, ejecutando un golpe de estado contra Microsoft.

Google

Google

En el 97, dos estudiantes del MIT escribieron un algoritmo de búsqueda con una función de “pagerank” que resultaba bastante eficiente; decidieron alojar su página en un servidor, a la cual llamaron “Google”. Sorprendentemente, Google fue adquiriendo una popularidad inmensa, los dos chicos tuvieron que comprar mas y mas discos duros para sus servidores, hasta que recibieron una gran inversión, fue allí donde nació “Google Inc”.

Mientras Yahoo y Microsoft jugaban a los buscadores, Google arremetió contra todo su reinado, y en cuestión de pocos años, Google se hizo dueño de la Internet. Su buscador (respetado y honorado por todo el público) se convirtió en la capital del imperio, y gracias a su servicio de correos “Gmail” la gente se enteró de que había alternativas, pero eso no fue todo: Google hizo que los estándares empezaran a ser respetados.

¿Se imaginan que habría sido de la Web basados en el modelo de Microsoft? Un clic, un dólar, otro clic, otro dólar, ¡felicidades!, ya puedes ver tu correo y visitar facebook por 488 dólares al día, horrible.

Solo quedaba derrocar a Internet Explorer. Sinceramente no había ningún competidor serio, hasta el 2004: un grupo de personas pertenecientes a Mozilla tomaron el código del navegador con el mismo nombre (que es un derivado de Netscape), añadieron algunos complementos interesantes (como la navegación con pestañas), le dieron un bonito aspecto y de ese modo lanzan “Mozilla Firefox”.

Firefox fue la gota que desató una nueva guerra entre navegadores. Firefox logró ganar una inmensa popularidad gracias a un acertado y exahustivo trabajo mediático y propagandístico: la gente por fin disponía de una competencia seria, de código abierto, basada en la seguridad y que brindaba muchas novedades, muchas novedades que dejaban en ridículo a un navegador que no había sido actualizado desde el 2001 (Internet Exploder 6).

WeeMuchos de nosotros ya no usamos Firefox, pero hay que reconocer la infalible labor que tuvo el zorrito, fue gracias a Firefox que los estándares de la W3C vieron la luz de nuevo. Todo este destape incentivó además a muchos otros navegadores para lanzar propuestas basadas en la sana competencia: Opera, Chrome y Safari.

El problema con esta nueva guerra, es que todos los diseñadores nos hemos decantado por respetar a la W3C, y en ese sentido, Internet Explorer nos causa terribles (horripilantes) dolores de cabeza a la hora de adaptar nuestro diseño, ya que IE no respeta los estándares Web.

Nota Intermedia -Internet Explorer: miseria en bits-

Hagamos una pequeña nota intermedia para quejarnos de Internet Explorer. ¿Se han dado cuenta de la bazofia que es como navegador?

Nadie puede negar (absolutamente nadie) que Internet Explorer es el peor navegador del medio, es una tortura viviente, ¡es inmundo!

No respeta los estándares, consume muchos recursos, no fue si no hasta Internet Explorer 7 que soportó navegación con pestañas, esta completamente incrustado en Windows (y es una molestía), tiene un desfavorable (por no decir pésimo) rendimiento con el JavaScript, es de lo más vulnerable, propenso siempre a virus, siempre se llene a de adwares y demás porquería. Y lo que es peor: mucha gente sigue usando Internet Explorer 6.

IE6 es un dolor de cabeza para todos los diseñadores, es un navegador del 2001 que sigue siendo usado solo porque los “intelectuales” de Microsoft no habían querido actualizar su adefecio andante

La llegada de la Web 2.0

La Web se enfrentaba a un gran problema: su esencia estática. El contenido de las páginas no cambiaba, era monótono, lo cual era un gran impedimento para la evolución de la información y los sistemas de noticias.

Web 2.0A lo largo del proceso histórico, fueron naciendo mas tecnologías complementarias al HTML/CSS, que le fueron dando un carácter dinámico a la Web. La creación de PHP (Hipertext Preprocessor, un lenguaje para crear páginas web dinámicas) fue el hito de todo el desarrollo, permitiendo crear sitios de noticias, centros de descarga, comunidades de usuarios y muchas cosas más. También tuvimos la creación de JavaScript (un lenguaje que maneja el estado de HTML, pudiendo crear aplicaciones dinámicas).

Esta evolución nativa de las tecnologías, y la creación de nuevos métodos (como AJAX), le dieron un enfoque distinto a la web, desatando la creación de una serie de nuevos servicios, conceptos y estilos: blogs, redes sociales, comunidades de usuarios, wikis, sindicación como RSS y demás. A toda esta nueva evolución se le llamó “Web 2.0“.

Es justamente ahí donde yo digo que el término “Diseñador Web” ha quedado pequeño para la labor, es necesario comprender la esencia de la nueva era, su tecnología y sobre todo, ser partícipe del proceso, por eso apuesto por el término “Desarrollador Web”.

Aprender a usar todas estas tecnologías (que inclusive hoy siguen en constante evolución) es la labor a la cual me dedico, adquiriendo conocimientos que pienso compartir a lo largo de esta saga.

¿Qué hace un Desarrollador Web?

Realmente es absurdo que explique esto a estas alturas. La respuesta es sencilla, el diseñador web se encarga de hacer la página en HTML/CSS (su maquetado, diseño, estilo visual, grafica las imágenes que lleva el diseño, etcėtera), el desarrollador web se encarga de desarrollar la tecnología que le dará dinamismo a esa página: crear una plataforma de noticias, un sistema de usuarios, una wiki, etcétera.

Últimamente se da que diseñador y desarrollador terminan siendo la misma persona, pero para mi, el “Desarrollo Web” abarca también los aspectos de diseño.

¿Qué necesitamos aprender?

Debo decir que yo no soy experto en todas las disciplinas del desarrollo web, por ejemplo, soy muy lelo en lo que respecta al uso de JavaScript y no tengo idea alguna de AJAX, sin embargo, dominar todo esto es una tarea a la que estoy comprometido, no solo por devoción personal, si no por una obligación laboral.

Las cosas que un desarrollador debería saber es:

  • Amplio conocimiento de (x)HTML/CSS y las nuevas técnicas.
  • Manejo de JavaScript y al menos un framework con soporte para AJAX (yo me decanto por jQuery).
  • Conocimientos básicos (o amplios) de un lenguaje de programación aplicable a la Web (PHP, Python o Ruby).
  • Manejo de algún framework del tipo MVC en complemento de lo anteror (CakePHP, Django o Ruby on Rails).
  • Manejo de alguna lenguaje y alguna base de datos SQL.
  • Conocimientos de diseño gráfico (Fireworks, Photoshop o Gimp), lo mas básico para hacer un diseño decente.
  • Odiar la Web 1.0, Internet Explorer,  el uso de Flash, la creación de foros inútiles hechos por fanáticos de pokemón ¡y a tu abuela!

En la próxima entrada haremos la debida introducción al HTML y aspectos básicos de CSS.

Escribir sobre todas las disciplinas seguramente llevará bastante tiempo; no tengo prisa, ya que al final, mi intención es redactar una compilación de documentos que le sea útil a la gente en el futuro. Un gran saludo.

Etiquetas: , , , ,

Categoria: Desarrollo

    12 Comentarios

  1. Firenz dice:

    Oye que yo soy una fan de pokemon!! xD, de todas maneras porque el uso de flash no te parece apropiado? o.o, se que a veces carga mucho una página web pero algunas aplicaciones pequeñas no están mal o será por el adobe flash que es de pago?

    En fin, tengo que decir que nunca me ha dado por mirarme seriamente el diseño web, lo máximo fue un taller en mi universidad de eso y porque no pude ir al de php. Me gustaría que me ayudaras un poco con htm como novatilla ya que mi gran problema es que aun no consigo cuadrar bien las tablas y me quedan feas, a ver si consigues dejar eso clarito en el tuto porque me trae de cabeza xD. CSS no me supone ningún problema lo que pasa que soy demasiado floja para cambiarlo en mi blog xDD

    Python y Java los voy a aprender el año que viene en mi carrera, no me vendría mal ver tus tutos pero no me corre prisa.

    Y por lo demás mi interes esta sobretodo en PHP SQL que tengo unas ganas tremendas de aprender a manejar bases de datos y así poderme hacer algún día mi web en condiciones.

    PD: Del taller tengo chuletas de HTML y de CSS, si quieres te las escaneo por si te sirve de ayuda

    Byez!

    • Baku dice:

      Muchos diseñadores queremos que Flash se vaya al diablo por varias razones :P , pero creo que Flash paulatinamente tendrá que dejar de ser usado, porque las aplicaciones web basadas en métodos AJAX y los frameworks dinámicos le dieron tres patadas a cualquier aplicación que se haya hecho en Flash.

      Si el tema es una web con efectos, gracias al desarrollo de JavaScript hoy en día es posible hacer efectos nativos sin necesidad de Flash (con frameworks Js como MooTools, Prototype y jQuery), pero esa es una de mis quejas con Internerd Exploder (su pésimo rendimiento con JavaScript).

      Y si son los videos, se aproxima HTML5, que incluye nativamente la etiqueta “video”, un estándar de la W3C que empleará Ogg Theora como base; de hecho Google ha estado trabajando en una versión de YouTube para HTML5 y dejar Flash en el pasado :P .

    • Baku dice:

      La idea es precisamente enseñar HTML/CSS, empleando los actuales métodos de diseño y tal (por ejemplo, para las estructuras ni de loco la gente emplea las etiquetas table, si no que se usa div), la maquetación es una de las cosas a las que haré incapié si eso te sirve :) .
      :( Yo quiero aprender Java. Python por su parte te lo recomiendo muchísimo, es un lenguaje todo terreno: puedes hacer programas para el escritorio, para un móvil, emplearlo en la web, usarlo como lenguaje de scripting complementario para proyectos en C/C++, es multiplataforma y 100% libre.

      En mi caso, yo quiero hacer algunos tutoriales de Django (un framework para webs de Python), que me parece una alternativa muy razonable a PHP, y lo recomiendo mucho mas que Ruby on Rails.

      De PHP yo realmente no sé mucho. Yo lo que se de PHP lo tuve que aprender por la fuerza, cuando me pidieron un trabajo basado en este en el laburo. :P Pude programar un sistema de catálogo con bastantes especificaciones, con publicación de noticias y un sistema de búsqueda bastante eficiente con varias opciones, pero te soy honesto, el código era todo menos eficiente. Justamente ahí tuve que aprender a manejarme con SQL, que la verdad no es muy difícil (o al menos no cuando haces cosas pequeñas).

      Sobre las chuletas, te lo agradezco pero no hace falta :) , ya tengo en mente algunas cosas :P .

  2. Mindro dice:

    El otro día ví por casualidad en Ontuts un conjunto de chuletas para webmasters. Si pinchas en la url de mi nick podrás verlo :P

    PD: ¿Microsoft alguna vez a programado algo de 0? Por lo que parece todo lo copian/roban y lo modifican un poco

    • Baku dice:

      Perdón, el Akismet anda agresivo, marcó tu comentario como spam :( .

      Oh, se ve bastante útil, digo, no desprecio el aporte de Firenz, pero estas me servirán.

      ¿Microsoft?, nah, de hecho hace poco los pillaron robando código de fuentes abiertas.

      • Vin dice:

        Pero si es de fuentes abiertas, entonces no es robo, no? D:

        Muy buen artículo Baku, casi enciclopédico. Especialmente el segmento dedicado a los navegadores, es una historia muy linda aquella ;3. De hecho, al menos aquí en Chile, en absolutamente TODOS los cyber-cafés en los que he estado tienen instalado Firefox.

        Nunca he entendido el hecho de que se supone que si es un panda rojo se llama zorro rojo.

        dews :3

  3. Baku dice:

    Estoy probando el captcha…

  4. [...] tengo varios temas preparados; se vienen varias  publicaciones nuevas (como la segunda parte de Desarrollo Web). Un gran saludo, y gracias por la [...]

  5. Dejar un Comentario

Gestionado con WordPress. Diseño por Darío Benitez (Baku).
Licencia Copyleft (Creative Commons BY-NC-ND). 2009-2011 henBaku.