Despliegue de Aplicaciones Web con Git

Comúnmente, a la hora de poner en producción una aplicación web, se utiliza FTP; sin embargo realizar cambios de esta forma se hace complicado debido a que se debe volver a subir cada archivo modificado y si necesitamos realizar un backup de la versión debemos hacer una copia manual.

Y entonces ¿por qué no utilizar Git?, con Git podemos desplegar nuestras aplicaciones de forma ágil y además llevar un control por versiones.

En este artículo se describe paso a paso cómo utilizar Git para el despliegue de aplicaciones web.

Para empezar se debe crear un repositorio central en un servicio en línea, para ello podemos usar GitHub o Bitbucket.

Seguidamente en nuestro proyecto debemos agregar el siguiente script: deploy.php, éste ejecutará los comandos necesarios para actualizar la aplicación desde el repositorio central hasta el servidor de producción.

En nuestro proyecto crearemos el repositorio local (En NetBeans: click derecho sobre el proyecto > Versioning > Inicialize Git Repository).

inicialize

Ejecutamos los comandos necesarios para subir el proyecto al repositorio central (En NetBeans: click derecho al proyecto > Git > Commit, y luego click derecho al proyecto > Git > Remote > Push).

figura-2

Hasta aquí ya tenemos la aplicación en el repositorio central.

Ahora viene la parte del despliegue para lo cual existe la posibilidad de hacerlo automáticamente cada vez que se actualice el repositorio:

En GitHub:

  1. Iniciar sesión y seleccionar el repositorio correspondiente.
  2. Ir a Settings > Service Hooks.
  3. Ingresar la URL de script de despliegue “deploy.php”.
  4. Click en “Update Settings”.

figura-3

En Bitbucket:

  1. Iniciar sesión y seleccionar el respositorio.
  2. Ir a configuración > Hooks.
  3. Seleccionar POST e ingresar la URL de “deploy.php”.
  4. Click en “Save”.

figura-4

Entonces clonamos el repositorio en el servidor de producción, ejecutando el siguiente comando:

git clone https://[username]:[password]@bitbucket.org/[username]/[repositorio].git [directory]

*Para GitHub solo reemplazamos el dominio.

Ahora ya debemos tener nuestra aplicación corriendo en el servidor.

Finalmente, para actualizar los cambios solo debemos actualizar (commit, pull, push) el proyecto y ejecutar deploy.php en el navegador (Ejemplo: http://server.com/deploy.php)

En el caso de Github no sera necesario ejecutar deploy.php, ya que cada vez que se realice una actualización del proyecto, el despliegue será automático.

Mapas interactivos para la Web utilizando Inkspace, SVG y el plugin JVectorMap

Me encontré con la necesidad de mostrar mapas interactivos en un sitio web, pero que funcione en los navegadores de internet más usados (Firefox, Chrome, InternetExplorer), así que descarte por adelantado a Adobe Flash.

Investigando en la red encontré 2 plugins basados en JQuery, el primero JQVMap es el más sencillo de usar, pero una de las principales desventajas que encontré es que no me funciona en InternetExplorer, el segundo plugin por el que me decidí por usar es el JVectorMap, es un poco difícil de utilizar y tiene más opciones, pero la ventaja es que funciona en los navegadores más usados y recientemente salió la versión 1.2.2.

JVectorMap es un plugin para construir mapas interactivos, en su sitio web oficial se puede descargar la última versión y algunos mapas del Mundo, pero tienen que tener en cuenta que su documentación no está actualizada.

DEMO

DOWNLOAD

Pasos:

Dibujar mapa en Inkscape

  • Primero he dibujado un mapa en Inkscape en este caso un mapa de mi País Perú.jvm01
  • Ahora editamos las regiones en Inkscape para tener un mejor resultado etiquetamos las regiones de los mapas, para ello seleccionamos la región haciendo click derecho sobre una región y escogemos la opción “Propiedades del Objeto”:jvm02
    En este caso seleccionamos la región de Puno, y le pusimos un ID y un nombre para esta Región, esto es con el fin de que en nuestro resultado HTML se muestre esta etiqueta.
  • Ahora guardamos el mapa en un archivo por defecto que es (SVG de Inkscape).
  • Este archivo podemos abrirlo en el bloc de notasjvm03

 

SGVTO (Convertidor de SGV a formato .js de JVectorMap)

  • Seleccionamos todo el contenido del bloc de notas, lo copiamos y pegamos en el campo de texto del formulario que se encuentra en dirección:
    http://svgto.jvectormap.com/jvm04
  • Presionando el botón “Convert to map” podemos editar el nombre del mapa, los ids y los names de cada región; en este caso renombramos el nombre del mapa con “peru”.jvm05
  • Finalmente generamos el mapa para JVectorMap presionando el botón “Save”.jvm06Este resultado lo seleccionamos y copiamos en un archivo que podemos llamarlo “jvectormap.peru.js”.

 

JQuery y JQVectorMap

Entramos a la página oficial de JQuery para descargar su última versión en este caso JQuery 1.10.2 y la última versión de JVectorMap en este caso JVectorMap 1.2.2, este último tiene 2 archivos (.js y el .css).

Funcionamiento

  • Ahora en nuestra carpeta debemos tener los siguientes archivos:jvm07
  • Creamos un archivo peru.html que será donde se mostrara el mapa interactivo, Copiamos en el contenido del archivo:

HEAD

jquery-1.10.2.min.js
jquery-jvectormap-1.2.2.min.js
jvectormap.peru.js

BODY

< div id="world-map" style="width: 290px; height: 400px;">

JS

$(function() { $('#world-map').vectorMap({ map: 'peru' }) });
  • Teniendo como resultado jvm08
  • Mejorando nuestro mapa.
$('#world-map').vectorMap({
	map: 'peru',
	backgroundColor: '#b3d1ff',
	series: {
		regions: [{
				values: {"c0": "1", "c1": "2"},
				scale: ['#d9d4ca', '#b3d1ff'],
				normalizeFunction: 'polynomial'

			}]

	},
	regionStyle: {
		initial: {
			fill: "#f4f3f0",
			stroke: "#666666",
			"stroke-width": 1,
			"stroke-opacity": 1

		},
		hover: {
			fill: "#faa432",
			"fill-opacity": "1"

		}

	}
})
  • Resultado finaljvm09

Conclusión

En este tutorial se intentado enseñar como mostrar un mapa interactivo, espero haya aprendido y puedan aplicarlo a su trabajo. Pueden revisar su documentación de JVectorMap y agregarle más detalles como colores, bordes, opacidad, markers, eventos, etc.

Automatizando Jade y Stylus

Es momento de pasar el diseño de nuestro website a código fuente, a este paso se le llama maquetar y para lo cual normalmente se tiene que escribir infinidad de etiquetas HTML con los infaltables símbolos de menor (<) y mayor (>), de la misma forma para los estilos tenemos que escribir infinidad de puntos y comas (;) y llaves ({}).

Sin embargo existen alternativas para evitar el trabajo anterior, en este artículo hablamos de Jade y Stylus, el primero es un motor de plantillas que genera código HTML y el segundo un pre procesador de CSS, los cuales agilizan el trabajo de maquetación sin necesidad de escribir etiquetas, puntos y comas y llaves, más bien, es necesario llevar un código ordenado.

Realizaremos un ejemplo donde generaremos código HTML y CSS al mismo tiempo de guardar los archivos en Jade y/o Stylus. Para esto necesitamos tener instalado Jade, Stylus y el editor Sublime Text.

Primero debemos instalar nodejs, para ello lo instalamos desde nodejs.org

Luego instalamos stylus y jade desde la línea de comandos de windows:

npm –g install stylus
npm –g install jade

 

En Sublime Text debemos instalar los paquetes correspondientes para tener los código Jade y Stylus resaltados.

Para empezar debemos crear un nevo sistema de construcción para Jade de la siguiente forma:

figura-1

Se abrirá un archivo JSON modificamos el archivo como sigue:

{
  "cmd": ["cmd","/c","jade","-P","$file"],
  "selector": "source.jade"
}

Lo guardamos con el nombre «Jade.sublime-build» en la ubicación que se abre por defecto (C:\Users\[USERNAME]\AppData\Roaming\Sublime Text 2\Packages\User).

Para Stylus buscamos el archivo correspondiente (Stylus.sublime-build) en la carpeta de paquetes de Sublime Text y dentro de la carpeta Stylus. Lo editamos como sigue:

{
  "cmd": ["cmd","/c","stylus", "-c", "$file"],
  "file_regex" : ".",
  "selector": "source.stylus"
}

Hasta aquí podemos generar el código HTML y/o CSS presionando CTRL + B. Sin embargo si queremos generar el código al momento de guardar debemos instalar el paquete SublimeOnSaveBuild; una vez instalado lo configuramos seleccionando:

Preferences > Package Settings > SublimeOnSaveBuild > Settings > Default

Copiamos el código a:

Preferences > Package Settings > SublimeOnSaveBuild > Settings > User

Y agregamos las extensiones «styl» y «jade» a «filename_filter»,  asegurándonos de que «build_on_save» valga «1».

Con esto al momento de guardar archivos Jade y/o Stylus se generará automáticamente el código HTML y/o CSS correspondiente.

figura-2

figura-3

figura-4

figura-5

Al abrir el archivo «hola.html» obtendrémos el siguiente resultado:

figura-6

Crear una Pagina Web con PHP – POO

webphp_progoo
En este tutorial les voy a mostrar una manera de las muchas que puedan haber para crear una Pagina web con PHP Orientado a Objetos.

Hay muchos que tiene esa duda, espero poder resolver esa duda, existen CMS como wordpress, joomla, etc. Que hace uso bastante del paradigma de la POO(Programacion Orientada a Objetos).

Bueno esta es una pagina básica la cual contiene:

– Cabecera
– Menú
– Contenido
– Pie de pagina.

Entonces manos a la obra.

Primero voy a crear mi Hoja de Estilos CSS. Lo guardare con el nombre oop-estilos.css y estara en mi carpeta css/

Creamos las propiedades CSS

body{
font-family: 'Text Me One', sans-serif;
color: #000;
}

#cabecera{
width: 100%;
height: 50px;
}

#menu{
width: 100%;
height: 50px;	
background-color:#036;
text-align: center;
}

#menu a:link{
color:#fff;
text-decoration: none;
}	

#menu a:active{
color:#ff;
text-decoration: none;
}	

#menu a:visited{
color:#fff;
text-decoration: none;
}	

#menu a:hover{
color:#fff;
text-decoration: none;
}	

#contenido{padding: 10px;}

#img_php{
float: left;
margin-top:5px;
margin-right: 10px;
}

#text_der_img_php{
margin-top:5px;
}

ul.menu_nav ,
ul.menu_nav  li,
ul.menu_nav  ul {
 list-style: none;
 text-align: center;
 margin-right: 30px;
}

ul.menu_nav  {
 position: relative;
 z-index: 597;
 float: left; 
}

ul.menu_nav  li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 text-align: center;
 zoom: 1;
 width: 180px;
}

ul.menu_nav  li.hover,
ul.menu_nav  li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
 background-color:#F90;
 float: left;
 width: 180px;
}

ul.menu_nav  ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.menu_nav  ul li {
 float: left;
 background-color: #000;
 margin-left: -40px;
}

ul.menu_nav  ul ul {
 top: 1px;
}

ul.menu_nav  li:hover > ul {
 visibility: visible;
}

ul.menu_nav  li.rtl ul {
 top: 100%;
 right: 0;
 left: auto;
}

ul.menu_nav  li.rtl ul ul {
 top: 1px;
 right: 99%;
 left: auto;
}

ul.desplegable {
 font-weight: bold;
}

ul.desplegable li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}

#footer{
float: left;
width: 100%;
text-align: center;
font-weight: bold;
}

Ahora voy a crear un archivo llamado index.php, este archivo sera la pagina principal en donde graficare mi web a traves de metodos, objetos, clases, etc. de PHP.

Haciendo Referencia.

Hacemos Referencia o llamamos a nuestros archivos externos.



NOTA: Dentro de las etiquetas body vamos a ir colocando todos nuestros métodos, objetos, clases, etc. de PHP.

Creamos la estructura de nuestra web:

//Cabecera
texto = $titulo;
	}
	
	public function graficar() //Metodo
	{
		//echo"

".$this->texto."

"; ?>

texto;?>

lineas[] = $li; } public function graficar() { for ($i=0;$ilineas);$i++) { ?>

lineas[$i];?>

texto = $cadena; } public function graficar() { ?>
texto;?> cabecera = new Cabecera($texto_cabecera); $this->menu = new Menu(); $this->body = new contenido(); $this->pie = new Footer($texto_pie); } public function iniciar_contenido($texto) { $this->body->iniciar_linea($texto); } public function vista() { echo "
"; echo "
"; $this->cabecera->graficar(); echo "
"; echo ""; echo "
"; $this->body->graficar(); echo "
"; echo ""; echo "
"; } } //************************************************************************* //Ahora creamos la vista de nuestra web $pag = new Pagina("Bienvenido a mi Web","Desarrollado por Juan Castro Lurita - 2013"); $pag->iniciar_contenido( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet lectus sit amet tortor imperdiet iaculis. Cras ornare scelerisque libero et pellentesque. Mauris malesuada interdum sapien a porta. Curabitur cursus odio et nibh pretium, quis ornare purus aliquet. Aliquam gravida sodales convallis. Fusce nec viverra quam. Proin ultrices augue massa, in accumsan dui volutpat a. Quisque fringilla augue at nisl sagittis vestibulum. Duis venenatis, mauris in pharetra aliquet, ipsum massa aliquam lectus, ut volutpat nisl arcu iaculis turpis. Ut vehicula sollicitudin diam, ut pulvinar justo ornare vitae. Sed gravida auctor faucibus. Sed vel risus ac lorem commodo tincidunt a in dui. Fusce tellus magna, adipiscing et suscipit eget, malesuada at orci. Aenean vitae dignissim velit. Sed facilisis tempor lacus ac bibendum.

Nullam et lacus lobortis, congue erat at, lacinia eros. Ut dictum sodales nisi id convallis. Fusce posuere quam eget orci interdum sagittis. Maecenas vitae elementum sem. Sed et massa sem. Phasellus ac lobortis est. Praesent sit amet euismod leo. Maecenas sagittis vel ligula vitae imperdiet. Etiam condimentum elit nibh. Aliquam urna purus, sollicitudin quis est nec, convallis aliquet leo. Cras elementum, est sed feugiat sollicitudin, lorem ante venenatis urna, quis consectetur libero odio sed libero. Mauris nisi arcu, molestie ac enim nec, sagittis scelerisque turpis. Fusce sodales, nulla a venenatis eleifend, quam velit venenatis dui, vel aliquam lorem odio a lacus. Morbi vehicula felis lectus. Mauris faucibus, ante sed cursus imperdiet, est urna suscipit libero, vitae. " ); $pag->vista(); ?>

Esos es todo.

Por si tienen algun problema aca les dejo los archivos para descargarlos:

LINK

Tambien les dejo una DEMO

Espero les sirva mucho.

Gracias.

Sonido de Notificación tipo Facebook con jQuery

Sonido de Notificacion tipo Facebook

Cuando recibimos una respuesta en el chat de Facebook, el sistema reproduce un sonido particular que nos alerta que tenemos un nuevo mensaje.

En este tutorial les voy a explicar como pueden reproducir un sonido con jQuery cuando pulsamos enter o presionamos el botón enviar luego de escribir un mensaje en nuestro chat.

Paso 1.- Haciendo referencia a nuestros archivos

Creamos un archivo llamado index.php , , en donde colocaremos el chat.

Antes de finalizar la etiqueta head de nuestro html, hacemos referencia y llamamos a nuestra hoja de estilos CSS:

A su vez también hacemos referencia y llamamos a nuestro framework jQuery:

No olviden que llamamos a nuestros archivos antes de finalizar la etiqueta head, de nuestro html.

Paso 2.- Creación de las funciones en jQuery

Ahora crearemos 2 funciones con sus eventos.

La primera función que vamos a crear nos detecta cuando estamos pulsando la tecla ENTER para enviar nuestro mensaje, porsupuesto luego de haber escrito nuestro mensaje en el chat.

$(document).keypress(function(enter) {
    if(enter.which == 13) {
    var snd = $("#txt_chat_fb").val().trim();
    if(snd.length > 0){
	$("#txt_chat_fb").val('');   
	$("#txt_chat_fb").focus(); 
    $("
  • ").html(''+snd+'').appendTo("#msg_fb_chat"); $("#chat").animate({"scrollTop": $("#chat")[0].scrollHeight}, "slow"); $('#audio_fb')[0].play(); } } });

    Ahora creamos nuestra segunda función la cual nos detecta cuando estamos pulsando el botón para ENVIAR nuestro mensaje, luego de haber escrito nuestro mensaje en el chat.

    $(document).ready(function(){  
    	$("#txt_chat_fb").focus(); 	
        $('').appendTo("body");	   
        $("#btn_enviar").on("click",function(){
        var snd = $("#txt_chat_fb").val().trim();
        if(snd.length > 0){
    	$("#txt_chat_fb").val('');   
    	$("#txt_chat_fb").focus(); 
        $("
  • ").html(''+snd+'').appendTo("#msg_fb_chat"); $("#chat").animate({"scrollTop": $("#chat")[0].scrollHeight}, "slow"); $('#audio_fb')[0].play(); } } ) });

    Paso 3.- Estructura del contenido en el body

    Ahora creamos la estructura dentro de la etiqueta body de nuestro html, con las capas o divs(divisiones), formulario, botón, etc. para nuestro chat.

    
    

    Chat

      • Hola Amigo
     
    • Como estás ?
    " Activa el Sonido"

    Listo !

    Eso es todo, espero les sirva de mucho.
    Les dejo una demo para que vean como funciona y si desean pueden copiar el codigo fuente, solo le dan click con el boton derecho del mouse y luego ver codigo fuente a la pagina demo.

    DEMO

    Muchas Gracias amigos !

    Enviar URL con PHP a traves de un formulario.

    En esta oportunidad les voy a enseñar una manera de recoger y enviar la URL a través de un formulario.

    euadufcp-post

    Voy a utilizar el array $_SERVER y dentro colocare el HTTP_REFERER que emplea el agente de usuario para la pagina actual.

    en mi PHP que recibe y envia el formulario quedaria asi:

    Código PHP :

    $sUrl= $_POST['url'] = $_SERVER['HTTP_REFERER'];

    Quizás pueda servir para encontrar rápidamente la pagina desde donde se envió el formulario.
    A mi me ayudo cuando manejaba una tienda en linea la cual tenia mas de 400 productos en linea y por este método, los ubicaba al instante, bueno ustedes le pueden dar el uso que deseen.

    NOTA: Utilice la versión de Google Crohme 18, el cual soporta la validación nativa de HTML5 , que es con la cual valida el formulario.

    Bueno vamos al tutorial.

    Primero creo la pagina para mi formulario de contacto, la cual llamo index.php :

    Código HTML :

    @

    Luego creo mi archivo PHP que procesa y envía la información, lo voy a llamar enviar.php :

    Código PHP :

      
    // En esta sección se declaran las variables
    
       $sPlace = $_POST['place'];
       $sEmail = $_POST['email'];
       $sClientemail = $_POST['clientemail'];
       $sAsunto = $_POST['asunto'];
       $sMensaje = $_POST['mensaje'];
       $sNombre = $_POST['nombre'];   
       $sUrl= $_POST['url'] = $_SERVER['HTTP_REFERER'];
    
    //Aca se ponen los datos del remitente
    $myname = $sNombre; 
    $myemail = $sEmail;
    
    //Aca se cambia la dirección de correo del destinatario
    $contactemail1 = $sEmail.'@'.$sClientemail;
    
    $sTitulo = "Datos recibidos de ".$myname."
    "; $sDetalles = "Asunto : ".$sAsunto."
    "."E-mail : ".$sEmail."@".$sClientemail."
    "."URL: ".$sUrl."
    "; $message = $sTitulo.$sDetalles; $subject = $sAsunto; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=iso-8859-1\r\n"; $headers .= "From: ".$myname." <".$myemail.">\r\n"; $headers .= "To: ".$contactname1." <".$contactemail1.">\r\n"; mail($contactname1, $subject, $message, $headers);

    Al final del mismo archivo enviar.php que procesa el envio, coloco un javascript para redireccionar a la pagina ok.php que confirma que ha sido enviado:

    location.href = "ok.php";

    Puede ver en el código PHP que estoy recogiendo la URL y la meto en la variable $sUrl, para luego enviarla y mostrarla en el correo:

    $sTitulo = "Datos recibidos de ".$myname."";
    $sDetalles = "Asunto : ".$sAsunto."
    "."E-mail : ".$sEmail."@".$sClientemail."
    "."URL: ".$sUrl."";

    Ahora creo unas pocas lineas de código CSS para mi estilizar mi formulario, creo un archivo llamado estilos.css :

    input:invalid {
        border: 1px solid red;
      }
    
       /* Estilo por defecto */
      input:required:invalid {
        border: 1px solid red;
      }
    
      input:required:valid {
        border: 1px solid green;
      }
    
    .botonform {
       font-family: Arial, Helvetica, sans-serif;
       color: #FFF;
       background-color: #333;
       border-top-style: none;
       border-right-style: none;
       border-bottom-style: none;
       border-left-style: none;
       padding-top: 5px;
       padding-right: 10px;
       padding-bottom: 5px;
       padding-left: 10px;
       cursor: pointer;
    }
    .rojita {
       color: #F00;
    }

    Por ultimo creo una pagina que muestra el mensaje de «Enviado ! » , que se va mostrar una ves que mi formulario haya sido enviado sin problemas, lo guardo con el nombre: ok.php :

    Enviado !

    Listo eso es todo !

    Ustedes me dirán porque, puse los inputs de el correo en dos partes, lo que paso es que mi jefe lo quería así, según el obligaba a que el usuario escriba su correo, trate de convencerlo pero era bien terco, bueno lo deje así y nunca decidí cambiarlo, pero ustedes lo pueden hacer, les dejo a su criterio, al menos ya esta la idea.

    Les dejo una DEMO para que puedan ver un ejemplo en funcionamiento (Ingresa tu correo para que te llegue la URL y puedas ver el ejemplo adecuadamente):

    http://jrcl.net76.net/dm/recoger_url_con_php/

    Espero les haya gustado !

    Calcular la Distancia que hay de un punto a otro punto con jQuery.

    En este tutorial les voy a mostrar cómo utilizar jQuery para obtener la distancia con el mouse de un determinado elemento en la página. Este trozo de código puede ser útil en una aplicación web pequeña o para otras aplicaciones que deseamos y que tiene un montón de interacción con el usuario y desea ejecutar un evento cuando el ratón del usuario se encuentra en una distancia determinada de un elemento.

    Solo creamos las variables globales, el evento y la función para el documento.

    Código Javascript :

    <script type="text/javascript">
    $(document).ready(function(){
       var mX, mY, distance,
        $distance = $('#distancia span'),
        $element  = $('#elemento');
    
        function calculateDistance(elem, mouseX, mouseY) {
            return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
        }
    
        $(document).mousemove(function(e) {
            mX = e.pageX;
            mY = e.pageY;
            distance = calculateDistance($element, mX, mY);
            $distance.text(distance);
        });
    });
    </script>

    Como se puede ver en el código hemos establecido una función en el evento .mousemovede manera cada vez que la persona mueve el ratón se procedera con lo siguiente.

    Luego se utiliza la variable e para obtener la posición X e Y del mouse y envía esto a la función calculateDistance con un parámetro de elemento.

    Ahora creamos nuestros contenedores divs para recibir los datos:

    <div id=»distancia»>La distancia hasta el punto es: <span> </span> pixeles.</div>
    <br />
    <div id=»texto»>
    <h4>Partiendo del punto de partida que es el 0 de color naranja</h4>
    <p>Un ejemplo seria calcular la distancia desde el punto que es el 0 de color naranja hasta una caja azul con circulo blanco: </p>
    </div>
    <div id=»elemento»>0</div>

    Eso es casi todo, aca dejo una demo en donde estan todo el codigo completo (le das botón derecho del mouse en la pagina de la demo y luego le das ver codigo fuente) :

    DEMO

    Eso es todo, espero te haya gustado y que te sea muy útil.

    Diseño de un formulario Login

    En esta oportunidad te muestro un ejemplo de como diseñar un formulario login para un sistema Web.

    La siguiente imagen primero se elaboró en Photoshop.

    Seguidamente se codificó en HTML.

    Mensaje...
    Via Gamarra

    Sistema de Gestión de Contenidos

    Finalmente aplicamos estilos con algunas características de CSS3.

    body{
    	background:#464646;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	margin: 0
    }
    
    #envoltura{
    	position:absolute;
    	left:50%;
    	top:50%;
    	margin-left:-165px;
    	margin-top:-150px;
    	width:330px
    }
    
    #mensaje{
    	background: #ececec;
    	border: 1px solid #000;
    	border-radius:2px;
    	box-shadow: 0 0 0 2px rgba(255,255,255,.1);
    	display: none;
    	font-weight: bold;
    	height: 20px;
    	line-height: 20px;
    	left: 30px;
    	position: absolute;
    	right: 30px;
    	text-align: center;
    	top: -50px
    }
    
    #mensaje.mensaje-rojo{
    	border-color: #e9322d;
    	color: #e9322d
    }
    
    #mensaje.mensaje-verde{
    	border-color: #46a546;
    	color: #46a546
    }
    
    #contenedor{
    	background-color:#356AA0;
    	box-shadow: 0 0 0 5px rgba(255,255,255,.3);
    	-webkit-border-radius:4px;
    	-moz-border-radius:4px;
    	border-radius:4px
    }
    
    #cabecera{
    	border-bottom: 1px solid #666;
    	color:#FFF;
    	font-family:'Trebuchet MS', Helvetica, sans-serif;
    	font-size:28px;
    	height:50px;
    	line-height:50px;
    	text-shadow: 1px 1px 2px #000000;
    	text-align:center
    }
    
    #cuerpo{
    	background:#ececec;
    	border:solid #ccc;
    	border-width: 1px 0;
    	padding:10px 30px
    }
    
    form,p{
    	margin:0
    }
    
    p{
    	padding-bottom: 5px
    }
    
    .mb10{
    	margin-bottom: 10px
    }
    
    label{
    	color: #666;
    	font-weight: bold
    }
    
    input{
    	border: 1px solid #999;
    	border-radius:2px;box-shadow: 0 0 0 2px rgba(0,0,0,.1);
    	font:bold 12px Arial, Helvetica, sans-serif;
    	height: 24px;
    	line-height: 24px;
    	padding:0 2px
    }
    
    input#usuario{
    	background:#fff url(../img/login-sprite.png) no-repeat 0 -23px;
    	padding-left: 20px;
    	width: 244px
    }
    
    input#contrasenia{
    	background:#fff url(../img/login-sprite.png) no-repeat 0 -53px;
    	padding-left: 20px;
    	width: 244px
    }
    
    .boton{
    	background: #ccc;
    	background: -moz-linear-gradient(top,#eee,#ccc);
    	background: -webkit-linear-gradient(top,#eee,#ccc);
    	background: linear-gradient(top,#eee,#ccc);
    	color: #666;
    	padding:0 10px
    }
    
    .boton:active{
    	position: relative;
    	top: 1px
    }
    
    #pie{
    	border-top: 1px solid #666;
    	color: #fff;
    	font-size: 11px;
    	height: 24px;
    	line-height: 24px;
    	text-align: center
    }
    
    #nota{
    	padding-top: 20px;
    }
    
    #nota a{
    	background:url(../img/login-sprite.png) no-repeat;
    	display: block;
    	height: 18px;
    	margin: 0 auto;
    	opacity:.28;
    	overflow: hidden;
    	text-indent: 100%;
    	-webkit-transition:opacity .3s linear;
    	-moz-transition:opacity .3s linear;
    	transition:opacity .3s linear;
    	width: 125px
    }
    
    #nota a:hover{
    	opacity:.5
    }
    

    Descargar fuentes | Demostración

    Servidor Git con Gitolite y Netbeans

    ¿Te suena GitHub?, pues si no aun has escuchado dicha palabra, te cuento es una red social para programadores, y que es un servicio web para almacenar codigo fuente mediante Git. ¿Y qué es Git?, Git es un poderoso sistema de control de versiones diseñado por el creador de Linux, Linus Torvals.

    En este artículo aprenderemos como crear nuestro propio “GitHub”, orientado a ser utilizado en un servidor dedicado dentro de una red local, mediante Gitolite. Gitolite es el software que nos permitirá administrar los repositorios y usuarios de Git.

    Para empezar instalaremos Gitolite en una computadora con Ubuntu GNU/Linux, la cual será el servidor. Escribimos los siguientes comandos:

    // generar llaves ssh y copiar

    ssh-keygen -t rsa
    cp ~/.ssh/id_rsa.pub /tmp/local.pub

    // instalar git y gitolite

    sudo apt-get install git gitolite git-daemon-run

    // configurar

    git config –global user.name «Your Name»
    git config –global user.email your@email.com

    // crear usuario

    sudo adduser \
    –system \
    –shell /bin/bash \
    –gecos ‘git version control’ \
    –group \
    –disabled-password \
    –home /home/git \
    git

    // entrar a git

    sudo su git
    echo «PATH=$HOME/bin:$PATH» > ~/.bashrc
    gl-setup /tmp/local.pub

    // guardar el archivo que nos aparece y salir mediante vim (:wq)

    // regresar al usuario por defecto

    exit

    // clonar git-admin

    git clone git@ubuntu:gitolite-admin.git

    // crear nuevo repositorio editando “gitolite-admin/conf/gitolite.conf” al cual podrá acceder cualquier usuario (@all)

    repo     gitolite-admin
    RW+  =  @all
    repo     miproyecto
    RW+  =  @all

    // finalmente hacemos “commit”

    git add .
    git commit -a -m ‘crear nuevo repositorio’
    git push origin master

    Ya tenemos un servidor Git con Gitolite y Ubuntu.

    En el siguiente paso inicializaremos el repositorio mediante Netbeans en una máquina con Windows, para lo cual debemos crear un usuario, para ello utilizaremos puttygen.exe.

    Una vez en el programa, generamos una “llave publica” (1), copiamos el texto que aparece y lo guardamos en un archivo con la extension “.pub” (2), este archivo debemos copiarlo en el servidor dentro de “gitolite-admin/keys/” y hacer “commit”. Seguidamente guardamos la llave privada con OpenSSH, en un lugar aparente .

    Abrimos Netbeans, nos ubicamos en el proyecto, seleccionamos click-derecho > Versioning > Inicialize Git Repository y seleccionamos la carpeta donde se creara el repositorio.

    Ahora hacemos “commit” (click-derecho > Git > Commit) y luego “push” (click-derecho > Git >Remote > Push), para lo cual rellenamos con los datos que aparecen en la figura siguiente:

    Seleccionamos siguiente y finalizar; listo el repositorio esta inicializado.

    Para agregar otro usuario de otra máquina repetimos los mismos pasos con puttygen y luego clonamos el proyecto (Team > Clonar…), y utilizamos los mismo datos de la figura anterior pero esta vez con la llave privada correspondiente.

    Las opciones básicas de Git son “commit”, “pull” y “push”, y que desde Netbeans las ubicamos al hacer click-derecho en el proyecto o en el menu “Team”.

    Pull: Recuperar la última versión del proyecto.

    Commit: Actualizar versión local.

    Push: Enviar nueva versión al servidor.

    Como conclusión podemos decir que es muy necesario utilizar un sistema de control de versiones cuando se programa de forma colaborativa, ya que tiene muchas ventajas, por lo que vale la pena aprender Gitolite o en todo caso GitHub.

    Mostrar imagen de día, tarde o noche con PHP

    Quiero compartir un codigo que desarrollé para que lo usen en sus páginas webs: mediante PHP una imagen de día, tarde o noche se mostrará de acuerdo al horario que corresponda.

    Les dejo el Código:

    Código completo !

    <?php
    
    $hora = date("H"); /* <-- H = Hora de 00 horas a 23 horas por default en PHP, entonces sabiendo esto seguimos abajo*/
    
    if($hora < 11){
    $file = ('http://tcc.tutv.com.uy/weatherSubrayado/images/Weather/tiempo_sol_small.png');
    $mensaje = "Buenos Dias";
    }
    else if($hora < 18 ){
    $file = ('http://tiempovenezuela.com/assets/images/weather_yr/3.png');
    $mensaje = "Buenas Tardes";
    }
    else{
    $file = ('http://www.cuandopasa.com/pic/n/000/000/n0000000130zgk.jpg');
    $mensaje = "Buenas Noches";
    }
    ?>
    
    <html>
    <body>
    <?=$mensaje?>
    <img src="<?=$file?>";
    </body>
    </html>
    

    Explico un poco:

    Si la variable $hora es menor que 11hrs, entonces que imprima la imagen de dia  dentro del body en :

    <?=$mensaje?>
    

    Y también que me imprima su respectiva imagen dentro del body en:

    <img src="<?=$file?>";
    

    El resto es similar, sólo que va a cambiar la imagen.

    Las imágenes que cambian son:

    • dia.jpg
    • tarde.jpg
    • noche.jpg

    Como sabemos, la hora de PHP se basa en la hora de nuestros hosting o servidor. A mí me marca la hora así:

    • a las 11pm(abarca desde las 12pm a la 1pm) –> imagen de dia(dia.jpg)
    • a las 6pm –> imagen de tarde(noche.jpg)
    • a las 12an –> imagen de mañana(mañana.jpg)
    NOTA:
    – Necesitarán 3 imágenes.

    – Si no les carga las imágenes es porque ya están vencidas, puede cambiar la ubicación de las imágenes.Por ejemplo:

    $file = ('http://www.nuevaubicacion.com/dia.jpg');
    

    Espero les haya gustado !