Maquetando el index.php con HTML 5 y CSS 3

#codigo{ background:#F1F1F1;}

Lo prometido es deuda, hoy comenzaremos con una aplicación que nos dará el conocimiento básico tanto de PHP, MySQL, CSS3 y HTML 5 nuestra aplicación será algo sencillo pero que vamos a poder implementarla en nuestra web.
Este curso empieza con la programación en HTML 5 luego con la maquetación en CSS 3 y por ultimo pondremos nuestra página en marcha  con el lenguaje de servidor PHP y como base de datos MySQL .
Lo primero que tenemos que tener en nuestro computadora es un servidor, que interprete código php y un gestor de bases de datos en este caso yo utilizo MySQL . La instalación del servidor es algo sencillo por eso no voy a explicar cómo instalarlo, porque son software que se instalan como cualquier otro programa en este tutorial yo utilizare como servidor el xampp aunque también hay muchos otros que funciona bien como es  wampserver2.2 estos software lo cómodo de trabajar con ellos es que no necesitamos experiencia alguna para instalarlo solo es lo típico de los programas lo descargamos les damos a instalar y luego siguiente y siguiente.
Pero bueno en caso de que no lo tengas instalado y no sepas como instalarlo te recomiendo que busque información en internet. 
¿Cómo comprobar que tengo un servidor instalado en mi ordenador?
Sencillo solo abre una ventana de tu navegador y en la barra de direcciones escribe http://localhost y les da a enter , en caso de que lo tengas instalado se te mostrara una ventana con la información de la versión de php que tienes instalado en caso contrario te presentara alguna error o algo parecido. 
Si usas el XAMPP como yo entonces tendría que aparecerte la siguiente pantalla

Bueno entonces empecemos con el curso
Para ello lo primero que vamos hacer es crear una carpeta que se llame curso
Dentro de esta carpeta vamos a crear estos archivos

Index.php
Home.php
Config.php
Session.php
salir.php
conexion.php
style.css
entrar.php
enviar.php
 Bueno ya tenemos creados nuestro 9 archivos dentro de la carpeta “curso” ahora lo primero que vamos hacer es abril al index.php con nuestro editor de texto y empezamos a escribir código HTML 5.
Si leyeron el curso anterior de HTML y CSS3 ya sabrán mas o menos cual es la estructura lo primero que vamos hacer es escribir la estructura de nuestro index.php que quedaría de la siguiente manera.
<!DOCTYPE html>
<html lang=”es”>
<head>
                <meta charset=”utf-8″ />
                               <title>Bienvenidos a mi web </title>
                </head>
<body>
</body>
</html>
Una vez creado el cuerpo de nuestro index.php dentro de la etiquetas <head></head> vamos a incluir el archivos CSS que creamos que se llama style.css, para ello lo enlazamos de la siguiente manera <link rel=”stylesheet” href=”style.css” type=”text/css” />.
Una vez enlazada nuestra hoja de estilo en las etiquetas <body></body> vamos a crear las etiquetas <header></header> donde pondremos la cabecera de nuestra web una <section></section> la que contendrá nuestro formulario de registro y un <footer></footer> para el pie de página. Ya con todo estas etiquetas que le agregamos a nustro index.php nuestro código quedaría de la siguiente manera.

<!DOCTYPE html>
<html lang=”es”>
<head>
        <meta charset=”utf-8″ />
             <title>Bienvenidos a mi web </title>
       <link rel=”stylesheet” href=”style.css” type=”text/css” />.
  </head>
<body>
      <header>
      </header>
       <section>
      </section>
        <footer>
      </footer>
</body>
</html>
Ahora vamos a introducir nuestro formulario para que los usuarios si están registrados puedan entrar o si no lo están puedan darse de alta en nuestro sitio.
Lo primero es crear el formulario de entrada. Para ellos nos dirigimos a las etiquetas <header></header> y creamos un <form></form> para escribir nuestro input el código seria el siguiente.
<form action=”entrar.php” method=”post”>
                <div> <label>Correo:</label> <input type=”email” name=”correo”/> </div>  
                <div><label>Password:</label> <input type=”password” name=”pass”/> </div>
</form>
Bueno ese sería el formulario de entrada de los usuarios que ya están registrados, ahora vamos a crear el formulario de registro para los que llegan a nuestra web y aun no están registrados. Para ello nos situamos dentro de las etiquetas <section></section> vamos a crear un </form> </form> donde vamos a incluir los campos de texto para que los usuarios se puedan registrar.
Como es un sistema sencillo básicamente solo vamos a tener 5 campos. Nombre, Apellido, Correo, Password, y repetir Password, con esto bastaría, entonces procedemos a crear nuestros campos de texto que el código html seria el siguiente.
<aside id=”registrar”><div id=”h3″>
        <h3>Registrarme en esta web</h3></div>
           <div>Nombre:</div>
            <div><input placeholder=”Tu nombre” type=”text” name=”nombre” id=”input2″/></div>
            <div>Apellido:</div>
            <div><input placeholder=”Tu apellido” type=”text” name=”apellido” id=”input2″/></div>
            <div>Correo:</div>
            <div><input placeholder=”Correo electronico” type=”email” name=”correo” id=”input2″ /></div>
            <div>Password:</div>
            <div><input placeholder=”Contrase&ntilde;a” type=”password” name=”pass” id=”input2″ /></div>
            <div>Repetir Password:</div>
 <div><input placeholder=”Repetir contrase&ntilde;a” type=”password” name=”repass” id=”input2″ ></div>
 <div id=”registrarme”><input type=”submit” value=”REGISTRAR” id=”input-entrar” /></div>      
</aside>

Si se fijan cada  etiqueta div le he ido dando un id esto es para cuando vallamos a maquetar referirnos a ella de una forma directa atraves de este ID bueno ahora nuestro código completo para nuestro index.php sería el siguiente,
Index.php 
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8″ />
<title>Bienvenidos a mi web </title>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
</head>
<body>
<header>
<div id=”titulo”> <h1>Bienvenidos a mi sitio web</h1> </div>
<div id=”entrar”>
<form action=”entrar.php” method=”post”>
<label>Correo:</label> <input placeholder=”Correo electronico” type=”email” name=”correo” id=”input1″/>
<label>Password:</label> <input placeholder=”Contrase&ntilde;a” type=”password” name=”pass” id=”input1″/>
<input type=”submit” value=”ENTRAR” id=”input-entrar” /> 
 </form>
 </div>
 </header>
 <section>
<aside id=”registrar”><div id=”h3″>
             <h3>Registrarme en esta web</h3></div>
             <div>Nombre:</div>
            <div><input placeholder=”Tu nombre” type=”text” name=”nombre” id=”input2″/></div>
            <div>Apellido:</div>
            <div><input placeholder=”Tu apellido” type=”text” name=”apellido” id=”input2″/></div>
            <div>Correo:</div>
            <div><input placeholder=”Correo electronico” type=”email” name=”correo” id=”input2″ /></div>
             <div>Password:</div>
            <div><input placeholder=”Contrase&ntilde;a” type=”password” name=”pass” id=”input2″ /></div>
            <div>Repetir Password:</div>
            <div><input placeholder=”Repetir contrase&ntilde;a” type=”password” name=”repass” id=”input2″ /></div>
            <div id=”registrarme”><input type=”submit” value=”REGISTRAR” id=”input-entrar” /></div>      
            </aside>
            </section>
<footer>
Copyright @2012
</footer>
</body>
</html>
Si todo va bien lo visualizamos en el navegador y todo iría quedando de cómo aparece en la imagen


Bueno ahora si llega lo más interesante vamos a darle estilos con CSS3 o mejor dicho a maquetar nuestra página web, para poner todo en orden.
Lo primero que vamos a establecer son los márgenes del body y para ello lo hacemos con el siguiente código.
*{
                margin:0px;
                padding:0px;
               
                }
Luego empezamos por el primer elemento de nuestra página que es el <header> </header>
A este les vamos a decir que tenga un fondo #F9F9F9 es casi blanco  un margin de 0em un tamaño máximo de un 100% un alto minimo de 70px les indicamos que el border de la parte de abajo del DIV sea de 1px y de color #F1F1F1 y que alinea todo el texto al centro. El código es el siguiente.
                    header{
                               background:#F9F9F9;
                               margin:0em;
                               min-height:70px;
                               border-bottom:solid 1px #F1F1F1;                        
                               max-width:100%;
                               text-align:right;
                               }
en este header lo primero que nos aparece es un DIV con un id=”titulo” lo que vamos hacer es establecerle los estilos a este div . Primero les decimos que el color de letras sea naranja con color:#F90; luego que tenga un tamaño de letras de 12 px un tamaño máximo de 500px un margin a todos los lados de 20px que flote a la izquierda y que el alto minimo es de 2em entonces nuestro código sería el siguiente.
                      #titulo{
                               color:#F90;
                               font-size:12px;
                               max-width:500px;
                               margin:20px;
                               float:left;
                               min-height:2em;
                               }
Ahora establecemos los atributos para el DIV donde esta nuestro formulario de inicio de sesión que tiene un id=”entrar”  En este caso lo primero que le indicamos es que el color de las letras sea azul un margin de arriba de 20px un tamaño máximo de 500px y que flote a la derecha, nuestro código css seria el siguiente.
                #entrar{
                               color:blue;
                               margin-top:20px;
                               max-width:500px;
                               float:right;                                                        
                               }
Ahora seguimos con los input lo cual tienen un id=”input1” el código de este sería el siguiente
Primero les establecemos el tamaño de 130px luego les quitamos las esquinas a los bordes y la ponemos redondeadas, luego le establecemos un alto de 25px y un borde de 1 px de color azul.
A ese mismo input le creamos otro id del mismo nombre pero en este caso les ponemos después de dos punto la palabra focus, estos es para que cuando les demo clic los input tomen el efecto de resplandor.  Entonces nuestro código css seria el siguiente
                                  #input1{
                                               width:130px;
                                               border-radius:3px;
                                               height:25px;
                                               border:solid 1px #0CF;                                
                                               }
                          #input1:focus{
                                               box-shadow:0 0 5px #0CF;
                                               border:solid 1px #0CF;
                                               }
También le establcemos los atributos css al botón submit que pulsaremos para entrar nuestro al igual los input este tendrá un atributo pero en este caso será hover. El código css seria el siguiente.
                           #input-entrar{
                                               width:100px;
                                               color:blue;
                                               border-radius:3px;
                                               margin-right:10px;
                                               height:25px;
                                               border:solid 1px #F90;
                                               }
                  #input-entrar:hover{
                                               background:#F90;
                                               border:solid 1px #0CF;
                                               }

Una vez ya hemos terminado con nuestra cabecera entonces procedemos al section donde se encuentra el formulario de registro de usuarios. A este les establecemos los siguiente parámetros en css.
Como el <aside> </aside> es que contiene todo el código de nuestro formulario y en el hay un <aside id=”registrar”> a este es que le establecemos los valores CSS de la siguiente manera.
                #registrar{
                               background:#F9F9F9;
                               border-radius:5px;
                               border:solid 1px #f1f1f1;
                               color:#66F;
                               margin-top:40px;
                               margin-right:20px;
                               padding:20px;
                               padding-left:50px;
                               float:right;
                               width:300px;
                               background: -moz-linear-gradient(top,  #F8F8F8 0%, #FFF 0%, #DADADA 100%);
                               background: -webkit-gradient(linear, left top, left bottom,                       color-stop(0%,#DADADA), color-stop(0%,#FFF), color-stop(100%,#055a8f));      
                               }
En este caso he agregado algo nuevo que son los degradados con CSS 3 si se fijan bien no son muy difíciles para hacerlo solo hay que practicarlo para poder aprendérnoslo de forma rápida .
Si lo han notado dentro del <aside></aside> tenemos este DIV <div id=”h3”> a este le establecemos los siguiente parámetros CSS 3
         #h3{
                border-bottom:solid 1px #F1F1F1;
                text-align:center;
                color:#66F;
                padding-bottom:10px;                                
            }
Ahora establecemos los atributos de los input de registro al cual le asignamos un id=”input2” el código css3 para estos sería el siguiente.
                #input2{
                               width:250px;
                               height:30px;
                               border:solid 1px #F1F1F1;
                               border-radius:3px;
                               }
                #input2:focus{
                                     border:solid 1px #0CF;
                                     box-shadow:0 0 10px #0CC;
                                    -moz -box-shadow:0 0 10px #0CC;
                                    -ms- box-shadow:0 0 10px #0CC;
                                     -o- box-shadow:0 0 10px #0CC;
                                    -webkit- box-shadow:0 0 10px #0CC;
                                   }

A estos también les establecimos el efecto de resplandor para cuando le den clic se vean más bonitos.
Ahora solo nos farta el </footer></footer> y a este le asignamos los siguiente valores.
                                   footer{
                                               border-top:solid 1px #f1f1f1;
                                               position:fixed;
                                               bottom:0px;
                                               width:100%;
                                               height:100px;
                                               font-size:12px;
                                               text-align:center;
                                               color:blue;
                                               background: #DADADA; /* Old browsers */
                                               background: -moz-linear-gradient(top,  #F8F8F8 0%, #FFF 0%,         #DADADA 100%);
                                               background: -webkit-gradient(linear, left top, left bottom,                       color-stop(0%,#DADADA), color-stop(0%,#FFF), color-stop(100%,#055a8f));
}
Con todo esto hecho ahora vemos el codigo CSS3 completo listo para utilizarlo
Style.css
————————————————————————————————————-
*{
    margin:0px;
    padding:0px;
    }
header{
    background:#F9F9F9;
    margin:0em;
    min-height:70px; 
    border-bottom:solid 1px #F1F1F1;                        
    max-width:100%;
    text-align:right;
         }
 #h3{
     border-bottom:solid 1px #F1F1F1;
     text-align:center;
     color:#66F;
     padding-bottom:10px;                                
      }
#registrar{
     background:#F9F9F9;
     border-radius:5px;
     border:solid 1px #f1f1f1;
     color:#66F;
     margin-top:40px;
     margin-right:20px;
     padding:20px;
    padding-left:50px;
    float:right;
    width:300px;
    background: -moz-linear-gradient(top,  #F8F8F8 0%, #FFF 0%, #DADADA 100%);
   background: -webkit-gradient(linear, left top, left bottom,                       color-stop(0%,#DADADA), color-stop(0%,#FFF), color-stop(100%,#055a8f));      
    }
#registrarme{
    margin-top:10px;
  } 
 #input2{
    width:250px;
    height:30px;
    border:solid 1px #F1F1F1;
   border-radius:3px;
     }
#input2:focus{
       border:solid 1px #0CF;
       box-shadow:0 0 10px #0CC;
       -moz-box-shadow:0 0 10px #0CC;
      -o-box-shadow:0 0 10px #0CC;
      -ms-box-shadow:0 0 10px #0CC;
      -webkit-box-shadow:0 0 10px #0CC;   
      }
 #titulo{
      color:#F90;
      font-size:12px;
      max-width:500px;
      margin:20px;
      float:left;
      min-height:2em;
     } 
 #entrar{
       color:blue;
       background:;
       margin-top:20px;
       max-width:500px;
       float:right;                                                        
          }
 #input1{
       width:130px;
        border-radius:3px;
        height:25px;
        border:solid 1px #0CF;                                
        }
#input1:focus{
        box-shadow:0 0 5px #0CF;
        border:solid 1px #0CF;
      }
#input-entrar{
       width:100px;
       color:blue;
       border-radius:3px;
       margin-right:10px;
       height:25px;
      border:solid 1px #F90;
      }
#input-entrar:hover{
        background:#F90;
        border:solid 1px #0CF;
     }
                                              
 footer{
     border-top:solid 1px #f1f1f1;
     position:fixed;
     bottom:0px;
     width:100%;
      height:100px;
     font-size:12px;
     text-align:center;
     color:blue;
     background: #DADADA; /* Old browsers */
     background: -moz-linear-gradient(top,  #F8F8F8 0%, #FFF 0%, #DADADA 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DADADA), color-stop(0%,#FFF), color-stop(100%,#055a8f)); 
}
———————————————————————————————————-
Aquí les dejo la imagen de la apariencia que tiene que tener nuestro index.php  en la siguiente entrada vamos a maquetar la parte donde pueden entrar los usuarios y dejar sus comentarios espero y me acompañen en  el próximo post.

Gracias y saludos nos vemos en la proxima entrada

Parte 2 de nuestro curso creando el home.php

No Responses

Deja un comentario

Tu dirección de correo electrónico no será publicada.