Oct 17, 2012

HTML5 useful online tools

Filled under:

HTML5 useful online tools
HTML5 - the fifth version of html-standard. In HTML5, there is a set of syntactic features. For example, items <video> ,<audio> and <canvas> , as well as the use of SVG. Today we bring you a selection of useful HTML5 online tools that are sure to be useful to you in your work and save a lot of time. All the tools are completely free and can be used online.

On / Off switch on HTML5/CSS3

With this tool, you can generate a CSS3 On / Off switch.

On / Off switch on HTML5/CSS3
Visi source

Online X-ray Tool

This online tool allows developers to quickly view information about the different elements of the page with just a few mouse clicks.
Online X-ray Tool
Visit source

Adobe Edge Animate

Online tool for creating animations.
Adobe Edge Animate
visit source

HTML Kickstart

Fremvork written in HTML5, CSS, and jQuery (javascript), which will help you save time.
HTML Kickstart
visit source

Canvas Loader Creator

The free online tool that allows you to generate preloaders for HTML-projects.
Canvas Loader Creator
visit source

Rendera

Enter here HTML-code and you can see its implementation. You can use any browser that supports HTML 5 and CSS3.
Rendera

visit source

LimeJS

LimeJS - it is HTML5-framework for game developers.
LimeJS

visit source

HTML5 Audio Element Maker

A tool that helps you create HTML5-Audio.
HTML5 Audio Element Maker
visit source

HTML5 Outliner
HTML5 Outliner

visit source

Initializr

Initializr - HTML5-pattern, which is built using the HTML5 Boilerplate.
Initializr

visit source

HTML5 Periodic Table

The periodic table of the 107-and html-elements.
HTML5 Periodic Table
visit source

Posted By Unknown9:05 AM

Oct 16, 2012

WordPress Update for SSH

Filled under:

WordPress Update for SSH
 Notice that this article is not for beginners, because the first thing is that you have full access to your server , using the command interface, in this case the shell.

That if, when you spend that little scare, not inconvenience you greatly facilitates life, because everything is faster by SSH .


So, fears were, if we saw a while as by WordPress install SSH , and even as update WordPress with subversion , today we update WordPress via SSH , and we'll see a couple of ways to do this.

1. WordPress Update for SSH

In the following commands is always assumed that they are doing in the directory of your WordPress ( myweb in the example). So now this clear leaving first thing to do is download the latest version and removing it , we will do so:

wget http://wordpress.org/latest.tar.gz
tar xfvz latest.tar.gz

Then delete the directory ' wp-admin 'and' wp-includes 'old:

rm -rf ./wp-admin
rm -rf ./wp-includes

To then go to the folder " wordpress "where we extracted the latest version of WordPress and move all files to the directory on your WordPress :

cd wordpress
mv * ../miweb/

When you start the process the shell prompts you to overwrite some files and folders , also within the directory 'wp-content', and there you decide that you overwrite it and what not, my advice always you know, do not ever with ' wp-content ' .

When the process left the folder " wordpress "and delete the directory and file ' latest.tar.gz ':

cd ../
rm -rf ./wordpress/
rm -f latest.tar.gz

The final step is to access your desktop and update the database if asked WordPress.

2. Enable SSH2 to update WordPress

A WordPress possibility that perhaps do not know is that you can use SSH for upgrades and installations of plugins and themes. The first thing to do is check if your accommodation is installed SSH2 PHP extension or not . To test PHP executes the following command:

var_dump( extension_loaded( 'ssh2' ) );

If the result is yes ( true ) then that means it is installed , but is not, of course. If not installed and want to have it, one of two, ask your hosting provider you install it, or if you have a VPS or dedicated server install yourself. In the latter case the mode is as follows:

The first is to create a series of public and private keys that will be used to identify you. To create them we use the following command in your SSH client:

ssh-keygen

I asked for the file name. You can leave it blank or put any name you can think of. If left blank file names will id_rsa.pub and id_rsa . You can also set a password here to add extra security, or if you prefer leave blank also.

Then touches add keys necessary to file authorized_keys . In our example the SSH keys are created and saved in the ' . ssh ', within the root directory.

cd .ssh
cp id_rsa.pub authorized_keys

The next thing is to change the permissions so that WordPress can access these keys :

cd ../
chmod 755 .ssh
chmod 644 .ssh/*

Of course, the user will have to change the directory if you are running PHP as another user.

Now that we have configured and running SSH2 should see the following screen when you update or install a plugin or theme:
WordPress Update for SSH

In this screen the user is the username you used SSH to access and carry out all the commands, and the key is the password you requested when you ran the command ssh-keygen . If you did not choose a password then leave the field blank. If you also do not want to have to repeat this step every time you update then add the following to your wp-config.php :


define('FTP_PUBKEY','/home/user/.ssh/id_rsa.pub');
define('FTP_PRIKEY','/home/user/.ssh/id_rsa');
define('FTP_USER','tuusuario');
define('FTP_PASS','tucontraseña');
define('FTP_HOST','tudominio.com');


Of course, changing the routes for yours , with special attention to the absolute paths of lines 1 and 2, remember this is an example, you must not copy and paste it as is but suit your credentials and installation.

After you save the changes WordPress will perform the file transfer using SSH updates .

What is not for you this?, Because then you can automatically update WordPress to normal, or to the beast .

Posted By Unknown7:25 PM

Oct 15, 2012

Inspiring examples of adaptive web sites

Filled under: ,


Adaptive design helps conveniently browse the web with a variety of devices that can access the Internet.According to the technology of adaptive web design does not have to create separate versions of the website for the different sizes indicate different styles. Today, we want to offer you a selection of adaptive sites that may inspire you and push on new ideas.


I. Deux Huit Huit

Deux Huit Huit
Website Source


II. dConstruct 2012
dConstruct 2012
Website Source


III. Rally Interactive
Rally Interactive
Website Source


IV. The Work Cycle
The Work Cycle
Website Source


V. Web Design Yorkshire
Web Design Yorkshire
Website Source


VI. More Hazards
More Hazards
Website Source


VII. Stunning CSS3
Stunning CSS3
Website Source


VIII. 2012 Sasquatch Music Festival
2012 Sasquatch Music Festival
Website Source


IX. Teixido
Teixido
Website Source


X. Sweet Hat Club
Sweet Hat Club
Website Source


XI. Sparkbox
Sparkbox
Website Source


XII.Touchtech
Touchtech
Website Source


XIII. Spigot Design
Spigot Design
Website Source


XIV. Cognition
Cognition
Website Source


XV. Authentic Jobs
Authentic Jobs
Website Source


XVI. Gravitate Design
Gravitate Design
Website Source


XVII. Alsacreations
Alsacreations
Website Source


XVII. Fork
Fork
Website Source


XIX. Glitch
Glitch
Website Source


XX. Naomi Atkinson Design
Naomi Atkinson Design
Website Source

enjoy.

Posted By Unknown9:31 PM

Oct 13, 2012

WordPress Logos for mobile

Filled under:

WordPress Logos for mobile
 If you, like me, full of WordPress fan you probably already have a logo of WordPress for your phone or tablet , for all to see that you are a real geek.

And if you've fallen short of logos you just happened there a website with the official logos, also for mobile devices.


It is on page WordPress Logos and graphics , where logos of all sizes, and special ones for smartphones (640 × 960 pixels) and even for iPad (2048 × 1536 pixels).

Just visit the page with your device, open the size best suited to it and save it to use and show your loyalty to WordPress.
WordPress Logos for mobile

WordPress Logos for mobile

WordPress Logos for mobile

Posted By Unknown10:20 PM

Oct 11, 2012

Improving the WordPress code editor

Filled under:

Improving the WordPress code editor
 In many occasions to edit a WordPress theme or plugin editor used the WordPress native code to avoid having to make the effort for FTP and edit the file with a code editor. But the WordPress code editor presents a simple plain text which we edit our code as we can ...

How about if we understand a little more?


Work to improve ourselves, is CodeMirror . A JavaScript-based component that detects over 20 programming languages ​​and like any code editor uses syntax coloring  to go while watching programming can go well if you're writing well, or how you're doing, by color according each category of terms.

To install, simply download the files  and decompress them in the same directory of your theme. Then simply add this line to your functions.php of your theme or your plugin functions ...

require_once("codemirror/codemirror.php");

And presto! A new and improved code editor , with it we can more easily edit codes ...
Improving the WordPress code editor
Thanks

Posted By Unknown8:00 PM

Oct 10, 2012

WordPress 3.5: Install your favorite plugins

Filled under: ,

WordPress 3.5: Install your favorite plugins

One of the new features of WordPress 3.5 will soon see is the inclusion of the possibility of installing plugins from your list of favorite plugins WordPress.org .

This functionality we saw recently is already built into WordPress 3.5 and allow you to quickly and easily install your favorite plugins on any new site.


Just go to " Plugins -> Add 2 and then choose the link called " Favorites ". After entering a user name from WordPress.org, which need not be yours so you can " pull "the favorite of another user, you'll see the list of user favorite plugins and install them quickly and easily from the list.

WordPress 3.5: Install your favorite plugins

Sounds like a really useful and practical functionality is not it?. 

Posted By Unknown7:28 PM

Oct 9, 2012

That first image is automatically dial an entry as highlighted in WordPress

Filled under:

That first image is automatically dial an entry as highlighted in WordPress

Since the appearance of the images featured in WordPress is a widely used resource for all kinds of new-style themes, becoming almost essential.

However, if you already have a site with many entries, set the images to highlight in old entries can be a real pain in the ass , being benevolent.


Fortunately there are ways to do so we do not have to go manually adding each entry featured images do you see?.

First we see the ways that we have seen earlier in WordPress Help to define default featured images:


  1. Thumbnails by default on all inputs : by code or plugin can define a featured picture "to capon" in all entries, something great if you do not want to complicate too.
  2. Making several outstanding images at once : a finer way, where at least define outstanding images from the Media window, can add images in batches.
  3. Automate outstanding images by category : spinning even finer in this case, we define an image as highlighted by default according to the category of the entry. The code would look something like this:



< ?php if(in_category('categoria-1') { ?>
<img src="ruta-carpeta-imagen/categoria-1.jpg" alt="Categoria 1" />
<?php } elseif(in_category('categoria-2') { ?>
<img src="ruta-carpeta-imagen/categoria-2.jpg" alt="Categoria 2" />
<?php } else { ?>
<img src="ruta-carpeta-imagen/no-category.jpg" alt="Otra categoria" />
<?php } ?>


And, returning to the issue that brings us here today, a more elegant solution, tailored to each entry, WordPress would take the first picture you find in each entry and use as outstanding image right?.

Well, we can do this fancy stuff in two ways:

First picture ... as automatically highlighted code ...

What we have to do is open our plugin function and add this code:


//primera imagen como destacada
function auto_post_thumbnail() {
          global $post;
          $already_has_thumb = has_post_thumbnail($post->ID);
              if (!$already_has_thumb)  {
              $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
                          if ($attached_image) {
                                foreach ($attached_image as $attachment_id => $attachment) {
                                set_post_thumbnail($post->ID, $attachment_id);
                                }
                           } else {
                                set_post_thumbnail($post->ID, 'ID_imagen_por_defecto');
                           }
                        }
      }
 //Ahora añadimos la función al loop
add_action('the_post', 'auto_post_thumbnail');
add_action('save_post', 'auto_post_thumbnail');
add_action('draft_to_publish', 'auto_post_thumbnail');
add_action('new_to_publish', 'auto_post_thumbnail');
add_action('pending_to_publish', 'auto_post_thumbnail');
add_action('future_to_publish', 'auto_post_thumbnail');


You just have to modify the code in line 12, substituting " ID_imagen_por_defecto "by the ID of the default image to show if there were any images on some input. To find the ID you can use the trick explained in the article on how to include and exclude images in WordPress galleries .

The rest of the code does what it promises : take the first image it finds in the input and as a leading brand.


First picture ... as outstanding plugin automatically ...

And if you get scared still fiddling code and enjoy the great virtues of totally dominate WordPress, you can always use the plugin - strangely - called " Automatically set image as featured 1st ", who comes to do the same as the previous code, only You lose the functionality of the default image if there were no images at the entrance.

The best thing about this plugin is that there is nothing to configure, install it, activate it and it works.

Posted By Unknown6:57 PM