Cristalab

Qué significa backend y frontend en el diseño web
Tabla de rutas en Redes
Dibujar y animar un Rinnegan con CSS3
Efectos de sonido en FL Studio
Diseño web para iPhone
Transiciones de filtros en After Effects
Deformar bitmaps con el metodo drawTriangles de Actionscript 3
Un dia normal del foro
Clab News
El MundoReal(tm)
Oh nuestro webmaster!
Pantalla Azul OS X
Cambio de Look
Web 2.0
Vista a Internet Explorer 7
Stepmania
Windows Vista

Qué significa backend y frontend en el diseño web

Posted: 14 Jun 2012 04:15 AM PDT

Backend, frontend, diseño, UX, usabilidad, posicionamiento, estrategia, arquitectura y muchos otros terminos componen el diseño y desarrollo web moderno. Lejos está la época donde un "webmaster" hacía todo el trabajo.

Ahora es imposible crear un producto completo sin por lo menos un diseñador, un front y un back. A menos que seas un genio cuyos padres fueron asesinados, juraste venganza, estudiaste cinco años en un templo samurai de la W3C, destruiste el templo y volviste para cambiar el mundo. Con aplicaciones web.

Backend: Lado del servidor (PHP, Ruby on Rails, Django, Node.js, .NET)

Un programador tiende a ser backend. Es la labor de ingeniería que compone el acceso a bases de datos y generación de plantillas del lado del servidor. En backend se encargan de implementar cosas como MySQL, Postgres, SQL Server o MongoDB. Luego, un lenguaje como PHP o JSP, o frameworks como RoR, Django, Node.JS o .NET se conectan a la base de datos.

A través de estos lenguajes y frameworks se recibe, procesa y envía información al navegador del usuario. En código HTML (que crea el frontend) o enviando datos puros en XML, RSS o JSON, para ser procesados por Javascript.

En Facebook, por ejemplo, PHP manda la estructura básica del sitio web, pero son múltiples programas y servidores hechos en C++ o Erlang que procesan la información en tiempo real (como chat, comentarios, notificaciones) y las envían y reciben a través de Javascript en el navegador.

Frontend: Lado del cliente (HTML, CSS, HTML5, CSS3, Javascript, jQuery)

Los frontends tienden a ser programadores, pero hay diseñadores genios que también hacen frontend. Son los encargados de maquetar la estructura semántica del contenido (HTML), codificar el diseño en hojas de estilo (CSS) y agregar la interacción con el usuario (Javascript).

En la época actual los frontends tienen HTML5 y CSS3. Con HTML5, desde el frontend, es posible hacer geolocalización, dibujo vectorial, guardar datos en el disco del usuario, insertar audio y video, entre otras cosas.

Con CSS3, se pueden crear diseños altamente complejos sin la necesidad de imágenes cortadas, sólo usando código. Bordes redondeados, sombras, degradados, fondos múltiples, entre otros.

Por último, Javascript y sus frameworks añaden el componente de interactividad y conexión al servidor. Es posible comunicarse con el backend y la base de datos sin recargar la página usando AJAX o WebSockets, recibir esos datos y cambiar el diseño entero del sitio. jQuery hace todo esto fácil pero no es el único framework de Javascript

Diseño y usabilidad: Experiencia en la interacción del usuario

No todos los diseñadores web son frontends ni deben serlo. Ni todos los diseñadores son realmente buenos para web. Un diseñador web sabe de interfaces, entiende la interacción con el usuario. Imagina las animaciones, las transiciones, los cambios en la aplicación. Sabe donde usar una caja de texto, un botón, un radio button, un checkbox, un desplegable. Aunque no sepa programarlos y sólo los dibuje en Photoshop.

Pero además del diseñador hay personas dedicadas a entender el flujo de la interactividad. El camino que los usuarios toman y cómo simplificarla al máximo. Este tipo de personas son expertos en usabilidad y UX (User Experience).

Arquitectura de información y SEO: Estrategias de contenido, organización y estructura

Los sitios con menu: "Home Quienes Somos Productos Servicios Contactanos" se quedaron atrapados en el siglo XX por falta de un arquitecto de información.

La web no sólo son bases de datos, colores bonitos y muchos links. La web tiene información, interacción, contenido ofrecido por los sitios y contenido generado por los usuarios. ¿Cómo se organiza ese contenido? ¿Cómo es presentado? ¿Qué tan profunda es la organización de ese contenido? ¿Es mejor simple y directo? ¿Es mejor un arbol de navegación complejo? ¿O es mejor dejar que el buscador sea la interfaz?

Los arquitectos de información y la gente de SEO (Search Engine Optimization) se dedican a definir cómo se organiza todo el contenido, cómo se distribuye y sobre todo, como darle a los usuarios la oportunidad de descubrir lo nuevo y lo más relevante para ellos.

Director del proyecto: Cobra el cheque gordo

DEAL WITH IT

En proyectos aun más complejos, los roles aumentan. Hay personas de control de calidad, gente dedicada a las bases de datos. Otros sólo a servidores. Personas dedicadas al seguimiento financiero del proyecto. Vendedores. Ejecutivos de cuenta. Admins de la comunidad. Editores. Escritores.

Pero para la mayoría de proyectos, con este equipo tienes.

¿Falto alguien más?

Tabla de rutas en Redes

Posted: 14 Jun 2012 03:56 AM PDT

Antes de empezar con sistemas de enrutamiento dinámico de Redes más avanzados, como EIGRP y OSPF, es imprescindible aprender a reconocer los datos e información que se nos presenta en la tabla de rutas, para entender cómo selecciona el dispositivo finalmente los caminos que llevarán la información a su destino.

Realizaremos un repaso por los comandos implicados y los diferentes conjuntos de datos, en forma de direcciones de red que nos presentarán visualmente, ayudados por Packet Tracer.

Saludos.

Dibujar y animar un Rinnegan con CSS3

Posted: 14 Jun 2012 02:28 AM PDT

Hola a todos, para cerrar ésta serie de tutoriales "otakus" crearemos hoy un Rinnegan como les había comentado al final del último tutorial. Ahora bien, la imagen de lo que queremos lograr:

Les recuerdo que el código CSS de éste tutorial requiere del HTML/CSS del primer Sharingan, así como para hacerlo más breve se recomienda agregar prefixfree:

Código :

<!DOCTYPE html>  <html lang="es">     <head>        <meta charset="utf-8"/>        <title>Rinnegan CSS3</title>        <!-- Código principal del Sharingan -->        <link rel="stylesheet" type="text/css" media="all" href="sharingan.css"/>        <!-- Código del Rinnegan CSS3 -->        <link rel="stylesheet" type="text/css" media="all" href="rinne.css"/>        <script type="text/javascript" src="prefixfree.min.js"></script>                    <body>        <!--Borde negro exterior-->        <div id="sharingan">           <!--Iris -->            <ul>              <!--Pupila-->              <li>   </li>                <!-- Primer anillo -->              <li class="ring">   </li>                               <!--Segundo Anillo -->              <li class="aspa sup">&nbsp;<p>&nbsp;</p></li>              <!-- Tercer Anillo -->              <li class="aspa der">&nbsp;<p>&nbsp;</p></li>              <!--Este elemento se oculta con CSS-->              <li class="aspa izq">&nbsp;<p>&nbsp;</p></li>           </ul>        </div>         </body>  </html>

Continuamos con los estilos:

Código :

  /*---------------Rinnegan---------------*/    /*Gradiente lineal que recrea el tono de color del Rinnegan  */  ul,ul:hover {        background: linear-gradient(top, #8d7f9a 0%,#8f849c 14%,#90899e 29%,#9394a2 43%,#9499a4 57%,#969fa6 71%,#97a3a8 86%,#97a4a8 100%);  }    /*Cambiando el color de fondo de .aspa y .aspa p (puntas de las aspas) a   transparente,ésto al hacer :hover */  ul:hover .aspa, ul:hover .aspa p {     background-color:transparent;  }    /*Estilos para la pupila del Rinnegan */  ul li:first-child {      background: #000;      border: 1px solid #000;     top: 107px;     width: 11px;      height: 11px;      box-shadow: none;      transform: none;  }    /*Escalando la pupila(li:first-child) al hacer   ul:hover (la transición se añadió en la hoja de  estilos sharingan.css) */  ul:hover li:first-child {     transform:scale(1.7);  }    /*Borde de cada uno de los anillos*/  .ring,.sup,.der {     border: 5px solid #000;  }    /*Ahora se reposicionara y ajustara su anchura/altura,para darle forma a los 3 anillos   concéntricos que conforman al Rinnegan*/    /*Primer Anillo (mas cercano a la pupila)*/  .ring {     top: 65px;      left: 48.3px;      width: 59px;      height: 59px;      transform:none;  }    /*El aspa superior se convierte en el segundo  anillo*/  .sup {     top: -39px;      left: 14px;      width: 126px;      height: 126px;      border-radius: 68px 68px 68px 68px / 64px 64px 64px 64px;  }    /*El aspa derecha se convierte en el tercer  anillo*/  .der {     top: -205px;      left: -22px;      width: 196px;      height: 186px;      border-radius: 107px 107px 107px 107px;      transform: none;  }    /*Las 3 siguientes reglas CSS añaden una serie de  transiciones para recrear la dilatación de la pupila  del Rinnegan escalando sus anillos con transform:scale()*/  ul .sup,ul:hover .sup,ul .der,ul:hover .der {     transition:transform 1s cubic-bezier(0, 1, 1, 2);  }    ul:hover .sup {     transform:scale(1.3);  }    ul:hover .der {     transform:scale(1.1);  }    /*Ocultando el aspa izquierda ya que no es necesaria*/  .izq {     display: none;  }    /*Por si acaso,hay inhabilitar las animaciones  del primer sharingan*/  ul:hover .sup,ul:hover .der,ul:hover .izq {     animation:none;  }

Como les había mencionado, con algunas modificaciones al código del primer tutorial tenemos un Rinnegan que fue testeado en Chrome, Firefox y Opera, se puede acceder a un ejemplo en vivo desde aquí.

Bueno, espero que les hayan gustado mis tutoriales, pueden hacer fork desde mi repositorio en github, así como cualquier sugerencia, consejo o crítica será bien recibida.

P.S: Lean y vean mucho Manga/Anime, algunos tienen más trama que muchas telenovelas latinoamericanas

Efectos de sonido en FL Studio

Posted: 09 Aug 2009 05:00 PM PDT

Hay muchos tipos de efectos de sonido en FL Studio (antiguo Fruity Loops). En este tutorial veremos los efectos de audio Delay, Reeverb, Flanger, Phaser, Chorus, Compressor, Clipper, Fast Distortion y Vocoder.

Diseño web para iPhone

Posted: 28 Jul 2009 05:00 PM PDT

El diseño web en iPhone requiere conocimientos de HTML 5, CSS y Javascript especial para usar todo el poder de Safari Mobile. En este tutorial hablamos de cómo crear sitios web optimizados para iPhone y navegadores Webkit como Android.

Transiciones de filtros en After Effects

Posted: 28 Jul 2009 05:00 PM PDT

Aprenderemos a usar transiciones de filtros en Adobe After Effects sobre animaciones complejas, composiciones anidadas y edición gráfica de las animaciones creadas.

Deformar bitmaps con el metodo drawTriangles de Actionscript 3

Posted: 07 Feb 2009 04:00 PM PST

El método drawTriangles() de Actionscript 3 es útil al crear figuras tridimensionales a partir de triángulos, para modificar la apariencia de un bitmap y en el mas sencillo de los casos dibujar una figura vectorizada. Lo que puede llevar a su uso incluso en el desarrollo de motores 3D vectoriales en Flash.

Un dia normal del foro

Posted: 19 Nov 2007 04:00 PM PST

"Hordie", esa bella combinación de usuarios nuevos que llega en estampida en las vacaciones, vuelve al hogar, los foros de Clab.

Clab News

Posted: 30 Jul 2006 05:00 PM PDT

De la mano de blackdragon (Idea original) y la100rra (Arte) llega a ustedes la tercera edición (Y primera en el comic) del periódico Clab News.

El MundoReal(tm)

Posted: 15 Apr 2006 05:00 PM PDT

Nuestro personajillos se preguntan que hay más allá de la tira.

Oh nuestro webmaster!

Posted: 13 Apr 2006 05:00 PM PDT

Nos prohibieron publicar este comic. Era lo mejor. Nos dijeron "Hagan algo impactante". Pero algo terriblemente malo paso. Ahora, una orden judicial nos obliga a mostrarlo. Contra nuestra voluntad.

Pantalla Azul OS X

Posted: 10 Apr 2006 05:00 PM PDT

Desde que el pantallazo azul se hizo famoso, ha estado presente en nuestras vidas, ahora Apple no quiere quedarse atras.

Cambio de Look

Posted: 04 Apr 2006 05:00 PM PDT

El cambio de look del blog (theNinjaBunny.blog), basado en el comic, debía de tener repercusiones...

Web 2.0

Posted: 29 Mar 2006 04:00 PM PST

A algunos no les llega a cuadrar el concepto 2.0

Vista a Internet Explorer 7

Posted: 20 Mar 2006 04:00 PM PST

Un breve paso, de la mano de nuestro amigo IE, por las nuevas cosas de su versión 7. Quizas...