Introducción de un diseñador a la programación

Los diseñadores a menudo son bastante reacios a aventurarse más allá de los dominios de HTML y CSS en el territorio de las secuencias de comandos y los lenguajes de programación, y por una buena razón. La programación requiere un conjunto de habilidades muy diferente a la de burlarse de las páginas web. Además, hay tantas cosas diferentes que aprender que la mayoría de los diseñadores ni siquiera saben por dónde empezar: JavaScript, PHP, Ruby, Rails, ¿cómo puede mantenerse al día?

Sin embargo, en la práctica, la programación resulta ser mucho menos aterradora de lo que los diseñadores imaginan. Hoy te mostraré cómo la programación es una habilidad que puedes aprender una vez y luego aplicarla a cada nuevo idioma que aprendas. Echaremos un vistazo a tres construcciones de programación diferentes en tres lenguajes diferentes para ver qué tan similares son realmente. Si desea comenzar a programar pero no sabe nada al respecto, este artículo es para usted.

No temas, solo te puede gustar

Este sitio está generalmente dirigido a diseñadores, y por experiencia personal, sé que acercarse a la programación por primera vez como diseñador es extremadamente intimidante. Los diseñadores son pensadores visuales, prosperamos a través de la creación y la experimentación utilizando nuestra mente y un conocimiento experto de las herramientas de nuestro oficio.

En general, somos el tipo de personas que odiaban las clases de matemáticas y cualquier otra cosa donde la creatividad no parecía tener un punto de apoyo obvio.

"En general, somos el tipo de personas que odiaban las clases de matemáticas y cualquier otra cosa donde la creatividad no parecía tener un punto de apoyo obvio".

Los programadores son solucionadores de problemas. Adoran los rompecabezas de la lógica y los retoques con el código durante horas en ausencia absoluta de imágenes de cualquier tipo. Tenga en cuenta que estas dos categorías de personas no se excluyen mutuamente. Si encajas ambas descripciones, es probable que te encantará la programación.

No HTML y CSS

Estamos llegando rápidamente a un punto en el que la mayoría de los diseñadores web saben, al menos, un poco sobre la codificación HTML y / o CSS. Esta experiencia y conocimiento te ayudarán, pero quizás no tanto como podrías pensar.

HTML es un * lenguaje de marcas * y CSS es un * lenguaje de hojas de estilo *, se usan principalmente para formatear e insertar contenido bastante estático en páginas preconstruidas. La forma en que trabajas con ellos es, en realidad, muy diferente de manejar un * lenguaje de scripting * o * un lenguaje de programación orientado a objetos *, que son el tipo de herramientas de programación que encontrarás en uso en la web hoy en día.

El gran secreto sobre la programación

Esa última parte fue la mala noticia, pero no temas, hay buenas noticias en el horizonte. Si entras en una librería y paseas a la sección de programación, es probable que te sientas completamente intimidado. ¡Hay tantas cosas diferentes para aprender! Esta intimidación se incrementa cuando te encuentras con uno de los genios que parece saber casi todos los lenguajes de programación existentes. ¿Cómo en el mundo las personas encuentran tiempo para aprender estas cosas? Muchos principiantes están tan completamente desanimados en este punto que se dan por vencidos incluso antes de intentarlo.

Los lenguajes de programación tienden a ser muy similares. Muchos de ellos usan los mismos bloques de construcción y conjuntos de herramientas similares para lograr sus objetivos.

El gran secreto que no sabes si nunca te has involucrado en la programación es que los lenguajes de programación tienden a ser muy similares. Muchos de ellos usan los mismos bloques de construcción y conjuntos de herramientas similares para lograr sus objetivos.

Aprendí este pequeño secreto en mi primera interacción con la programación: una clase de Java en la universidad (no debe confundirse con JavaScript). A pesar de que yo mismo era un jovencito, la clase estaba llena de hombres de 30 y 40 años. Prácticamente todos ellos ya tenían trabajos en la programación y habían estado trabajando durante veinte años o más. Simplemente trabajaban en el uso de otros idiomas y trataban de ampliar su conjunto de habilidades, a menudo por cuenta y ánimo de su empleador.

Al entrar en la clase el primer día, ninguno de nosotros sabía mucho, si es que sabía algo, acerca de Java. Sin embargo, en la tercera clase, estos muchachos pasaban por delante de mí. Estaba escribiendo pequeños fragmentos de código horriblemente simples basados ​​en los fundamentos que habíamos aprendido. Estos chicos tomaron los mismos fundamentos y crearon aplicaciones elaboradas con todo tipo de funciones geniales que van más allá de los requisitos para la tarea.

? Estaba inepto? Resulta que, afortunadamente para mí, la respuesta no fue tan simple.

Estaba inepto? Resulta que, afortunadamente para mí, la respuesta no fue tan simple. La realidad era que estábamos aprendiendo cosas muy diferentes. Estaba aprendiendo a programar a través de la lente de Java, estos tipos ya sabían todo sobre programación y simplemente necesitaban un poco de ayuda para descubrir cómo traducir ese conocimiento a Java. Yo era un niño que aprendía a hablar por primera vez y eran multilingües que aprendían otro idioma.

El punto de esta larga historia es ilustrar que, después de que realmente te metes en la programación o las secuencias de comandos con un lenguaje, el resto se vuelve mucho más fácil porque has reducido drásticamente la curva de aprendizaje. Si sabes cómo codificar en PHP, el salto a Ruby es mucho más pequeño.

Los bloques de construcción

Es fácil para mí decir que la programación se basa en conocimientos reutilizables, pero ¿puedo poner eso en práctica? ¿Cuáles son los llamados bloques de construcción y en qué se parecen o se diferencian de un idioma a otro?

Gran pregunta Veamos si echamos un vistazo a algunas de las construcciones de programación más básicas pero más utilizadas. Comprender esto impulsará su educación de programación independientemente de la ruta o el idioma que elija.

Variables

Las variables son una cosa maravillosa.Si alguna vez has usado MENOS o algo similar, entonces has visto las maravillas de las variables y cómo pueden ahorrar una inmensa cantidad de tiempo. Todavía no estoy seguro de si pertenecen a CSS, pero el programador en mí seguramente quiere verlos allí.

Una variable es esencialmente una forma de almacenar información. Puede almacenar algo tan simple como un valor, digamos 39, o algo tan complejo como un conjunto completo de datos que contienen cientos de valores. Piense en una variable como una caja. Las cajas en sí mismas no parecen tan importantes, lo que cuenta es lo que hay dentro. Sin embargo, las cajas son una forma conveniente de almacenar y acceder a ciertos artículos.

Variables de JavaScript

Vamos a saltar a un ejemplo. Dado que JavaScript es probablemente el primer candidato para pasar de HTML y CSS pasado, comenzaremos todos nuestros ejemplos allí. Así es como funcionan las variables en JavaScript:

Aquí puede ver exactamente cómo se utilizan las variables en JavaScript. En primer lugar, usted declara una variable. Esto simplemente lo crea o lo crea, cuando se hace esto, siempre se debe denominar algo indicativo de su contenido. A continuación, le asigna un valor (a menudo estos dos pasos se combinan), en nuestro caso, lancé un número arbitrario. ¿Recuerdas eso,? ContentWidth? Es nuestra caja, que ahora tiene un valor. Cada vez que queremos acceder a ese cuadro, simplemente usamos el nombre de la variable, así que para finalizar el ejemplo, creé una alerta e inserté la variable. Esto abrirá una caja con el valor? 496 ?.

Esto puede parecer inútil aquí, pero imagina que tenemos trescientas líneas de código que hacen referencia a esa variable con frecuencia. Cada vez que cambia el valor de esa variable, nuestro código sigue funcionando perfectamente porque el nombre de la variable se ha mantenido constante. Sin variables, esto sería imposible y resultaría mucho más código.

Variables PHP

Ahora que tenemos esa base sólida de información, aprender variables en otros idiomas se vuelve mucho más fácil. Esta vez no estamos aprendiendo qué variables son y cómo funcionan, solo cómo usarlas en otros idiomas.

Aquí hay un vistazo a cómo funcionan las variables en PHP:

Hay mucha similitud aquí. Observe el uso de puntos y coma para indicar el final de una declaración y cómo los comentarios utilizan la misma sintaxis. Esta vez declaramos nuestra variable y le asignamos un valor en una sola línea. Podemos ver que la sintaxis de esto es casi idéntica, con la importante distinción de que PHP usa un? $? al comienzo de un nombre de variable. Tenga en cuenta que el? Eco? comando simplemente imprime algo en la página del navegador.

Variables Ruby

Ahora echemos un vistazo a las variables en Ruby.

A estas alturas, puede ver que gran parte de lo que implica aprender un nuevo idioma es simplemente descubrir sus peculiaridades. Por ejemplo, JavaScript y PHP utilizaron puntos y coma al final de una línea, Ruby no. Además, esta vez los comentarios se crean con? #? en lugar de ?//? y usamos? pone? para dar salida a nuestro resultado.

Bucles

Otra construcción de programación popular es un bucle. Con los bucles, puede ahorrarse la molestia de repetir el código una y otra vez al automatizar el proceso que desea lograr. Al crear un bucle, debe asegurarse de declarar los parámetros del bucle, como las condiciones para cuando cese el bucle. No desea que las acciones continúen infinitamente, por lo que debe crear una condición por la cual se terminará el ciclo.

Bucles de JavaScript

En cualquier idioma dado, generalmente hay múltiples tipos de bucles. Aquí hay un tipo en JavaScript, el? While? lazo. En este ejemplo, configuramos una variable, luego creamos un trozo de código que debe ejecutarse una y otra vez mientras la variable sea menor que 50. Luego, dentro de ese bloque de código, definimos las acciones que se repetirán. En este caso, estamos registrando el valor de la variable en la consola, y luego incrementamos el valor de la variable en uno. Dado que la variable aumenta cada vez que se ejecuta el código, eventualmente llegará a 50 y el bucle terminará.

Esto mismo podría lograrse con un? Para? lazo. Esta versión es un poco más sucinta, ya que indica el valor de la variable para comenzar, la condición bajo la cual termina el ciclo y la acción para tomar la variable en una sola línea.

Bucles de PHP

Una vez más encontramos que PHP es muy similar a JavaScript. Después de leer los ejemplos anteriores, debería poder captar sin esfuerzo el equivalente de PHP. Aquí, una vez más, tenemos un bucle while y un bucle for, cada uno de los cuales contiene una sintaxis casi idéntica a la de sus hermanos de JavaScript.

Bucles de rubí

Aquí están los? Mientras? ¿y para? Loops en ruby. Como puedes comenzar a ver, Ruby es mucho más flexible en su sintaxis que los otros dos idiomas que estamos usando. No solo no hay punto y coma, los corchetes tampoco están presentes. También note cuan diferente es el? Para? Loops se ve esta vez.

Funciones

Las funciones son otra construcción de programación creada para ahorrarle tiempo al evitar repetir el mismo código. Cuando codifique una aplicación, probablemente se realizará de una a miles de tareas. Cada tarea representa una parte de los comandos. Cuando lanzamos los comandos a una función, simplemente podemos llamar a esa función en lugar de escribir ese código completo. De esta manera, una función se parece mucho a una variable que realiza una tarea o una lista de tareas.

Funciones de JavaScript

Construyamos una función súper básica en JavaScript que tome cualquier número que se le pase y la cuadre. Comenzamos aquí con la palabra? Función? Luego síguelo con una variable entre paréntesis. Luego dentro de la función realizamos varias acciones y devolvemos un valor.

Cuando usamos la función, reemplazamos la variable entre paréntesis con cualquier número que nos guste y el código dentro de la función se realizará en ese valor. En el ejemplo anterior, el resultado devuelto sería 81.

Funciones PHP

Ahora estás tan familiarizado con la conversión de JavaScript a PHP que deberías poder hacerlo todo por ti mismo. Aquí está la sintaxis:

Métodos de rubí

Una vez más, Ruby es bastante diferente. De hecho, Ruby en realidad se refiere a este constructo en particular como un método, no como una función. Sin embargo, aún podemos aplicar rápidamente nuestro conocimiento de las funciones para descifrar cómo funciona esto.

Como puede ver, el método Ruby está realizando la misma tarea que la función JavaScript. Le permite pasar un número a los parámetros, después de lo cual cuadra ese número y devuelve el valor.

Fácil verdad?

A esta altura, debería poder ver la importancia de comprender la práctica de la programación independientemente de cualquier lenguaje de programación. Existe una estructura y un método de programación compartidos que encontrará en todos los idiomas que aprenda. Muchas de las diferencias son * semánticas * y equivalen a ligeras diferencias de sintaxis.

No crea que esto significa que los lenguajes de programación y scripting son todos iguales, no lo son. Todos tienen un propósito específico que define cómo y cuándo los usa. Es muy parecido a aprender Adobe Illustrator y luego saltar a InDesign. Está lidiando con dos cosas diferentes creadas para dos propósitos diferentes, sin embargo, hay suficiente similitud de que un conocimiento experto de una le ayudará a aprender sobre la otra.

Conclusión

Esta discusión no fue de ninguna manera destinada a ser exhaustiva. Ahora no posees un conocimiento fundamental completo de programación. En su lugar, simplemente aprendió sobre programación de una manera que, con suerte, lo hace más accesible. En lugar de ver una masa de idiomas completamente diferentes que tienes que aprender, ahora deberías ver una colección de prácticas relacionadas en las que el estudio de uno realmente expande tu comprensión de los otros.

Entonces, ¿En dónde debes empezar? Como mencioné anteriormente, JavaScript es definitivamente el lugar para que comiencen los diseñadores web. Su aplicación es inmediatamente evidente, especialmente cuando se combina con jQuery, al HTML y CSS que ya conoce. Desde allí, el salto a PHP es mucho más manejable, lo que podría llevarte a estudiar Ruby para que puedas dominar Ruby on Rails; Las posibilidades son ilimitadas!