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.

Perfiles Profesionales en el Desarrollo Web

Hoy en día la información es de vital importancia para las organizaciones y es requerida a cada instante, esto hace que la gran mayoría de sistemas de información tengan que funcionar a través de Internet o mínimamente en una red local, y es así que la mayor parte de los esfuerzos en el desarrollo de software han migrado hacia la Web  y a hacia lo “móvil” (celulares).

La empresa donde laboro, no es la excepción y es que la mayor parte de sistemas para nuestros clientes las desarrollamos con tecnologías Web.

Sin embargo, el Desarrollo Web abarca mucho, y es que un Desarrollador Web no podría dominar todo al 100%, por lo tanto eso me llevó a definir roles o perfiles con los cuales podemos distinguirnos entre los miembros de un equipo de desarrollo y así llevar a cabo mejor interacción y mejores resultados.

Los perfiles identificados son los que siguen:

Diseñador Web

  • Dominio de Photoshop (Opcionalmente de Corel Draw y Fireworks)
  • Dominio de Flash
  • Conocimientos en HTML y CSS

Maquetador

  • Dominio de Photoshop
  • Dominio de HTML y CSS (Opcionalmente HTML5 y CSS3)
  • Conocimientos en Javascript y PHP

Programador  Front -End

  • Dominio de HTML/CSS
  • Dominio de Javascript (jQuery, JSON, AJAX)
  • Conocimientos en PHP y MySQL

Programador Back-End

  • Conocimientos de HTML/CSS
  • Dominio de Javascript y jQuery
  • Dominio de PHP y MySQL

Sysadmin

  • Dominio de Linux
  • Domino de Servidores (Web, FTP, SSH, Mail, DNS)
  • Conocimientos en Redes

Las tecnologías, sobre todo las del lado del servidor, pueden variar, por ejemplo, de acuerdo al programador en lugar de usar PHP podría usar Python.

Distribuir aplicaciones web con AppServer y Chrome

En los siguientes pasos explicare como lograr distribuir aplicaciones web en el escritorio de Windows, utilizando herramientas como AppServ que nos instalará el servidor web, el lenguaje PHP y la base de datos de manera muy facil, ademas utilizaremos el navegador web Chrome para interactua con la interfaz de la aplicación web.

PASOS:

Instalar Chrome

Chrome es un navegador liviano, y fácil de usar, y la razón que escogimos para crear aplicaciones es por su opción (Herramientas > Crear Acceso directo a aplicaciones), que abre el sitio sin la barra de direcciones y las pestañas, dejando una ventana limpia para nuestra aplicación.

Además podemos utilizar su visor de PDFs por defecto, que hará más fácil para visualizar e imprimir reportes sin la necesidad de Adobe Acrobat.

Para hacer portable el instalador, es decir que no requiera necesariamente de internet, puede descargarse chrome standalone, que es un instalador de chrome offline.

Instalar AppServer

Appserv es una aplicación que instala un conjunto de aplicaciones como el Servidor Web, PHP y el servidor de base de datos MySQL.

Link de AppServer

Codigo de aplicación web

Código de cabecera de la aplicación web.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="es"/>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="icon32x32.png" sizes="32x32">
<link rel="icon" href="icon48x48.png" sizes="48x48">
<link rel="icon" href="icon64x64.png" sizes="64x64">
<link rel="icon" href="icon128x128.png" sizes="128x128">
<title>Aplicacion Web</title>
....
...
.

Como pueden ver en la cabecera se en la etiqueta <link> se definen las resoluciones de los iconos que se usaran al crear su acceso directo.

El resto de código puede ser cualquier aplicación Web que utilice una base de datos.

Distribuir la aplicación Web

Para poder distribuir tu aplicación web, es necesario crear un listado de programas requeridos que también tienes que distribuir como son:

  • Chrome Standalone
  • AppServ
  • La carpeta AppServ donde está tu aplicación web. (Puede desinstalar el appserver para que limpie toda la carpeta y solo quede la base de datos y el código fuente).

Para proteger el código de tu aplicación puede utilizar ofuscadores de código fuente, actualmente estoy trabajando en eso, o también utilizar el ZEND, que no logro entender, como integrarlo.

Utilizar dispositivos en Red con PHP y Apache en Windows

Son muchas las aplicaciones que se pueden desarrollar con las tecnologías (Apache, PHP y MySQL) y una aplicación web que funcione en escritorio no estará completa si no se comunica con los dispositivos o recursos y que además estos recursos estén compartidos en red.

Actualmente estoy desarrollando un sistema de puntos de venta para tiendas, y me encontré con la necesidad de utilizar dispositivos en red como impresoras y cajas registradoras, etc.

A continuación doy una breve explicación de cómo lograr que funciones PHP se comuniquen con dispositivos como impresoras en red, todo esto probado bajo el sistema operativo Windows.

Los dispositivos en red no están permitidos para el servicio de apache por ejecutarse como usuario SYSTEM.

Para habilitar el uso de dispositivos en red tenemos que ejecutar el servicio de apache como un usuario, este usuario tiene que tener permisos para acceder a red puede ser el usuario administrador que viene por defecto.

Para lograr que apache se ejecute con otro usuario tenemos que modificar algunas propiedades en el servicio de apache, listamos los “Servicios de Windows”,  y ubicamos el servicio de Apache.

Ejecutamos los siguientes pasos para lograr ejecutar Apache como otro usuario.

  1. Click derecho sobre el servicio de “Apache”.
  2. Seleccionar la opción “Propiedades”.
  3. Click en la pestaña “Iniciar Sesión”.
  4. Seleccionar la opción “Esta cuenta”.
  5. Presionar el botón “Examinar”,
  6. Buscar y comprobar el usuario.
  7. Completar el password del usuario.
  8. Reiniciar el servicio (Click derecho sobre el servicio y escoger la opción “Reiniciar”).

Al ver nuevamente el listado de tareas se nota que el servidor Apache está siendo ejecutado por el usuario asignado.

El siguiente código es un ejemplo de impresión utilizando una impresora compartida en red.

$printer = "\\\\192.168.1.37\\GenericT");
if($ph = printer_open($printer))
{
   printer_set_option($ph, PRINTER_MODE, "RAW");
   printer_write($ph,"HOLA MUNDO");
   printer_close($ph);
}
else "ERROR";

 

 

Saludos.

Seminario de desarrollo de aplicaciones web agil con Groove & Grails

Estoy muy contento de presentar a Huber Gilt un viejo compañero de la universidad y también un excelente profesional, que hoy por hoy trabaja en el Instituto Geofísico del Perú.

Huber me cuenta sobre su ultima actividad de paso por Puno y es grato para mi presentar este seminario de «Desarrollo de aplicaciones web agil con Groove & Grails» que constituye un nuevo marco de trabajo para el desarrollo rápido de aplicaciones web. El objetivo del seminario es dar a conocer la metodología de desarrollo ágil usando el framework Grails para el desarrollo de aplicaciones web.

El seminario consta de 4 sesiones de dos horas cada una, inicia este martes con sesiones totalmente interactivas, mostrando teoría y practica durante el desarrollo del seminario.

Dictado en el centro de computo de la UNA (edificio de Faculta de Derecho)

Del martes 26 al viernes 29 de abril

Sesión gratuita el día martes 26 de abril del 2011.

Horario: 10 am hasta 12 pm.

Ponente: Ing. Huber Paul Gilt Lopez.

Adjunto de ingeniería del IGP.

Aplicaciones Web en Google Chrome

En la actualidad la mayor parte de sistemas de información están basados en Web, por lo que para el desarrollo de software muchas veces se hace necesario tecnología cliente / servidor y por ende tecnología Web, incluso para que funcione tan solo en una red local.

Entonces para utilizar este tipo de sistemas es necesario un navegador Web, sin embargo no se utiliza como tal, para tal efecto existen opciones para desactivar todas las funciones visibles del navegador, las cuales no son necesarias para utilizar el software.

La opción más práctica se encuentra en el navegador de Google, Chrome; pues este incluye una herramienta para crear un acceso directo a aplicaciones (software), es más podemos elegir un icono o ponerlo por defecto en el código HTML.


Lamentablemente no todo es perfecto; muchas veces se utiliza el formato PDF para imprimir reportes del software, sin embargo en Chrome hay un pequeño detalle, es que existe alguna diferencia entre su visor nativo de PDF y el visor de Adobe que es el que viene por defecto en otros navegadores, lo cual no favorece mucho a la portabilidad del software.

La solución es simple, tan solo hay que desactivar este visor nativo del Chrome y activar el visor de Adobe; para ello se ingresa a about:plugins en el campo de dirección del Chrome y allí inhabilitamos el Chrome PDF Viewer y habilitamos el Adobe Acrobat, y listo problema resuelto.

 

En la actualidad la mayor parte de sistemas de información están basados en Web, por lo que para el desarrollo de software muchas veces se hace necesario tecnología cliente / servidor y por ende tecnología Web, incluso para que funcione tan solo en una red local.

Entonces para utilizar este tipo de sistemas es necesario un navegador Web, sin embargo no se utiliza como tal, para tal efecto existen opciones para desactivar todas las funciones visibles del navegador, las cuales no son necesarias para utilizar el software.

La opción más práctica se encuentra en el navegador de Google, Chrome; pues este incluye una herramienta para crear un acceso directo a aplicaciones (software), es más podemos elegir un icono o ponerlo por defecto en el código HTML.

Lamentablemente no todo es perfecto; muchas veces se utiliza el formato PDF para imprimir reportes del software, sin embargo en Chrome hay un pequeño detalle, es que existe alguna diferencia entre su visor nativo de PDF y el visor de Adobe que es el que viene por defecto en otros navegadores, lo cual no favorece mucho a la portabilidad del software.

La solución es simple, tan solo hay que desactivar este visor nativo del Chrome y activar el visor de Adobe; para ello se ingresa a about:plugins en el campo de dirección del Chrome y allí inhabilitamos el “Chrome PDF Viewer” y habilitamos el “Adobe Acrobat”, y listo problema resuelto.

Amazon simplifica la nube con Elastic Beanstalk

AmazonWebServices

Amazon Web Services, ha lanzado un nuevo servicio denominado Elastic Beanstalk, con el propósito de simplificar a los desarrolladores la administración de sus aplicaciones en la nube.

El servicio, lanzado en condición de beta, está principalmente dirigido a los desarrolladores ya sea que no puedan o no quieran administrar cada detalle del despliegue de sus aplicaciones sobre la nube, tales como balancear la carga, monitoreo y escala automática. Sin embargo, Elastic Beanstalk también permite a los desarrolladores mantener el control completo de todos sus recursos si así lo desean.

“Está dirigido para clientes que construyen aplicaciones que quizás no tengan un profundo conocimiento técnico para administrar la infraestructura en la que se apoyan. Beanstalk tiene una caja negra completa,” dijo el vice presidente de los servicios web de Amazon, Adam Selipsky.

El lanzamiento inicial de Elastic Beanstalk soporta Java, utilizando Apache Tomcat, pero Amazon resalta que el servicio está diseñado “de tal manera que pueda ser extendida para soportar múltiples pilas de desarrollo y también lenguajes de programación para el futuro.”

Elastic Beanstalk es gratuito para los clientes existentes, quienes únicamente necesitan pagar por los recursos necesarios para correr sus aplicaciones.

 

Vía: Mashable

Oracle arremete contra Microsoft y Google con Cloud Office

Oracle-Cloud-Office

El miércoles pasado, Oracle anunció la disponibilidad de Cloud Office 1.0, una suite de productividad basada en la web para entornos empresariales.

Cloud Office está integrado con Oracle Open Office 3.3 que también fue anunciado ese mismo día, y que ofrecerá integración con Cloud Office.

Oracle quiere también entrar en la escena de la nube con esta aplicación web. La compañía ha anunciado Oracle Cloud Office, el cual permitirá a los usuarios crear y editar documentos de manera colaborativa dentro del mismo navegador web sin la necesidad de recurrir a un software de escritorio.

La versión 1.0 de Oracle Cloud Office “habilita la colaboración al estilo 2.0” dijo Oracle, y puede ser visto (pero aparentemente no editado) en smartphones y otros dispositivos móviles. El servicio online es compatible ya sea con documentos Open Office como también el formato que utiliza Microsoft Office, aunque está creada principalmente para el formato abierto ODF.

A diferencia de los servicios como Google Docs y Microsoft Office, al parecer Cloud Office no será gratuito – está siendo ofrecido para empresas y otros servicios (tales como ISPs) como una manera de crear presentaciones online, hojas de cálculo, y otros tipos de documentos en la Web más dedicado.

Hablando de Open Office, también se anunció Open Office 3.3, el cual se integra con Cloud Office. La actualización de esta suite ofimática está dirigida al entorno empresarial, con posibilidad de conectarse a Oracle Business Intelligence. Oracle E-Business Suite y Microsoft SharePoint.

 

[ Fuente Oracle takes on Microsoft and Google with Cloud Office | Applications – InfoWorld ]

Musicuo

Hoy desperté, encendi mi PC y en los feeds me recomendaba una nueva WebApp, si se vale llamarlas asi ahora.
Musicuo logo
Pues nada menos que Musicuo un nuevo servicio que parece que aun estar en las estapas iniciales, pero no por eso no tener calidad, es un excelente servicio de musica bajo demanda, que a primeras recuerda a Grooveshark, pero con una grán diferencia basado en HTML5, lo bueno que es funcional y me gusta todo aunque como dije le falta agregar algunas cosas.
Me encanto de sobremanera las estadisticas y la bandeja de entrada. El servicio es muy intuitivo y de alta calidad, una buena colección de música que nosotros mismos podemos incrementar, lo que también me encanto fue sus condiciones para subir musica «tiene que tener los ID3Tag bien puestos» sino se eliminan las canciones, y eso es muy valido pues a veces recuperamos canciones de los CDs y no nos damos de ponerles esa información, solo nos contentamos con que esten en cierta carpeta y listo. esto ayuda a encontrar las canciones que querramos.
Tiene opciones de estilo wiki, que puedes modificar esas etiquetas de las pistas del sitio si crees que estan erroneas, también es un magnifico detalle las letras de las pistas en un botón al alcance de la mano, y el equalizador (que no me funciono). Caracteristicas sociales, por supuesto, para recomendar musica o «favoritear» otras listas de amigos.
Personalmente lo recomiendo, por sus funciones, su interfaz y por todo. Musicuo para mi tiene un 10 de 10 d–(^-^). No olvides registrarte.
Lo malo, que con mi Firefox 3.6 se puso a trabar procesador y memoria como mula, pero bueno con chromium todo limpio.

Visita en Musicuo.com @Musicuo