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.

Menus Horizontal con icono parte-1

Esta ves les traigo otro interesante tutorial, seguimos con la creacion de menu, pero esta ves algo mas interesante ademas del texto tradicional que traen los menu le agregaresmos unos icono a la para de cada link dandole asi un mejor aspecto.

Ademas de los icono utilizaremos transiciones, al pasar el mouse sobre cada link mostrara un background azul el que hemos utilizado en tutoriales anteriores.

Crear menu horizontal desplegable

Bueno seguimos con los menu pero en esta ocacion lo que haremos es un menu desplegable de daremos color algo vistuso para que lo utilizen en su blog o sus practicas.

Este codigo es bastante sencillo pero practico, si tienes poco conocimiento podras adaptarlo a tus necesidades.

Menu Horizontal estatico o fixed con CSS

En esta nueva entrega les traigo como hacer que nuestro menu estatico sin importar la posicion que tenga puede estar horizontalmente o verticalmente.

Por lo genera el menu horizontal estatico o fixed se utiliza cuando un post o la cantidad de post ubicada en la pagina principal o una pagina de X categorio su contenido es extendo.

Formulario de contacto con Php y Mysql

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.

Limitar cantidad de caracteres en un textarea

Hemos ido viendo una series de script en php que nos servira de ayuda en nuestros proyectos.

Poco a poco iremos avanzanodo hasta llegar a crear nuestras propias aplicaciones web pero por el momento seguiresmos a paso lento pero seguro.

Personalizar la pantalla de acceso del panel del cotrol

Cuantas veces has querido cambiar el logo de wordpress por el tuyo en el panel de acceso.

Aqui te traigo la solucion de como hacerlo.

Unicamente tendras que realizar unas modificaciones al archivo llamado function.php en wordpress.

Agregar Widget al Footer

Ahora se ve bastante encontrarse con blogs en los que hay widgets en el pié de página son prácticos pues añade un área en la que incluir bloques de información que igual no quedarían bien en la barra latera.

En este tutorial vamos a crear 3 áreas de widget en el pié de página que podrán editarse desde el panel de administración. Usaremos la plantilla por defecto de WordPres.

Como insertar informacion en una Base de datos

En esta ocasión les traigo el siguiente tutorial de como insertar datos en nuestra base de datos en mysql.

Crearemos la base de datos con el nombre bdportal y el nombre de nuestra tabla será tarticulo  

Bordes redondeados con CSS3

Las esquinas y bordes redondeados son parte natural del diseño web, pero siempre han representado un dolor de cabeza. 

Sin embargo, cada vez esta más cerca la implementación de CSS3 en los navegadores más populares y con ella, la posibilidad de crear bordes redondeados solo con css y sin imágenes.

Traducir Wordpress al Español

Cuando descargamos wordpress por defecto viene en ingles y es incomodo y hasta inaccesible para muchos, por suerte existen paquetes de traducción creados por los mismos blogger que permiten pasar tu WordPress a español siguiendo unos cuantos pasos:

  

Descarga el archivo de traducción de tu versión de WordPress.

Generalmente existen más de una versión del archivo de traducción y encontraras una lista de varias posibilidades en el sitio oficial de WordPress.

Desactivar ventanas inteligentes

Windows 7 cuando soltamos una ventana se maximiza automaticamente, una vez maximizada si la pinchamos y la arrastramos hacia abajo deja de estar maximizada y vuelve a su anterior posicion.

La manera de colocar estas ventanas inteligentes(smart window arrangement), se puede desactivar en caso de que no nos guste.

Atajos de tecaldo [windows-7]

Win = Tecla Windows
Shift = Tecla mayusculas, distinta de bloqueo mayusculas (Bloq Mayus)
Alt = Tecla Alt(anternativa)
Tab = Tecla Tab(Tabulador)
Ctrl = Tecla Ctrl(Control)
Esc = Tecla Esc(Escape)
Espacio = Tecla Espacio(Barra espaciadora)

Atajos de Windows 7

Paginacion con PHP

En este tutorial es un poco mas complejo que los anteriores.

Veremos como realizar una paginacion con php y mysql.

Tambien veremos como agregarle un poco mas de estilo.

Añadir mas votones al Editor de Wordpress

Si has utilizado wordpress ya te has dado cuenta que el editor es muy simple apena cuenta con unos cuantos botones y si acaso puedes hacer algo con ellos. 

Hay 2 formas para agregar mas botones al editor una de ellas es instalando plugin y la otra solamente insertando unas cuantas lineas de codigo en el archivo function.php si el archivo no existe solamente hay que crearlo.

Aumentar el volumen de nuestro [windows-7]

En ocaciones nos hemos encontrado que video ya sea en youtube u otros sitios el volumen es pecimo mejor dicho el que iso el videotutorial no configuro bien el volumen del microfo y aveces ni con los reproductores llegamos a subirle tanto para poder entender el tutorial.

Pues en esta ocuacion les traigo la forma de hacerlo y la mas sencilla y efectiva.

Efecto Zoom con CSS3

Hoy lograremos llamar la atencion a nuestro visitantes al darle el efecto a nuestra galeria de imagenes,en este efecto lo realizaremos utilizando solo las propiedades que nos da CSS3.

CSS

.zoom{
  transition: 1.5s ease;
   -moz-transition: 1.5s ease; /* Firefox */
   -webkit-transition: 1.5s ease; /* Chrome - Safari */
   -o-transition: 1.5s ease; /* Opera */
 } 

Rotar cualquier elemento con CSS3

Con este tutorial podremos girar, rotar cualquier elemento en nuestro sitio web.

Lo haremos utilizando codigo CSS3,  una imagen o cualquier otro elemento que desemos.

Agregar bordes y sombras a imagen con CSS

Ahora que nos estamos aventurando en lo que es la programacion y diseño web, les traigo este tutorial de como agregar bordes y sombras a cualquier imagen o div utilizando CSS.

Para esto utilizaremos un editor de texto de su preferencia ya sean Sublime text, notepad ++, dreamweaver, phpEditor entre otros.

Ser super administrador en [windows-7]

 

En esta ocuacion les traigo un tutorial de como ser SuperAdministrador en win7, para que se preguntaran bueno como saben en win7 siempre les manda un mensaje al momento de querer ejecutar un programa o instalarlo y asta aveces nos dice que no podemos realizar cierta accion porque no somos administrador.

Como instalar Wordpress en Local

Que es Wordpress?

WordPress es un sistema de gestión de contenido o CMS (por sus siglas en inglés, Content Management System) enfocado a la creación de blogs (sitios web periódicamente actualizados). Ha sido desarrollado en PHP para entornos que ejecuten MySQL y Apache, bajo licencia GPL y código modificable, y su fundador es Matt Mullenweg. WordPress fue creado a partir del desaparecido b2/cafelog y se ha convertido junto a Movable Type en el CMS más popular de la blogosfera y en el más popular con respecto a cualquier otro CMS de aplicación general.2 3 Las causas de su enorme crecimiento son, entre otras, su licencia, su facilidad de uso y sus características como gestor de contenidos.

Como instalar wampserver

Que es el wampserver?

Este programa nos permite crear, ejecutar, instalar, aplicaciones web creadas en PHP sobre un servidor Apache y con base de datos MySQL. 

Tambien nos permite ahorrar los pasos de configuración de PHP, ya que son complejos y ofrece un panel de control desde donde se pueden realizar muchas tareas de administración y mantenimiento del servidor web.

 Instalación de WAMP

Motor de busqueda con PHP y MYSQL

Con este motor de busqueda podran hacerla por Id o por nombre del usuario, vamos a crear 2 archivos el prmiero es clas.php donde tendremos la conexion a la base de datos la consulta de la busqueda, el segundo archivo es el index.html donde tendremos un formulario con un campo input tipo texto y boton.

Solamente creen la base de datos y la tabla con sus campos.

Listar archivos de carpetas en un txt

Bueno en esta ocacion  les traigo como listar todos los archivos que contiene una carpeta ya sean videos, fotos, carpetas, documentos Offices.

Por ejemplo en una carpeta tenemos 3 archivos de vieos, 2 documentos de word, 4 documentos de excel, al ejecutar el archivos .bat se va ha guardar los nombres tal y como lo tienen en la carpeta y en el mismo orden en un documento txt.

Personalizar el menú “Enviar a..” [Windows 7]

En esta opción podemos elegir si se desea enviar una copia de este archivo acierta locación en el ordenador o por correo electrónico. Pero las opciones por defecto que muestra  esta  función  para  enviar  nuestros  archivos seguramente  no satisfacen  las necesidades  de  cada  quien,  por  lo  que hoy  en La  Guía  de Windows les  traemos  la manera de como agregar y eliminar opciones en este útil menú.

Ocultar nombre de usuario en el menú Inicio [Windows 7]

Cuando  inicias  sesión  en  Windows  7,  tu  nombre  de  usuario  aparecerá  en  la  parte superior del menú inicio. Si estás preocupado por tu confidencialidad, o sencillamente no quieres que se vea tu nombre porque tu computador es usado por varias personas (un caso común en los computadores de los cyber-café), aquí te traigo un muy sencillo tutorial de como ocultar tu nombre en el menú inicio.

1-Click derecho del mouse sobre la barra de tareas, en un espacio en blanco como se muestra en la figura.En el menú que aparecerá seleccionamos Propiedades

Como recortar una parte de la pantalla [Windows 7]

Win 7 trae  una  herramienta  incorporada  que  se  llama  justamente  y  originalmente recortes.
Para hacer un recorte  de pantalla debemos ir a inicio y en el cuadro de búsqueda escribimos recortes,
hacemos clic en el resultado que vemos un ícono con una tijera

Cambiar imagen de inicio de sesión [Windows 7]

Windows Logon Editor es un programa portable. Esto quiere decir que el programa no necesita instalación. O sea, con dos clics ya tenemos el programa funcionando. Hay que tener en cuenta que está en βeta, pero no tiene ningún problema con Windows 7.