Tag Archive for edas

Salida y entrada de datos en consola con Ruby

El kernel de Ruby carga consigo una buena cantidad de métodos entrada salida, conocidos también como métodos I/O (por Input/Output), entre ellos tenemos gets, put, print, printf, putc y algunos otros que están más relacionados con el manejo de archivos, tópico que veremos más adelante en el curso.

En este artículo veremos algunos de ellos, cabe mencionar que éstos métodos, como su nombre lo indica, sirven para recibir o imprimir datos a través de la consola para interactuar con el usuario.

El más sencillo tiene que ser print, de hecho print es una impresión sencilla, si ejecutas el siguiente programa en tu consola, deberás ver el mensaje en ella:

print "Hola mundo"

Si ejecutaras dos veces la anterior instrucción, notarías que el texto sale pegado, a menos que dentro de las mismas cadenas coloque espacios. En realidad la mayoría de las veces requerimos de que cada impresión de pantalla salga en una línea diferente de la consola, y eso es precisamente lo que hace puts.

puts "Hola"
puts "mundo"

Ahora bien, si ejecutas el programa anterior, verás cada impresión en una línea de la consola diferente.

Para terminar con las impresiones de pantalla, veamos algo con lo que los programadores en C, se sentirán más cómodos, se llama printf y funciona así:

name = "Uriel"
edad = 18
printf "Me llamo %-10s y tengo %3d", name, edad

El ejemplo anterior imprimirá mi nombre con máximo 10 caracteres y mi edad en máximo 3 dígitos, %d es para enteros, %s para cadenas y %f para flotantes.

Ahora bien veamos como aceptar datos del usuario desde la consola:

nombre = gets

Creo que no podría ser más sencillo, el método gets es el que nos permite recibir información del usuario, gets, siempre recibe una cadena y termina de recopilar la información cuando existe un salto de línea. El problema con gets es que devuelve una cadena que si ingreso mi nombre se vería así “Uriel \n” lo cual no es del todo bueno, pero tiene solución y es a través del método chomp.

nombre = gets.chomp

Después de chomp, mi nombre regresaría algo así “Uriel”.

Por último, me parece un excelente momento para que probemos un programa más concreto, creemos uno que nos salude:

print "Dime tu nombre: "
nombre = gets.chomp
puts "Hola #{nombre}, un gusto conocerte"

Del código anterior, lo único que no hemos visto es el operador #{} y me parece un excelente momento para explicarlo, leyendo el código podrás notar que es el operador de concatenación en Ruby, así pues, cuando necesites combinar el valor de una variable con una cadena, deberás colocar la variable dentro de las llaves del operador anterior.

Bien, con eso quedamos con los métodos de entrada salida y pasaremos en el siguiente artículo a estudiar los arreglos en Ruby.

Efecto Parallax HTML5

Uno de los trends de diseño más importante en los últimos meses o el último año es el efecto Parallax. Muchas grandes agencias de diseño han construido sitios dignos de un awwward basados en este patrón.

El efecto Parallax, en general, se refiere a elementos dentro de un objeto visible que se mueven a distinta velocidad, así pues, es posible que el ejemplo más claro de Parallax lo hayamos visto jugando, por lo general, en un juego el fondo se mueve más lento que los personajes y/o assets, eso es Parallax. En diseño esto se ha aplicado en efectos vistosos, para ejemplo ésta página de Nike que muestra una aplicación que usa javascript para construir un efecto muy vistoso con elementos moviéndose y mostrándose en el foco a distintas velocidades.

Por lo general, el efecto se construye utilizando javascript, si bien puedes logar esa clase de resultados utilizando “javascript crudo”, es decir, sin plugins, en la web ya hay gente que ha pasado por esto y ha decidido regalarnos algunos plugins, entre los más populares:

Stellar.js: Échale un vistazo porque es la librería que utilizamos en el tutorial.

Scrollorama: Esta librería me parece genial, y un ejemplo de lo que puedes hacer con ella, lo encuentras en éste enlace.

Pasemos al código.

El código del tutorial es bastante sencillo, deduciendo que ya tienes la estructura de tu HTML, de la página a la que le aplicarás el efecto, vamos a enlazar un par de scripts, el primero es jQuery y el segundo Stellar.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src='https://raw.github.com/markdalgleish/stellar.js/master/jquery.stellar.js'></script>

 

Ahora que tenemos listas las librerías, queda ejecutar la función de stellar para que ejecute los efectos correspondientes:

<script>
$(function(){
$(window).stellar();
});
</script>

 

Una vez hecho esto, stellar tomará una serie de atributos para definir el movimiento de los elementos al hacer el scroll, estos atributos son atributos data de HTML5, los valores de estos atributos van desde el 0 que significa sin movimiento, hasta cualquier valor entero, donde el 1 significa moverse a velocidad normal, y el 2 moverse al doble de velocidad que el resto de la página. Los atributos son:

  • data-stellar-ratio: Que define el movimiento de un elemento
  • data-stellar-background-ratio: Que define el movimiento del fondo de un elemento.

Existen más atributos para modificar el comportamiento de la página, y puedes checarlos en la documentación del plugin.

Sin más, quiero dejarte con un enlace para el vídeo tutorial en mi canal sobre este post.

Como hacer una pagina web(si no sabes programar)

Naturalmente si quieres hacer una pagina web y no tienes idea de por donde empezar esto puede convertirse en un gran problema. 
Hay muchas formas de hacer una pagina web entre ellas están las siguientes:

1. (Forma dificil) Puedes hacer una pagina web con programación desde cero, utilizando html basicamente y añadiendo diferentes tecnologías como lo son css, javascript, asp, php, etc. Un sin fin de cosas para las cuales se necesita cierto nivel de conocimiento técnico o de algun lenguaje de programación en particular. Naturalmente se puede utilizar software para diseño web como dreamweaver, y aunque esto facilite mucho el trabajo, seria necesario aprender a usar el software y saber aunque sea las bases de html y en algunos casos lo que se le conoce como css(hojas de estilo), o bién entre mas funcionalidades le quieras dar a tu página web, mas tecnologías tendrías que conocer, así como php o javascript.

2. (Forma un poco costosa) Puedes mandarla a hacer, por ejemplo una empresa generalmente puede contratar a un diseñador web para que le haga una pagina web incluyendo aspectos como el diseño o el contenido de la misma, para lo cual no harías nada mas que supervisar el trabajo de otro.

3. (Mejor y no requiere programación) Utilizando software administrador de contenido. El software administrador de contenido es una solución muy eficiente para aquellos webmasters inexpertos que aun no tienen mucha experiencia con la programación web, de hecho es posible hacer una pagina web publicada en Internet sin experiencia de programación, únicamente utilizando este tipo de software. Probablemente ya conoces esta clase de software o has visto muchas paginas web que utilizan software de este tipo, algunos ejemplos podrían ser wordpress o joomla para los cuales simplemente escoges un tema para darle un diseño a tu página web y todo lo que tienes que hacer es escribir lo que llamamos el “contenido” de tu página web. No es necesario aprender lenguajes de programación web para utilizar este software, sin embargo si quieres personalizar mas libremente tus páginas, es preferible que aprendas como minimo html y css.

Finalmente les dejo mis recomendaciones para crear sus sitios web:

Si estas dispuesto a aprender a programar:

Si bien estas dispuesto a aprender a programar para hacer tu propia pagina web lo indispensable es aprender a usar antes que nada el HTML. HTML es la base de toda pagina web y sobre todo es facil de aprender en comparación a la mayoria de los lenguajes de programación, ademas de que es muy imporante, ya que utilizando lenguajes mas complejos como php, jsp, javascript, o asp, se puede manipular el html de una página web, y por tanto hacerla mas dinamica y añadirle un sin fin de funcionalidades. Posteriormente lo segundo que debes aprender es CSS, el cual sirve para dar un estilo o “diseño” a tu sitio web, y finalmente puedes aprender lenguajes como javascript y php para añadir otro tipo de funcionalidades a los sitios web. Si quieres aprender todos estos lenguajes, es recomendable visitar las w3schools, donde podras encontrar sin fin de tutoriales gratuitos que te ayudaran a aprender mas acerca de lenguajes de programación web.

Si no deseas aprender a lenguajes de programación web

No te preocupes, para hacer una pagina web sin saber programar, lo ideal es utilizar como ya lo fue comentado, software administrador de contenido, para paginas tipo “blogs” recomiendo altamente el wordpress, el cual es muy amigable y muy usado, si por otro lado quieres una página web de información que no este en formato de blog, puedes utilizar joomla, que también en un software muy conocido y facild e usar. Utilizando estas herramientas no tendrás necesidad de aprender a programar, sin embargo es altamente recomendable que aprendas aunque sea lo básico, ya que si tienes conocimiento básico de html y css tendrás mayor flexibilidad al momento de editar detalles de diseño de tus páginas web.

Esperamos que este articulo haya podido ayudarte, por favor deja tus comentarios.

{jcomments on}