bootstrap-wysihtml5 · Javascript plugin wysiwyg editor for bootstrap

Overview

Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.

Examples

Usage

Download:

<textarea id="some-textarea" placeholder="Enter text ..."></textarea>
        
        <script type="text/javascript">
                $('#some-textarea').wysihtml5();
        </script>

 

via github.com

Útil para nuestro próximo proyecto

CodeIgniter Cache Helper

CodeIgniter Cache Helper

I am a huge fan of output caching and CodeIgniter has a very effective output caching system, however, it is lacking some very important functions for managing the cache files. CodeIgniter Cache Helper fixes that issue by giving you a simple helper that you can add to your CodeIgniter project that will let you manage your output cache files in code.

For more information on caching in CodeIgniter you should take a look at my article Caching with CodeIgniter: Zen, headaches and performance.

via stevenbenner.com

Un helper para realizar operaciones con la caché de codeigniter (invalidación, manipulación, etc.)

Font Awesome, the iconic font designed for use with Twitter Bootstrap

  1. Copy the Font Awesome font directory into your project.
  2. Copy font-awesome.less into your bootstrap/less directory.
  3. Open bootstrap.less and replace @import "sprites.less"; with @import "font-awesome.less";
  4. Open your project's font-awesome.less and edit the font url to ensure it points to the right place.

    1. @font-face {
    2. font-family: 'FontAwesome';
    3. src: url('../font/fontawesome-webfont.eot');
    4. src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    5. url('../font/fontawesome-webfont.woff') format('woff'),
    6. url('../font/fontawesome-webfont.ttf') format('truetype'),
    7. url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
    8. url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
    9. font-weight: normal;
    10. font-style: normal;
    11. }
  5. Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
  6. Check out the examples to start using Font Awesome!
via fortawesome.github.com

Aunque en nuestro nuevo proyecto estábamos ya usando la fuente WebSymbols de JustBeNice Studio (http://www.justbenicestudio.com/studio/websymbols/) y cumplía perfectamente, no nos podemos resistir a probar ésta, que además se integra de manera directa con Bootstrap.

WordPress › BackWPup « WordPress Plugins


Do backups and more for your WordPress Blog.

  • Database Backup
  • WordPress XML Export
  • Optimize Database
  • Check\Repair Database
  • File Backup
  • Backups in zip, tar, tar.gz, tar.bz2 format
  • Store backup to Folder
  • Store backup to FTP Server
  • Store backup to Amazon S3
  • Store backup to Google Storage
  • Store backup to Microsoft Azure (Blob)
  • Store backup to RackSpaceCloud
  • Store backup to DropBox
  • Store backup to SugarSync
  • Send Log/Backup by Email
  • Multisite Support only as Network Admin

** WP 3.1 and PHP 5.2.5 Required!! **

** NO WARRANTY SUPPLIED! ** ** Test your Backups! **

via wordpress.org

Plugin de wordpress bastante potente para backups

RouteBoxer Documentation: Examples

RouteBoxer

The RouteBoxer class generates a set of LatLngBounds objects that are guaranteed to cover every point within a specified distance of a path, such as that generated for a route by the DirectionsService class. The primary use case for this class is to support implementing Search along a route against a Spatial db that supports bounding box queries.

Note that it is not the intention of the class to limit the bounding boxes to only those regions within the specified distance of the route, which is not possible given that routes are not rectangular. Consequently searches performed using these bounding boxes may return results up to ~3x the given distance from the route (twice the distance across the diagonal of a square with sides of the given distance).

via google-maps-utility-library-v3.googlecode.com

Muy útil para recuperar POIs cercanos

Lazy Load: WordPress Plugin to improve page load time

Lazy load images to improve page load times. Uses jQuery.sonar to only load an image when it's visible in the viewport.

This plugin is an amalgamation of code written by the WordPress.com VIP team at Automattic, the TechCrunch 2011 Redesign team, and Jake Goldman (10up LLC).

Uses jQuery.sonar by Dave Artz (AOL).

Authors: batmoo, automattic, jakemgold, get10up
via wordpress.org

Plugin de Wordpress para cargar imágenes sólo cuando se hacen visibles

Breadcrumbs

Breadcrumbs

New! schema.org lets you mark up a much wider range of item types on your pages, using a vocabulary that Google, Microsoft, and Yahoo! can all understand. Find out more. (Google still supports your existing rich snippets markup, though.)
Note: This article describes an experimental format. Depending on feedback and on other available markup standards, it may be modified or replaced in the future.

About breadcrumbs

A breadcrumb trail is a set of links (breadcrumbs) that can help a user understand and navigate your site's hierarchy, like this:

Webmaster Tools › Help articles › My site and Google › Creating Google-friendly sites

Pages can have more than one breadcrumb trail. For example:

Books › Authors › Stephen King
Books › Fiction › Horror

When you mark up breadcrumb information in the body of a web page, Google can identify it and use it to understand and present the information on your pages in our search results.

Properties

Breadcrumbs can contain a number of different properties which you can label using microdata or RDFa markup. Google recognizes the following breadcrumb properties.

Property Description
title The title of a breadcrumb.
url The URL of a breadcrumb.
child The next breadcrumb in the hierarchy. The child must be another Breadcrumb item.

The following HTML code describes a breadcrumb trail for a product page on a women's clothing site. 

Dresses › 
  Real Dresses › 
  Real Green Dresses

This set of breadcrumbs will appear on the page like this:

Dresses › Real Dresses › Real Green Dresses

The following sections describe how to mark up this content using microdata or RDFa.

Microdata

Here is the same HTML code marked up with microdata:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  
    Dresses
   ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  
    Real Dresses
   ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  
    Real Green Dresses
  
</div>

Here's how this sample works:

  • On the first line of each <div>, <itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> indicates that the HTML enclosed in the <div> describes a breadbrumb. itemscope indicates that the content of the <div> describes an item, and itemtype="http://data-vocabulary.org/Breadcrumb" indicates that the item is a breadcrumb.
  • The sample describes properties of the item, such as its title and URL. To label properties, each element containing one of these properties (such as <div> or <span>) is assigned an itemprop attribute indicating a property. For example, <span itemprop="url">.
  • Each breadcrumb item should appear in order, with the first item representing the top-level page, and the final item representing the parent of the current page.

If a page has multiple breadcrumb trails

If your page contains only a single breadcrumb trail, Google will use the order of items as they appear on your page. However, if your page contains more than one breadcrumb trail, you must indicate the breadcrumb trail to which each breadcrumb belongs. To do this, use the child property to specify the next item in the hierarchy, like this:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  
    Books
   ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    
      Authors
     ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      
        Stephen King
      
    </div>
  </div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  
    Books
   ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    
      Fiction
     ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      
        Horror
      
    </div>
  </div>
</div>
RDFa
via support.google.com

Para implementar en tuitrafico

bartaz/impress.js - CSS3 presentation framework on GitHub

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. — Read more

Latest commit to the master branch

README.md

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

WARNING

impress.js may not help you if you have nothing interesting to say ;)

ABOUT THE NAME

impress.js name in courtesy of @skuzniak.

It's an (un)fortunate coincidence that a Open/LibreOffice presentation tool is called Impress ;)

VERSION HISTORY

master (in development)

CONTAINS UNRELEASED CHANGES, MAY BE UNSTABLE

  • added mousewheel support (thx @OpenGrid)
  • couple of small bug-fixes

0.1 (browse, zip, tar)

First release.

Contains basic functionality for step placement and transitions between them with simple fallback for non-supporting browsers.

EXAMPLES AND DEMOS

Official demo

impress.js demo by @bartaz

Presentations

What the Heck is Responsive Web Design by John Polacek @johnpolacek

12412.org presentation to Digibury by Stephen Fulljames @fulljames

Websites and portfolios

lioshi.com by @lioshi

alingham.com by Al Ingham @alingham

If you have used impress.js in your presentation (or website) and would like to have it listed here, please contact me via GitHub or send me a pull request to updated README.md file.

BROWSER SUPPORT

TL;DR;

Currently impress.js works fine in latest Chrome/Chromium browser, Safari 5.1 and Firefox 10 (to be released in January 2012). IE10 support is currently unknown, so let's assume it doesn't work there. It also doesn't work in Opera.

As it was not developed with mobile browsers in mind, it currently doesn't work on any mobile devices, including tablets.

Still interested? Read more...

Additionally for the animations to run smoothly it's required to have hardware acceleration support in your browser. This depends on the browser, your operating system and even kind of graphic hardware you have in your machine.

For browsers not supporting CSS3 3D transforms impress.js adds impress-not-supported class on #impress element, so fallback styles can be applied to make all the content accessible.

Even more explanation and technical stuff

Let's put this straight -- wide browser support was (and is) not on top of my priority list for impress.js. It's built on top of fresh technologies that just start to appear in the browsers and I'd like to rather look forward and develop for the future than being slowed down by the past.

But it's not "hard-coded" for any particular browser or engine. If any browser in future will support features required to run impress.js, it will just begin to work there without changes in the code.

From technical point of view all the positioning of presentation elements in 3D requires CSS 3D transforms support. Transitions between presentation steps are based on CSS transitions. So these two features are required by impress.js to display presentation correctly.

Unfortunately the support for CSS 3D transforms and transitions is not enough for animations to run smoothly. If the browser doesn't support hardware acceleration or the graphic card is not good enough the transitions will be laggy.

Additionally the code of impress.js relies on APIs proposed in HTML5 specification, including classList and dataset APIs. If they are not available in the browser, impress.js will not work.

Fortunately, as these are JavaScript APIs there are polyfill libraries that patch older browsers with these APIs.

For example IE10 is said to support CSS 3D transforms and transitions, but it doesn't have classList not dataset APIs implemented at the moment. So including polyfill libraries should help IE10 with running impress.js.

And few more details about mobile support

Mobile browsers are currently not supported. Even iOS and Android browsers that support CSS 3D transforms are forced into fallback view at this point.

Anyway, I'm really curious to see how modern mobile devices such as iPhone or iPad can handle such animations, so future mobile support is considered.

iOS supports classList and dataset APIs starting with version 5, so iOS 4.X and older is not likely to be supported (without polyfill code).

LICENSE

Copyright 2011-2012 Bartek Szopka. Released under MIT License.

via github.com

Amazing presentations using CSS3 transitions and transforms. If browser support was not a problem, I would go for it. Inspired by prezi.com