Archiwum kategorii: Web Tools

A Scaleable Color Picker – colorjoe

Post pobrano z: A Scaleable Color Picker – colorjoe

Advertise here with BSA

Usually in web apps, when we want to collect color values from users, color pickers help a lot. And, there are various high-quality color pickers out there.

colorjoe is a new one which differentiates itself by being completely scaleable which is great for responsive layouts.

colorjoe - JavaScript color picker

It doesn't use any images, can be customized with CSS and works with all major formats (RGB, HSL, HSV or CMYK).

The color picker is standalone and has 2 callbacks: change (which is triggered continuously to detect value changes) and done (which is fired when a color is selected).

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

PHP Libraries For Working With Excel, Word And Powerpoint Files

Post pobrano z: PHP Libraries For Working With Excel, Word And Powerpoint Files

Advertise here with BSA

As web designers/developers, MS Office files are pretty far from our daily lives. We usually don't need to create one and, if needed, there are web apps for that.

However, for web apps that host lots of information, enabling users to import/export the data is a huge time-saver and Excel (XLS, CVS) files are the most popular format for that job.

For standard content, we can always export it as a HTML file but, depending on the audience, providing Word files can be a better option.

If you are a PHP developer, working with MS Office files (Excel, Word and Powerpoint in our case) is so easy with the help of mature libraries out there.

Here are alternatives (both simple and complicated) where you may choose the one that fits the best to your project.

PHPExcel

PHP Excel

A full-featured PHP library for handling and creating Excel files which can read from many different spreadsheet file formats like Excel (.xls), Excel 2007 (OfficeOpenXML -.xlsx), CSV, Libre/OpenOffice Calc .ods, PDF, HTML, etc.

It has support for setting any meta data of spreadsheets (author, title..), adding worksheets/rows/columns, merging cells, manipulating formulas, formatting and much more.

You may also want to read more about its features here.

SimpleExcel PHP

SimpleExcel PHP

This PHP library is simple-yet-powerful and supports both writing + parsing files with Microsoft Excel XML/CSV format.

It accepts getting all the cells in a row or only a single cell (the same goes for the column).

PHP-Excel

A simple library for only generating Excel files.

It takes a 2-dimensional array and converts the data with a single function.

PHP Export Data

The library is based on the PHP-Excel mentioned above and can export data to Excel-friendly XML, CSV, or TSV.

There is support for streaming the data to a file or as a download.

Excel Writer (XML) for PHP

A set of PHP classes for dynamically generating Excel XML files.

Besides the initial Excel document, it can create sheets and style the output.

PHP Excel Reader

This PHP library is only for parsing and retrieving data from XLS files.

It allows targeting any specific cells, counting number of rows and format the output (alignment, colors, borders, etc.).

PHPWord

PHPWord

A powerful PHP library for creating Word files. Actually, .docx files (Office Open XML) which can be opened by many office programs.

Using the library, we can insert text, text breaks, page breaks, headers/footers, tables, list elements, hyperlinks and format all of them.

 

PHPPowerpoint

PHPPowerpoint

A PHP library that makes it possible to create a presentation, add slides to it (including test and images), format them and more.

The presentation can be exported as a PowerPoint 2007 (presentationML) or PHPPowerPoint Serialized Spreadsheet file.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Create QR Codes Online (Generators, JavaScript Plugins & Code Libraries)

Post pobrano z: Create QR Codes Online (Generators, JavaScript Plugins & Code Libraries)

Advertise here with BSA

QR Codes, a tracking code technology which was created in 1994 by Denso<Toyota to keep track of vehicles, is now a standard being used everywhere from websites to magazines, apps or stores.

In the web, considering the mobile devices are used as the barcode reader, QR Codes are usually used as an alternative way to show app download/purchase links, wi-fi passes, mobile version URLs of websites, etc.

I needed to create few of them in the past, used online QR Code generators and I was done in a few minutes.

Recently, a project required hundreds of them being generated automatically and I have played with many different JavaScript + server-side solutions. I have faced solutions that are -sometimes- not working correctly, not supporting too short or long texts or they were not simple enough. Here is the list of solid and good-quality QR Code generation resources that all work very straightforward:

P.S. I ended up using a JavaScript library which is so easy to implement, flexible in all levels, and, I knew that it would always be used by a modern browser. You can choose the solution that  fits the best to your case from the list below.

Online QR Code Generators


QRhacker

QRhacker

QRhacker is a beautifully implemented online QR code generator with many options for creating the QR code we want.

It allows many different input types (text, URL, phone number, VCard and Wi-Fi access) and offers customizations like the roundness of the blocks, their foreground/background colors, using images for them and more. Also, the code can be painted pixel-by-pixel.

Once the QR code is created, it can be downloaded either as an image or PDF.

Unitag

Unitag

QR codes have a built-in error-correction mechanism and codes that are slightly morphed can still be recognized correctly.

Unitag makes use of this and allows users to transform QR codes by curving the blocks, adding extra shaped and more.

QrCodeGener

QR Code Gener

The website has a very clean interface and has a set of pre-defined QR code types.

QR codes can be downloaded in any size (including print quality ones) and an optional embed feature exists.

Beqrious Generator

Beqrious Generator

This QR code generator accepts almost anything as the input (from text to images or Youtube videos to Facebook profiles).

There is an option to change the color of the QR blocks and the output can be saved in JPG, GIF, PNG + PDF format.

QR Stuff

QR Stuff

QR Stuff differentiates itself from other QR generators with the ready-to-use templates for various services like the ability to create Skype call, FourSquare, Google Maps, etc. links.

QRcore

QRcore

A simple QR code generation tool with no distractions. Just mention the text, choose the size and get it.

There is also an option to have an embed link.

goQR.me

goQR.me

goQR is a good solution for anyone looking to create QR code with no complicated stuff.

It has a plain interface and offers an embed feature which is handy.

lil'qr

lilqr

lil'qr is a way simpler alternative compared to any others in the list as it only accepts text as the input and offers no customizations.

But, it has a unique feature: it auto-displays the QR code of the current URL by inserting a simple <img> tag to web pages.

 

QR Code JavaScript Plugins


JSQR

This is a standalone QR Codes JavaScript library that can generate the codes from vCards, vCalendar Events, geo coordinates and more.

There are methods for defining the error correction level, dimensions and colors.

jquery.qrcode

A jQuery plugin for creating QR codes on-the-fly, totally on the browser-side.

It is based on the QR Code Generator library mentioned below but wraps it as a plugin.

QR Code Generator

This is one of the most popular solutions around. It has versions in JavaScript, Java, PHP and AS3.

jQuery uQR plugin

uQR is a very flexible plugin that has settings for generating the QR Codes of e-mails, geolocations, addresses, phone numbers, etc.

QR Code Class

A JavaScript solution for making QR Codes using Google Charts API.

There are again options to define almost anything as the input.

Google Charts API

Although this is a hosted JavaScript library that creates QR Codes with requests to the Google servers, it is still a very good

 

QR Code Server-Side Libraries


PHP QR Code

An open source PHP library for generating QR Codes with PHP without any dependencies (except GD2).

PHP QR Code Class

This PHP class uses only the native methods, no modules required, and, it accepts text + images as the input.

QRForAll (PHP)

A simple and very easy-to-use class that is built with PHP5 and requires GD2.

PHP QR Code Generator Class

The PHP class creates QR codes in PNG and has options to allow many different inputs.

rqrcode-rails3 (Rails)

A Ruby gem for Rails to render QR Codes which support both SVG and PNG outputs.

It can also set a desired "error correction level".

rQRCode (Ruby)

rQRCode encodes QR Codes with Rails.

pyqrcode (Python)

A python extension for encoding and decoding QR Codes.

It has support for defining the dimensions and the QR Code type.

QrCode.Net (.NET)

An open source .Net library for encoding and decoding QR Codes.

It can render artistic QR Codes as well.

QRCode Library (.NET)

A .NET QR Code component to encode/decode these codes.

The generated codes can be saved in JPEG, GIF, PNG or Bitmap formats.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

jqmPhp – HTML Code Generator For jQuery Mobile

Post pobrano z: jqmPhp – HTML Code Generator For jQuery Mobile

Advertise here with BSA

jqmPhp is an open source project that aims to simplify using jQuery Mobile with PHP.

It is a pack of PHP classes that can generate the HTML outputs which jQuery Mobile is expecting within few lines.

jqmPhp

The classes are on separate files (with names parallel to the JQM's features) so you can choose to only use the necessary ones.

It covers almost all the features of the framework, it is very well-documented and supported with examples.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Udemy – Online Courses For Creatives (Giveaway Of 3 Courses You Want)

Post pobrano z: Udemy – Online Courses For Creatives (Giveaway Of 3 Courses You Want)

Advertise here with BSA

Today, everything around us are evolving very fast and we always need to stay up-to-date + learn new stuff to keep being a part of them.

If we take the work-life of a designer/developer as a base, there are many new tools, softwares and techniques appearing each day. Clients now expect websites with HTML5-CSS3 or more & more printing houses ask for .AI files rather than .EPS when you are about to get a business card printed.

Simply, there are always new things to learn. And, if you find it easier to learn from experts, there is Udemy, a place to find online courses on everything where the teachers are real experts.

Udemy is giving away free course of your choice to 3 WRD readers. Please check the details of the giveaway at the bottom of this post to join.

Udemy

Here are some of the popular courses which you may be interested in:

And, there are many other courses including free ones like the "iPhone App Design: How To Make A Top Selling iPhone App With Great Design" or "SEO Tips and Tricks with SEOmoz".

How to join the giveaway?

In order to get a chance to win one of the "1 any course you want" given away to 3 WRD readers:

  • create an Udemy account
  • and comment to this post (please mention your Udemy account e-mail in the "comment e-mail" field).

Winners will be selected randomly on 3 July 2012 (a week later) with the query below and announced as an update to this post .

SELECT * FROM wp_comments WHERE comment_post_id=3061 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Websockets For PHP – Ratchet

Post pobrano z: Websockets For PHP – Ratchet

Advertise here with BSA

A common PHP-powered website is expected to run a script on the server, its content being rendered as HTML, the output is displayed and connection is closed

Using Ratchet, a WebSockets library for PHP, the connection stays open and both the client + server can push data to each other which is perfect for live-apps.

Ratchet - PHP WebSockets

It consists of multiple components including:

  • IoServer (the core to handle the events)
  • WsServer (for communicating with W3C WebSocket API)
  • SessionProvider (for handling the sessions)
  • WampServer (provides the RPC and PubSub patterns)
  • FlashPolicy (Flash fallback for unsupported browsers)
  • IpBlackList (prevent any IPs from opening connections)

Ratchet is very well-documented and a nice chat demo exists which show its capabilities.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Cross Browser Testing In The Desktop: BrowseEmAll (5 Licenses Giveaway)

Post pobrano z: Cross Browser Testing In The Desktop: BrowseEmAll (5 Licenses Giveaway)

Advertise here with BSA

Years pass and browsers still render stuff very differently : ). It seems like they will keep doing so considering the different engines out there: WebKit, Gecko, IE, Presto (Opera).

They have different defaults, some CSS properties don't work on another and there can even be inconsistencies when rendering JavaScript.

BrowseEmAll is a Windows software for testing a website with many different browsers interactively and removing the pain out of the whole testing process.

And, they are giving away 5 Professional licenses to WRD readers. Check the bottom of the post for details.

BrowseEmAll

The software looks and works like a browser which allow us to select the rendering engine from a wide list of options:

  • Internet Explorer (7 – 9)
  • Firefox (3.6 – 12)
  • Chrome (12, 16, 19)
  • Safari (4, 5, 5.1)
  • Opera (10, 11)
  • iPhone, iPhone 4
  • iPad, iPad 2 simulator
  • Android (2.2, 2.3, 3.2 tablet, 4.0, 4.0 tablet)

It is also possible to select the resolution and viewport (landscape or portait) for mobile + tablet browsers.

Once a website is loaded with the browser of our preference, we can browse it like a regular website and see if things work as expected.

Under the loaded website, there is a useful little feature, "Inspect and Compare", for comparing the HTML + DOM structure of the loaded URL with another browser to better locate any possible inconsistencies.

BrowseEmAll Report

As BrowseEmAll works on our computer, we can also test websites hosted locally and no need to upload them to the web.

Besides browsing websites, the software can also automatically-generate cross-browser compatibility reports for selected browsers. The report includes screenshots with each browser and any HTML-CSS errors (if exists). 

To sum up, BrowseEmAll is a very good option for very quickly testing websites across multiple browsers with a single installation. Specially, the local testing feature makes it pretty unique.

How to join the giveaway?

BrowseEmAll is giving away 5 Professional licenses (worth $89/each).

In order to join the giveaway, you can choose one of the methods below or do both to increase your chances:

Winners will be selected randomly on 06 Jun 2012 (1 week later). Good luck to all.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Chronoline.js – A JavaScript Library For Displaying Timeline Of Events

Post pobrano z: Chronoline.js – A JavaScript Library For Displaying Timeline Of Events

Advertise here with BSA

Chronoline.js is a JavaScript library for creating a chronological timeline of events.

The timeline is is displayed horizontally, events placed on it can be any days long and details about the events are shown in a tooltip when hovered.

Chronoline.js

It can feature the timeline with any number of days (day-by-day, weekly, quarterly, month-by-month, etc.).

The library uses Raphael.js + jQuery and works only in modern browsers.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Open Source Web App For Creating Animated GIFs Online

Post pobrano z: Open Source Web App For Creating Animated GIFs Online

Advertise here with BSA

There are many web-based apps for designing + editing images and, day-by-day, they are becoming a serious alternative to any desktop image editing softwares.

On the other hand, it is hard to find "animated GIF support" in any of them and creating animated GIFs without a desktop app can be a pain.

Online Animated GIF Creator

MotherEffingAnimatedGIF is a very simple-yet-functional and open source web application for quickly creating such images online.

You just drag 'n' drop any number of images to the app, re-order or rotate them, set the image size + quality and the delay between each frame.

After that, it is possible to preview the animated GIF and download the output.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Faster Google Maps Integrations With GMaps.js

Post pobrano z: Faster Google Maps Integrations With GMaps.js

Advertise here with BSA

Google Maps, like any other Google product is already easy-to-use and their API is not that complicated to work with.

However, things can always be simpler and GMaps.js, a feature-rich jQuery plugin, helps consuming Google Maps much easier.

GMaps.js

Besides adding a standard map of a specific location, we can define the zoom level, add markers, get the location of a user (HTML5 geolocation), define routes, draw polylines and more with only few lines of code.

And, it has callbacks on every action to integrate any custom events. GMaps.js is not documented in detail, however, it has examples of each feature.

Advertisements:
Infragistics jQuery controls deliver the magic of HTML5, w/o sacrificing resources, time, or money.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)