Archive for the ‘Tutorials’ Category
There are so many countless plugins available for developers to use on webpage tables. HTML layout designs are mostly built using div elements and CSS styles. However tables are still helpful when presenting tabular data inside your content.
Luckily this process is still very straightforward with easy semantic markup. The most difficult part is styling your table and getting it to behave nicely in all web browsers. For this article I want to present a series of helpful jQuery plugins for managing unique table styles and effects. These will not only have implications on your design, but also on the user experience when interacting with this tabular data.
Each of these plugins has their own demos and associated codes for download. Thus I haven’t ported over any of the demos, but I have copied samples of the source code as I explain how to implement each plugin. Remember there are various reasons for enhancing tables and you shouldn’t be using 3 or 4 random plugins all at once. Check out the functionality on each and see if you can implement this into an existing website layout.
Column Hover Highlights
The first plugin I want to present is named columnHover. This is a fairly typical jQuery plugin for providing a highlighted effect when hovering over rows or columns in a table. The minified version is only 1.4kb and definitely lightweight enough to include as an extra on your pages.
The live columnHover demo page does an excellent job at illustrating the various layouts you may use. It is possible to highlight both the row and column at the same time, or limit to one of these options. It helps users who are trying to read data which behaves like a zebra-stripe effect in real time. The plugin only requires a single method call which takes upwards of 4 parameters. We can take a peek at one of the demo codes:
1 | $('#tablethree').columnHover({eachCell:true, hoverClass:'betterhover'}); |
The idea of mobile responsive web content has been prevalent for a couple of years now. The industry is adapting rapidly as more users are picking up smartphones for the first time. Trends always flow in waves, and we can see this one appearing very quickly. In this tutorial I would like to go over the basics for setting up a responsive photo slideshow.
You may notice these widgets as popular staples for companies, startups, and blog homepages. Sliding photo widgets allow webmasters to display featured content along with caption text and further related links. This is an excellent method for driving more traffic deeper into the website.
I am using the popular jQuery plugin called ResponsiveSlides.js. The plugin is completely open source and you may grab the code off Github. This is my favorite library because it has such a wide range of support for older legacy browsers, and the responsive traits work beautifully even on smartphones. Check out my small demo below to see a live preview in action.
Live Demo – Download Source Code
Setting Up the Document
At first we need to include all of the recommended files out of the repository. Download a copy from Github and grab two of the internal source files responsiveslides.min.js and responsiveslides.css. The former is required to actually build the slideshow, and the latter styles the image box with navigation and caption text.
Many of these CSS styles I have copied over into my own stylesheet. This is certainly possible in your own project, if you’d like to reduce the amount of independent CSS files. Just be sure to not overwrite the properties later in the document. Now along with the 2 plugin documents we also need a copy of the latest jQuery library. I have included the Google CDN copy, but you could download a local version instead.
Before moving into the JavaScript code I want to bridge together what we need in the HTML. The plugin looks for an unordered list element to hold each image object. The slides are then split up and revolve based on your plugin settings. Here is the sample code from my body text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="callbacks_container"> <ul class="rslides" id="slider"> <li> <img src="images/01.png" alt=""/> <p class="caption">Bar Interior <a href="http://www.flickr.com/photos/55935853@N00/4422772185/" target="_blank">(source)</a></p> </li> <li> <img src="images/02.png" alt=""/> <p class="caption">Preparing dinner in the house<a href="http://www.flickr.com/photos/xmacex/3202147422/" target="_blank">(source)</a></p> </li> <li> <img src="images/03.png" alt=""/> <p class="caption">James Madison mansion<a href="http://www.flickr.com/photos/tizzie/6278887870/" target="_blank">(source)</a></p> </li> <li> <img src="images/04.png" alt=""/> <p class="caption">Some nice leather couches<a href="http://www.flickr.com/photos/quitepeculiar/4396392472/" target="_blank">(source)</a></p> </li> </ul> </div> |
Getting started in WordPress development does not take a lot of time. Even 1-2 hours a day toying around in PHP can teach a lot. Plus when you start getting into writing your own custom functions there is a lot of interaction required within the backend WP libraries.
For this tutorial I would like to delve into the topic of WordPress theme translations. More specifically I want to look at two different resources for translating your themes into other languages. WordPress allows for many common languages by default, however you should be able to support more than one at a time. If you check out the list of WordPress Language Packs you may be surprised to find a recent copy for your website!
Follow along with my process below and I will explain how we can get these language packs installed and working properly. Additionally I want to go over some of the more complex internal WordPress functions used for translating direct theme text. These are more helpful when updating static text, such as datetime metadata and footer credits.
Translating Existing Themes
Some WordPress users would prefer to stick with an existing theme name. These could be some of the free themes you find on WordPress, or other premium themes around the web. Either way the developers will often include files used for translating. These files are contained inside the .pot filename which stands for Portable Object Template.
If you want to follow this route I recommend you download Poedit for free off their site. It is a free download and should work for translating any WordPress theme using .po and .pot files. I would also reference this excellent guide on the topic of replacing the text in your theme files.
Basically you need to replace the global variable for your WordPress WPLANG settings inside the wp-config.php file. This is usually set to English by default, however WordPress does support a myriad of additional languages. Now aside from translating existing themes new developers may want to offer support for translated languages. This can be tricky when getting started, but I want to lay down the basics for moving forward.
A successful website primarily consists of an extremely usable interface, rich features and functionalities, an amazing design and many other factors, that make it a joy to use. It is these factors, which have a role to play in the success of mobile applications as well. The factors that determine the success or failure of mobile applications are the same as those that separate successful websites from those that fail to leave a mark. This is why, mobile app developers can take a cue from some of the best website designers while developing apps for their end-users.
Here are ten such pointers, which mobile app developers can learn from their web counterparts and use in their projects.
A clean design has visual hierarchy, has proper layout structure, is simple and most importantly, it is devoid of clutter. What this essentially means is there is no graphic, animation, text or any design element for that matter, which look out of place on such websites because the main focus is to present important information to the end-users in a well-organized way. This is what a web designer puts into practice and this is something that even somebody developing mobile apps can follow to give users an app with a clean design, which meets their purpose.
The typography used on a website creates maximum impact on end-users. Successful designers know this fact and make an extra effort to know their target audience thoroughly so that they can choose a typeface, which appeals to the users and helps them connect to the website. They don’t use a typeface that is relevant to the purpose of the website and its target audience! This holds true for mobile apps as well and so, while creating an app, developers should choose an apt typeface depending on their target audience.
An intuitive interface enables users to use the website without any glitches, even if they are using the site for the first time. This is why the best designers consider an intuitive interface an ‘all-important’ part while designing their websites and hence, ensure that the function of each and every feature and element of their website is clear to the users. This is again something which you must replicate in your apps so that even when your users run an app for the first time on their mobile, they can use it without any hiccups.
In today’s post we are going to look closely at the key metrics of Web Analytics, what they are and what they measure. Key metrics are like physical parameters of your body: temperature, blood pressure, etc. If something is wrong with them, your state of health worsens…the same is with key metrics, if some indications worsen you shop’s overall condition may regress. Your online store effectiveness depends mostly on your customers, these metrics shows their interest in your resource. Thus making every effort you can interest them, your store’s metrics will get improved.
I hope this post will help you analyze more effectively reports of analytical tools and perform diagnostics of your store’s/websites productivity. What’s more at the end of the article there are featured several must-read articles and blog posts about key metrics and their optimization. Let’s rove!
Image Source: Keyboard photo by Shutterstock
Key metrics are a rating system, which help any online store identify strategic and tactical goals. Use of key performance indicators enables each ecommerce resource assess their condition and assist in evaluating the implementation of strategy. Key metrics allow take control over all the activities of the company.
Each website is unique; each and every has its own mission, its goals and targets. Therefore, every company must take into consideration their unique metrics to measure productivity. These metrics are called key performance indicators.
Key performance indicator is a metric that helps assess effectiveness of achieving the goals.
In addition to unique metrics for each company there are universal metrics that will be relevant to any ecommerce store.
These metrics include:
- Visits and visitors;
- Time spent on site;
- Bounce rate;
- Indicator output (exit pages);
- Conversion rate.
Visits and visitors – this is the fundamental metrics used to determine all other metrics.
This metric includes two parameters: visits (sessions) and unique visitors.
Visits (this metric is called the session) – shows the number of visits during the selected time.
This parameter is calculated really simply. When the new visitor comes to the website analytical tool with a cookie file, opens a new session. The session is closed when user leaves the site or was not active (does not click) on the site more than a certain time (usually 29 minutes). User can make several visits a day.
Unique visitors – this metrics shows the number of people who visited your website during certain period of time.
This metric is calculated as follows. Each new visitor is assigned unique ID that is stored in the cookie file. The next time you visit this user ID is not case sensitive.
For example, the same user can visit website several times. For example,user came to the home page of the company that promotes websites, he visited homepage, then about us page, and all of a sudden his phone rang, than he walked away for 31 minute. Later he returned and continued browsing the website, he entered the page of a specific service, checked out the price, and then left.
Have you heard about TED? TED is a nonprofit company devoted to Ideas Worth Spreading. It started out (in 1984) as a conference bringing together people from three worlds: Technology, Entertainment, Design. Since then its scope has become ever broader. Along with two annual conferences, the TED Conference in Long Beach and Palm Springs each spring, and the TEDGlobal conference in Edinburgh UK each summer, TED includes the award-winning TED Talks video site, the Open Translation Project and TED Conversations, the inspiring TED Fellows and TEDx programs, and the annual TED Prize.
What is the most important thing for every creative personality? That’s of course inspiration! People get their portion through various activities starting from food & drinks up to some extreme sports. Today we are going to give a portion of some spiritual food, that includes “ten awesome meals” from TED. Feel free to taste them, and don’t forget to say hello to the chef after you ate these dishes clean:)
***
Paolo Cardini: Forget Multitasking, try Monotasking
Paolo offers us to revise our views on multitasking, just look at the image below this is the most common example of multitasking, burnt ribs looking like pieces of coal.
***
Matt Mills: Image Recognition that Triggers Augmented Reality
“Augmented reality”…in 2012 these words are as common as “cheeseburger and french fry”. This technology found its way into your life starting from some Android of iOS games up to concerts where on huge screens something outstanding happen. Matt Mills shows the new tech called Aurasma, it renders images and augments reality at the same time, that look really cool. The app made the famous poet Robert Burns take the bottle and drop a glass:)
There are many various techniques you can use to embed external video files. Popular social networking communities like YouTube and Vimeo support embedded movie files right into your website. But it can be a hassle getting these videos to conform properly in mobile websites.
Now often times there isn’t much you can do about video playback on mobile devices. The iPhones and iPads do not support FLV/Flash video playback at all. So while you can still display the thumbnail image, it may not be possible to stream any video playback to users. However, when discussing other HTML5 solutions it is certainly possible to get mobile playback with your own tinkering.
Image Credit: Video Playback
I want to use this guide as a means for addressing mobile video embedding into HTML5 layouts. We can look at a few techniques for getting your videos to align properly within any responsive website design. Additionally feel free to check out some of the other resources listed here, as you may find them useful in future projects.
Wrapping Static CSS Containers
Now the quickest and easiest solution for responsive videos will come from open source codes. I will delve into a great snippet of JavaScript in the next segment. But for now let’s consider how responsive video embeds will actually function.
Since we may be using any type of HTML tags from iframes to embed to video, we need to ensure everything will have the same aspect ratio. This means setting the padding-bottom CSS property of a container element to a value based on the video display (56.25% for 16:9 videos). You can read more on this topic over at Anders blog post which also details how you can embed responsive SlideShare projects.
Now this technique isn’t anything brand new or groundbreaking. However it does illustrate that we can force external videos into perfect responsive designs without the need for JavaScript! This solution is an excellent fallback method when getting back to basics. Now I also think we should look deeper into a JS-based solution.
Bootstrap – is a perfectly packed “tool chest” that allows to create websites really fast! Bootstrap’s alternatives are like snotty babies, for one simple reason – Bootstrap is densely tied-up with LESS. Those who do not understand what it is, in short: it’s a very nice and decent CSS Framework. LESS extends CSS with dynamic behavior such as: variables, mixins, operations and functions. LESS runs on both client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
You may not know that but Less is a style preprocessor. The style sheet file will have .less extension. If you are good at writing CSS code managing Less will be a snap for you. Here you can adjust variables with operators, groups and insert parts of CSS that come relevant to other rules. The most important thing is that Less includes lots of other small things that will simplify your life. To use Less you need to create the new file with preprocessor, what you will get is a CSS file with variables right where they belong.
***
To use Bootstrap framework there is no need to master HTML, CSS and JS. If you ever dealt with any framework you’ll be a success. Generally you’ll figure things out even without reading documentation, cause all features are extremely intuitive to use!
Need a Bootstrap-based website? Why spare time creating your own? Using the tools and tuts from this blog post you can simply extend or optimize a ready-made Bootstrap theme.
Tutorials
Below we’ve summed up some really useful tutorials for mastering Bootstrap, feel free to check them out.
Bootstrap Your Application Using Twitter Bootstrap
***
As you remember HTML is a markup language, but its creators wanted to improve the lives of website designers and programmers adding elements and parameters that are responsible for the appearance of the whole page including tags < font >, < b >, < i >, < bgcolor > and so on.
But at some point, the page’ code turns to be so unwieldy and unreadable that it becomes clear – this road leads “to nowhere.” Then it was decided to divide the page markup (HTML) and its visual design (CSS). Together, HTML and CSS can work wonders though you know it for sure.
The structure of the text is as important as its content. The probability that the user will not even read extremely well-written, but unformed text is very large, that’s why apply a bit of efforts to bring your articles in a readable form. What’s below are the CSS typography tools that can be used to give extra readability to your text by applying corresponding grid, font, font color etc. I hope this article will help you with this.
Typechart lets you flip through, preview and compare web typography while retrieving the CSS.
***
If you have a site heavy on text content, author thinks paying fine-grained attention to the underlying grid is important.
Photoshop, increasing number of UFO sightings since 1988.
You’ve got some freckles or moles you’re ashamed of, whom will you advise? Skin lightening cream, some lotion or laser therapy…way too long and 15% guarantee they will totally disappear…So let’s consider one highly effective method that’s widely used all over the world here goes the drum beat…Photoshop. This photo editor is best ever invented weight-loss and beauty enhancer tool ever!
The last version of this program has numerous absolutely new features comparing to the previous versions. Since CS6 was released this March there are lots of people who didn’t have an opportunity to test new features for some reason. This blog post is aimed to give everyone understanding on how to use these awesome tools and features.
Let’s start from video tutorials since they are much more interesting for understanding and memorizing than we’ll go to step-by-step tuts.
Video Tutorials
Featured Templates
Advertisement
Follow TemplateMonster Updates
Rss Feed:
Recent Comments
- Excuse my ignorance but I was wondering where i could find the...
- @google-6a59bc2e012cbd9af0bdb7 32262004bb:disqus...
- i love the effect. Where to find how to make it? work like this...
- Now a Days Its Most effective platform in mobile app...
- That’s correct!
– by the way, Thanks Alex...