viernes, 4 de abril de 2014

Estructura Web con CSS

Estructura básica de la página web que albergará la aplicación.

La intención del siguiente código es crear una página web muy básica estructurada con css. Esta página nos servirá de esqueleto para la aplicación. Sobre esta base se ira modificando el diseño dependiendo de las necesidades que encontremos durante el proceso de creación de la aplicación.

El primer paso es crear, desde el mismo notepad++,  un nuevo archivo donde escribiremos el siguiente código HTML y lo guardaremos con el nombre: basicstructure.html

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Basic Structure</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
   <div id="wrapper">
<div id="header">< HEADER ></div>
<div id="nav">< NAV ></div>
       <div id="container">
<div id="content">< CONTENT ></div>
  <div id="aside">< ASIDE ></div>
  </div>
   </div>
   <div id="footer">< FOOTER ></div>
</body>

</html>

Una vez creado el HTML necesitaremos crear un nuevo archivo donde definiremos los css necesarios para estructurar la página web. Este nuevo archivo lo guardaremos con el nombre: style.ccs

html {
overflow: auto;
height: 100%;
}

body {
height: 100%;
text-align:center;
}

#wrapper {
width: 90%;
margin: 0 auto;
overflow: hidden;
height: auto;
min-height: 100%;
}

#header {
        background-color: #FFCC00;
        min-height:150px;
        margin-bottom: 10px;
border-radius: 8px 8px 8px 8px;
}

#nav {
background-color: #FFFF00;
min-height: 50px;
margin-bottom: 10px;
border-radius: 8px 8px 8px 8px;
}

#container {
background-color: #EBE9EA;
border-radius: 8px 8px 8px 8px;
}

#content {
min-height: 100px;
float: left;
width: 75%;
background-color: #C9C9C9;
margin-bottom: 10px;
border-radius: 8px 8px 8px 8px;
}

#aside {
min-height: 100px;
float: right;
width: 23%;
background-color: #6699FF;
margin-bottom: 10px;
border-radius: 8px 8px 8px 8px;
}

#footer {
clear:both;
width: 90%;
        height: 50px;
background-color: #FF0000;
margin: 0 auto;
border-radius: 8px 8px 8px 8px;
}

En la definición del css he tenido en cuenta, después de pelearme con muchos ejemplos, que el pie de página (footer) actue como tal e independientemente del tamaño de la información presentada en la parte principal de la web (content),  el pie ni quede en medio de la pantalla si hay poca información, ni quede anclado a cierta distancia y quede machacado al presentar demasiada información.

martes, 1 de abril de 2014

El primer PHP

Para escribir los scripts de php, al menos de momento, estoy utilizando el Notepad++. Esta aplicación se puede bajar de forma gratuita desde el sitio oficial de Notepad++.

Para que los scripts de php funcionen correctamente será necesario que grabemos los archivos nuevos en la carpeta www de la instalación de WAMP. Si solo hemos aceptado los valores por defecto que han aparecido durante la instalación de WAMP, tendría que existir un c:\wamp y dentro de este la carpeta www.

<html>
   <head>
    <title>Test PHP</title>
   </head>
   <body>
       <?php echo 'Mi primer php'; ?>
  </body>
</html>


Podemos grabar este fichero como test.php. Para ver nuestro primer php en funcinamiento y despues de arrancar WAMP solo tendremos que abrir Chrome o cualquier otro explorador y escribir la URL: http://localhost/test.php.

lunes, 31 de marzo de 2014

Instalación de WAMP

Antes de hacer nada y para poder empezar a trabajar con PHP necesitamos tener instalado WAMP.

WAMP o WAMPSERVER no es más que un pack que incluye todo lo necesario para poder ejecutar un servidor web en Windows. Este pack incluye el servidor Apache, PHP, MySQL y software adicional como el administrador de Bases de Datos PHPMyAdmin entre otros.

Para realizar la instalación primero tendremos que descargarlo desde el sitio web de WAMPSERVER. El último paso antes de realizar la instalación es comprobar, tal y como se avisa en el sitio de descarga de WAMP, si tenemos instalado el Visual C++ 2010 SP1. En caso contrario podremos acceder al link que se nos proporciona para realizar la instalación. Una vez descargado e instalado Visual C++ y despues de realizar la descarga de WAMP ya podemos instalar este último.

La instalación es muy sencilla y solo hace falta ir aceptando los pasos que se muestran, no es necesario cambiar nada.

Para iniciar el WAMP, podemos hacerlo tanto desde el icono del escritorio como desde el menú de Inicio -> Todos los programas -> WampServer -> Start WampServer. Posiblemente aparezca el aviso de seguridad. decimos que Sí y se abrirá el programa. Para comprobar que se ha ejecutado correctamente se debería ver, en la parte derecha de la barra de tareas, un icono con una W mayúscula. En principio la W aparece en rojo, pasa a naranja y finalmente se queda en verde.

Eso significa que todos los servicios se han iniciado correctamente y ya podremos empezar a trabajar.

Para comprobar que el servidor está bien instalado y que funciona correctamente podemos hacer click sobre la W una vez está de color verde y elegir la opción de Localhost. De la misma manera podemos abrir un navegador como Chrome, Firefox o cualquier otro y escribir la URL: http://localhost/. De cualquiera de estas dos maneras abriremos la página de inicio del WAMP.

Si vemos esta página correctamente, todo funciona bien.

Desde la misma W también podemos hacer click sobre la opción de phpMyAdmin para gestionar las Bases de datos con las que vayamos a trabajar.

jueves, 27 de marzo de 2014

La idea inicial

La intención de este blog es ir anotando todo aquello que voy necesitando, encontrando, investigando y probando para conseguir crear una aplicación Web, no demasiado complicada, con PHP.

Seguro que mucho de lo que aquí anote se puede mejorar. Soy inexperto y como muchos otros inexpertos me dedico a buscar, a copiar y pegar y ver que pasa luego. La mayoria de las veces se repite el mismo proceso hasta que das con aquello que realmente necesitabas y cuando ya lo has encontrado y consigues que funcione y crees que has aprendido un poco, entonces te encuentras con que todo eso se puede mejorar.

Por lo tanto me vais a tenir que disculpar porque seguro que repetiré cosas, las haré y las desharé más de una vez. Puede que vuelva varios pasos atrás o que inserte o modifique cosas nuevas...no lo se, ya me lo encontraré por el camino.