Aun recuerdo hace menos de dos años cuando empece en el mundo de la web, surgieron tantas dudas, intente por varios lados a tratar de aprender lenguajes como html, css, pero sinceramente no buscaba exactamente por donde empezar en cada uno de ellos, y la realidad es que cuando comenzamos a programar para internet, surgen tantas dudas que no sabemos por donde empezar, a todos nos pasa, es la realidad, y bueno, quiero dedicar este post para explicar algunas de las cosas básicas que uno debe de saber antes de tomar el camino del desarrollo web para no morir en el intento y terminar mas confundidos de como empezamos, pero antes, les contaré una breve experiencia.
Cuando quise aprender a programar para web, fue mas que nada una iniciativa originada del hecho de que me di cuenta que programar para escritorio tenia muchas limitaciones, hacer sockets para que todo pudiera conectarse a un servidor no era una gran ventaja, y bueno, un maestro siempre me decía que era muy bueno, que debería comenzar a programar ya para web para hacer sistemas de información que era lo que mas se solicitaba en el campo donde me encontraba, y bueno, quise dar el salto, inicialmente había un lenguaje que era seguro que tenia que aprender, “html”, y bueno, comencé a leer cursos de html 4, el normalito, el detalle estaba en que cuando llegaba a la parte de formularios no entendía exactamente ahora que seguía, luego habia etiquetas que nos permitían dar colores, y se supone que eso lo hacia CSS, y era confuso, anteriormente, cuando aprendía lenguajes de programación, era dedicarle de lleno tiempo a ese lenguaje para aprenderlo, pero acá era muy diferente, me decian que aprendiera HTML en conjunto con CSS3, y sinceramente la teoría era muy aburrida, y muy poco explicita, en fin, así me la pase, luego escuche de JavaScript, de Php, y yo decía, bueno, cuando sepa html y css veré javascript, pero me decían que con javascript manipulaba el html y el css también, y mas confusión, luego la onda de PHP, pelie mucho por no aprenderlo ya que sinceramente soy fan de Python, aunque no conozco de lleno el lenguaje, y cuando empece a ver algo de Php, vi que tambien era código dentro de Html, ¿Para que quieren mas?, me perdí, y no sabia por donde empezar entonces, posteriormente decidí tomar unos cursos en linea de diseño web, y me aclararon muchas de mis dudas, luego lleve uno de backend, uno de frontend, y me certifique en las tres , no fue hasta que empece a desarrollar mis primeros proyectos que entendí bien lo que era un GET, un POST, algo muy confuso para mi en aquel tiempo, ahora, no puede ser más claro, actualmente desarrollo en todos estos lenguajes, y la verdad, super fácil, sin embargo aun veo a muchos de mis amigos peleando con estos conceptos, y bueno, por que no dedicar un post a tratar de resolver esto.
Bien, primero que nada, hay una cosa que tenemos que entender muy bien: Captura   De manera general, la imagen superior representa como funciona la Web, existe un cliente, que normalmente somos nosotros, que pedimos a un servidor una página web, ahora bien, ¿Cuando sucede esto?, fácil, para que nosotros podamos llevar a cabo una petición web, necesitamos un navegador, ya sea chrome, firefox, iexplorer, safari, opera, un navegador movil, etc, no importa, la idea esta en lo siguiente: Captura 2   Desde nuestro navegador web, nosotros introducimos una url de la siguiente manera: http://serprogramador.es  ¿Y que pasa?, el navegador convierte esta serie de palabras en una dirección ip, esta dirección ip, es la dirección de una computadora localizada en algún lugar del mundo que contiene la página que estamos buscando, por ejemplo, nosotros al escribir “http://serprogramador.es”, el navegador lo entiende como algo parecido a 234.228.208.123, y se va a internet y empieza a buscar la máquina con esta dirección, cuando la encuentra, esta máquina, llamada servidor,  debe de tomar la petición, y enviar a la máquina que pidio la página, codigo html, css y javascript, y hasta ahí termina el trabajo del servidor, ahora bien, como el cliente pidio la página, el cliente es el que recibe este codigo html, css y javascript, ahora bien, ¿Por que solo html, css, y javascritp?, fácil, por que es lo único que el navegador sabe interpretar, esto tiene que quedar totalmente claro, el navegador web, solo puede leer HTML, CSS y JAVASCRIPT, y la pregunta mas obvia para aquellos que conocen mas o menos que onda es, ¿Y donde queda Php?. Captura 3   Esto es fácil, Php, Pyhton, Java, .NET, entre otros, son los lenguajes que se encuentran en esa máquina que nosotros estamos llamando servidor, es decir, las cosas funcionan de esta manera: Los navegadores solo pueden entender HTML, CSS Y JAVASCRIPT, nada mas, cuando nuestro navegador le pide a un servidor una página, este lo recibe con un lenguaje de programación, que pueden ser Php, Python, Java o .Net (por ejemplo), vamos a generalizarlo a Php, php recibe la petición, y empieza a crear codigo HTML, con sus variables, sus estructuras de datos de php, etc, pero al final, cuando termine de hacer todo el trabajo, Php tiene que tener listo un documento HTML, y esto normalmente es así, cuando despues de hacer todo lo necesario, Php tenga listo el Html, se lo devuelve al cliente, y al cliente, como hemos mencionado anteriormente, le llega codigo HTML, CSS y JavaScript, ahora bien, la primera vez que explique esto, un amigo me pregunto, como es que cuando algo sale mal, Php manda errores, y se ven en el navegador, esto es sencillo de explicar, Php, como dije, tiene que devolver un HTML, entonces, cuando surge un error, PHP crea una etiqueta DIV, le pone algunos estilos, pone un mensaje de error, y se lo devuelve al cliente, si nosotros observamos un mensaje de error en PHP, veremos que contiene texto plano o codigo HTML, pero al final, eso es lo que tiene que suceder, ahora bien, una duda mas que salio en esto, fue, ¿Como es que uno programa codigo Php en mi maquina y se puede ejecutar sin que haya un servidor?, y esto es también muy fácil de explicar: Captura 4 Cuando nosotros instalamos herramientas como XAMPP, se configura nuestra maquina como un servidor, es por este motivo, que nosotros tenemos que teclear localhost en el navegador, por que en este momento, el servidor no se encuentra en internet, el servidor es nuestra propia maquina, y lo que nosotros hacemos de teclear codigo php dentro del HTML, accesando a bases de datos, obteniendo información de otros lados, y así, generar lo que al final le enviaremos al navegador,esto es lo que normalmente hace un servidor, pero observemos que cuando ejecutamos una pagina escrita en php, al final, lo que aparece en nuestro navegador, es codigo HTML, CSS y JavaScript, esto, como les dije, tiene que quedar claro, el navegador, solo entiende estos tres lenguajes, y es así, como funciona la Web, nuestro navegador pide una página, un servidor recibe la petición, la procesa, saca datos de bases de datos, arma un documento html, y se lo envia a nuestro navegador. Una vez entendido esto, la única pregunta que queda por contestar es: ¿Por donde empiezo?, y esto es fácil de responder, programar para internet, no es algo que tengamos que aprender por partes, no podemos aprender html, luego css, luego php, luego javascript, NO, esto no funciona así, para empezar a programar para internet, primero que nada tenemos que entender que es un conjunto de tecnologías, entonces, las tenemos que aprender en conjunto, ahora bien, no las podemos aprender todas de golpe, tenemos que aprender por pequeños conjuntos, ¿y cuales podría ser estos?, fácil, de entrada, tenemos que aprender HTML en conjunto con CSS, posteriormente podemos pulir nuestro CSS en conjunto con JavaScript, y por ultimo, aprendemos Php, el cual, podemos llevar de la mano con JavaScript con tecnologías con Ajax y JSON. De esta manera, podremos aprender todo lo necesario para desarrollar en web, y uno de mis mayores consejos es, una vez que hayamos aprendido algo, no reinventemos la rueda, existen frameworks, librerias y un mundo de herramientas que nos pueden permitir llevar la programación web de una manera fácil y por un buen camino. Espero que les haya quedado claro, sino, cualquier duda, acá estamos. Saludos.

Quizá también te interese

Creando dialogos personalizados en Java con JDIalog
Creando dialogos personalizados en Java con JDIalog
Estamos de vuelta, y más fuertes que nunca.
ECMAScript 6, lo nuevo.
Bower, un administrador de paquetes para la web
  • marcelo

    Como estas? ya conozco de html5, css3, js y php. Pero mi duda es como los uso para hacer ciertas cosas que vi en la web y me gustaron. Actualmente muchas paginas de empresas son paginas con contenido el cual se accede bajando y donde se van mostrando distinta info. Que hace la empresa, muestran sus trabajos, clientes, contacto, etc. Por ejemplo http://phonegap.com/. Tengo dos dudas principalmente,

    1) Para hacer paginas de este tipo se utilizan plantillas (html 5 + css3 + js) bajadas de internet? o se maqueta todo desde cero?
    2) Quiero hacer varias paginas de este tipo las cuales no van a variar su contenido muy seguido (salgo alguna imagen o texto cada tanto). El contenido lo pondrias directamente en el html, o llenarias toda la info de la pagina usando por ejemplo php y sacando la info de un Base de datos?

    Muchas gracias y espero que se haya entendido.

    Saludos.

    • Mxrck

      Hola que tal, te puedo responder desde mi experiencia.

      1.- Mucha gente recurre a esto, pero principalmente no es por falta de creatividad, sino más bien por una cuestión meramente monetaria, si tu le dices a un cliente que le cuestá 1/3 o 1/2 de lo que saldría desarrollar (maquetar) de 0 su aplicación, la mayoría te dirá que prefiere pagar ese 1/2 a pagar completo (es triste pero cierto u_u) muy pocos querrán invertir en tener una imagen completamente propia.

      2.- Esto depende muchísimo de ti y de la comidad que quieras tener, si por ejemplo estás seguro que siempre vas a ser tu quien administre la aplicación y no tienes problemas con el tiempo/esfuerzo hacer estos cambios (Mi experiencia me dice que los clientes pedirán muchos cambios a corto plazo) entonces no hay problema en que fuera estático, pero si en algún momento tu cliente lo va a administrar, no creo que el sepa como modificar los archivos html, lo ideal sería un panel de control en el servidor para manejarlo; yo mismo a veces solo tomo la información de una base de datos y la muestro en donde tenga que mostrarla con PHP y ya después para modificar uso directamente PHPMyAdmin (ya sabes, con interfaz gráfica para hacerlo más sencillo y no tener que bajar por ftp y volver a subir archivos).

      Pero de igual forma me ha tocado que el cliente quiere comenzar a llevarlo por si mismo, y no será muy cómodo para el usar PHPMyAdmin (sin contar con que podría matar la aplicación).

      Un saludo, y éxito en tus proyectos!

  • Billy

    Gracias AMIGO MUY BUEN POST

    • De nada, para eso estamos, impresionantemente no leí el correo de notificación por que todos se hiban a spam, pero ya está solucionado, gracias, cualquier duda aca estamos. Saludos.

      • Billy

        Gracias amigo ivan, actualmente me encuentro en el limbo de donde estudiar Frontend, de forma ONLINE. Me recomendarías algunos sitios buenos y FUNCIONALES de educación frontend sea HTML,CSS,JS. Gracias de antemano

        • Que tal billy, en su tiempo, te hubiera recomendado fielmente mejorado.la, pero realmente su nivel de educación se ha ido a los suelos, actualmente te puedo recomentar poco a poco codescholl, o dev code, y más que nada, proponte hacer algo tu mismo, un proyecto personal y veras que iras aprendiendo conforme vayas necesitando o requiriendo más cosas, no hay mejor método.

  • Buenas tardes Ivan, he visto que tienes artículos sobre Laravael y Codeigniter.
    ¿Has desarrollado proyectos grandes con ambos?
    ¿Qué es lo que más te gusta de cada uno?
    ¿Personalmente con cuál te quedas?
    Gracias por tu tiempo

    • Que tal Miguel, buen día, claro que si, he tenido la dicha de poder desarrollar proyectos grandes tanto en Laravel como en Codeigniter, incluso, en muchas ocasiones le comentaba a mi amigo Mxrck que desarrollaramos un canal de Youtube con cursos de programación sobre todas las cosas que a veces blogueamos aca, sin embargo, no se que les parecería a las personas que visitan el sitio.

      Con respecto a tu pregunta, te comento algunas de mis experiencias tanto en codeigniter como en laravel.

      Codeigniter:

      ===== Cosas que me gustan ===

      > Curva de aprendizaje corta
      > Documentación sencilla y en varios idiomas
      > Framework rápido, dado que no carga muchas cosas

      > Deploy super sencillo y rápido

      ===== Cosas que no me gustan ===

      > No maneja Namespaces
      > Framework basado en funciones
      > No cuenta con un ORM, casí casí haces las consultas a mano
      > Tardas más desarrollando debido a la gran cantidad de cosas a escribir en los modelos
      > Es MVC nativo

      Laravel

      ===== Cosas que me gustan ===

      > Namespaces integrados por defecto
      > El ORM de Eloquent, es una “bestia”, extremadamente poderoso, casi casi nos olvidamos de los modelos.
      > Gran capacidad de extender las funciones nativas
      > Los Facades que puedes crear a tu gusto son la cosa más extraordinaria del mundo.
      > Multi – Arquitectura, aunque nativamente es MVC, en laravel 5 te obliga a crear tu propia arquitectura.
      > Sistema de templates, que evita el tipo
      > Composer, un gestor de paquetes, en codeigniter tienes que implementarlo manualmente, laravel ya lo trae.
      > En laravel 5 integran Gulp, con Less, algo excelente.
      > La consola de artisan es maravillosa.
      > Crear tus propios comandos para la consola es genial, puedes automatizar muchas cosas del desarrollo.
      > Las migraciones de laravel son una manera excelente de trabajar una base de datos en equipo.

      ===== Cosas que NO me gustan ===

      > La curva de aprendizaje es mucho más larga que codeigniter
      > La documentación no es la más amigable del mundo, pero se entiende lo necesario.
      > El deploy es algo tedioso la primera vez, luego te acostumbras, a menos que uses servicios externos.
      > Un poco más pesado al cargar, dada todas las librerías que carga

      Personalmente, Mxrck no me dejará mentir, desarrolle aproximadamente 1 año completo con Codeigniter, y otro año con laravel, y la verdad, en palabras simples, “Laravel es hermoso” xD …. me quedo con laravel, aunque la curva de aprendizaje sea más tediosa, es un excelente framework. jejeje

      Miguel también agradecería tu opinión con respecto al canal de Youtube, ¿que opinas?

      • Gracias por tu respuesta. Respecto al canal de Youtube, bueno la programación es algo que para muchos difícil de aprender, por tanto cuanto más ayuda exista mejor.
        Los vídeos tendrían que ser cortos y centrados cada uno en algo específico. Yo he visto muchos vídeos, pero para aprender cosas concretas o ver como hacían otros cosas que yo ya hacía.

        Un vídeo debe ir siempre acompañado de una transcripción y por supuesto con el código de ejemplo. Entonces si que ofrecerías valor añadido de calidad.

        Saludos

        • Fíjate Miguel que estamos trabajando en esa parte,así como un cambio de imagen para el sitio,esperó que próximamente podamos tener disponibles todos estos agregados al sitio.

  • Miguel Matos

    Acá llegando desde google y me percato que también he cometido los mismos errores. Así que hice esto más simple: decidí empezar haciendo una web pequeña para ir ajustando los conocimientos. Primero la hago en (x)HTML para reajustarla en HTML5 ahí donde haga falta; luego lo alineo con CSS(2/3) ahí donde ella lo necesita. Y luego agrego la interacción con Javascript en las partes que necesita. Y al final hago una web más dinámica con PHP. Pero siempre probando “hago esto así”, “hago esto otro así”, “le cambio x por y por z”, “le cambio esto a este lado” “a este lado” “hacia este otro lado”… cosas así. Y así poquito a poco me he aprendido las cosas del diseño web para pasar a programarla a mi gusto.

    • Me parece excelente la manera en la que lo estas trabajando Miguel,has probado ir metiendo algún framework? sería una manera de incrementar tus conocimientos gradualmente y añadir un skill a tus aptitudes.

      • Miguel Matos

        la página en principio será estática. Cuando tenga puesto el PHP ya veré con qué framework pueda trabajar. Como mi conocimiento aún es limitado todavía no sé cómo funcionan.

        • Miguel, una pregunta, que tal bien te parece la idea de que ofrezcamos cursos gratuitos de programación?

          • Miguel Matos

            ¡apoyo la moción! Bien puede ser de C++, Java y Python para aplicaciones de escritorio, y HTML5/CSS3/Javascript para el mundo front-end y PHP/SQL/Ruby y otra vez Python para el mundo back-end, pero eso se los dejo a su elección.

  • Luisa Salazar

    Genial!

  • Ninisbeth

    Hola…mucho gusto, soy de Venezuela, me ha encantado este articulo que has hecho. Lo leido y leido varias veces para saber lo que debo hacer para ser una gran diseñadora web. Comence hace 15 dias en una empresa que me asigno un proyecto de desarrollo de una aplicacion de monitoreo de servidores, no puedo dar mas detalle jeje. Lo cierto es que me dieron 15 dias para estudiar toooodas las tecnologias que tu nombras aqui, o por lo menos me dijeron que hiciera los “Hello World” de cada una, ya que ellos dicen que eso es suficiente para arrancar a hacer cosas del proyecto como tal, pero, y aunque he estudiado lo basico de todo y lo he entendido en su momento, ahora me siento como saturada, o como que se mucho pero no se nada jeje. No, pero en serio, quisiera poder dominar tooodo algun dia, asi como te paso a ti cuando escribiste este articulo. En Venezuela certificarse es imposible, el internet tambien es una limitante, y hay otro sin numero de problemas, pero lo que si hay, por lo menos de mi parte, es el interes inmenso de aprender y ser una gran Desarrolladora full stack =) Podrias recomendarme esas paginas de cursos que hiciste? esos que te no te dejaron duda del GET y el POST..? Me puedes decir cuanto tiempo te tomo llegar a dominar toda la programacion web? Gracias….

    • Hola ninisbeth, me alegra mucho que cada día más mujeres se integren a aprender programación, normalmente, por lo menos en nuestro país, muy pocas mujeres se dedican a esto, y realmente no se por que, pues bueno, te comento, en su tiempo, estuve suscrito como 1 año a mejorando.la, ahora platzi, antes, lo recomendaba muchisimo, actualmente lo han comercializado muchisimo y han bajado bastante el nivel educativo, pero, son buenos para comenzar.incluso tienen un curso gratuito para que vayas haciendo pininos con javascript.

      Probe con varios sitios, devcode.la, platzi, udacity, udemi, al día de hoy te puedo decir que nunca he dejado de aprender, sin embargo te puedo recomendar comenzar con lo básico de platzi, y luego irte por cursos un poco más completos en udemi, o udacity, solo que normalmente allá pagas por curso.

      En cuanto al tiempo que me tarde aprendiendo, realmente, como te comenté, nunca he dejado de aprender, por que las tecnologías se actualizan constantemente y salen nuevas tecnologías, entonces, nunca dejo de aprender, pero puedo decirte, que me dediqué a aprender a programar de lleno como 2 meses, luego me dediqué a aprender web, unos 4 meses, hasta poder dominar varias cosas y hacer algo por mi mismo, ya de ahí, todo lo demás, te lo da la experiencia, lo que si te cuesta mucho trabajo al principio, es la lógica de programación, pero una vez que la tienes, solo es ir conociendo los lenguajes, e ir siguiendo metodologías de trabajo para hacer las cosas.