Título: [Guia] Creacion de una pagina con BD Publicado por: BigBear en 23 Enero 2015, 16:47 pm [Titulo] : Creacion de una pagina con BD
[Autor] : Doddy Hackman [Temario] --========================================================-- 0x00 : Introduccion 0x01 : Creacion del diseño de la pagina 0x02 : Creacion un un logo estilo GTA 0x03 : Creacion de un footer animado 0x04 : Creacion de botones en Fireworks 0x05 : Creacion de un menu desplegable 0x06 : Creacion un panel de administracion --========================================================-- 0x00 : Introduccion En este manual vamos a ver como hacer una pagina web en PHP que tengo un sistema de noticias y un panel de administracion y para poder entender este manual necesitan conocer HTML,CSS y PHP por lo menos de forma basica para entender su contenido y tambien necesitan los siguientes programas : * Adobe Dreamweaver * Adobe Photoshop * Adobe Fireworks * XAMPP O Easy PHP * Anim-FX * GifCam * Un pack de imagenes que pueden descargar aca (http://doddyhackman.webcindario.com/descargas/pack_manual.rar) que contiene los fondos que necesitan en el manual y los ultimos dos programas Cuando descarguen el pack copian los datos a una carpeta llamada "images" para usar durante el manual. 0x01 : Creacion del diseño de la pagina Ahora vamos a hacer un diseño como este : (http://doddyhackman.webcindario.com/images/dream_segunda_fase.jpg) Para eso vamos a tener que seguir los siguientes pasos : Descargamos el pack que esta en la sección de "Requisitos" que contiene las imagenes necesarias para hacer la pagina de ejemplo. Iniciamos el Dreamweaver y creamos una nueva pagina como PHP , una vez creado guardamos el proyecto con formato PHP , el directorio puede ser cualquiera. Despues copiamos en el directorio de la pagina la carpeta "images" del pack en el directorio que eligieron para guardar la pagina. Ahora cambiamos volvemos a Dreamweaver y cambiamos el titulo de la pagina "Documento sin título" por "Plantilla". Despues agregamos <center> entre el inicio y final del <body> para centrar la pagina. Ahora nos vamos a "Insertar -> Objectos de diseño -> Etiqueta DIV" y despues ponemos como nombre de clase "container" y le damos a "Nueva regla" , le damos al boton "aceptar" a la ventana que se nos aparece , como es la primera vez que usamos un div nos va a preguntar con que nombre guardamos el css , entonces ponganle "style.css" y guarden , despues de eso nos va a aparecer una ventana nueva , en esa ventana nos vamos a la categoria "Cuadro" y ponemos las dimensiones 1050x768 , 1050 de ancho y 768 de largo , le damos al boton "aceptar" y de nuevo aceptar a la ventana que se nos aparece , despues borren el texto por defecto del container. Todo como en las imagenes : (http://doddyhackman.webcindario.com/images/dream_cuadro_1.jpg) (http://doddyhackman.webcindario.com/images/dream_cuadro_2.jpg) (http://doddyhackman.webcindario.com/images/dream_cuadro_3.jpg) (http://doddyhackman.webcindario.com/images/dream_cuadro_4.jpg) (http://doddyhackman.webcindario.com/images/dream_cuadro_5.jpg) Para crear el banner hagan los mismos pasos pero ponganle de nombre "banner" y las dimensiones "1024x100" , ponganle 3 px de margen a todos y de relleno pongan los valores "5,10,5,10" seguidos , tambien pongan la opcion "flotar" en alineacion izquierda. Como en la imagen : (http://doddyhackman.webcindario.com/images/dream_banner.jpg) * Cambien el texto por defecto por "Banner" Ahora para crear el contenido vamos a crear otro div con el nombre de "box" con las dimensiones 1024x500 , ponganle 3 px de margen a todos y de relleno tambien 5,10,5,10 , tambien pongan alineacion izquierda. Como en la imagen : (http://doddyhackman.webcindario.com/images/dream_box.jpg) * Borren el texto por defecto Despues de insertar el box vamos a agregar otro div que sera el primer menu de categorias o lo que sea , de nombre pongan "menu" y tendra las dimensiones 200x500 , alineacion izquierda , margen 3 a todo y de relleno pongan 5,10,5,10 Como en la imagen : (http://doddyhackman.webcindario.com/images/dream_menu.jpg) * Cambien el texto por defecto por "Menu" Ahora para crear lo mas importante que es el body vamos a tener que crear otro div nuevo con el nombre de "body" con las dimensiones 566x500 , alineacion izquierda , margen 3 a todo , y de relleno solo pongan el primero que seria 5 los demas lo dejan en blanco. Como en la imagen : (http://doddyhackman.webcindario.com/images/dream_body.jpg) * Cambien el texto por defecto por "Body" Ahora para crear la parte de afiliados vamos a crear otro div con el nombre de "otromenu" , las dimensiones serian de 200x500 , alineacion izquierda , margen 3 para todo y de relleno 5,10,5,10 Como en la imagen : (http://doddyhackman.webcindario.com/images/dream_otormenu.jpg) * Cambien el texto por defecto por "OtroMenu" Despues de eso ahora vamos al div final que es el footer , entonces creamos otro div con el nombre de "footer" con las dimensiones 1024x100 , margen 3 a todos menos al inferior que sera 10 , como relleno ponemos 5,10,5,10 y tambien le ponemos alineacion izquierda. Como en la imagen : (http://doddyhackman.webcindario.com/images/dream_footer.jpg) * Cambien el texto por defecto por "Footer" Ahora comenzamos con el codigo CSS , primero vamos a la pestaña de style.css y en la parte del codigo cambien en las etiquetas banner,box,menu,body,otromenu y footer el "height" por "min-height" esto nos va a ayudar que cuando el texto sobrepase el div , el div se alargara. Despues agregamos el siguiente codigo al archivo CSS para poner una imagen de fondo : Código
En las etiquetas banner,box,footer agreguen el siguiente codigo para darle bordes a los div y una imagen de fondo : Código
Si hacemos F12 para ver como nos queda la pagina se nos deberia ver algo asi en el navegador : (http://doddyhackman.webcindario.com/images/dream_primera_fase.jpg) Ahora agregamos el siguiente codigo al archivo CSS , para poder agregar el cuadro en el que estaran las categorias,posts y los afiliados : Código
Despues de eso agregamos el siguiente codigo entre las etiquetas "menu" del archivo PHP que vendria a ser las "Categorias" : Código Ahora vamos a por los afiliados , vamos a agregar el siguiente codigo entre las etiquetas "otromenu" en el codigo del archivo PHP : Código Despues vamos a agregar el siguiente codigo entre las etiquetas "body" para colocar noticias de ejemplo en el archivo PHP : Código Todo el codigo HTML del archivo PHP nos deberia haber quedado algo asi : Código
Si hicieron todo bien la pagina les deberia haber quedado algo como esto : (http://doddyhackman.webcindario.com/images/dream_segunda_fase.jpg) Eso seria todo por ahora en el diseño. 0x02 : Creacion un logo estilo GTA Para crear un logo estilo GTA en Photoshop deben instalar primero la fuente necesaria del siguiente link (http://www.dafont.com/es/pricedown.font?text=pricedown) , para instalar la fuente descargado solo arrastran y copian los archivos del comprimido en el directorio "c:/windows/fonts de Windows" , despues de eso cargamos Photoshop y seguimos los siguiente pasos : Creamos un proyecto con las dimensiones 995x108 y fondo transparente como en la siguiente imagen : (http://doddyhackman.webcindario.com/images/photo_logo_1.jpg) Una vez creado ponganle de fondo una imagen cualquiera en mi caso recorto una imagen con paint y lo copio en el proyecto quedando algo asi : (http://doddyhackman.webcindario.com/images/photo_logo_2.jpg) Despues hacemos click en la opcion "Texto horizontal" y seleccionamos el tipo de fuente "Pricedown" , tamaño de letra 80 pt y tipo de color #ffffcc , entonces una vez hecho esto agregamos el texto "Probando" con la herramienta "Texto horizontal" seleccionada , todo deberia verse algo asi : (http://doddyhackman.webcindario.com/images/photo_logo_3.jpg) Ahora hacemos click derecho en la capa llamada "PROBANDO" que es el texto creado y hacemos click en "Opciones de Fusion" , entonces activamos el estilo "Trazo" , de tamaño pongan 3 y pongan de color #000000 , entonces hagan click en "OK" y les deberia quedar algo asi : (http://doddyhackman.webcindario.com/images/photo_logo_4.jpg) (http://doddyhackman.webcindario.com/images/photo_logo_5.jpg) Ahora tenemos que seleccionar la "Capa 1" para ir despues a "Edicion->Contornear" , ponemos de anchura 8px y de color #ffffcc , le damos a "OK" y se deberia ver algo asi : (http://doddyhackman.webcindario.com/images/photo_logo_6.jpg) (http://doddyhackman.webcindario.com/images/photo_logo_7.jpg) Como detalle final sino les gusta la posicion del texto pueden mover el texto al centro o como mas les guste , en mi caso queda asi : (http://doddyhackman.webcindario.com/images/photo_logo_8.jpg) Para terminar guardamos el proyecto como "png" y volvemos a la plantilla creada con Dream y nos vamos al div "banner" , borramos el texto "Banner" y insertamos el logo creado con Photoshop , para eso nos vamos a "Insertar->Imagen" y ponemos en la ventana que nos abre la ruta de la imagen. Nos deberia quedar algo asi : (http://doddyhackman.webcindario.com/images/photo_logo_9.jpg) 0x03 : Creacion de un footer animado Cargamos el programa "Anim-FX" y llenamos los campos de la siguiente forma : Text 1 : TEST 1 2 : TEST 2 3 : TEST 3 4 : TEST 4 5 : TEST 5 Tipo de efecto : flash Tamaño de letra : 145 Color de letra : El color es celeste claro que vendria a ser 52FEFD Se les deberia ver algo asi : (http://doddyhackman.webcindario.com/images/footer_1.jpg) Ahora cargamos el GifCam y hacemos click en "Rec" sobre la zona de la animacion que quieren grabar. Despues de terminar de grabar hacemos click en "Stop" y despues en "Save" para despues grabar el gif donde quieran Una vez terminado todo nos vamos al proyecto de dream y en el div footer borramos el texto "Footer" y insertamos el gif animado , para eso nos vamos a "Insertar->Imagen" y ponemos en la ventana que nos abre la ruta del gif. Se les deberia ver algo asi : (http://doddyhackman.webcindario.com/images/footer_2.jpg) Eso seria todo el footer animado. 0x04 : Creacion de botones en Fireworks Para crear un boton en Fireworks primer cargamos el programa y hacemos click en crear un nuevo "Documento de Fireworks (PNG)" con las dimensiones de 100x50 y de colo de lienzo "transparente". Les deberia quedar asi : (http://doddyhackman.webcindario.com/images/boton_fireworks_1.jpg) Una vez hecho esto vamos al cuadro de herramientas y seleccionamos "Rectangulo redondeado" de la herramienta "Rectangulo" que se encuentra en la sección "Vector". Ya seleccionado creamos un rectangulo redondeado en la zona de trabajo del color que quieran , para ponerle un estilo primero seleccionen el rectangulo creado y despues seleccionen el estilo que quieran en el cuadro de herramientas derecho llamado "Activos->Estilos" quedando todo asi : (http://doddyhackman.webcindario.com/images/boton_fireworks_2.jpg) (http://doddyhackman.webcindario.com/images/boton_fireworks_3.jpg) (http://doddyhackman.webcindario.com/images/boton_fireworks_4.jpg) En mi caso elegi el estilo mas parecido a Tron y desactivo el filtro "Sombra" porque no me gustaba como quedaba , los filtros estan en la parte de abajo del programa y se puede ver cuando estan aplicando el estilo. Como ven ya tenemos la forma del boton , ahora vamos a ponerle texto , entonces seleccionamos la herramienta "herramienta de texto" para escribir "click" sobre el boton redondeado con el color que quieran , pueden mover el texto de posicion con la "herramienta puntero" si no les gusta como quedo. Les deberia quedar algo asi , yo en mi caso elegi letra blanca : (http://doddyhackman.webcindario.com/images/boton_fireworks_5.jpg) Para terminar vamos a "Archivo->Guardar como" y guardamos el boton con el nombre que quieran , el formato que tendra sera de PNG. Para usarlo en la plantilla que creamos con Dream vamos al div "otromenu" , borramos los links de ejemplo y pongan el siguiente codigo entre los div : Código Recuerden que el boton creado tiene que estar en una carpeta llamada images sino nunca se va a encontrar el boton. Cambien petardas por el link que quieran y cambien click.png por el verdadero nombre y ruta del boton. En mi caso use tres veces esa linea de codigo como ejemplo. Les deberia quedar algo asi : (http://doddyhackman.webcindario.com/images/boton_fireworks_6.jpg) (http://doddyhackman.webcindario.com/images/boton_fireworks_7.jpg) Y en el navegador se deberia ver asi : (http://doddyhackman.webcindario.com/images/boton_fireworks_8.jpg) Eso seria todo con los botones. 0x05 : Creacion de un menu desplegable Bueno para hacer esto volvemos a la plantilla inicial con Dream y borramos los links de ejemplo que estan la sección de categorias justamente en el div "menu" y agregamos un <br/> antes del </div> y otro despues del <h3> de categorias , y para terminar insertamos un menu vertical de la siguiente forma : Insertar->Spry->Barra de menus de Spry y en la ventana que aparece seleccionamos "Vertical". Deberiamos ver algo asi : (http://doddyhackman.webcindario.com/images/menu_dream_1.jpg) Primero vamos hacer click en el menu creado y desde ahi cambiar los textos de todos los "elementos" por "test" , cambien tanto en la columna 1 o en la columna 2 si es que se desplega otro menu a partir de ese. Despues para poner un vinculo solo lo hacen desde la casilla correspondiente que esta abajo de la de "texto" , en mi caso solo voy a poner un link y va a ser en el "test2" Deberian ver algo asi : (http://doddyhackman.webcindario.com/images/menu_dream_2.jpg) Ahora vamos a tunear el menu con colores raros con las siguientes pasos : Para empezar seleccionamos el menu vertical y desde la sección de "Estilos CSS" hacemos click en "Actual" para despues seleccionar y hacer doble click en "border" (http://doddyhackman.webcindario.com/images/menu_dream_3.jpg) Ahora vamos a la categoria "Borde" , en Estilo seleccionamos "doble" para todos , ancho 3 para todos y de color #2EFEF7 para todos. Deberia quedar asi : (http://doddyhackman.webcindario.com/images/menu_dream_4.jpg) Despues vamos a "Estilos CSS" y despues a "Todo" para despues desplegar SpryMenuBarVertical.css. Seleccionamos y hacemos doble click en "ul.MenuBarVertical a" para ir a la categoria "Tipo" y cambiar el color de la letra por celeste claro , ahora nos vamos a la categoria "Fondo" ponemos el color de fondo negro y para terminar ponemos la imagen de fondo "normal.jpg" con la opcion de "no repetir" Quedando asi : (http://doddyhackman.webcindario.com/images/menu_dream_5.jpg) (http://doddyhackman.webcindario.com/images/menu_dream_6.jpg) (http://doddyhackman.webcindario.com/images/menu_dream_7.jpg) Ahora hacemos lo mismo con el "ul" que esta abajo del anterior solo que la fuente la dejan como esta y la imagen de fondo va ser el fondo "hover.jpg" con la opcion de "no repetir". (http://doddyhackman.webcindario.com/images/menu_dream_8.jpg) (http://doddyhackman.webcindario.com/images/menu_dream_9.jpg) (http://doddyhackman.webcindario.com/images/menu_dream_10.jpg) Como menu final se les deberia ver algo asi : (http://doddyhackman.webcindario.com/images/menu_dream_11.jpg) Eso seria todo en el menu. 0x06 : Creacion un panel de administracion Para empezar activemos el XAMPP o Easy PHP , despues creen las siguientes clases PHP en el directorio donde esta la pagina : login_now.php Código
noticion.php Código
Ahora creen el siguiente codigo llamado admin.php : Código
Primero modifiquen los datos mysql por los suyos en el admin.php despues entren con el user y pass : "admin" , deberian ver esto : (http://doddyhackman.webcindario.com/images/panel_dream_1.jpg) Una vez logeados : (http://doddyhackman.webcindario.com/images/panel_dream_2.jpg) Ahora creen las noticias que quieran , yo en mi caso voy a publicar 5 sucesivamente con "titulo" y "test". Despues de eso mi panel se vera asi : (http://doddyhackman.webcindario.com/images/panel_dream_3.jpg) Ahora cargamos la plantilla creada y usada anteriormente con Dream para ir al div "body" y borrar todo lo que contiene para copiar el siguiente codigo en PHP : Código
Los dos codigos estan identados y comentados para que puedan entender. Deberian ver algo como esto : (http://doddyhackman.webcindario.com/images/panel_dream_4.jpg) Y el resultado de la pagina con el sistema de noticias seria : (http://doddyhackman.webcindario.com/images/panel_dream_5.jpg) Eso seria todo. --========-- The End ? --========-- Version PDF (http://doddyhackman.webcindario.com/descargas/creacion_de_pagina_con_bd.pdf). Version en VideoTutoriales : https://www.youtube.com/watch?v=trrZJeyYJUQ https://www.youtube.com/watch?v=GW-r3hOHz0Y https://www.youtube.com/watch?v=sca5L7Lh_68 https://www.youtube.com/watch?v=y1CxJq_4ewY https://www.youtube.com/watch?v=H-RWdyrdYwg https://www.youtube.com/watch?v=QHE7OChFkjs Cualquier error o sugerencia diganla para mejorar. |