ELITEHCK
Usuario (Nicaragua)
Como agregar una imagen de fondo en nuestra sitio web y ademas de que manera al momente de ir bajando con el mouse ese misma imagen se quede estatica, fija, sin moverse. De esta manera podemos agregarle un fodo a nuestro sitio que diga, que les indique a nuestros usuarios o visitantes que es lo que promovemos, tambien al mismo insertar logos de nuestros patrocinadores. El div wrapper va hacer el div contenedor de nuestro sitio y dentro de el estaran las etiquetas header para poder ubicar nuestro baner o menu, section donde estara nuestro contenido principal del sitio, footer que ahora puedes agregarle lo que tu quieras como los creditos, algo mejor como widget. INDEX <!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Background fixec</title> <link rel="stylesheet" href="estilo8.css"> </head> <body> <div id="wrapper"> <header> <span>ESTE ES EL HEADER</span> </header> <section> </section> <footer> </footer> </div> </body> </html> CSS * { margin: 0; padding: 0; } A nuestro contenedor principal le agregamos un box-shadow para que a todo su alrededor tenga una sombre tenie. El fondo principal será de color gris opaco tenue, esta vez le agrego una altura de 900px porque a la estructura del html no agregaremos ningún contenido es por eso que a la altura le coloque ese tamaño lo más conveniente es dejarlo en auto o ni siquiera agrégalo, por lo contrario del width si le agregamos un tamaño 960px que sería como un estándar. #wrapper { box-shadow: 0px 0px 5px #000; background-color: #cecece; height: 900px; margin: 0 auto; width: 960px; } Contiene un color gris, altura 150px y un ancho de 100% que quiere decir que tomara el tamaño exacto del contenedor principal el wrapper. header { background-color: #eee; height: 150px; width: 100%; } El span es texto que dice esto es un header, el display:block hace que ocupe todo el tamaño del header, también le damos un tipo de letra verdana tamaño 26px negrita, el text –shadow hace el efecto de tener una sombra al rededor del texto de forma tenue, que se distinga mejor porque el fondo es un gris claro. span { color: #fff; display: block; font-family: verdana; font-weight: bold; font-size: 26px; text-align:center; text-shadow: 1px 1px 1px #000; } Al section únicamente se le coloco un color azul oscuro, le dimos las dimensiones de altura de 720px y que ocupe el 100% del ancho que tiene el contenedor principal section { background-color: #22303A; height: 720px; width: 100%; } Bueno ahora ya estamos en la parte donde colocamos la imagen para nuestro sitio y que sea fija. Esto se logra agregando el background le damos la dirección o ubicación de la imagen a ocupar le asignamos los siguientes parámetros no-repeat par que no se repita horizontal o verticalmente la centramos y utilizamos el fixed para dejarla fija, estática. El parámetro cover en el background-size es para que si la imagen es pequeña hará que se expanda y ocupe todo el navegador. body { background: url(fondo3.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
miro que al agregar el signo de ) y los : se forma una carita asi que cuando lo vean solo agregan el ) ; Esta ves pondremos en practica todo lo que hemos venido haciendo, si es tu primera vez en nuestro sitio mas abajo podras encontras una serie de post que te ayudaran para ponerte al tanto de todos los script creado asta el momento. Utilizaresmos el index.html para crear nuestro formualrio, el trabajo. php que nos ayuda a crear nuestra conexion con la base de datos , crear nuestras variables tambien nuestras consultas que nos serviran ya sea para insertar, guardar, actualizar o editar. En nuestro archivo trabajo.php recuerda que es el principal de todos y dentro de el tambien acuerdate de crear nuestra clase llamada Trabajo {} y agreagerle la apretura y el cierre de las llaves. Este codigo es para hacer la conexion con nuestra base de dato en mysql recuerda que la base de datos se llama bdportal siempre utilizaremos esta misma para no estar creando y se te haga un enredo unicamente si iremos agregandole las tablas. public static function con() { $con=mysql_connect("localhost","root","tu contraseña si tienes"; mysql_query("SET NAMES 'utf8'"; mysql_select_db("bdportal"; return $con; } El siguiente metodo es para hacer la insercion de los datos la informacion que el usuario digito en nuestro formulario. nuestra consulta es guardada en una variable llamada $sql El strip_tags ayuda a eliminar cualquier espacion en blanco que alla dejado el usuario al momento de aver terminado de dijitar o al inicio. header("Location: index.php"; cuando se guarda el registro en nuestra base de dato el header location redireccionara a nuestra pagina principal. public function add_formulario_contactar() { $sql="insert into contactenos " ." values (null, '".strip_tags($_POST["nombre"])."', '".strip_tags($_POST["telefonos1"])."', '".strip_tags($_POST["correo"])."', '".$_POST["detalle_anuncio"]."', now() ); "; mysql_query($sql,Conectar::con()); //echo $sql; header("Location: index.php"; } Como les habia explicado en tutoriales anteriores este codigo siemplemente cuanta la cantidad de caracteres que el usuario digita en el textarea function getObject(obj) { var theObj; if(document.all) { if(typeof obj=="string" { return document.all(obj); } else { return obj.style; } } if(document.getElementById) { if(typeof obj=="string" { return document.getElementById(obj); } else { return obj.style; } } return null; } function toCount(entrance,exit,text,characters) { var entranceObj=getObject(entrance); var exitObj=getObject(exit); var length=characters - entranceObj.value.length; if(length <= 0) { length=0; text='<span class="disable"> '+text+' </span>'; entranceObj.value=entranceObj.value.substr(0,characters); } exitObj.innerHTML = text.replace("{CHAR}",length); } A continuacion les dejo los codigo para que lo digiten o lo copien index <?php require_once("trabajo.php"; $tra=new Trabajo(); if (isset($_POST["grabar"]) and $_POST["grabar"]=="si" { $tra->add_formulario_contactar(); exit; }?> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FORMULARIO DE CONTACTO</title> </head> <body> <form name="form2" id="form2"a ction="" method="post" > <table align="left" width="253" height="262" border="0"> <tr> <td align="center" colspan="4"><h2><strong>Contactar Web master</strong></h2></td> </tr> <tr> <td>Nombre:</td> <td width="144"><input name="nombre" class="nombre" type="text" /></td> </tr> <tr> <td ><label for="telefonos2">Telfono:</label></td> <td><input name="telefonos2" class="telefonos2" type="text" /> </td> </tr> <tr> <td><label for="correo">E-mail::</label></td> <td><input name="correo" class="correo" type="text" /></td> </tr> <tr> </tr> <tr> <td colspan="4"> <textarea cols="30" rows="5" id="eBann" name="descripcion" maxlength="700" size="60" onKeyUp="toCount('eBann','sBann','{CHAR} maximo caracteres',700);"> </textarea> <br> <span id="sBann" class="minitext">700 caracteres maximo.</span> </td> </tr> <tr> <td ><input name="fecha" size="5" type="hidden" value="<?php echo date("Y-m-d";?>"/> </td> </tr> <tr> <td colspan="5" > <input type="hidden" name="grabar" value="si" /> <input type="button" value="Enviar" title="Enviar" onclick="" /> </td> </tr> </table> </form> </body> </html> trabajo.php <?php class Trabajo { public static function con() { $con=mysql_connect("localhost","root",""; mysql_query("SET NAMES 'utf8'"; mysql_select_db("bdportal"; return $con; } public function add_formulario_contactar() { $sql="insert into contactenos " ." values (null, '".strip_tags($_POST["nombre"])."', '".strip_tags($_POST["telefonos1"])."', '".strip_tags($_POST["correo"])."', '".$_POST["detalle_anuncio"]."', now() ); "; mysql_query($sql,Conectar::con()); //echo $sql; header("Location: index.php"; }} funciones.js function getObject(obj) { var theObj; if(document.all) { if(typeof obj=="string" { return document.all(obj); } else { return obj.style; } } if(document.getElementById) { if(typeof obj=="string" { return document.getElementById(obj); } else { return obj.style; } } return null; } function toCount(entrance,exit,text,characters) { var entranceObj=getObject(entrance); var exitObj=getObject(exit); var length=characters - entranceObj.value.length; if(length <= 0) { length=0; text='<span class="disable"> '+text+' </span>'; entranceObj.value=entranceObj.value.substr(0,characters); } exitObj.innerHTML = text.replace("{CHAR}",length); }
Subir y mostrar imagens con Php y Mysql parte-2 Esto es lo que nos mostrara cuando no halla ninguna foto en la base de datos. el diseño no es muy bueno pero se que ustedes podran maquetarlo mejor talves me pasan el CSS cuando lo hagan. Este script es unos de los más buscados en los foros, blog en todas las páginas de programación y diseño. . Se los mostrare de una forma fácil de como subir una imagen a nuestro servidor local o si lo tenemos en un servidor de pago. Estarán diciendo por fin encontré un tutorial donde expliquen cómo subir fotos a mi base de datos mysql?, pero les aclaro que las fotos no se van a guardar en nuestra base de datos sino que lo haremos en un carpeta de nuestro servidor ya sea online o local, lo único que se guarda en la base de datos es la el nombre de nuestra foto con su extencion. Esto se hace para no sobrecargar nuestro sitio y la base de datos, imagínen que por cada usuario tenemos más de 100 fotos que mostrar. Para esto utilizaremos 4 archivos 3 de ellos que son los más importantes para poder realizar nuestro script. Index La segunda linea de nuestro codigo php hace el llamado de nuestra archivo class9.php mas adelante les explicare que contiene este archivo. Hacemos el llamdo a nuestra clase Trabajo() que está dentro de nuestro archivo class9.php. En la condición if nos dice que si hemos hecho clic en el botón grabar y si grabar es igual a si entonces hacemos el llamado al método add_foto(); <?php require_once("class9.php"; $trab=new Trabajo(); if (isset($_POST["grabar"]) and $_POST["grabar"]=="si" { $trab->add_foto(); exit; } ?> <!doctype html> <html lang="es"> <head> <meta charset="UTF-8" /> <title>Subir foto-php-mysql</title> <link rel="stylesheet" href="estilo9.css"> <script type="text/javascript" src="jss.js"></script> </head> <body> Aquí tenemos las estructura de nuestro formulario y le tenemos que agregarle lo siguiente para poder buscar un archivos al momento de hacer click en el botón Subir foto enctype="multipart/form-data". <div id="wrapper"> <form name="form1" id="form1" action="" method="post" enctype="multipart/form-data"> <div class="titulo space"> <h1><strong>SUBIR FOTO</strong></h1> </div> <div class="nomb space"> <label for="nombre" id="labelformanunciarse">Nombre:</label> <input name="nombre" class="nombre" type="text" id="nombre" /> </div> <div class="nomfoto space"> <label for="foto" id="labelformanunciarse">Foto</label> <input name="foto" class="foto" type="file" size="5" /> </div> <div class="bton"> <input type="hidden" name="grabar" value="si" /> <input type="submit" value="Subir Fotos" title="Subir Fotos" /></td> </div> </form> </div> Este formulario nos mostrara todas las fotos que estan guardas en nuestro servidor. Este formulario solamente es para mostrar el contenido de nuestra base de datos en el. Se declara una variable llamada $mostrar que a su vez es igual a la variable $trab que hace un llamado al método get_fotos(). Hacemos un siclo for para mostrar todo el contenido de nuestra base de datos. En el input llamado name=”nombre” en el value le agregamos un código php que hara que muestre solamente los nombre que están ubicados en la base de datos. Y en el otro input es el que contiene el nombre de nuestra foto. <div class="titulo space"> <h1><strong>FOTOS GUARDADAS</strong></h1> </div> <?php $mostrar=$trab->get_fotos(); for ($x=0; $x<sizeof($mostrar); $x++) { ?> <div class="nomestilo space"> <label for="nombre" id="labelformanunciarse">Nombre:</label> <input name="nombre" class="nombre" type="text" value="<?php echo $mostrar[$x]["nombre"];?>" /> </div> <div class="nomfotoestilo"> <label for="foto" >Foto</label> <img src="images/<?php echo $mostrar[$x]["foto"];?>"/> </div> <?php } ?> </form> </body> </html> Subir y mostrar imagens con Php y Mysql parte-2 En esta segunda parte vamos a crear la base de datos con el nombre bdfoto, y una tabla llamada tusuario. Aquí les dejo el código sql para que lo agreguen al momento de haber creado la base de datos. La table tiene un campo id como llave primaria autoincrementadle y el campo nombre y foto serán de tipo varchar. Hacen click en la pestaña SQL. Después nos muestra la siguiente ventana pegamos el código y hacemos click en el botón continuar ya habremos creado nuestra tabla. CREATE TABLE IF NOT EXISTS `tusuario` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(50) COLLATE utf8_spanish_ci DEFAULT NULL, `foto` varchar(100) COLLATE utf8_spanish_ci DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=6 ; Recuerden crear la carpeta images que es donde se guardara nuestra fotos al momento de subirlas. class_conex.php crean el archivo class_conex.php y dentro pegamos el codigo siguiente, Se crea una clase principal donde contendrá todos los métodos que vallamos a crear pero esta vez únicamente será el método llamado con. <?php class Conectar { public static function con() { $con=mysql_connect("localhost","root",""; mysql_query("SET NAMES 'utf8' "; mysql_select_db("bdfoto"; return $con; } } ?> Subir y mostrar imagens con Php y Mysql parte-3 class9.php <?php require_once("class_conex.php"; require_once("resize.php"; class Trabajo { private $getfoto=array(); public function __construct() { $this->getfoto=array(); } public function add_fotos() { copy($_FILES["foto"]["tmp_name"],"images".$_FILES["foto"]["name"]); $thumb=new thumbnail("images".$_FILES["foto"]["name"]); $thumb->size_width(179);//setea el ancho de la copia $thumb->size_height(179);//setea el alto de la copia $thumb->jpeg_quality(75);//setea la calidad jpg $nom=$_POST["nombre"].".jpg"; $thumb->save("images/$nom"; //guardarla en el servidor unlink("images".$_FILES["foto"]["name"]); $consulta="insert into tusuario " ." values (null, '".strip_tags($_POST["nombre"])."', '$nom'); "; mysql_query($consulta,Conectar::con()); header("Location: ind9.php"; } public function get_fotos() { $sql="select nombre,foto from tusuario"; $res=mysql_query($sql,Conectar::con()); if (mysql_num_rows($res)==0) { echo "No hay fotos guardadas"; } else { $res=mysql_query($sql,Conectar::con()); while ($reg=mysql_fetch_assoc($res)) { $this->getanun[]=$reg; } return $this->getanun; } } } https://www.f a c ebook.com/pages/Cursodise%C3%B1oweb/591399160939510?ref=settings
Seguiemos con el tutoria del menu con icono esta vez haremos unos cambios a nuestro menu. Cambiaremos el color de nuestro nav, tambien el color cuando pasemos nuestro mouse sobre el contenedo del enlace y la imagen. Lo que haremos primero es cambiar las carecteristicas de los enlaces a { color: #fff; text-decoration: none; } ahora cambiaremos el color a nuestro nav nav { background: #06AFE4; } Aqui unicamente quitaremos el margen -4 que tenia. ul li { display: inline-block; } Ahora la estructura de nuestro index va hacer diferente aqui se las dejos he agregado un div contenedor y dentro de este hay otro div y el enlace cada uno tiene un ID y una CLASE que lo va ha identificar para realizar nuestro diseño El ID IMG lo ocuparemos para mandar a llamar a las imagenes como son distintas images al id le agregaremos img1... y asi consecutivo asta donde lo necesitemos. La clase llamada igual la utilizamos para darle el tamaño exacto a las imagenes la ubicamos horizontalmente junto con el enlace y dandole tambien una separacion de 10px, el vertical-align middle es para centrar el enlace y la imagen. <!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Menu desplegable</title> <link rel="stylesheet" href="estilo6.css"> </head> <body> <nav> <nav> <ul > <li> <div id="contenedorimg"> <div id="img1" class="igual"></div> <a href="#">Inicio</a> </div> </li> <li> <div id="contenedorimg"> <div id="img2" class="igual"></div> <a href="#">Descarga</a> </div> </li> <li> <div id="contenedorimg"> <div id="img3" class="igual"></div> <a href="#">Galeria</a> </div> </li> <li> <div id="contenedorimg"> <div id="img4" class="igual"></div> <a href="#">Musica</a> </div> </li> <li> <div id="contenedorimg"> <div id="img5" class="igual"></div> <a href="#">Videos</a> </div> </li> </ul> </nav> </nav> </body> </html> Ahora vamos con lo nuevo agregado al css div con id contenedorimg le damos un tamaño de 10px de arriba hacia abajo y de ancho 20px. #contenedorimg { padding: 10px 20px; } Al momento de hacer hover con el mouse le dara un color como anaranjado, al texto le aplicamos una sombra #contenedorimg:hover { background: #FF6600; text-shadow: 2px 2px 1px #000; -moz-transition: background ease-in .5s; -webkit-transition: background ease-in .5s; } La clase igual la alineamos horizontalmente con una altura y anchura de 24px que seria el tamaño exacto de los iconos. .igual { display: inline-block; height:24px; vertical-align: middle; margin-right: 10px; width:24px; } #img1 { background-image: url(img/home.png); } #img2 { background-image: url(img/descarga.png); } #img3 { background-image: url(img/galeria.png); } #img4 { background-image: url(img/musica.png); } #img5 { background-image: url(img/video.png); }