Sistema de usuarios sencillísimo en PHP

26 10 2009

Me he permitido la licencia de escribir un sencillísimo sistema de login de usuario en php (más sencillo aún que el mecanismo de un botijo), con mis pocos conocimientos de php; pero que puede que ayude a algún otro aprendiz como yo.

El sistema es el siguiente: está compuesto por 4 archivos:

- usuarios.txt
- read.php
- new2.html
- login.php

Bien, como inicialmente es una prueba únicamente, no se trató de hacer un sistema de usuarios orientado a una base de datos MySQL por ejemplo, sino más bien usar un simple archivo txt protegido para almacenar la lista de usuarios y contraseñas. Evidentemente, al ser una prueba inicial, sobre la que iré investigando y avanzando, no está implementado el sistema de protección del archivo de usuarios, pero en la revisión que le dé, lo implementaré.

Aparte del archivo usuarios.txt, se localizan los archivos: read.php, módulo que se encarga de parsear las líneas de usuarios del archivo usuarios.txt; new2.html, simplemente la página del formulario en HTML; y login.php, donde realmente se realiza el trabajo sucio. Adjunto el código de login.php para hacer algún comentario, puesto que los otros son completamente triviales:

–login.php

<HTML>
<BODY>
<?
$user = $_POST["usuario"];
$pass = $_POST["password"];
$login = $_POST["login"];
$registro = $_POST["registro"];
$usuariomd5 = md5($user);
$passmd5 = md5($pass);
$encontrado = False;
$novalido = (($user=="") || ($pass==""));

echo "Nombre: $user <br>";
echo "Contraseña: $pass <br>";

$listado = fopen("usuarios.txt","r+");

if((!$listado)) {
  echo "No pudo abrirse el archivo<br>";
}
else if ($listado && !$novalido) {
  while(!feof($listado) && !$encontrado) {
    $leer_linea = fgets($listado,1024); //Lee cada línea de usuario
	include_once("read.php");
	datos($leer_linea);
	if(($usuariomd5 == $uleido) && ($passmd5 == $pleido)) {
	  $encontrado = True;
	  if (isset ($login)) echo "Bienvenido <br>";
	  else if (isset ($registro)) echo "Ya estás registrado";
	}
  }
  fclose($listado);
  if (!$encontrado) {
    if (isset ($registro)){
	  $listado = fopen("usuarios.txt","a+");
	  fwrite ($listado, "\r\n$usuariomd5".";"."$passmd5");
	  fclose($listado);
	  echo "Acabas de registrarte<br>";
	}
	elseif (isset ($login)) echo "No estás registrado.<br>";
  }
}
if ($novalido) echo "Usuario o contraseña en blanco.<br>"
?>
</BODY>
</HTML>

Como veis, el funcionamiento consiste en obtener el usuario y contraseña obtenidos en el formulario en md5, abrir el archivo, comprobar con el módulo parseador que coinciden, y en función de si el botón pulsado es el de registro o login, lanzar un mensaje u otro.

Iré perfeccionándolo y añadiendo funcionalidades, por ejemplo, sesiones por cookies. Recordad que es un sistema muy rudimentario y que por supuesto, no vale para páginas web con un volumen de usuarios registrados muy grande, sino para pequeños apartados de páginas web para los cuales crear una base de datos sería algo excesivo.

Descarga: Sist_login_v1.zip [Megaupload]
Un saludo!





Qué hay Dnews

11 10 2009

dnews

Qué hay Dnews es un programa de noticias para diseñadores. Se trata de un programa de televisión por web, con un formato ágil, útil y muy bien conducido por su presentadora, Daniela Henao. Me parece una forma muy amena de llevar una web. Echo en falta un listado de temas para consultar los contenidos de otros programas, seguro que ya están trabajando en ello, pero en cualquier caso, se trata de una web recomendable 100%.

Ir a Qué hay D-news

Fuentes de información





Más información sobre HTML 5

3 10 2009

Siguiendo con el tema del HTML 5, a pesar de ser recientemente publicadas sus especificaciones, a pesar de que solo las nuevas versiones de los navegadores (Chrome, Firefox, Opera…) son compatibles con todas las capacidades de la nueva versión, a pesar de que en el explorador más usado en la navegación web (Internet Explorer) todavía no se ha implementado su soporte; comienzan a surgir en Internet los primeros manuales, versiones beta de páginas como youtube o dailymotion en HTML5,  y demos de las nuevas capacidades de audio y video.

El blog woork ha publicado recientemente una cheat-sheet de HTML 5 para usarlo en combinación con la cheat-sheet de HTML 4. Muy útil.
Enlaces: Cheat-sheet HTML 4, cheat-sheet HTML 5

Juego desarrollado mediante el nuevo Canvas de HTML 5, por Paul Brunt.

Enlaces: Berts Breakdown

Además, según parece, el desarrollo de HTML 5 está ocasionando que se deje en un segundo plano el desarrollo del XHTML 2; y que en algunos casos, se plantée la hipótesis de que el surgimiento y desarrollo del HTML 5 provocará el fin del sistema operativo tradicional.

PCWORLD: HTML 5 Could be the OS Killer
SaltarIntro: Google impulsa el HTML5 en detrimento del XHTML 2
Tufuncion.com: X/HTML 5 vs XHTML 2

En definitiva, iremos viendo avances a lo largo de este fin de año 2009, y principios de 2010, de un mayor desarrollo de HTML 5 que puede derivar y ayudar, por ejemplo, al desarrollo de software y aplicaciones online. Quién sabe si hay cambios en el desarrollo de aplicaciones como Office Live, Google Wave, etc.

Me surge una pregunta final: ¿Qué pasará con Flash, SilverLight, y demás tecnologías de objetos Web?. Sólo el tiempo y las tendencias en diseño web resolverán mi duda.

Un saludo.





HTML 5

24 09 2009

html5

Desde hace tiempo el diseño web ha tenido que ir sufriendo las diferentes lecturas de los navegadores respecto al lenguaje de etiquetas de hipertexto que se utiliza para crear y poder visualizar los contenidos de las páginas web.

El Explorer empezó llevándose mal con el Netscape y ahora lo hace con todos los demás, particularmente hace mucho tiempo que tomé la determinación de prescindir de él, sin embargo sigo comprobando que cada uno de mis diseños se vea igual en él, porque sigue siendo una gran mayoría la que lo usa (aunque no creo que los motivos sean por haberlo elegido frente a otros).

Así que maqueto para firefox, porque así me aseguro que también funcionará para los demás navegadores importantes (safari, chrome, ópera…), y luego hackeo para explorer cuando es necesario.

Con el desarrollo del nuevo HTML 5, se está tratando al parecer, de conseguir minimizar todas estas incompatibilidades. Todavía se trata de una versión beta, aunque portales de la relevancia de youtube, ya han desarrollado su versión en este lenguaje.

No intentéis acceder a este enlace con explorer, como siempre será el último en subirse al carro…

La nueva versión HTML 5, trata de añadir semántica y usabilidad implícitas en sus etiquetas, para así de este modo eliminar ambigüedad  e incluso facilitar más si cabe la labor a los buscadores.

A la hora de maquetar una web, lo que hacemos hoy en día es dividir las zonas de contenido con divs, estas etiquetas son siempre la misma y las diferenciamos a través de la CSS.

HTML 5 crea nuevas etiquetas para diferenciar los “divs” más usados en el desarrollo de una página web, veamos algunas de las más importantes:

  • <section> – una sección dentro de la página.
  • <article> -  contenido independiente dentro de un documento.
  • <aside> – una nota dentro del texto (un consejo, una explicación..).
  • <header> – cabecera de una sección.
  • <footer> – pie de una sección y lleva la información de esa página o artículo.
  • <nav> – bloque de enlaces, lo que podría ser la navegación de la web.
  • <figure> – para asociar un contenido multimedia (foto, video,…) a un texto

Como podéis apreciar en el momento que se estandarice este lenguaje la posibilidad de indicar a los buscadores dónde buscar los contenidos que tiene que indexar son muchísimo mayores. Si bien, esto provocará un rediseño de todos aquellos sitios web que no quieran quedarse atrás.

Además de ser un avance para el SEO, parece ser que no todo va a quedar ahí.
Mayor rapidez, posibilidad de prescindir de flash para reproducir video (ver post en bitelia), mayor compatibilidad con Ajax, …

Las primeras respuestas indican un apoyo incondicional de empresas como Google, Opera, Mozilla y Apple, habrá que ver lo que sucede con Microsoft y su explorer.

En cuanto al ¿cuando?, me temo que las noticias no son muy prometedoras, os recomiendo que leais la entrevista realizada a  Ian Hickson, responsable del desarrollo del HTML 5, en la que habla del ¡¡¡2022!!

Fuente | Más información





Enlaces a tutoriales

17 09 2009

w3school

http://w3schools.com/ en esta página se pueden encontrar tutoriales desde HTML, CSS, XHTML, XML hasta Javascript, ASP ó PHP. Tutoriales que por supuesto siguen los estándares recomendados por la w3c.

otro enlace interesante es http://www.devguru.com/ aquí encontraremos también muy buenos manuales de CSS2 junto con otros como ASP, HTML, Javascript, etc.





Lightbox usando CSS

16 09 2009

css-lightbox

Lightbox es un script muy popular: imágenes emergentes que permite mostrar imágenes y contenido en ventanas que se superponen sobre todo el web. Este script y otros que tienen la misma funcionalidad están basados en frameworks Javascript, esta vez crearemos el efecto Lightbox pero sin necesidad de scripts adicionales, es decir, haciendo uso simplemente de CSS:

Un poco de teoría
Esta técnica fue originalmente explicada en Create a Lightbox effect only with CSS – no javascript needed en donde se explica que este efecto de mostrar un div que sobreponga todo el html, se puede conseguir con dos divs, uno de los cuales servirá para obscurecer todo el contenido del web y se mostrará en el 100% de la pantalla y el segundo en donde se mostrará el contenido deseado.

Creando el Lightbox

Entonces para crear nuestro Lightbox, creamos un html en donde incluimos dos divs que utilizamos para el efecto deseado.

<div id=”over”>Contenido Lightbox</div>
<div id=”fade”>&nbsp;</div>

El siguiente paso es crear los estilos para estos dos elementos, para ello creamos dos estilos: fadebox que se muestra en toda la pantalla con color de fondo negro al 80% de opacidad y overbox que se muestra en medio de la pantalla, estos dos elementos están inicialmente ocultos.

.fadebox {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.overbox {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
z-index:1002;
overflow: auto;
}

El siguiente paso es crear los botones para mostrar/ocultar el lightbox, para ello creamos dos enlaces que llamarán a dos funciones javascript, estas funciones simplemente cambiarán los estilos asociados a los dos divs para mostrarlo u ocultarlo.

<a href=”javascript:showLightbox();”>Show LightBox</a>
<a href=”javascript:hideLightbox();”>HideLightBox</a>

Unimos estos elementos ya ya tenemos nuestro Lightbox funcionando, pueden ver el ejemplo funcionando en CSS Lightbox.

Mejorando el Lightbox
Ahora esta funcionalidad es muy básica, se le podría agregar la posibilidad de definir las dimensiones de la ventana, para ello haría falta calcular el tamaño de la pantalla y según ello posicionarla. Otro de los adicionales que podríamos hacer es que cuando se haga click fuera de la ventana emergente se cierre el Lightbox, esto se hace agregando un detector de eventos para el click. Otra posibilidad es agregarle un efecto de transición al momento de mostrar la ventana.

Fuente principal de información





Hoja de referencia CSS

14 09 2009
Hoja de referencia CSS

Hoy dejaré caer por aquí una hoja con un resumen de las clases más frecuentes y sus propiedades en CSS, esto puede resultar muy útil cuando hay que editar una simple clase y no queremos abrir nuestro editor con la opción de autocompletar o simplemente no disponemos de él en ese momento. Conviene tener una hoja de estas cercas a la hora de diseñar y si es impresa incluso más cómodo.

http://lesliefranke.com/files/reference/csscheatsheet.html





Blog de diseño web

14 09 2009
Sobre me

About me

Me llamo Jelle DeTaeye. Me dedico al diseño y desarrollo web de forma profesional desde hace varios años. Realizo diseños y maquetas de páginas web respetando los estándares actuales  para así conseguir una  web optimizada con un diseño pesonalizado y exclusivo.

He realizado proyectos como freelance para empresas y particulares tanto en España como en el extranjero (Bélgica, Holanda y Francia), también he trabajado para empresas como Netprovider o EstudioDigital. Trabajando para estas empresas descubrí que el diseño freelance ofrece una mejor adaptación al cliente ahorrandole tiempo y ofreciendo un diseño más personalizado del que puede ofrecer una empresa.

Mi objetivo con este blog es recopilar información, enlaces, fuentes, pinceles, etc. Ya que este lugar me ha parecido el lugar idóneo para dejar esta información porque en el disc duro siempre se pierde algo, ya sea en el ordenador de la oficina, portátil u ordenador de casa.

Puede contactar conmigo através de mi página web: www.jelledetaeye.com