Varios Trucos de .htaccess que puede resolver tu vida en la Web

En este pequeño tutorial vamos a mostrar algunos trucos de configuración de .htaccess, la mayoría te resolverá la vida en la Web.

Comencemos

Forzar a que todas las URL empiecen por www

Esta configuración funciona solamente para las URL no seguras que empiezan por http://:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^ejemplo\.com [NC]
RewriteRule ^(.*)$ http://www.ejemplo.com/$1 [L,R=301,NC]

Esta configuración funciona tanto para las URL seguras (https://) como para las URL normales (http://):

RewriteCond %{HTTP_HOST} !^$
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteCond %{HTTPS}s ^on(s)|
RewriteRule ^ http%1://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Forzar a que ninguna URL empiece por www

Esta configuración funciona solamente para las URL no seguras que empiezan por http://:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.ejemplo\.com [NC]
RewriteRule ^(.*)$ http://ejemplo.com/$1 [L,R=301]

Forzar a que todas las URL sean seguras y empiecen por https

RewriteEngine on
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

Forzar a que todas las URL acaben con la barra /

RewriteCond %{REQUEST_URI} /+[^\.]+$
RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]

Redirigir páginas individuales

Redirect 301 /pagina_antigua.html http://www.ejemplo.com/nueva_pagina.html
Redirect 301 /pagina_antigua_2.html http://www.ejemplo.com/directorio/

Redirigir todo un sitio web

Redirect 301 / http://nuevo_sitio.com/

A pesar de que esta configuración sencilla no lo parezca, en realidad se están redirigiendo todos los enlaces viejos al nuevo sitio, no solo la portada del sitio.

Seguridad

Impedir cualquier acceso a un sitio web

La siguiente configuración impide, sin excepción, todas las conexiones a tu sitio web, por lo que es una forma rápida de “apagarlo” y hacerlo desaparecer de Internet:

Deny from All
 
# en Apache 2.4, utiliza lo siguiente
# Require all denied

Impedir cualquier acceso salvo aquellos autorizados

Order deny, allow
Deny from All
Allow from xxx.xxx.xxx.xxx
 
# en Apache 2.4, utiliza lo siguiente
# Require ip xxx.xxx.xxx.xxx

Sustituye xxx.xxx.xxx.xxx por la dirección IP desde la que quieres permitir el acceso al sitio. Esta configuración también soporta la definición de rangos de direcciones IP.

Permitir todos los accesos salvo aquellos desautorizados

La siguiente configuración es la contraria de la configuración mostrada anteriormente, ya que permite el acceso desde cualquier dirección IP salvo las indicadas explícitamente:

Order deny, allow
Allow from All
Deny from xxx.xxx.xxx.xxx
Deny from xxx.xxx.xxx.yyy
 
# en Apache 2.4, utiliza lo siguiente
# Require not ip xxx.xxx.xxx.xxx
# Require not ip xxx.xxx.xxx.yyy

Impedir el acceso a los archivos y directorios ocultos

Los archivos y directorios ocultos (es decir, aquellos cuyo nombre empieza con un punto) normalmente no son públicos, por lo que el servidor web no debería servirlos:

RewriteCond %{SCRIPT_FILENAME} -d [OR]
RewriteCond %{SCRIPT_FILENAME} -f
RewriteRule "(^|/)\." - [F]

Entre otros, esta configuración protege archivos como .htaccess y .htpasswd y directorios como .git y .hg.

Si lo prefieres, también puedes devolver un error de tipo 404 (Not Found) para confundir un poco más a los atacantes:

RedirectMatch 404 /\..*$

Impedir que se pueda acceder a archivos con contenidos sensibles

Las siguientes extensiones corresponden a los archivos que pueden contener información sensible, como por ejemplo: archivos de log con información detallada del servidor (.log), copias de seguridad creadas por editores como Vi/Vim (.swp), comandos de consola (.sh), archivos de configuración (.config.ini), etc.

<FilesMatch "(\.(bak|config|dist|fla|inc|ini|log|psd|sh|sql|swp)|~)$">
    Order allow,deny
    Deny from all
    Satisfy All
</FilesMatch>

Impedir que se pueda ver el listado de contenidos de un directorio

Options All -Indexes

Impedir que otros sitios web enlacen a tus imágenes

La siguiente configuración impide que cualquier sitio web externo pueda enlazar a tus imágenes para “robártelas”. Cambia el valor ejemplo.com por tu propio dominio, de manera que solamente tu puedas enlazar a tus imágenes:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ejemplo.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Proteger el acceso a un directorio mediante contraseña

Primero debes crear un archivo llamado .htpasswd con el comando htpasswd. Este archivo se debe guardar en cualquier directorio que no sea directamente accesible mediante el servidor web:

$ htpasswd -c /home/usuario/.htpasswd nombre_usuario

Y ahora ya puedes usar este archivo para proteger con contraseña el acceso a cualquier directorio:

AuthType Basic
AuthName "Zona Segura"
AuthUserFile /home/usuario/.htpasswd
Require valid-user

Proteger uno o varios archivos mediante contraseña

AuthName "Zona Segura"
AuthType Basic
AuthUserFile /home/usuario/.htpasswd
 
<Files "archivo_secreto.zip">
Require valid-user
</Files>
 
<FilesMatch ^(factura\d+\.pdf)$>
Require valid-user
</FilesMatch>

Mejorar el rendimiento de una pagina Web, Hacer que una pagina web cargue más rápido.

Comprimir archivos

<IfModule mod_deflate.c>
 
    # Forzar compresión también para las cabeceras malformadas
    # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>
 
    # Comprimir los contenidos que sean de cualquiera de estos tipos
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/x-web-app-manifest+json \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
    </IfModule>
 
</IfModule>

Utilizar la cabecera Expires de HTTP

La cabecera Expires de HTTP indica al navegador la fecha a partir de la cual un recurso se considera _“no válido”_ y debe volver a solicitarse al servidor en vez de servirse directamente desde la caché.

La recomendación para muchos de los archivos estáticos (CSS, JavaScript, imágenes, etc.) consiste en establecer una fecha de expiración muy lejana (1 año por ejemplo). No obstante, si los nombres de los archivos no incluyen información sobre su versión, entonces es mejor que la expiración no sea tan lejana (1 semana por ejemplo).

Utiliza la siguiente configuración para indicar la fecha de expiración de todos los archivos estáticos habituales de las aplicaciones web:

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"
 
  # CSS
    ExpiresByType text/css                              "access plus 1 year"
 
  # Archivos relacionados con AJAX y Web Sockets
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"
 
  # Favicon
    ExpiresByType image/x-icon                          "access plus 1 week"
 
  # Componentes HTML (HTCs)
    ExpiresByType text/x-component                      "access plus 1 month"
 
  # HTML
    ExpiresByType text/html                             "access plus 0 seconds"
 
  # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"
 
  # Manifest
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"
 
  # Fotos, vídeos y audio
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"
 
  # Canales RSS y Atom
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"
 
  # Fuentes web
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
</IfModule>

Desactivar la cabecera ETag de HTTP

Eliminar la cabecera ETag de HTTP puede ser útil en algunas situaciones, ya que impide a los proxys y a los navegadores cachear los contenidos en función de esta cabecera. En la práctica, esto fuerza a que los proxys y navegadores utilicen en su lugar las cabeceras Cache-Control o Expires:

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>
FileETag None

Otros trucos

Definir opciones de configuración PHP

Utiliza la directiva especial php_value y a continuación, indica el nombre de la opción y su valor separado por un espacio:

php_value <nombre-opcion> <valor-opcion>

Este ejemplo define el tiempo máximo de ejecución de los _scripts_ PHP y el tamaño máximo de los archivos que se pueden subir:

# For example:
php_value upload_max_filesize 30M
php_value max_execution_time 600

Páginas de error personalizadas

ErrorDocument 400 /errores/error400.html
ErrorDocument 401 /errores/error401.html
ErrorDocument 403 /errores/error403.html
ErrorDocument 404 /errores/error404.html
ErrorDocument 500 /errores/error500.html

Forzar a que el navegador baje un archivo en vez de mostrarlo

La siguiente configuración hace que todos los archivos de tipo Markdown (extensión .md) se descarguen en vez de mostrarse dentro del navegador. Cambia la extensión .md por la extensión de los archivos que quieres forzar que se descarguen:

<Files *.md>
    ForceType application/octet-stream
    Header set Content-Disposition attachment
</Files>

Permitir la carga de fuentes desde diferentes dominios

Debido a las restricciones del Cross-origin Resource Sharing, es posible que algunas fuentes servidas a través de una CDN no funcionen en Firefox o Internet Explorer. Para solucionarlo, utiliza la siguiente configuración:

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|otf|ttc|ttf|woff)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

Forzar el uso de la codificación UTF-8

# Servir contenidos de tipo text/plain o text/html usando la codificación UTF-8
AddDefaultCharset utf-8
 
# Forzar la codificación UTF-8 en varios tipos de archivos
AddCharset utf-8 .atom .css .js .json .rss .vtt .xml
Como hacer fondos(Background) aleatorio en PHP y CSS

Como hacer fondos aleatorios en PHP y CSS

Este truco consiste en crear una web donde los usuarios no tengan que ver siempre la misma imágen de fondo en una web. Para lograr este objetivo es necesario seguir los siguientes pasos.

En tu index.php haz  lo siguiente.

<style type="text/css" media="screen">
<?php 
$imagenes = array("imagen1.jpg" , "imagen2.jpg");
$valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);
echo "body{ background: #000 url('image/".$imagenes[$valor]."') no-repeat top right fixed;
height: 100%;
background-attachment: fixed; 
background-repeat: repeat; 
background-position: center center; 
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}";
?> 
</style>

Nota: para que esto funcione dentro de un Style, es necesario colocar ese fragmento de código php dentro de un Las imágenes deben estar en una sola carpeta.

Ejemplo completo, es así como debe quedar mas o menos.

<!DOCTYPE html>
<html lang="es">
<html>
<head>
<title>Corporativo Vera&reg; - Area del cliente</title>
	<meta charset="utf-8">
  	<meta name="description" content="">
  	<meta name="author" content="@abimaelgtp">
  	<meta http-equiv="X-UA-Compatible" content="IE-edge">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css" media="screen">
		<?php 
			$imagenes = array("imagen1.jpg" , "imagen2.jpg");
			$valor = rand(0, count($imagenes)-1); // Uso de rand(): rand(Valor minimo, Valor maximo);
			echo "body{ background: #000 url('image/".$imagenes[$valor]."') no-repeat top right fixed;
			height: 100%;
			background-attachment: fixed; 
			background-repeat: repeat; 
			background-position: center center; 
			background-size: cover;
			-moz-background-size: cover;
			-webkit-background-size: cover;
			-o-background-size: cover;
			}";
		?> 
	</style>
</head>

<body>
<h1>Hola mundo, el fondo aleatorio ya se debe mostrar, para ir viendo viendo los efectos, presione F5</h1>	
</body>
</html>

Este código está hecho para dar una idea mas o menos de como hacer este tipo de actividades, puede que existan muchos trucos.

Ejemplos de bordes y propiedades en CSS

Como hacer bordes en CSS

En este pequeño tutorial explicaremos de como hacer bordes CSS

Propiedades de borde CSS

Los CSS borderpropiedades le permiten especificar el estilo, el ancho y el color del borde de un elemento.


Estilo de borde

La border-stylepropiedad especifica qué tipo de borde se va ver.

Como entender los tipos deborde en CSS

  • dotted – Define un borde de puntos
  • dashed – Define un borde punteado
  • solid – Define una frontera sólida
  • double – Define un borde doble
  • groove– Define un borde acanalado 3D. El efecto depende del valor de border-color
  • ridge– Define un borde estriado 3D. El efecto depende del valor de border-color
  • inset– Define una frontera inserción 3D. El efecto depende del valor de border-color
  • outset– Define una frontera principio 3D. El efecto depende del valor de border-color
  • none – Define ninguna frontera
  • hidden – Define una frontera oculto

La border-stylepropiedad puede tener de uno a cuatro valores (por el borde superior, borde derecho, borde inferior y el borde izquierdo).

Ejemplo

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Sin duda, estos serían los resultados

""

¿Quieres hacer la practica tú mismo?

Como crear un Carousel Slider con Boostrap

Existen diversas herramientas que permiten hacer un Slider como los plugins de JQquery. Pero hay formas más sencillas de realizar esto. Usando la herramienta Boostrap, se puede manipular o adaptar un Carousel Slider a nuestro antojo.

Antes de empezar con Bootstrap carrusel, incluya el inicio y su primera librería jQuery.

<!-- Compilado y minified Bootstrap CSS --> 
< enlace  rel = "stylesheet"  href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
 <!-- minified JS biblioteca --> 
< script de  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </ script de >
 <!-- Compilado y minified bootstrap JavaScript --> 
< script de  src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </ script de >

En nuestro código de ejemplo, trataremos de mostrar como puede ampliar la funcionalidad Carousel Bootstrap y crear los diferentes tipos de la barra deslizante.

En este ejemplo se crea un deslizador básica carrusel.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
        </div>
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Bootstrap Slider con subtítulos.

En el siguiente ejemplo se crea un Slider y añade subtítulos a las diapositivas.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
        </div>
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

En el siguiente código de ejemplo se hace un slider con controles personalizados.

<div id="myCarouselCustom" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarouselCustom" data-slide-to="0" class="active"></li>
        <li data-target="#myCarouselCustom" data-slide-to="1"></li>
        <li data-target="#myCarouselCustom" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/image-1.jpg" alt="">
            <div class="carousel-caption">
                <h3>First Slide</h3>
                <p>This is the first image slide</p>
            </div>
        </div>
  
        <div class="item">
            <img src="images/image-2.jpeg" alt="">
            <div class="carousel-caption">
                <h3>Second Slide</h3>
                <p>This is the second image slide</p>
            </div>
        </div>
        
        <div class="item">
            <img src="images/image-3.jpeg" alt="">
            <div class="carousel-caption">
                <h3>Third Slide</h3>
                <p>This is the third image slide</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- Custom Controls -->
<a href="javascript:void(0);" id="prevBtn">Prev Slide</a>
<a href="javascript:void(0);" id="nextBtn">Next Slide</a>

**Código JavaScript.**

<script type="text/javascript">
// Call carousel manually
$('#myCarouselCustom').carousel();

// Go to the previous item
$("#prevBtn").click(function(){
    $("#myCarouselCustom").carousel("prev");
});
// Go to the previous item
$("#nextBtn").click(function(){
    $("#myCarouselCustom").carousel("next");
});
</script>

Las siguientes opciones están disponibles para configurar Bootstrap Carrusel según sus necesidades.

  • interval (number) – Especifica la cantidad de tiempo de retraso entre el ciclismo automáticamente. Ajuste falsepara detener automáticamente el ciclismo. Tiempo de retardo predeterminado es de 5000milisegundos.
  • pause (string | null) – Hace una pausa en el ciclo de MouseEnter y reanuda el ciclo de mouseleave. Ajuste falsepara detener una pausa en bicicleta en vuelo estacionario. El valor por defecto es hover.
  • wrap (boolean) – Especifica si el carrusel debe ciclo continuo o parar en la última diapositiva. El valor por defecto es true.
  • keyboard (boolean) – Especifica si el carrusel debe reaccionar a eventos de teclado. El valor por defecto es true.

El siguiente ejemplo muestra cómo se puede especificar las opciones del Carousel.

<script type="text/javascript">
$('.carousel').carousel({
     interval: 8000,
     pause:true,
     wrap:false
});
</script>

Ver demo

Crear una pagina Web Responsive fácilmente

Crear una página web responsive fácilmente,.

En este tema vamos hablar sobre como crear una pagina web totalmente responsive, este no un teme muy avanzado, solo es un ejemplo muy básico, pero con esto tendrán una gran idea sobre como se hace un sitio web que sea adaptable con cualquier pantalla en diferentes dispositivos.

 

¿Como crear un sitio web responsive?.

Empecemos.

Paso 1. Definimos el Metatag

Dentro de la etiqueta debes colocar las siguientes lineas de código.

<meta name="viewport" content="width=device−width, initial−scale=1.0" />

Internet Explorer 8 no soporta media-queries, por lo que tendremos que darle soporte por javascript, usando media-queries.jsrespond.js. Incluiremos esta línea en nuestro código HTML.

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> < ![endif]-->

Paso 2. Definimos la Estructura HTML

En este ejemplo se muestra una simple estructura con un header, contenedor content, sidebar y un footer. El header es fixed y tiene una altura de 180px. El contenedor content tiene una anchura de 600px y la barra lateral de 300px.

""

Paso 3. Creamos CSS Media-queries.

CSS3 media query es la clave para un diseño responsive. Le dice al navegador como renderizar la página para específicas anchuras. Las siguientes reglas serán efectivas en una anchura de 980px o menos. Simplemente se cambia el valor de la anchura del container de píxel a porcentaje, por lo que los contenedores fluirán, en vez de estar estáticos.

/* para 980px o menos */</code>

#pagewrap {

width: 94%:
}

#content {

width: 65%;
}

#sidebar {

width: 30%;
}

Para el viewport de 700px o menos el #content y #sidebar pasa a una anchura auto y se elimina el float así tendrá una anchura completa, al 100%.

/* para 700px o menos. Con auto width se hace un reset al container. */
#content {</code>

width: auto;
float: none;
}

#sidebar {

width: auto;
float: none;
}

Para 480px o menos resetea el #header a auto, cambia la fuente h1 a 24px y esconde la barra lateral.

/* para 480px o menos */
#header {</code>

height: auto;
}

h1 {

font-size: 24px;
}

#sidebar {

display: none;
}

Con este ejemplo básico, tendrás unas web responsive adaptable a en diferentes pantallas ya sea un dispositivo móvil.

Ver demo