Skip to content

Cómo hacer Diseño y Desarrollo Web en Linux?

Siempre tuve esa duda, de como hacer páginas web (o diré sistemas web) en GNU/Linux, ahora creo haber encontrado la respuesta… Resulta que cuando eres newbie y recien comienzas a pensar y crear cosas (ejm paginas en html) te es necesario usar esos softwares WySiWYG y lo único que hacen dichos programas es crear dependencia en ti, por que simplemente jamás tocas código y lo unico que haces es diseñar y mover bordes con el maus!

Bueno En GNU/Linux existen esos programas pero no de la magnitud como DreamWeaver que funciona en windows, algunos dirán “pero corre en wine” :D pero … es necesario?, esto es algo ético y moral, si usas GNU/Linux sea cual sea tu distribucion (menos esa cosa horrible y asquerosa llamada “ubuntu”, “shitbuntu”, “botundo”, “webuntu”) lo haces para librarte del software privativo, para aumentar la seguridad de tu PC y sobre todo para tener la capacidad de crecer y no limitarte con el boton inicio.

¿Cuál sería la solucion?

Dejemos a un lado el “diseño web” (cuyo significado varía en cada persona, hay quienes gustan de pelotitas saltando) y veamolos del lado de desarrollo web y software, si eres programador y te gusta crear software o generar “algoritmos mágicos” que escriban html a partir de  trozos de PHP, entonces ¿Necesitas programas WYSiWYG?, la respuesta es no, hace mucho que personalmente me independice del software WYSIWYG y ahora solo uso IDE’s como Aptana y Eclipse… el simple hecho es que ahora solo programo scripts y éstos mismos me generan la página web! claro que todo es bonito hasta el momento de maquetar donde SI o SI tienes que tener conocimientos de Hojas de Estilos

¿Cómo hacer “diseño web” usando GNU/Linux?

La alternativa al diseño web son las hojas de estilos y librerias jQuery, por que seamos sinceros a la gente le gusta ver sombritas, animaciones y cosas que se muevan en su pantalla, entonces como hariamos ello sino tenemos flash? la respuesta es con jQuery (javascript) y CSS, javascript maneja los eventos y CSS pone los colores, a continuación un problema y una solucion:

Tienes una página web pero no te gustan esos bordes cuadrados, te gustaria tener unos hermosos bordes redondeados y si es posible algo de sombra:

  1. Solucion a lo Windows (lo comun): agarras tu jotochop y haces bordes, dentro de tu html en el head y en style lo repites por todo el background de tu tabla (los diseñadores de windows usan tablas!! jaja), y luego creas 2 capas, una encima y otra debajo de ella y dibujas el borde que creaste con tu jotochp.
  2. Solucion con GNU/Linux y algo de cerebro: cargas librerias como jQuery.corner y jQuery, pones el contenido de tu web dentro de un DIV, y luego llamando a javascript generas los bordes, agarras tu hoja de estilo y le pones el color de necesitas

Veamos cual solución es la mejor, examinemos la solución “windows”:

  1. Es mas que seguro que nuestro diseñador windows ha usado Dreamweaver…
  2. AL crear tablas (la mayoria de diseñadores lo hce, claro me refiero a ellos que no tienen ni idea de los estándares) estas usando algo exclusivo para “tabular datos” para crear diseño, ESE ES EL ERROR
  3. Al repetir una imagen en todo el background pones mas pesado al navegador y peor aun, mas pesado si es una x386
  4. Al crear los bordes inferiores y superiores tmb consumes recursos y sobre todo la página web cargará lento (debido a las imgenes, que normalmente las guardan como PNG de 32 bits y q pesan mas de 50KB)

Examinemos la solución GNU/Linux sin wysiwyg

  1. Divides la estructura de la Web con DIVs, Correcto!
  2. Solo cargas poco más de 70KB de código 100% reutilizable (ajax, efectos, eventos, jsonp, etc)
  3. El navegador se encarga de generar los bordes, el consumo de recursos es menor

Software para Diseño y DESARROLLO web en GNU/Linux

  1. InkScape, para hacer tus logos, banners y demás cositas bonitas
  2. Eclipse PHP; para programar en PHP y generar código HTML, XML a partir de PHP
  3. Navegadores: Opera, Firefox, Konqueror, Chrome (webkit) y usarias tu wine para emular una creación blasfema llamada “internet explorer”
  4. Tu computadora con GNU/Linux que de por si no hace falta xampp por que tu misma PC la hace de servidor web :D
  5. NoIP o DynDNS para que tus visitantes accedan a TU PC

La tecla Windows en Linux, ¿Qué hacer?

Me pregunto si algún dia sacarán teclados con un pinwino en lugar de una ventanita!

Personalmente no le encuentro uso a esa tecla!

Solía pintarla de negro para simular un vacio, creo que ahora lo ideal será escribir “null” sobre esa tecla (asi pensaré que no existe) o quizá comentar la tecla con /**/ o //, pero creo que mejor será usar puntos y coma ;;;;; asi será “a mas bajo nivel”

:D

Particionamiento en GNU/Linux

Normalmente tenemos GNU/Linux pero raras veces nos ponemos a pensar un poquito para ver si realmente nuestra instalación esta en un correcto lugar (físico del disco duro) y si será realmente óptimo (para evitar pérdidas de datos en el futuro)… Digo esto por que muchas veces nosotros (los winuser que intentamos salir del lado oscuro de la fuerza).

¿Que es lo que sucede?

La mayoría de usuarios que vienen de windows y que cuentan con una agg instalacion de windows, suelen coger su Partition Magic o algun software de particionamiento y encoger su “unidad de” (o alguna particion cuyo nombre es una letra (solo a Bill Gates se le ocurre eso :) )) en 10 GB o más GB y siempre “al final del disco”. Sucede que si tienes un disco duro (si, de esos cuadraditos de 3.5” que en cuyo interior hay un plato de espejo que gira) las particiones “finales” tienen menor tasa de lectura/escritura, por lo cual tu Linux no correrá del todo bien y probablemente experimentes velocidades lentas (si mueves archivos grandes).

¿Cómo deberia ser el particionamiento?

Bueno comencemos paso a paso (por cierto, este artículo lo escribo con sueño y escuchando Don Giovanni de Mozart); veamos las siguientes líneas, cada número indica el número de particion (el particionamiento es de mi sistema, puede ser útil para darte una idea de como particionar pero no quiere decir que deberías particionar asi :D ):

Particiones Primarias:

  1. Una partición primaria /boot de 2GB (exagerando :) ) y en un formato NATIVO DEL KERNEL [ext2, ext3], nos servirá para albergar diferentes núcleos, si es que tenemos diferentes distribuciones instaladas (quizá somos adictos a probar las distribuciones), también podremos tener en dicha particion una copia de nuestro MBR con grub instalado (el cual se pierde en cada reinstalacion de hasefroch), asi nos evitariamos de hacer un grub-install y simplemente haríamos un CAT de nuestra copia del MBR en el MBR de nuestro hdd :D
  2. ¿Tenemos poca RAM? Si es asi, entonces como segunda particion primaria nuestra particion de intercambio swap-linux de 2GB como máximo;
    ¿Por qué swap como segunda particion primaria? Por que si! Resulta que las primeras particiones estan cerca al borde de los platos del disco duro, ello nos indica un alta tasa de escritura/lectura; si la ram no es nuestro problema (2GB, 4GB o más) entonces no nos haría falta swap;
    ¿Por que swap como máximo 2 GB?, aquí tenemos un artículo interesante sobre la cantidad de swap necesaria;
  3. Particion ROOT / donde almacenaremos nuestra instalación, personalmente recomiendo 15GB si necesitamos de una instalacion completa, incluso menos espacio si queremos distribuir las carpetas de nuestra instalación en otras particiones o discos duros!

Hasta aquí ya hemos llegado a tres particiones primarias permitidas por el MBR (48bytes en particiones), lo cual nos indica que solo nos queda 1 particion primaria (16 bytes), esta última particion primaria la usaremos para crear nuestra particion extendida (y asi podremos crear mas particiones dentro de ella).

Aquí podemos distribuir nuestro sistema, podremos particiones para /usr y /home u otras carpetas necesarias, yo veo por necesario crear /home, en caso de reinstalacion no perderíamos nuestros documentos; pero si deseas organizar mas tu instalación entonces sería una buena opción crear una particion /usr/ ya que ahí se copian los archivos usados por nuestros programas instalados!

  1. Particion extendida nro1: Aquí puedes crear una particion para testear otra distro o usar para algun fin, caso contrario podrías ignorar esta linea y seguir particionando;
  2. Particion extendida nro2: Partición /home; aquí almacenaremos los documentos de nuestros usuarios (nuestros documentos, si la computadora no es compartida), la capacidad depende de la cantidad de usuarios que tenemos, pero si vamos a utilizar carpetas compartidas (dentro del mismo disco duro) nos podríamos ahorrar espacio y usar enlaces simbólicos que apunten a esas “carpetas” con información compartida.
  3. Particion extendida nro3: Aquí personalmente tengo una “enorme particion” aprox de 200GB donde guardo mucha información (música, videos, películas y demás documentos), normalmente uso enlaces simbólicos en mi carpeta home apuntando a ciertas carpetas de ésta particion
  4. Particion extendida nro4: Buen lugar para tener una particion de intercambio con Windows

Ups! olvidé mencionar alguna particion para Hacefroch, resulta que no lo uso :D

Si usas Windows, un excelente lugar para su instalación sería el punto 3 entre las particiones primarias!

¿Por que no Windwos como primera particion primaria?
[ Para darle la contra a Microsoft, windows no será primero :D ] Pues Windows NO será el encargado de bootear el sistema, ello se lo dejamos a grub (¿aun usas lilo?), luego de la instalación de windows el MBR apuntará a la partición de Windows, pero luego de modificar el MBR (a nuestro gusto), pues éste (el MBR) apuntará a la primera particion primaria (en nuestro caso es /boot) entonces el asi tendremos un booteo mas ordenado, debido a que dentro de /boot/ tenemos el menú y los demas binarios necesarios para el arranque del sistema! :D si lo vemos desde un punto de vista física, produciremos menos viajes del cabezal de nuestro disco duro!

¿Tengo un SSD este particionamiento me es util?
Si tienes un SSD te envidio este (modelo de …) particionamiento no te será util, debido a que los SSD no tienen piezas móviles!

/media/tmp/Cosas
/media/tmp/datosWeb
/media/tmp/Descargas
/media/tmp/Documentos
/media/tmp/home.gerware
/media/tmp/Media
/media/tmp/Software
/media/tmp/Tesoritos
/media/tmp/tmp.files

Instalar Flash Player en Slackware

Hola! si sois adicto a ver videos en Youtube o a los Jueguitos Flash y tienes una nueva instalación de Slackware o alguna distribución “decente” (entiéndase como decente cualquier distribucion diferente a ubuntu); entonces, veamos la manera de echar andando Flash Player en nuestra nueva instalación. Como sabrán las últimas versiondes del paquete flashplayer de Adobe vienen sin el famoso e inutil instalador, por lo cual ahora se nos complica la hora de instalar (jajaja), asi que lo que haremos será copiar la libreria (el archivo cuya extesión es .so) en las carpetas de nuestros navegadores correspondientes (ya sea ópera, firefox o seamonkey)

Las rutas de las carpetas son las siguientes:

Firefox: /usr/lib/firefox/plugins; /usr/lib/firefox-3.5.2/plugins
SeaMonkey: /usr/lib/seamonkey/plugins/

Pero … ¿Qué copio? ¿Cómo lo copio? ¿Donde lo descargo?

  1. Primero nos dirigimos a la página de Flash Player y descargamos nuestro paquete .tar.gz
  2. Luego extraemos el archivo contenido en una carpeta (puede ser nuestro directorio home/usuario)
  3. Abrimos un terminal y tecleamos “su” para coger los permisos de administrador (sino no podríamos copiar en la carpeta /usr)
  4. luego escribimos el comando mágico:
    # cp home/mi_usuario/miarchivodeflash.so /usr/lib/firefox-3.5.2/plugins
  5. Y listo! ya tenemos instalado el flash, recuerden que la dirección de destino ‘/usr/lib/firefox-3.5.2/plugins’ puede ser cualquiera de las ya mencionadas rutas!

Para estar seguros que SI FUNCIONA, abrimos nuestro navegador y en la barra de direcciones tecleamos “about:plugins” en el cual se lista los plugins instalados :)

IMPORTANTE!

Luego de la instalación de FlashPlayer puede que al maximizar los videos (ya sean de youtube u otros) nuestro firefox quede congelado, la solución para este problema es deshabilitar la aceleración por hardware del mismo flash, hacemos clic derecho sobre la película/animación/imagen flash y le damos clic en propiedades/settings/configuración y posteriormente deshabilitamos la aceleracion por hardware.

If firefox crashes with flashplayer fullscreen, then uncheck the “enable hardware aceleration” option, in the menu settings.

De retorno al blog y con nuevo SO

Queridos (pocos) Lectores!

YO! Gerber estoy de vuelta y con más fuerza! luego de tener abandonado el blog por mucho tiempo (parte de noviembre, diciembre y enero). Y Ahora he regresado! (lleno de sorpresas); a continuación unas novedades sobre mi, mi blog, mi pc y lo que de ahora en adelante será!

  • Ignoranto.info será un blog personal pero orientado en casi todo su contenido a programación :)
  • Mis Servicios Web se mudan a un nuevo dominio (les daré la noticia en cuanto el otro dominio esté 100% implementado)
  • Ya no soy Windows User, he migrado al 80% mi sistema a GNU, soy usuario feliz de Slackware (el clásico) y Gentoo (para no-mortales)

Pronto migraré varios posts de éste blog hacia el nuevo blog, espero tener todo listo para antes de Marzo!

Gracias por los pocos comentarios y mensajes recibidos :D

Blog abandonado (por N motivos)

Se acerca el 2010 y desde noviembre del presente año (2009) no redacto artículo alguno, lamento informales que éste blog ha sido abandonado (pero nuevamente será reanimado).

Motivos de mi ausencia:

  • Aprendiendo estructuras de datos (arboles, listas enlazadas)
  • Aprendiendo cosas nuevas (N cosas)
  • Aprendiendo algo de electrónica (puertas lógicas y cosas más)

Novedades:

  • Éste blog será subdominio de un nuevo dominio
  • Ignoranto.info redireccionará a dicho subdominio
  • El nuevo dominio ofrecerá Servicios Web y Cosas más

Mis queridos lectores, les agradezco mucho pero este cambio será algo estupendirijilio ya que pondré cosas nuevas y no tendré limites en cuanto a contenidos ya que pienso hacer de éste blog una ensalada de conocimientos :)

El hombre mas inteligente del mundo

Conozcan al hombre mas inteligente del mundo!

Tomemos agua :D antes de actuar!

C Sharp Morse Code Console.Beep()

Hola! En este post explicaré como crear un pequeño programita en C# (c Sharp) para convertir un texto cualquiera  a código morse y también para “pitar” el beep del ordenador con dicho código!

Codigo Morse

Primero… ¿Qué es el codigo Morse?

El Codigo Morse son la representación de nuestro alfabeto en “puntos y rayas“, ello permite la trasmisión de mensaje a través de dispositivos capaces de emitir sonidos o imprimir puntos y rayas (como el telégrafo), si quieres una explicación mas profunda podemos recurrir a la wikipedia: Código Morse

¿Como funciona?

Lo que haremos con nuestro pequeño programa es reconocer cada caracter de una cadena de texto, luego enviaremos cada caracter a un método (funcion/procedimiento) y éste nos retornará su representación en código morse (nos retorna un string), la funcion recibe como parámetros una variable de tipo char (solo un caracter) y retorna un string (cadena de texto, en este caso una cadena de puntos y rayas)

static string morseCode(char txt)
{
 string morse = "" ;
 switch (txt)
 {
 case 'a': morse = "·-"; break;
 case 'b': morse = "-···"; break;
 case 'c': morse = "-·-·"; break;
 case 'd': morse = "-··"; break;
 case 'e': morse = "·"; break;
 case 'f': morse = "··-·"; break;
 case 'g': morse = "--·"; break;
 case 'h': morse = "····"; break;
 case 'i': morse = "··"; break;
 case 'j': morse = "·---"; break;
 case 'k': morse = "-·-"; break;
 case 'l': morse = "·-··"; break;
 case 'm': morse = "--"; break;
 case 'n': morse = "-·"; break;
 case 'ñ': morse = "--·--"; break;
 case 'o': morse = "---"; break;
 case 'p': morse = "·--·"; break;
 case 'q': morse = "--·-"; break;
 case 'r': morse = "·-·"; break;
 case 's': morse = "···"; break;
 case 't': morse = "-"; break;
 case 'u': morse = "··-"; break;
 case 'v': morse = "···-"; break;
 case 'w': morse = "·--"; break;
 case 'x': morse = "-··-"; break;
 case 'y': morse = "-·--"; break;
 case 'z': morse = "--··"; break;
 case ' ': morse = " "; break;
 case '0': morse = "-----"; break;
 case '1': morse = "·----"; break;
 case '2': morse = "··---"; break;
 case '3': morse = "···--"; break;
 case '4': morse = "····-"; break;
 case '5': morse = "·····"; break;
 case '6': morse = "-····"; break;
 case '7': morse = "--···"; break;
 case '8': morse = "---··"; break;
 case '9': morse = "----·"; break;
 case '.': morse = "·-·-·-"; break;
 case ',': morse = "--··--"; break;
 case '?': morse = "··--··"; break;
 case '\"': morse = "·-··-·"; break;
 default: morse = ""; break;
 }
 return morse;
}

Eso viene a ser practicamente todo, ahora solo nos queda pedir la cadena, extraer cada caracter y enviarlo a la función anterior:

Para leer una cadena ingresada por teclado usamos el método Console.ReadLine(); si queremos algo mas “bonito” entonces lo ideal sería solicitar la cadena de texto con un mensaje:

Console.Write(“Escriba aqui su texto a convertir : “);
string txt = Console.ReadLine();

Como nuestra funcion morseCode() solo trabaja con caracteres en minúscula, entonces necesitamos convertir a minúscula todos los caracteres de nuestra cadena, para ello usamos el método ToLower();

txt = txt.ToLower();

Ahora recorreremos nuestra cadena de texto con un bucle y extraeremos cada caracter, al mismo tiempo enviaremos el caracter extraido a nuestra funcion morseCode() e imprimiremos la respuesta de la función:

char tmp; int p;
for (p = 0; p < txt.Length; p++)
{
 tmp = char.Parse(txt.Substring(p, 1));
 Console.Write("{0} ", morseCode (tmp));
}

Creamos las variables TMP y P, haciendo uso del bucle FOR (para) recorremos toda la cadena mientras P sea menor que la longitud de la cadena (txt.Length), TMP tomará el valor de la cadena en la posicion P y convertimos la salida a tipo Char (char.Parse), luego imprimimos en pantalla la salida de morseCode(tmp)…

Ahora construiremos nuestra funcion para pitar el altavoz del sistema (beep)

Las normas del código Morse nos dice que…

  1. Un guión es igual a tres puntos
  2. El espacio entre las partes de la misma letra es igual a un punto
  3. El espacio entre dos letras es igual a tres puntos
  4. El espacio entre dos palabras es igual a siete puntos
static void beepMorseCode(string morse)
{
 int f = 600; //frecuencia en hz del pitido
 int dot = 50; //duracion del pitido PUNTO
 int x = 0;
 char t = ' ';
 while (x < morse.Length)
 {
  t = char.Parse(morse.Substring(x, 1));
  if (t == '·')
  {
   Console.Beep(f, dot); //tono punto
   Thread.Sleep(dot); //separacion entre partes de la letra
  }
  else if (t == '-')
  {
   Console.Beep(f, dot * 3); //tono raya 3 puntos
   Thread.Sleep(dot); //separacion entre partes
  }
  else
  {
   //genera una pausa de 6 puntos
   Thread.Sleep(dot * 6); //en total 7 contando las pausas anteriores
  }
  x++;
 }
 //pausa de 3 puntos, equivale a separacion de frase
 Thread.Sleep(dot * 2);
}

En nuestro método beepMorsCode recibimos una variable de tipo string, al comienzo declaramos la frecuencia de cada pitido y la duración del mismo, tambien declaramos la duración de cada silencio.
Iniciamos un bucle diciendo: “mientras X sea menor que la longitud de la variable MORSE”; iniciamos condiciones, si T (el char “actual”) es un PUNTO entonces pitamos F con duración L, si es RAYA pitamos F con el doble de L y si es un ESPACIO hacemos PAUSA (con Thread.Sleep();), incrementamos X;

Para usar la opción SLEEP debemos colocar “using System.Threading;” en las primeras lineas de nuestro codigo!

Ahora nuestro pequeño programa ya puede reproducir sonidos según el codigo morse, para llamar al método beepMorseCode() solo hace falta enviarle el string generado por morseCode(), nuestro método beepMorseCode se encargará de generar la secuencia de beeps y pausas adecuadas!

Eso es todo, aquí tienen el código fuente de: Console.Beep Morse Code listo para compilar y probar! :D