Crear un sitio con Responsive Web Design Parte-2

Esta es la segunda parte de cómo crear una web con Responsive Web Design, iremos paso a paso, primero con teoría, después teoría y práctica.

Hasta llegar en la parte donde tendremos que hacer nuestro diseño de cómo queremos nuestro sitio web, luego realizaremos la estructura HTML seguido dando el estilo con CSS.

Crear un sitio con Responsive Web Design Parte-1

El diseño web adaptativo, o responsive web design, es una técnica que pretende simplificar el modo de realizar un mismo sitio web para diferentes dispositivos adaptándose perfectamente al ancho de cada pantalla. Como  características los layouts e imágenes son fluidos y se usan media-queries de CSS3. - See more at: http://webysocialmedia.es/2012/que-es-responsive-web-design-o-diseno-web-adaptativo/#sthash.B5Uc5g5e.dpuf

El diseño web adaptativo, o responsive web design, es una técnica que pretende simplificar el modo de realizar un mismo sitio web para diferentes dispositivos adaptándose perfectamente al ancho de cada pantalla. Como  características los layouts e imágenes son fluidos y se usan media-queries de CSS3.

Escalar imagen con CSS

En esta nueva aventura aprenderemos como escalar una imagen,  pero no solamente haremos eso sino le daremos un estilo para adornar la imagen.

Vayan buscando una imagen de tamaño de 400px de alto y ancho, háganlo en google y hay un botón que dice herramienta de búsqueda vallan donde dice tamaño y le dan tamaño exacto.

Como enumerar con CSS

Ademas de enumerar con las listas ordenas UL tambien lo podemos hacer de otra manera utilizando solamente CSS pero dejenme decirle que hacerlo con las listas UL es una mala practica porque las listas unicamente se utilizan con texto cortos.

Este tutorial surge por un trabajo que estaba haciendo en la U me pregunte como se podia enumerar dichos titulo o subtitulos de un documento pero utilizando html y css.

Subir y mostrar imagens con Php y Mysql parte-3

Estamos en la ultima entrega de este tutorial, ahora vamos con el archivo mas importante, el class9.php.

Antes de seguir me gustaría saber sus comentarios con respecto a este y todo los de más tutoriales, si le ha servido de ayuda en sus proyectos del cole, la U.

También que tipo de tutorial les gustaría que hiciéramos, haremos todo lo posible para tenérselo lo más rápido.

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.

Subir y mostrar imagens con Php y Mysql parte-1

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

Background estatico o fijo

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. 

Como ubicar la posicion del evento hover

Ya habia tardao en publicar un tutorial, pero la espera es buen.

En esta ocacion les traigo un solo ejemplo de hacer multiples hover a un solo elemento y de que posicion queremos que inicie el evento hover. 

Ocuparemos 5 imagenes una de ellas el logo del nuestro sitio web y las otras cuatro para hacer el evento hover.

Menus Horizontal con icono parte-2

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.