Rockstar Guitarrista Frontend: La historia de un músico emprendedor
Esta es la historia de Andrés Ospina, el guitarrista que empezó personalizando los perfiles de sus amigos en Hi5 y que, después de tomar el curso de Frontend en Mejorando.la, decidió empezar a diseñar una landing page para promocionar su emprendimiento, Clasesdeguitarra.co.
Andrés estudió música durante varios años en una reconocida academia de Bogotá, en donde empezó a colaborar con sus conocidos de bandas musicales para ayudarles a dar identidad a sus perfiles sociales en hi5, que por aquel entonces y en lo sucesivo, se popularizó como un sitio para promocionar artistas emergentes.
Por esa misma época quiso, en compañía de algunos amigos, crear y promocionar un evento musical bianual, del mismo corte del popular Festival Iberoamericano de Bogotá.
Entonces empezó con la elaboración de un plan de negocios, la búsqueda de capital y la "ejecución" de todos los grandes desafíos del mainstream del emprendimiento en América Latina, pero al cabo de dos años de trabajo concluyó que Necesitábamos mucha plata, no sabíamos vender patrocinios e hicimos todas las estupideces posibles en ese camino.
Una historia que parece repetirse en muchos emprendimientos que se dedican a estructurar ambiciosos planes de negocio, para convencer a posibles inversionistas y que a la postre inmovilizan a la gente, haciéndoles creer que empezar una empresa es un asunto súper complejo.
La epifanía de la propiedad clear
Lo que parecía hasta ahora una historia dolorosa se transformó en una historia aparentemente esperanzadora.
Un día cualquiera, hace unos tres años, Andrés se encontró con el programa de Christian y Freddy, Mejorando.la Web, y se interesó por las temáticas de trabajo web que desarrollaban, muy enfocadas a lo práctico, entonces se inscribió a un curso presencial de Frontend, dictado por Freddy Vega y Joan Piedra:
Andrés :
De músico a creador de landing pages
Con los conocimientos que adquirió en el curso decidió hacer una nueva versión de su sitio, y después de asistir a la Miniconferencia de UX de Mejorando.la descubrió la herramienta Sketch por recomendación de uno de los profesores, entonces compró la licencia y en tres días hizo la primera versión de Clasesdeguitarra.com.
Primera versión del landing.
¿Lecciones online de guitarra?
El sitio por ahora te ayuda a buscar un profesor de guitarra que te dé lecciones personalizadas, enfocadas a lo que te gustaría aprender y no tener que esperar, como en una academia, a que pasen muchas lecciones antes de que puedas empezar a interpretar lo que te gusta. La idea es que vayas aprendiendo con lo que te gusta y no con lo que te toca.
A futuro pretenden ofrecer lecciones personalizadas online a nichos cada vez más específicos, a través de un formato "hangout" que conecte a unos pocos interesados en desarrollar un aspecto técnico muy puntual, aunque es necesario aceptar algunas limitaciones, como por ejemplo lecciones para aprender a afinar una guitarra, que siempre requerirán de la presencialidad.
Al preguntarle a Andrés si cree que esta clase de aprendizaje reemplazará a futuro a la educación tradicional respondió Sí, siento que hay cosas de la academia que no voy a usar nunca, que son simplemente requisitos y que es necesario empezar por lo que a uno le gusta".
La autora de este post no está tan convencida de este planteamiento, pero sin duda sitios como Clasesdeguitarra.co son una buena muestra de que a hacer se aprende haciendo, que hay que tomar riesgos y aprovechar todas las herramientas que nos ofrece Internet para ser gestores de nuestras ideas, sin tener que esperar una eternidad o la aparición de un inversionista con rolex de plástico que nos las financie.
No importa lo que hagas, hoy todo pasa por la Web
Este proceso que ha seguido Andrés es una buena muestra de que cada vez más los profesionales de todas las áreas están llamados a desarrollar habilidades para el trabajo en la Web, que aprender código, técnicas de mercadeo, conceptos de experiencia de usuario, entre otros, son asuntos que hoy en día todos deberían saber y que se consideran hoy en día como áreas en las que es imperativoalfabetizarse. Prueba de ello es este músico que con algunos cursos online ha logrado echar adelante su idea de negocio.
via Cristalab http://ift.tt/1meZT1s
Ataques hacker modernos a los que toda web está expuesta
En la actualidad la mayoría de la información se mueve en internet, esto ha hecho posible el avance y crecimiento de las empresas, pero entre más atractiva sea la empresa (negocio) más vulnerable es ésta de ser atacada, porque así como hemos avanzado hacia grandes cambios, la gente maliciosa también lo ha hecho, y estos siempre están en busca de errores que explotar para penetrar los sistemas y robar información. Ya todos conocemos los peligros que podemos atravesar con el agujero de seguridad Heartbleed por ejemplo.
Las intrusiones a los sistemas son cualquier tipo de penetración no autorizada. Por más inofensiva que sea, si no se tiene autorización, se está penetrando el sistema. Estas intrusiones pueden ser pasivas o activas, dependiendo de la intención del atacante. Estos ataques son más comunes de lo que se piensa, y así no tengas una súper organización estás propenso a ser atacado; empezando por el spam que se recibe a diario en las cuentas de correo, aunque ya son muy inofensivos y la mayoría de los usuarios no caen en este tipo de correos esto es un ataque masivo y diario a usuarios reales, así que aunque no seas el dueño de una organización no estas exento a ser atacado por los cyber-ninjas.
Cyber-ninjas versus hackers
Estos cyber-ninjas son también llamados hackers esto es equivocado; los hackers son quienes contribuyen y hacen que la red funcione, estos son gurús en temas informáticos y sus aportes contribuyen al diseño, desarrollo, y aplicación de sistemas operativos, creación de antivirus y pruebas de fallas de seguridad; a los hackers les debemos agradecer por los avances de los sistemas operativos y por protegernos de los verdaderos cyber-ninjas.
Crackers, los delincuentes del ciberespacio
El término correcto con el que debemos referirnos a los delincuentes del ciberespacio es crackers; estos suelen ser expertos en programación de software y sistemas operativos, que con el tiempo aprenden a determinar la progresión de las debilidades de un sistema operativo, para así encontrar puertas traseras por donde penetrar en el sistema.
Estos delincuentes se dedican a robar datos, contraseñas y accesos que les permitan irrumpir en los sistemas. Muchos de estos crackers roban datos con el fin de conseguir dinero (por esta razón los sitios de e-comerce son los sitios más atacados), aunque en algunos casos lo hacen por venganza (como los ex empleados de empresas) y otras veces lo hacen con fines políticos.
Los crackers están armados con infinidad de herramientas que les ayudan a penetrar los sistemas, y no solo eso, tienen el apoyo de comunidades enteras de crackers donde se comparten datos y bugs de sistemas operativos, así se distribuyen la información entre todos, haciendo estos ataques más constantes. Entre las herramientas más utilizadas se encuentran:
- Wireless Sniffers: son rastreadores de las redes inalámbricas, por medio de los cuales pueden desviar la información que está siento transmitida en las señales.
- Packet Sniffers: Les permiten reconocer los tipos de paquetes que viajan dentro de la red, y capturar los que necesitan.
- Port Scanners: Esta herramienta es muy común y su principal utilidad es buscar puertas abiertas o sin ninguna clase de seguridad para atacar los sistemas.
- Password Crackers: Son algoritmos de fuerza bruta que atacan cualquier tipo de encriptación para descubrir contraseñas de acceso.
Todas estas herramientas son de muy fácil acceso, el truco está en saber utilizarlas para no dejar rastros del delito y si es posible que no se enteren de su presencia en la red; es por esto que se debe estar muy pendiente de síntomas de un ataque por más pequeños que parezcan, como cuando se detectan muchos intentos fallidos de acceso. Un usuario común se puede equivocar como mucho unas tres veces en introducir la contraseña, más de eso se debe sospechar de un ataque de fuerza bruta al acceso del sistema; también el que muchos paquetes estén dañados no es común en la red y no se deben dejar pasar; hasta comportamientos inesperados del sistema como reinicios, cambios de horas en el sistema, etc. Todo esto se debe investigar, ya que es mejor prevenir cualquier ataque inesperado.
Cómo prevenir ataques en el sistema
Para evitar estas intrusiones en el sistema se debe estar en constante revisión, ya que cada vez que reparas un fallo los crackers intentan abrir dos más para penetrar.
Para evitar esto se debe educar al recurso humano y administrar adecuadamente el físico, empezando por:
- Implantar políticas de seguridad en los accesos al sistema y lo que se hace en ellos.
- Test de riesgos, es decir atacarse a sí mismos para descubrir vulnerabilidades,
- Hacer auditorias de la información y el comportamiento del sistema y sus usuarios,
- Tener actualizado el plan de recuperación para después de cualquier ataque.
Control, control, y más control
La educación de los usuarios es la tarea más importante, ya que la ignorancia de muchos usuarios es el principal bug de entrada a la organización; por eso se hace primordial el control de accesos, verificar quiénes son y qué tipo de autorización tienen. Esto implica clasificar la información que cada tipo de usuario va a conocer, verificar qué es lo que hacen los usuarios cuando están dentro del sistema y cuál es su medio para conectarse.
Prevenir penetraciones a los sistemas no es una tarea fácil, ya que todos los días los cyber-ninjas encuentran una nueva forma de atacar los sistemas; así que se debe ser ágil para reconocer los avances de la tecnología y estar informado de las vulnerabilidades que traen consigo, y así estar preparados para evitar cualquier ataque que se pueda presentar en el futuro, así ahora todo esté funcionando bien.
via Cristalab http://ift.tt/1o4rRK3
Sigue el F8 desde Maestros del Web
Puedes seguir la conferencia para desarrolladores de Facebook, el popular F8, desde el sitio oficial del evento. ¿Qué nuevas sopresas presentará Mark Zuckerberg, ahora propietario de WhatsApp, el servicio de IM más popular del mundo? Este es sin duda el evento tecnológico del día. Desde nuestro sitio estaremos informando y comentando los sucesos más importantes de esta esperada conferencia.Te invitamos a seguirnos desde las cuentas @maestros, @cristalab y @mejorandola para tener la mejor información de tecnología.
Aleyda Rodriguez para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo
Síguenos en: @maestros |
Fan page
The post Sigue el F8 desde Maestros del Web appeared first on Maestros del Web.
via Maestros del Web http://ift.tt/PRhhtT
De músico a creador de landing pages
Esta es la historia de Andrés Ospina, el guitarrista que empezó personalizando los perfiles de sus amigos en Hi5 y que, después de tomar el curso de Frontend en Mejorando.la, decidió empezar a diseñar una landing page para promocionar su emprendimiento, Clasesdeguitarra.co.
Andrés estudió música durante varios años en una reconocida academia de Bogotá, en donde empezó a colaborar con sus conocidos de bandas musicales para ayudarles a dar identidad a sus perfiles sociales en hi5, que por aquel entonces y en lo sucesivo, se popularizó como un sitio para promocionar artistas emergentes.
Por esa misma época quiso, en compañía de algunos amigos, crear y promocionar un evento musical bianual, del mismo corte del popular Festival Iberoamericano de Bogotá.
Entonces empezó con la elaboración de un plan de negocios, la búsqueda de capital y la "ejecución" de todos los grandes desafíos del mainstream del emprendimiento en América Latina, pero al cabo de dos años de trabajo concluyó que Necesitábamos mucha plata, no sabíamos vender patrocinios e hicimos todas las estupideces posibles en ese camino.
Una historia que parece repetirse en muchos emprendimientos que se dedican a estructurar ambiciosos planes de negocio, para convencer a posibles inversionistas y que a la postre inmovilizan a la gente, haciéndoles creer que empezar una empresa es un asunto súper complejo.
La epifanía de la propiedad clear
Lo que parecía hasta ahora una historia dolorosa se transformó en una historia aparentemente esperanzadora.
Un día cualquiera, hace unos tres años, Andrés se encontró con el programa de Christian y Freddy, Mejorando.la Web, y se interesó por las temáticas de trabajo web que desarrollaban, muy enfocadas a lo práctico, entonces se inscribió a un curso presencial de Frontend, dictado por Freddy Vega y Joan Piedra:
Andrés :
De músico a creador de landing pages
Con los conocimientos que adquirió en el curso decidió hacer una nueva versión de su sitio, y después de asistir a la Miniconferencia de UX de Mejorando.la descubrió la herramienta Sketch por recomendación de uno de los profesores, entonces compró la licencia y en tres días hizo la primera versión de Clasesdeguitarra.com.
Primera versión del landing.
¿Lecciones online de guitarra?
El sitio por ahora te ayuda a buscar un profesor de guitarra que te dé lecciones personalizadas, enfocadas a lo que te gustaría aprender y no tener que esperar, como en una academia, a que pasen muchas lecciones antes de que puedas empezar a interpretar lo que te gusta. La idea es que vayas aprendiendo con lo que te gusta y no con lo que te toca.
A futuro pretenden ofrecer lecciones personalizadas online a nichos cada vez más específicos, a través de un formato "hangout" que conecte a unos pocos interesados en desarrollar un aspecto técnico muy puntual, aunque es necesario aceptar algunas limitaciones, como por ejemplo lecciones para aprender a afinar una guitarra, que siempre requerirán de la presencialidad.
Al preguntarle a Andrés si cree que esta clase de aprendizaje reemplazará a futuro a la educación tradicional respondió Sí, siento que hay cosas de la academia que no voy a usar nunca, que son simplemente requisitos y que es necesario empezar por lo que a uno le gusta".
La autora de este post no está tan convencida de este planteamiento, pero sin duda sitios como Clasesdeguitarra.co son una buena muestra de que a hacer se aprende haciendo, que hay que tomar riesgos y aprovechar todas las herramientas que nos ofrece Internet para ser gestores de nuestras ideas, sin tener que esperar una eternidad o la aparición de un inversionista con rolex de plástico que nos las financie.
No importa lo que hagas, hoy todo pasa por la Web
Este proceso que ha seguido Andrés es una buena muestra de que cada vez más los profesionales de todas las áreas están llamados a desarrollar habilidades para el trabajo en la Web, que aprender código, técnicas de mercadeo, conceptos de experiencia de usuario, entre otros, son asuntos que hoy en día todos deberían saber y que se consideran hoy en día como áreas en las que es imperativoalfabetizarse. Prueba de ello es este músico que con algunos cursos online ha logrado echar adelante su idea de negocio.
via Cristalab http://ift.tt/1rFQf53
Cómo exponer correctamente tus fotos
Cuando queremos tomar correctamente una fotografía las condiciones varían enormemente. Gente en movimiento, retratos durante la tarde y la mañana (hora azul) o más difícil aún, retratos durante la noche, quizás quieras tomar una foto de paisaje o tomar las fotos de ese partido con tus amigos.
Son tan distintas las condiciones de luz que realmente no existe una fórmula mágica para que la foto salga como tu quieres, es por eso que te recomiendo poner en manual tu cámara y leer este tutorial el cual está pensado para cámaras con funciones manuales ya sean DSLR o Mirrorless.
¿Qué es la velocidad de obturación?
Es el tiempo en el cual el sensor (antiguamente la película) está expuesto a la luz, a esto lo llamamos velocidad de obturación y varía dependiendo de tu máquina fotográfica, pudiendo ir desde tan lenta como 30 segundos (a lo cual llamamos larga exposición) a tan rápida como 1/8000 milésimas de segundo.
¿Qué efectos prácticos se pueden lograr con esto?
Mientras menor sea la velocidad la escena saldrá más iluminada, pero los objetos que estén en movimiento saldrán movidos o difuminados, osea si quieres fotografiar deportes o niños corriendo necesitas aumentar bastante la velocidad, lo cual bajará la luminosidad.
[nota:71a736a27f]Si vas a usar velocidades abajo de 1/30 procura darle la mayor estabilidad posible a tu cámara para evitar que la foto te salga movida[/nota:71a736a27f]
[nota:71a736a27f]Cuando usas velocidades altas, los objetos se congelan en la fotografía, lo contrario cuando usas velocidades bajas los objetos en movimiento tienden a disiparse.[/nota:71a736a27f]
Profundidad de campo y apertura del diafragma
El lente también posee una cortina, la cual solo se gradúa para dejar entrar más o menos luz al sensor, a esto le llamamos número F. Los números más frecuentes son: f/1.8, f/2, f/2.8, f/4, f/5.6, f/8, f/11, f/16, f/22, f/32.
Desde y con aperturas superiores a f2.8 se considera que tu lente es un objetivo luminoso.
Mientras mayor es la apertura, el Número F es más bajo, esto quiere decir que entrará más luz al sensor y a la vez disminuye la profundidad de campo y con esto la distancia focal, que es el espacio en el cual tu objetivo aparecerá nítido (enfocado).
Otro factor que achica la profundidad del campo es la longitud del lente, mientras más largo sea el lente menor será la profundidad de campo, lo cual ayuda bastante a destacar tu objetivo sobre todo en casos de retratos.
Estas imágenes están sin retoque y tomadas en distintas velocidades de obturación y aperturas de diafragma, siempre manteniendo el exposímetro en 0.
Cuidado con cerrar exageradamente el diafragma (dependiendo del lente generalmente arriba de f11) porque se producen aberraciones que quizás las explique en otro tutorial.
Qué es la Sensibilidad ISO
El número ISO se refiere a la sensibilidad del sensor frente a la luz, mientras más sensible sea más luz podrá percibir, por tanto podrás tomar tu foto con menos luz ¡GENIAL! ¿cierto? pero…mientras mayor sea la sensibilidad también aparecerá un notorio ruido en tu imagen.
[nota:71a736a27f]La cantidad de ruido por ISO depende de lo que soporte tu cámara, algunas cámaras con 1600 de ISO hacen el mismo ruido que con esta a 24500.[/nota:71a736a27f]
Ejemplos prácticos de fotografías
Ahora que quieras tomar una foto toma todo esto en consideración: si hay movimiento ¿quieres que este salga desenfocado? en caso de haber poca luz, ¿qué prefieres, ruido, poca profundidad de campo o movimiento?
Muchas veces estos elementos que pueden dañar tu foto en realidad pueden ser usados de manera creativa para realzarla y hacer la foto más interesante.
En retratos es muy usado el usar poca profundidad de campo, para realzar nuestros sujetos, esta foto es mía y de mi esposa y fue parte de un trabajo, se podrán dar cuenta que la pareja retratada destaca absolutamente a pesar de que hay bastante gente detrás de ellos, recuerden la poca profundidad de campo se puede conseguir con un lente largo o un lente luminoso, esta la tomamos con un Tamron 17-50mm de f2.8.
Para ver más ejemplos puedes visitar mi página profesional en Facebook o mi galería en Flickr.
via Cristalab http://ift.tt/1lpHCeR
POO: Inyección de dependencias en Laravel (IV)
Esta es la cuarta parte de la mini serie de inyección de dependencias en Laravel, lee la primera, la segunda y la tercera antes de continuar.
[nota:2b65205bb2]Necesitas conocimientos básicos de Laravel y POO para hacer este tutorial.[/nota:2b65205bb2]
Vimos en capítulos anteriores que la inyección de dependencias, pese a su nombre complicado, es realmente un concepto simple que permite escribir objetos desacoplados, es decir, que no sean dependientes uno del otro.
La inyección de dependencias nos permite diseñar ORMs que en vez de estar atado a un solo motor de DB, reciban como parámetro clases MySQL o Postgresql o incluso de MongoDB que funcionen siempre que cumplan con una interfaz.
El contenedor de inyección de dependencias es como una máquina ensambladora que conecta una parte con otra y hace que todo el sistema funcione.
También vimos que manipular las dependencias de nuestro sistema puede ser difícil, por eso el contenedor de Laravel es inteligente, y aún así sigue siendo simple! Para demostrarlo les creé un demo.
Bien ahora dejémonos de demos y vamos a usar el contenedor real de Laravel!
Para enseñarles cómo usar la inyección de dependencias en Laravel necesito 3 pasos:
Primero crearemos una clase de ejemplo y luego la integraremos con el contenedor de Laravel.
Paso 1: Clase Alert de ejemplo
Yo creé para uds. una mini versión de mi clase Alert que es un helper para enviar mensajes del controlador a las vistas, en mi caso uso los estilos de Bootstrap pero es adaptable.
Código :
<?php namespace Components;
use Illuminate\Session\Store as Session;
use Illuminate\View\Environment as View;
class Alert {
const SESSION_NAME = 'AlertMessages';
public function __construct(Session $session, View $view)
{
$this->session = $session;
$this->view = $view;
}
public function message($message, $type)
{
$messages = $this->session->get(static::SESSION_NAME, array());
$messages[] = compact('message', 'type');
$this->session->flash(static::SESSION_NAME, $messages);
}
public function render($template = 'alert')
{
$messages = $this->session->get(static::SESSION_NAME, null);
if ($messages != null)
{
$this->session->flash(static::SESSION_NAME, null);
return $this->view->make($template)->with('messages', $messages);
}
return "";
}
}
Esta clase tiene dos métodos: message graba mensajes y render los muestra.
La clase usa la Sesión de Laravel para guardar mensajes entre una petición y otra y la clase de Vista para los templates.
Para usarla:
1. Dentro de app creen las carpetas y el archivo: app/library/Components/Alert.php allí copien y peguen el código de arriba.
2. Abran composer.json y en autoload -> classmap agreguen "app/library/Components" ejemplo:
Código :
"autoload": {
"classmap": [
...
"app/library/Components"
3. Ejecuten en la consola php artisan dump-autoload.
4. En la carpeta app/views creen un archivo llamado alert.blade.php y copien lo siguiente:
app/views/alert.blade.php
Código :
@foreach ($messages as $msg)
<div class="alert alert-block alert-{{ $msg['type'] }} fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<p><strong>{{ $msg['message'] }}</strong></p>
</div>
@endforeach
Esta es la plantilla que usará la clase Alert por defecto.
Veamos un ejemplo de cómo usarla, en un método cualquiera de un controlador agreguen esto:
Código :
$alert = new Components\Alert(App::make('session.store'), App::make('view'));
$alert->message('Laravel es genial', 'info');
Asignen la variable $alert a la vista:
Código :
return View::make('admin/users/list')->with('alert', $alert);
Y en cualquier Vista simplemente:
Código :
{{ $alert->render() }}
Si usan una plantilla que implemente Bootstrap verán un bonito mensaje en azul que dirá Laravel es genial.
Con esto terminamos el paso 1.
Paso 2: Usar el contenedor de inyección de dependencias de Laravel
El código anterior se enfrenta al menos a dos inconvenientes.
1. Usarlo es complicado, es decir instanciar la clase, es demasiado código y difícil de recordar:
Código :
$alert = new Components\Alert(App::make('session.store'), App::make('view'));
De hecho podría ser peor, pero yo tomé un atajo y usé el contenedor de Laravel (alias App) para traerme la clase de session y la clase de view:
Código :
App::make('session.store')
De lo contrario haría falta instanciar esas clases y cada una de sus dependencias, lo cual podría volverse fácilmente unas 10 líneas de código.
2. La clase y variable $alert debe pasarse siempre a la vista, de lo contrario obtendremos un error de que la variable no está definida.
Con el contenedor de Laravel podemos resolver ambos problemas muy fácilmente:
Usando los ServiceProviders
Laravel le llama Service Providers a las clases que almacenan la configuración de la inyección de dependencias, son como los ensambladores de la aplicación.
1. Creen un archivo nuevo en app/library/Components/AlertProvider.php y peguen este código:
Código :
<?php namespace Components;
use Illuminate\Support\ServiceProvider;
use Illuminate\Foundation\AliasLoader;
class AlertProvider extends ServiceProvider {
public function register()
{
$this->registerAlert();
}
public function registerAlert()
{
$this->app->bind('alert', function($app)
{
return new Alert($app['session.store'], $app['view']);
});
}
}
2. Ejecuten nuevamente php artisan dump-autoload.
3. Vamos a decirle a Laravel que queremos incluir este ServiceProvider en nuestra App, vamos a app/config/app.php y en el array providers agregaremos ‘Components\AlertProvider’ a la lista:
Código :
'providers' => array( ... 'Components\AlertProvider' ),
4. ¡Ya podemos instanciar nuestra clase Alert con el contenedor de dependencias! Es decir:
Código :
$alert = App::make('alert');
$alert->message('Laravel es genial', 'info');
Paso 3: Uso de los Facades en Laravel
Aún App::make(alert) se ve algo extraño, no? A pesar de que es más limpio, no sería mejor tener algo como Route::get ? De hecho Route::get es lo que Taylor Otwell llamó facades.
Creemos el nuestro:
1. Creen el archivo app/library/Components/AlertFacade.php
Y coloquen lo siguiente:
Código :
<?php namespace Components;
use Illuminate\Support\Facades\Facade;
class AlertFacade extends Facade {
/**
* Get the registered name of the component.
*
* @return string
*/
protected static function getFacadeAccessor() { return 'alert'; }
}
2. Luego regresemos a nuestro ServiceProvider y vamos a crear un Alias para el Facade:
Código :
<?php namespace Components;
use Illuminate\Support\ServiceProvider;
use Illuminate\Foundation\AliasLoader;
class AlertProvider extends ServiceProvider {
public function register()
{
$this->registerAlert();
$this->setAliases();
}
public function registerAlert()
{
$this->app->bind('alert', function($app)
{
return new Alert($app['session.store'], $app['view']);
});
}
public function setAliases()
{
$this->app->booting(function ()
{
$loader = AliasLoader::getInstance();
// Facades
$loader->alias('Alert', 'Components\AlertFacade');
});
}
}
3. No olviden ejecutar el dump-autoload.
Una vez hecho estos tres pasos en nuestro controlador ya podemos usar el Alert así:
Código :
Alert::message('Laravel es genial', 'info');
Noten que NO estamos instanciando la clase, por lo tanto tampoco necesitamos la variable $alert, en la vista queda así:
Código :
{{ Alert::render() }}
Más limpio y bonito imposible.
Sin embargo noten que tampoco estamos haciendo uso de clases estáticas, lo cual es una mala práctica casi siempre, lo que ocurre es que el Facade se encarga de interactuar con el contenedor de inyección de dependencias de Laravel que a su vez instancia y almacena la clase por nosotros.
Es decir, cada vez que haz hecho Route::get o View::make en realidad estabas trabajando con inyección de dependencias sin darte cuenta!.
Les recomiendo seguir la documentación de Laravel IoC Container y Facades para aprender más de estos geniales conceptos.
Con esto concluyo la mini serie de inyección de dependecias, espero que les haya gustado.
Sígueme en Twitter y aprende más sobre programación
via Cristalab http://ift.tt/S22Ipv
Filtros en Google Analytics
Los filtros en Google Analytics son una herramienta de doble filo, así como te pueden ayudar también pueden dañar todos tus reportes. En este caso, los filtros se configuran a nivel de la vista y lo más importante a tener en cuenta, es que Analytics cuando pasa la información que se reportó por un filtro, elimina todo el resto de datos que no coincidan, es decir, si filtramos la dirección IP de tu oficina, Analytics ignorará todos los datos que vengan de esa IP, y luego cuando elimines el filtro no podremos recuperar los datos que ya había ignorado.
Buenas prácticas en Google Analytics
Desde Google nos recomiendan manejar diferentes vistas para proteger nuestros reportes, pues lo más importante de nuestro negocio es la información.
Para esto vamos a crear tres vistas por propiedad, una vista no tendrá ningún filtro, la segunda será para hacer pruebas y la tercera será master, donde veremos todos los reportes para tomar decisiones en nuestra empresa.
La mejor analogía para entenderlo es verlo como GitHub, cada vista será un branch y tendrá diferentes versiones de la información, lo más importante es que toda la data estará a salvo.
Cómo crear un filtro en Analytics
Primero debes ir al administrador de Analytics y seleccionar la cuenta, propiedad y vista a la cual le quieres crear el filtro, en la configuración de la vista, das click en filtros.
Luego, das click en + Nuevo filtro y aquí verás dos opciones, en Seleccionar un método para aplicar un filtro a una vista donde puedes importar un filtro que tengas en otra vista de la misma propiedad o crear un nuevo filtro, en este caso seleccionas Crear filtro nuevo y luego tendrás opción de crear un filtro predefinido (como excluir una IP) o crear tus propios filtros en base a dimensiones y métricas de Google Analytics.
Recuerda que los filtros en Google Analytics trabajan según su orden, es decir, si tienes un filtro de país que incluya sólo las visitas de Colombia y luego pones un filtro para que incluya todas las visitas de México, el filtro no recolectará las visitas de México, pues al pasar por el primer filtro se eliminó toda la información de los países que no fueran Colombia. Debes tener todo esto muy en cuenta para generar tus reportes correctamente.
via Cristalab http://ift.tt/1pzxUuL
Cómo usar los selectores de hermano en CSS3
A mi parecer, los selectores de hermanos de CSS3 están poco valorados ya que estos pueden ser una herramienta bastante útil a la hora de crear ciertos componentes con CSS, aunque también presentan un inconveniente clave: no se pueden seleccionar elementos anteriores en el DOM. El funcionamiento básico está descrito en muchos sitios, así que en este post me enfocaré en mostrar un par de utilidades que van más allá de seleccionar el p que va después del h1.
Selectores en CSS3
En CSS3 existen 2 selectores de hermano:
- Adyacente "+": Selecciona al hermano adyacente, es decir, al que viene justo después en el DOM.
- General "~": Selecciona a todos los hermanos que están después del elemento en el DOM.
Lista de elementos
Estamos haciendo una lista de elementos, y queremos que entre un elemento y otro exista un borde, un espacio, algo que separe los elementos. Se puede aplicar un border-top a todos los elementos, pero ese borde también le tendría el primer elemento, cosa que no queremos. En su lugar, aplicamos el border-top a los hermanos adyacentes de li:
[css:1:eed3d41aa5]
li + li {
border-top: 3px solid #ddd;
}
[/css:1:eed3d41aa5]
Este código selecciona a todos los li que estén precedidos de otro li. Como el primer li no tiene a ninguno otro detrás, no le aplica el estilo.
Lista de elementos con hover
Tomemos el mismo ejemplo anterior y añadamos un efecto hover a los li. Al pasar con el ratón por encima aparecerá un borde por debajo del elemento. Pero ese borde desplaza todo el menú hacia abajo y además deja demasiado espacio entre un elemento y otro, así que a la vez que ponemos el borde inferior al elemento con hover, quitamos el borde del elemento adyacente, de la siguiente forma:
[css:1:eed3d41aa5]
li:hover {
border-bottom: 4px solid #777;
}
li:hover + li {
border-top: none;
}
[/css:1:eed3d41aa5]
Personalizar un campo de texto
Necesitamos crear unos estilos para los campos de texto de una web. Algunos de los inputs tendrán un icono a la izquierda, otros tendrán un botón a la derecha, y otros tendrán ambos.
Empecemos creando un campo de texto básico.
Código :
<div class="form-input"> <input id="pony" type="text" class="input" placeholder="Introduce un nombre"/> </div>
[css:1:eed3d41aa5]
.form-input {
position: relative;
}
.form-input .input {
padding: .4em .7em;
width: 100%;
}
[/css:1:eed3d41aa5]
Con esto tenemos un campo de texto simple, personalizado con nuestros estilos. Pero dije que los campos de texto podrían tener un icono y un botón. Estos elementos serán opcionales, por lo que tendremos que tener eso en cuenta más adelante. Este sería el HTML con todos los elementos. Nótese que el icono y el botón se ponen antes del input.
Código :
<div class="form-input"> <label for="pony"></label> <button></button> <input id="pony" type="text" placeholder="Introduce un nombre para el pony"/> </div>
Y los estilos de icono y del botón:
[css:1:eed3d41aa5]
.form-input label{
left: 0;
margin: .5em;
position: absolute;
top: 0;
}
.form-input button {
margin: .5em;
position: absolute;
top: 0;
right: 0;
}
[/css:1:eed3d41aa5]
El icono y el botón se posicionan de forma absoluta dentro de la caja que contiene todos los elementos(.form-input). Si miramos el ejemplo en este punto, veremos que está casi perfecto. El problema es que el texto del input queda por debajo del input y del botón. Para solucionar esto aplicaremos el selector general de hermanos de la siguiente forma:
[css:1:eed3d41aa5]
.form-input label ~ input {
padding-left: 2em;
}
.form-input button ~ input {
padding-right: 2em;
}
[/css:1:eed3d41aa5]
Mediante el selector seleccionamos al input que sea hermano del ícono y del botón, y le añadimos un padding para evitar que el texto quede por debajo de estos elementos. Esta selección solo funcionará si el ícono o el botón se insertan junto al input. Si no ponemos ni icono ni botón, al no existir los elementos no se aplicará el padding al input.
Estos son un par de ejemplos para que vean la utilidad de este tipo de selectores. Generalmente no hay una sola forma de hacer las cosas, por lo que cada uno puede usar la que prefiera, pero creo que siempre viene bien conocer opciones y ver cómo trabajan otras personas.
via Cristalab http://ift.tt/1hxgvJj
Cómo crear un programa en Dart
Ya hemos aprendido lo básico de Dart, sabemos manejar clases, métodos, y también sabemos los tipos de datos que podemos utilizar. Pero nos falta lo más importante, crear nuestro primer programa en Dart.
Los programas en Dart se componen de un método principal llamado main() donde vamos a poner allí todas nuestras instrucciones para iniciar nuestro programa. Este método es obligatorio tenerlo para que nuestro programa funcione.
Código :
main() {
print(Metodo principal);
}
Te pregunto ¿crees que ya funciona este programa con la estructura actual? Ok, la respuesta es no, porque no hemos importado ni la librería para funcionar del lado del servidor (dart:io), ni tampoco la librería para funcionar del lado del cliente y poder manipular el DOM (dart:html).
En este tutorial vamos a trabajar siempre con la librería dart:html. Así que sólo debemos hacer una declaración de importación al inicio de nuestro código de la siguiente forma:
Código :
import dart:html;
Con esto hemos importado todas las herramientas que permiten que Dart y nuestro navegador puedan comunicarse. Pero ¿funciona ahora sí este programa? La respuesta es: no o al menos no como deseamos, ya que no hemos importado nuestro código Dart a nuestra plantilla HTML y esto sólo estaría funcionando en la línea de comandos con la máquina virtual de Dart.
Para hacer esto sólo debemos agregar dos líneas al final de nuestro archivo HTML.
Código :
<script type=application/dart src=codigoDart.dart></script> <script src=packages/browser/dart.js></script>
¿Que significa cada una de estas líneas?
La primera línea identifica el fichero principal que implementará nuestra aplicación. En este caso nuestro fichero de Dart se llama codigoDart.dart (no soy muy bueno con los nombres de archivos). La segunda línea verifica que nuestro navegador tenga soporte nativo para Dart y arranca la máquina virtual o en el caso de que no tengamos soporte, carga la versión en Javascript.
Por el momento nuestra aplicación nos muestra solamente Método principal (o lo que sea que hayamos escrito como parámetro en el método print) en la consola. En el próximo tutorial vamos a aprender a manipular el DOM con las herramientas que nos provee la librería dart:html.
via Cristalab http://ift.tt/1ptR3ye
Cifrar contraseña en login con Node.js
Cuando trabajamos sobre un sistema de usuarios lo primero que debemos pensar es en la seguridad de los datos, con crypto, el módulo de Node.js, podemos hacer un hash personalizado para poner un poco de seguridad a la contraseña cifrándola.
Vamos a usar una base de datos MongoDB por medio de Node.js con Mongoose, una librería que trabaja con Node.js para modelar los objetos y consultar a la base de datos.
Primero creamos el proyecto con express en la consola:
Código :
express ejemplo_encriptar
Ahora vamos al archivo app.js y lo primero que debemos hacer es crear la conexión con MongoDB y crear la Schema del usuario:
Código :
var mongoose = require('mongoose');
//nos conectamos a la base de datos 'login'
mongoose.connect('mongodb://localhost/login')
//obtenemos la conexión
var db = mongoose.connection
//usamos el método Schema
var Schema = mongoose.Schema
//creamos la Schema, muy sencilla sólo usaremos los campos username y password
var usuario_schema = new Schema({
username : String,
password : String,
})
//declaramos el objecto User para poder utilizarlo en las rutas
var User = db.model('User', usuario_schema)
Seguido esto creamos con Jade o HTML el formulario, donde manejaremos el login y el registro:
Código :
<form method='post' action="registrar"> <input type="text" name='username'> <input type="password" name='password'> <input type="submit" value='Registrar'> </form> <form method='post' action="login"> <input type="text" name='username'> <input type="password" name='password'> <input type="submit" value='Login'> </form>
y creamos las rutas POST configurando el archivo app.js:
Código :
app.post('/registrar', function(req, res) {
//Obtenemos los datos username y password
var username = req.body.username
var password = req.body.password
//Encriptamos por medio de una función la contraseña
var passEncriptada = encriptar(username, password)
//Buscamos si el usuario existe
User.findOne({username:username},function(err, user){
if(!user) {
var user = new User({
username : username,
password : passEncriptada
})
//guardamos el usuario
user.save()
res.send(user)
}
else
res.send('existe')
})
})
Aquí esta la función que usamos para encriptar, si quieren leer más pueden hacerlo en Crypto:
Código :
function encriptar(user, pass) {
var crypto = require('crypto')
// usamos el metodo CreateHmac y le pasamos el parametro user y actualizamos el hash con la password
var hmac = crypto.createHmac('sha1', user).update(pass).digest('hex')
return hmac
}
HMAC en sus siglas en inglés Hash-based message authentication code, es una construcción de código que calcula un hash para autenticar alguna información, en este caso Crypto provee como parámetro un string para personalizar nuestro hash.
Ahora la ruta del login, muy parecida a la de registro:
Código :
app.post('/login', function(req, res) {
var username = req.body.username
var password = req.body.password
var passEncriptada = encriptar(username,password)
User.findOne({username:username},function (err, user){
if(user){
//comprabamos si la contraseña encriptada es igual a la contraseña encriptada anteriormente
if(user.password === passEncriptada)
res.send('login completado')
else
res.send('contraseña incorrecta')
}
else
res.send('no existe')
})
})
Es la manera más sencilla que encuentro para cifrar con Node.js nuestras contraseñas en cualquier aplicación hecha en Node.js.
via Cristalab http://ift.tt/1f6okLd
Hosting barato web 
Recent Comments