Para empezar tenemos que instalar Xampp
Lo podemos instalar desde su própria web, pues es software gratuito
descargar XAMPP
El su pagina web tenemos para descargar para:
- Windows
- Linux
- OS X
una vez descargado Xampp el se va alogar en C:XAMPP
dentro de esta carpeta nos encontramos muchas otras carpetas de apache, mysql, php etc
Pero hay una carpeta especial, onde vamos alojar todos nuestros proyectos.
Se llama htdocs
...
Creacion de nuestro proyecto
Dentro de la carpeta htdocs creamos nuestro proyecto.
en esta ocasion le vamos a llamar sitioWeb
Para ver lo que estamos haciendo, tendremos que abrir un navegador cualquier, pero antes hay que poner en marcha nuestro Servidor local
Encender nuestro servidor local
Para encender o poner a correr nuestro servidor, nos vamos a la aplicacion de xampp y le damos en start en las opciones de apache que es nuestro servidor local y tambien le damos en start en Mysql, para que nuestra base de datos este en funcionamiento
Como vemos nuestra aplicacion?
despues de poner a correr nuestro servidor local , vamos a nuestro navegador y escribimos localhost/ en seguida el nombre del proyecto.
En nuestro caso tendriamos que escribir localhost/sitioWeb
Visual studio code y estrutura de nuestro proyecto
Abrimos ahora un editor de codigo, puede ser cualquier editor, yo voy usar Visual studio code
Una vez abierto el visual studio code, abrimos la carpeta con el nombre de nuestro proyecto, en este caso es sitioWeb
Seguidamente creamos nuestro primero archivo con el nombre de index.php
cuando creamos un archivo, el visual studio code abre automaticamente su editor para que se pueda empezar a editar el documento
Creacion de la estrutura en html
Para crear la estrutura de un proyecto html solo tendremos que teclar el simbolo ! y automaticamente visual crea la seguinte estrutura
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Administracion de carpetas
Vamos a crear en nuestra carpeta sitioWeb las seguintes carpetas
- CSS es una carpeta onde vamos a guardar los estilos de nuestro sitio
- img Carpeta que va a guardar imagenes del sitio
- Templates Carpeta que se va encargar de guardar templates del sitio (pequenos trozos de codigo)
- Administrador Carpeta onde crearemos un sitio paralelo para administrar el primero
Templates de bootstrap
Para que nuestro proyecto se haga de una forma mas rápida, vamos a utilizar templates de bootstrap
Dejo el enlace de una pagina que tiene templates mas atrativos: Templates de bootstrap
NOTA Para usar los estilos de la página tendremos obviamente que descargar sus estilos
En la barra de navegacion de la pagina vamos al ultimo menu, lo extendemos y descargamos el fichero de estilos de la pagina con el nombre bootstrap.css para el fichero completo
O bootstrap.min.css para el fichero comprimido
Una vez descargado lo colocamos en nuestra carpeta CSS nel proyecto
LLamando nuestros estilos para el proyecto
Una vez tendo los estilos que queremos usar en nuestra carpeta CSS, para llamar estos estilos nos vamos a nuestro proyecto y entre las etiquetas <head> colocamos el link que nos conectara con el fichero en cuestion
quedaria asi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
</body>
</html>
Continuacion
continua leendo el siguinte capitulo
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias