php

HTML5 Web Component Widgets for Displaying Movie Data from IMDb

A few months ago I designed and developed this RESTFul API for extracting movie data from IMDb with a couple of methods, and I am happy that a lot of people actually found it useful. In a number of occasions I was contacted regarding the availability of any easy to use on our websites widgets, which utilize the data from IMDb Fetcher, and this eventually lead to the creation of the first one.

I implemented it as a reusable HTML5 Web Component *, and it’s usage is simple as using HTML tags, like:

<acidjs-imdb-movie
    movie="WarGames"
    renderposter="true"
    mode="compact">
</acidjs-imdb-movie>

The service is hosted on imdb.wemakesites.net, and in order to use he acidjs-imdb-movie tag you need to register it’s run time on your page:

<script src="http://widgets.imdb.wemakesites.net/1.0/"></script>

As the widget requires jQuery, and you may already have it on your website you may register just the rest of the code required to run the tag like:

<script src="http://widgets.imdb.wemakesites.net/1.0/?jquery=false"></script>

The widget comes in three different sizes:

Full

acidjs-imdb-movie-full

Compact

acidjs-imdb-movie-compact

Minimal

acidjs-imdb-movie-minimal

In regards to the configuration of the tag, you  have the following attributes:

  • movie – required. Its value is the name of the movie, against which will be queried the API.
  • mode – optional. Here you can set the size of the widget. You have “full“, “compact” and “minimal“. If no value is set, the widget will render in full view.
  • renderposter – optional Boolean. Default is true. If set to false, the widget will be rendered without poster.

The acidjs-imdb-movie tag utilizes localStorage, so once movie data is loaded on the client, it is stored locally in the browser for later usage. For the next version I am planning to store the poster image as base-64 URI, but first I need to find a workaround for the security restriction of canvas and cross-domain scripting. To view the locally stored widget data, use your browser’s console like this:

window.localStorage.getItem("acidjs-movie-data");

To delete locally stored widget data, type the following in your browser’s console:

window.localStorage.removeItem("acidjs-movie-data");

Have a great weekend and thanks for reading! For more HTML5, CSS3 and JavaScript stuff, check my website or follow me on Twitter!

* Recently I dived into the amazing world of HTML5 Web Components, and maybe you will find interesting my other endeavors in this direction.

 

REST API for IMDB Movie Data

IMDB Fetcher is an experimental, free and easy to use REST API for getting movie, series and artist data from IMDB and returning it as serialized JSON objects ready to use on web applications or websites.

imdb-fetcher

REST API Methods:

  • get/title: The method retrieves data (release date, running time, embeddable poster, writers, directors, cast, synopsis, country) for the requested title.
  • get/search: Search IMDB for titles, actors, companies, writers, directors, etc.
  • get/name: The method returns info about the person, who has been searched for – name, date of birth, short bio, productions, photo, etc.
  • img/: Images on IMDB cannot be hot-linked. This method circumvents the limitation.

Go straight to the documentation and start using today!

Related Posts and Links

My New Portfolio/Personal Website is Up and Running

During the Christmas holidays I finally found the time to spend a couple of days to tackle something I’ve been planning to do for quite some time – to fully redo (in terms of code and design) wemakesites.net, my portfolio/personal website. Honestly, I wasn’t sure if I should announce it here, but I am pretty happy with the result, so this is why I am doing it – version 7.0 is now up and running!

wemakesites

Here are a few facts:

  • Custom CMS. PHP backend with RESTFul services.
  • Semantic, elegant, valid and SEO-friendly HTML5 output.
  • Scores an average of 96-100 optimization points on Google PageSpeed (depending on visitors’ network connection speed and my hosting provider’s health).
  • Scores an average of 96-100 optimization points Y!Slow (depending on visitors’ network connection speed and my hosting provider’s health).
  • Optimized both for client- and server-side rendering.
  • Unified modular client- and server-side MVC/MVVM architecture.
  • Async history management.
  • The front-end, templating, session caching and URL routing are built on top of my Semtex UI HTML5, CSS3 and JavaScript framework.
  • Fully async with JavaScript turned on.
  • Asynchronously switchable themes (the icon to the left of the search box in the navigation bar).
  • Supported browsers: Firefox, Chrome, Chromium, Opera, Opera Webkit, Safari, Internet Explorer 9+.
  • Cool social sharing toolbar, achieved with AcidJs.Tiles.
  • Fully responsive CSS3.
  • Lazy loading of images, achieved with AcidJs.ImgLazyload.
  • Decent accessibility score on WAVE.
  • The average loading time of the home page is 1.70 seconds with cache turned off.
  • The average loading time of non-cached async pages is 0.253 seconds.
  • The average loading time of session-cached async pages is 0.019 seconds.
  • CSS and JavaScript build tools.
  • Fully g-zipped.
  • Google PageRank: 4.
  • Version 7.0 (Released January 2014).

Thanks for reading and enjoy the weekend! Please, do not hesitate to contact me if you are interested in more facts about the wemakesites.net!

Related Posts and Links

HTML and PHP Hits, Clicks and Downloads Counter

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

AcidJs.ClicksCounter is HTML5, JavaScript and PHP-driven hits, clicks and downloads counter, with amazing, fully ajax admin panel and tons of great features such as data comparison, data export in JSON and CSV format, instant backup in zip format, etc.

clicks-counter

AcidJs.ClicksCounter is fully localizable and utilizes some of the greatest features of HTML5 (Blob, FileReader, etc) and its most important functionality runs on the client. It is easy to deploy, does not use SQL, but flat JSON files for databases and it is a matter of simple couple-of-minutes configuration before having it up and running!

Key Features

  • HTML5-powered data comparison.
  • HTML5-powered JSON and CSV data export.
  • Get counts widget.
  • Instant backup download in zip format.
  • Display click counts for a record on the client area.
  • No SQL, just flat JSON database.
  • Data from the popular CCounter PHP script can be easily migrated to ClicksCounter.
  • Fully localizable.
  • Click statistics.
  • Fast and responsive.
  • Fully ajax-driven.
  • Built on top of Semtex HTML5, JavaScript and CSS3 UI Framework.

Requirements

  • Web-server.
  • PHP 5.2.0 or higher.
  • ModRewrite.

Admin Screenshots

add-new-record compare-data create-new-record-prompt delete-record download-backup empty-list export-data login main-area select-file-to-compare stats

Related Posts and Links

HTML5, CSS3 and JavaScript Experiments and Insight Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!

Ribbonbar UI Web Component

 

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Ribbonbar UI is by far the best recreation of the “real” desktop ribbonbar for the web. It is skinnable, fully AJAX driven component that is ready to use on any website. What you can you do with a MS Office like ribbon bar in web environment? Whether use it for navigation, associate it with your WYSIWYG editor, use in an email application, display links to your favorite social websites or simply build your entire webpage around it – this depends only on you.

ribbon-bar-xml

Ribbonbar UI has everything you would expect from a ribbonbar – cool looks, comprehensive and easy API, amazing command handling, different sets of inbuilt tools, cool Windows7 skin. And at last, but not least – deploying and configuring it is a matter of minutes.

Key Features

  • By far, the most successful recreation of the “real” desktop ribbonbar as a web component.
  • Comprehensive documentation and fun to use API.
  • Easy to modify JSON structures for tabs, ribbons and commands.
  • Imageless CSS3 skin working with all modern browsers and falling back nicely for older browsers.
  • 4 types of inbuilt tools – “toolbar”, “office menu”, “split-button” and “external”.
  • Ability to load external tools by loading them via AJAX and passing get/post parameters.
  • Small footprint.
  • Easy command handling.
  • Can be used with 3-rd party WYSIWYG editors, as a navigation component, in email systems, etc.
  • The retrieval for the JSON files can be done with any server runtime (however Ribbonbar is shipped with PHP routine only).

Supported Browsers

  • Firefox
  • Chrome
  • Safari
  • Opera
  • Internet Explorer

Screenshots

ribbonbar-ui-4

ribbonbar-ui-3

ribbonbar-ui-2

ribbonbar-ui-1

Related

New Version of IMDB Fetcher JSON API

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I’ve just released a new version of the IMDB API, which fixes a bug that appeared a few days ago when IMDB made changes to their website. Please, download it from this link, or check this page for more info about the script. The API itself was not changed, but you can still take a look at the documentation.

imdb-fetcher

About IMDBFetcher

IMDBFetcher is an experimental, JavaScript and PHP API for fetching data from IMDB and returning it as a JSON object ready for parsing and rendering on the for the client. The current version of IMDBFetcher supports title, poster, release date, director(s), actor(s), IMDB and MPAA rating, description, genre(s) and running time.

Continue reading here

Related Posts