Several Tricks of .htaccess that can solve your life on the Web

In this small tutorial we are going to show some tricks of configuration of .htaccess, the majority will solve the life on the Web to you.

We begin

To force that all the URL begins by www

This configuration only works for the URL nonsafe that they begin by http://:

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

This configuration works as much for the URL safe (https://) as for the URL normal (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]

To force that no URL begins by www

This configuration only works for the URL nonsafe that they begin by http://:

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

To force to that all the URL is safe and begins by https

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

To force to that all the URL ends the bar/

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

Redirigir individual pages

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

Redirigir everything a website

Redirect 301/http://nuevo_sitio.com/

Although this simple configuration does not seem it, in fact all the old connections to the new site are being redirigiendo, not only the cover of the site.

Security

To prevent any access to a website

The following configuration prevents, without exception, all the connections to your website, reason why it is a fast form “to extinguish it? and to make it disappear of Internet:

Deny from All   # in Apache 2,4, uses following # Require all denied

To prevent any access except for those authorized

Order deny, allow Deny from All Allow from xxx.xxx.xxx.xxx   # in Apache 2,4, uses following # Require IP xxx.xxx.xxx.xxx

Xxx.xxx.xxx.xxx by the direction IP replaces from which you want to allow the access to the site. This configuration also supports the definition of ranks of directions IP.

To allow all the accesses except for those deprived of authority

The following configuration is the opposite of the shown configuration previously, since it allows the access from any direction IP except for the indicated ones explicitly:

Order deny, allow Allow from All Deny from xxx.xxx.xxx.xxx Deny from xxx.xxx.xxx.yyy   # in Apache 2,4, uses following # Require not IP xxx.xxx.xxx.xxx # Require not IP xxx.xxx.xxx.yyy

To prevent the access to the hidden archives and directories

The hidden archives and directories (that is to say, those whose name begins with a point) normally are not public, reason why the Web server would not have to serve them:

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

Among others, this configuration protects archives as .htaccess and .htpasswd and directories as .git and .hg.

If you prefer it, also you can give back an error of type 404 (Not Found) to confuse a little to the attackers more:

RedirectMatch 404/\. *$

To prevent that it is possible to be acceded to archives with sensible contents

The following extensions correspond to the archives that can contain sensible information, as for example: archives of log with detailed information of the servant (.log), backup copies created by publishers as Vi/Vim (.swp), console commandos (.sh), configuration files (.config.ini), etc.

<FilesMatch “(\. (BAK|config|dist|fla|Inc. |INI|log|psd|sh|SQL|swp)|~) $ " > Order allow, deny Deny from all Satisfy All </FilesMatch>

To prevent that the listing of contents of a directory can be seen

Options All - Indexes

To prevent that other websites connect to your images

The following configuration prevents that any external website can connect to your images for “robbing them to you?. It changes the ejemplo.com value by your own dominion, so that only your you can connect to your images:

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

To protect the access to a directory by means of password

First you must create a called file .htpasswd with the commando htpasswd. This file is due to keep in any directory who is not directly accessible by means of the Web server:

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

And now already you can use this file to protect with password the access to any directory:

AuthType BASIC AuthName “Safe Zone? AuthUserFile /home/usuario/.htpasswd Require to valid-user

To protect one or several archives by means of password

AuthName “Safe Zone? AuthType BASIC AuthUserFile /home/usuario/.htpasswd   <Files “archivo_secreto.zip " > Require to valid-user </Files>   <FilesMatch ^ (\ invoices \ d+ .pdf) $> Require to valid-user </FilesMatch>

To improve the yield of a webpage, To do that a webpage loaded faster.

To compress archives

<IfModule mod_deflate.c>   # Forzar compression also for the malformadas heads # 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|15 xs \ {}|~ \ {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 the contents that are of anyone of these types <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>

To use the head You expire of HTTP

The head You expire of HTTP indicates to the navigator the date as of which a resource considers _“nonvalid? _and must return to ask for itself to the servant instead of to use directly from the cache.

The recommendation for many of the static archives (CSS, Javascript, images, etc.) consists of establishing a date of very distant expiration (1 year for example). However, if the names of the archives do not include information on their version, then it is better than the expiration is not so distant (1 week for example).

It uses the following configuration to indicate the date of expiration of all the habitual static archives of the applications Web:

<IfModule mod_expires.c> ExpiresActive on ExpiresDefault “Access extra 1 month?   # CSS ExpiresByType text/css “Access extra 1 to year?   # Related files to AJAX and Web Sockets ExpiresByType application/json “Access extra 0 seconds? ExpiresByType application/xml “Access extra 0 seconds? ExpiresByType text/xml “Access extra 0 seconds?   # Favicon ExpiresByType image/x-icon “Access extra 1 week?   # Component HTML (HTCs) ExpiresByType text/x-component “Access extra 1 month?   # HTML ExpiresByType text/HTML “Access extra 0 seconds?   # ExpiresByType Javascript application/Javascript “Access extra 1 to year?   # Manifest ExpiresByType application/x-Web-app-manifest+json “Access extra 0 seconds? ExpiresByType text/breaks-manifest “Access extra 0 seconds?   # Photos, videos and audio audio ExpiresByType/ogg “Access extra 1 month? ExpiresByType image/GIF “Access extra 1 month? ExpiresByType image/JPEG “Access extra 1 month? ExpiresByType image/png “Access extra 1 month? ExpiresByType video/mp4 “Access extra 1 month? ExpiresByType video/ogg “Access extra 1 month? ExpiresByType video/webm “Access extra 1 month?   # Channels RSS and Atom ExpiresByType application/atom+xml “Access extra 1 hour? ExpiresByType application/rss+xml “Access extra 1 hour?   # Sources Web ExpiresByType application/font-woff “Access extra 1 month? ExpiresByType application/vnd.ms-fontobject “Access extra 1 month? ExpiresByType application/x-font-ttf “Access extra 1 month? ExpiresByType font/opentype “Access extra 1 month? ExpiresByType image/svg+xml “Access extra 1 month? </IfModule>

To deactivate HTTP the ETag head

To eliminate HTTP the ETag head can be useful in some situations, since it prevents to proxys and the navigators to frisk the contents based on this head. Actually, this force to that proxys and navigators use in their place the heads Break-Control or Expires:

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

Other tricks

To define options of configuration PHP

Php_value uses the special directive and next, it indicates the name of the option and its separated value by a space:

php_value <nombre-opcion> <valor-opcion>

This example defines the maximum time of execution of _scripts_ PHP and the maximum size of the archives that can be raised:

# For example: php_value upload_max_filesize 30M php_value max_execution_time 600

Customized pages of error

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

To force to that the navigator lowers a file instead of to show it

The following configuration does that all the archives of Markdown type (extension .md) unload instead of to be within the navigator. It changes to the extension .md by the extension of the archives that you want to force that they unload:

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

To allow the load of sources from different dominions

Due to the restrictions of Cross Resource Sharing, it is possible that some sources served through a CDN do not work in Firefox or Internet Explorer. In order to solve it, it uses the following configuration:

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

To force the use of the UTF-8 codification

# Servir contained as type text/plain or text/HTML using the codification UTF-8 AddDefaultCharset utf-8   # Forzar the UTF-8 codification in several types of AddCharset archives utf-8 .atom .css .js .json .rss .vtt .xml
As making bottoms (Background) random in PHP and CSS

As making random bottoms in PHP and CSS

This trick consists of creating a Web where the users do not have to do always the same basic image in a Web. In order to achieve this objective it is necessary to follow the following steps.

In your index.php you do the following thing.

<style does type = " text/css? average = " screen " > <? php $imágenes = Array (“imagen1.jpg?, “imagen2.jpg?); $valor = rand (0, count ($imágenes) - 1); //Use of rand (): rand (minimal Value, Value maximum);
I throw “body \ {background: #000 URL (‘image/“. $imágenes [$valor]. ? ‘) no-repeat top right fixed; height: 100%; background-attachment: fixed; background-repeat: repeat; background-position: to center to center; background-size: cover version; - moz-background-size: cover version; - webkit-background-size: cover version; - o-background-size: cover version; }?; > </style>

Note: so that this works within a Style, php is necessary to place that fragment of code within The images must be in a single folder.

Complete example, is as well as it must be more or less.

<! DOCTYPE html> <html lang = " is " > <html > <head > <title >Corporativo Vera&reg; - Area of cliente</title> does <meta charset = " utf-8 " > <meta yam = " description? content = "" > <meta yam = " author? content = " @abimaelgtp " > <meta HTTP-equiv = " X-UA-Compatible? content = " IE-edge " > <meta yam = " viewport? content = " width=device-width, initial-scale=1 " > <style type = " text/css? average = " screen " > <? php $imágenes = Array (“imagen1.jpg?, “imagen2.jpg?); $valor = rand (0, count ($imágenes) - 1); //Use of rand (): rand (minimal Value, Value maximum); I throw “body \ {background: #000 URL (‘image/“. $imágenes [$valor]. ? ‘) no-repeat top right fixed;  height: 100%;  background-attachment: fixed;  background-repeat: repeat;  background-position: to center to center;  background-size: cover version;  - moz-background-size: cover version;  - webkit-background-size: cover version;  - o-background-size: cover version;  }?; > </style> </head> <body > <h1>Hola world, the random bottom already is due to show, to be seeing seeing the effects, presses F5</h1> </body> </html>

This code is made to give an idea more or less perhaps of how to make this type of activities, many tricks exist.

Examples of edges and properties in CSS

As making edges in CSS

In this small tutorial we will explain of how making edges CSS

Properties of edge CSS

The CSS borderpropiedades allow him to specify the style, the width and the color of the edge of an element.


Style of edge

The specific border-stylepropiedad what type of edge goes away to see.

As understanding the types deborde in CSS

  • dotted – an edge of points Defines
  • dashed – a dotted edge Defines
  • solid – a solid border Defines
  • double – a wild double Defines
  • groove- Define a sulciform edge 3D. The effect depends on the value of border-color
  • ridge- Define a fluted edge 3D. The effect depends on the value of border-color
  • inset- Define a opposite insertion 3D. The effect depends on the value of border-color
  • outset- Define a opposite principle 3D. The effect depends on the value of border-color
  • none – no border Defines
  • they hidden – an hidden border Defines

The border-stylepropiedad can have of one to four values (by the edge superior, right edge, edge inferior and the left edge).

Example

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: they hidden;} p.mix \ {border-style: dotted dashed solid double;}

Without a doubt, these would be the results

""

You want to do practices it you yourself?

As creating a Carousel Slider with Boostrap

Diverse tools exist that allow to make a Slider as plugins of JQquery. But there are forms simpler to realise this. Using the Boostrap tool, a Carousel can be manipulated or be adapted Slider to our ill.

Before beginning with Bootstrap merry-go-round, it includes the beginning and his first bookstore jQuery.

<!-- Compiled and minified Bootstrap CSS --
< it connects  rel = “stylesheet?  href = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css? 
 <!-- minified JS library --
< script of  src = “https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js?  </ script of 
 <!-- Compiled and minified bootstrap Javascript --
< script of  src = “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js?  </ script of 

In our code of example, we will try to show as it can extend the functionality Carousel Bootstrap and create the different types from the sliding bar.

In this example a basic speedboat is created merry-go-round.

<div you go = " myCarousel? class = " carousel slide? dates-ride = " carousel " > <! -- Indicators --> <ol class = " carousel-indicators " > <li dates-target = " #myCarousel? dates-slide-to = " 0? class = " activates " ></li> <li dates-target = " #myCarousel? dates-slide-to = " 1 " ></li> <li dates-target = " #myCarousel? dates-slide-to = " 2 " ></li> </ol> <! -- For Wrapper slides --> <div class = " carousel-inner " > <div class = " item activates " > <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? dates-slide = " prev " > <span class = " glyphicon glyphicon-chevron-left " ></span> <span class = " Mr.-only " >Previous</span> </a> <a class = " right carousel-control? href = " #myCarousel? dates-slide = " next " > <span class = " glyphicon glyphicon-chevron-right " ></span> <span class = " Mr.-only " >Next</span> </a> </div>

Bootstrap Slider with subtitles.

In the following example a Slider is created and adds subtitles to the slides.

<div you go = " myCarousel? class = " carousel slide? dates-ride = " carousel " > <! -- Indicators --> <ol class = " carousel-indicators " > <li dates-target = " #myCarousel? dates-slide-to = " 0? class = " activates " ></li> <li dates-target = " #myCarousel? dates-slide-to = " 1 " ></li> <li dates-target = " #myCarousel? dates-slide-to = " 2 " ></li> </ol> <! -- For Wrapper slides --> <div class = " carousel-inner " > <div class = " item activates " > <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? dates-slide = " prev " > <span class = " glyphicon glyphicon-chevron-left " ></span> <span class = " Mr.-only " >Previous</span> </a> <a class = " right carousel-control? href = " #myCarousel? dates-slide = " next " > <span class = " glyphicon glyphicon-chevron-right " ></span> <span class = " Mr.-only " >Next</span> </a> </div>

In the following code of example a slider with customized controls becomes.

<div you go = " myCarouselCustom? class = " carousel slide? dates-ride = " carousel " > <! -- Indicators --> <ol class = " carousel-indicators " > <li dates-target = " #myCarouselCustom? dates-slide-to = " 0? class = " activates " ></li> <li dates-target = " #myCarouselCustom? dates-slide-to = " 1 " ></li> <li dates-target = " #myCarouselCustom? dates-slide-to = " 2 " ></li> </ol> <! -- For Wrapper slides --> <div class = " carousel-inner " > <div class = " item activates " > <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? dates-slide = " prev " > <span class = " glyphicon glyphicon-chevron-left " ></span> <span class = " Mr.-only " >Previous</span> </a> <a class = " right carousel-control? href = " #myCarousel? dates-slide = " next " > <span class = " glyphicon glyphicon-chevron-right " ></span> <span class = " Mr.-only " >Next</span> </a> </div> <! -- Custom Controls --> <a href = " Javascript: void (0); you go = " prevBtn " >Prev Slide</a> <a href = " Javascript: void (0); ? you go = " nextBtn " >Next Slide</a>

** Code 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 >

The following options are available to form Bootstrap Merry-go-round according to their needs.

  • interval (to number) – Specific the amount of lag time between the cycling automatically. Adjustment falsepara to stop the cycling automatically. Time of predetermined retardation is of 5000 milliseconds.
  • string slows down ( | null) – For a pause in the cycle of MouseEnter and has been resuming the cycle of mouseleave. Adjustment falsepara to stop a pause in bicycle in hovering. The value by defect is to hover.
  • wrap (they boolean) – Specific if the merry-go-round must continuous cycle or to stop in the last slide. The value by defect is true.
  • keyboard (they boolean) – Specific if the merry-go-round must react to keyboard events. The value by defect is true.

The following example shows how it is possible to be specified the options of the Carousel.

<script type = " text/Javascript " > $ (‘.carousel’) .carousel (\ {interval: 8000, slow down: true, wrap: false}); </script >

To see demo

To create a Responsive webpage easily

To create a webpage responsive easily.

In this subject we go to speak on as creating a webpage responsive totally, this it does not fear very advanced, it is only a very basic example, but with this they will have a great idea on since a website becomes that is adaptable with any screen in different devices.

 

As creating a website responsive.

We begin.

Step 1. We define the Metatag

Within the label you must place the following lines of code.

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

Internet Explorer 8 does not support average-queries, reason why we will have to give him to support by Javascript, using average-queries.js or respond.js. We will include this line in our code HTML.

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

Step 2. We define Structure HTML

In this example is a simple structure with header, container content, sidebar and to footer. Header is fixed and has a height of 180px. The container content has a width of 600px and the lateral bar of 300px.

""

Step 3. We create CSS Average.

CSS3 mediates query is the key for a design responsive. It says to him to the navigator as renderizar the page for specific widths. The following rules will be effective in a width of 980px or less. Simply the value of the width of the container of pixel changes to percentage, reason why the containers will flow, instead of being static.

/* for 980px or less */</code> #pagewrap \ {width: 94%: } #content \ {width: 65%; } to #sidebar \ {width: 30%; }

For viewport of 700px or except #content and to #sidebar passes to a width car and float is eliminated will thus have a complete width, to the 100%.

/* for 700px or less. Of car width takes control reset to the container. * #content \ {</code> width: car; float: none; } to #sidebar \ {width: car; float: none; }

For 480px or less resetea #header to car, it changes to the source h1 to 24px and hides the lateral bar.

/* for 480px or less * to #header \ {</code> height: car; } h1 \ {font-size: 24px; } to #sidebar \ {display: none; }

With this basic example, you will have some adaptable Web responsive to in different screens or a movable device.

To see demo