Archive for the ‘Tutorials’ Category
There hasn’t been much focus on the art of designing e-mail newsletter layouts. The process does not require as much intensive work as building an entire webpage or CMS theme. You can make a single-page email template and copy out the styles to work in a myriad of situations.
For this tutorial I want to present a demo newsletter for Template Monster and explain some of the techniques we can use. The codes are more focused around rendering properly within e-mail clients such as Outlook, GMail, Hotmail, and Yahoo! Mail. This means we are building on top of HTML tables because the other methods for constructing layouts just do not work.
From Humble Beginnings
I like to start email projects by looking over the HTML Email Boilerplate template. This provides a lot of helpful CSS styles and basic table structures for making your own template. There are so many odd browser quirks for rendering e-mails that you could spend weeks studying them.
I try to be reasonable and only keep the CSS classes that I am going to use. This boilerplate is full of code comments which explain why you should be using certain properties or elements. If you are unfamiliar with email design then this is definitely a good place to start. My own demo will use the same XHTML Strict doctype which is also used by Google Mail.
I have seen a lot of great tutorials centered around building unique WordPress plugins. Unfortunately many of these ideas are fairly complicated or still require external PHP function calls. Also many of the simpler ideas can simply be copied into your theme functions which will save a lot of time.
But for this tutorial I want to focus on building a plugin using shortcodes. My example will be an e-mail contact form using CAPTCHA for spam protection. We simply install the plugin codes and then add the small shortcode tag [tmcontact] onto any page. This will instantly append the simple contact form into your WordPress content.
Building a Simple Template
Building a Simple Template
When getting started we are going to make the plugin’s main directory which is called shortcodes-contact. Inside I have placed a CSS file, along with some images and a unique TTF font which is used in generating the CAPTCHA. All of these resources pertain specifically to this tutorial so you will not always need custom styles or images. But keep in mind that it is a good idea to store all these resources in your own folder, just in case.
Now we need to create the main plugin file which has the same name as its containing folder. This will be called shortcodes-contact.php and the very first lines of code must delineate some meta information. WordPress will scan the top comments and display this information on the plugin admin menu page. Here is my sample code:
1 2 3 4 5 6 7 8 9
/* Plugin Name: TM Shortcodes Contact Form Plugin URI: http://blog.templatemonster.com/ Description: Basic WP plugin for adding a contact form using shortcodes in Wordpress. Original source from Template Monster Blog to be used in a demo tutorial. Version: 1.0 Author: Jake Rocheleau Author URI: http://byjakewithlove.com/ License: Free(no license) */
Computers have routed so deeply into our lives that every step we make is accompanied with some app, or any other electronic thing…even sticky notes are created on a desktop of your screen…duh. Some days ago I had to fill in the form…with a pen…but I found out that I forgot how to write. I guess I’m not the only one who has similar problem. Previous activities like writing are on the wayside, people don’t write they type…
These days similar thing happened to books, almost no one reads books made of paper, cause it’s much easier to read an eBook that costs mostly like a book cover, or comes free to download. But if we touch upon prices; eBooks are way cheaper than paper books, some eBook reader cost less than a whole paper book. Anyways buying eBook is much better, just think about all those trees cut to print your favorite Twilight series
But if you are one of those old-school guys who still read paper books, has a subscription to the newspaper and runs a website…Maybe you’d want to give it more familiar and convenient form? Than you need to consider pageflip effect. This thing is from those skeuomorphic tricks that imitate well-known objects. In this case it’s the imitation of a book. Below you will find some tutorials, plugins and examples of pageflip effect. So let’s start with some plugins.
jQuery pageflip plugins are ideal for websites with large amount of text and images. Instead of displaying all your text, links and images on a long boring page, you can make your presentation more interactive and animated with flip page effects.
WowBook is jQuery plugin that allows you to create a online publication (like a book or magazine) with 2 different page flipping effects.
jQuery Flipbook Slider is a lightweight jQuery plugin for flipping pages effect. It can be used with any content: text, html, iframes, videos, flash (swf) etc. You can customize it easily with CSS (background images, font family and color etc.). The plugin can be used for albums, presentations, books and notepads.
Drawing in Photoshop is a favorite topic for many of people, as it can reveal all bright individuality of the “knight of the brush”.
If you do not own classic techniques of drawing with paint, coal, watercolor, oil or whatever people draw with – Photoshop can really help you. In this cool interface, with your own hands, you’ll be able to draw such a masterpiece that even Leonardo da Vinci will envy you. All you need is a good Photoshop tutorial.
Today we’ve prepared one for you, if you are just starting with Photoshop, it will definitely help you get acquainted with a basic set of tools. We are going to add extra elements to TemplateMonster logo, making it more lovable since St. Valentine’s Day is right around the corner. In 1997 Savage Garden wrote the song “I’ll be your dream, I’ll be your wish I’ll be your fantasy“…today, Photoshop can make it all come true-to-life, unfortunately only in digital space.
Level – starter
Soon we’ll release another tutorial, a bit more complex, for you to develop good Photoshop skills.
Here is an image of TemplateMonster’s logo. Today we’re going to make some slight customization of the mascot timed to St. Valentine’s Day. Click your Photoshop icon to start (to create this customization you can use any version of Photoshop).
1. The first step we are going to do is to wipe the pupils from the eyes of the Monster using the Eraser tool (E).
2. Time to download some hearts. Use google to find a volumetric heart, like the one you see below.
3. Create new layer (Ctrl+Shift+N) and paste the heart into. Use free transform tool (Ctrl+T) to resize it and place right where the eye’s pupil is supposed to be.
4. Duplicate previous layer with the heart and make it a bit smaller or larger or the same size, use free transform tool (Ctrl+T) and move tool (V).
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:
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.
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.
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.
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 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.
“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
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.
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.
Below we’ve summed up some really useful tutorials for mastering Bootstrap, feel free to check them out.
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.
There are many different user interface techniques for building a login/signup layout. One of my favorite approaches is to include both the forms on a single page and offer some navigation between the two. A large dropdown or popup modal window could work, and sliding panels are another example.
Let’s get started by creating a single HTML page named index.html. I’m going to build on a simple HTML5 template which I use in most of my projects. I’ve copied this code over below:
Time passes but Photoshop is still the best image editing software used to created outstanding visual effect both for commercial purposes and for entertainment.
With Photoshop text effects you can make most designs stand out, and it is not that hard! Typography is defined as the art and technique of arranging type, type design, and modifying type glyph. With Photoshop and the right skills and techniques at your disposal you can push the limits of typography to the edge. This article is one of the most interesting “vessels” of Photoshop text effects tutorials that we were able to find. Feel free to use them.
The new HTML5 media trends are very popular chatter among web developers. It’s now easier than ever before to embed custom video or audio into your website. And best of all, modern web browsers are starting to adapt these trends so that we’re constantly pushing towards a single set of accepted file formats.
But in this tutorial I would like to share some ideas related to embedding custom HTML5 video. I want to use the open source HTML5 Media project as an example of one library we can include for interactive web development. I will also explain how we can make the video layout responsive so all the content will be fluid on mobile phones.
I’m hoping this tutorial will provide an introduction into embedded video media. In the past most web developers have been working with a custom flash player, which has been acceptable until recently. Now that the iPhone has absolutely no support for Flash plugins we need to push for an alternative. And the most promising advancement towards the future looks to be HTML5.
Hit the screenshot to see the preview, press Space to play, to see how video adapts to different resolutions simply scale the page. Hit the link to download the Source Code.
Specific Media File Types
Before we jump into the code I’d like to explain the separation of file types. Apple devices have always been supporting .mp4 video which is undoubtedly the most common. Practically everything can support .mp4 video except Firefox and older versions of Internet Explorer.
The alternative to these video formats is WebM which has been growing very quickly. These videos are generally high quality with lower file sizes, which makes them very quick to stream over the Internet. Between just these two filetypes you can support 99% of the visitors who come onto your page.
If somebody is using an older browser which doesn’t support either webm or mp4 then you could always try serving up a Flash alternative. Every browser including IE6 has support for Adobe Flash if the proper plugins are installed. MP4 videos use the H.264 codec which can be passed into any Flash video player and streams perfectly.
Many developers still try to support the OGG filetype which was really a spinoff from older versions of Firefox. All these releases are currently outdated, and so I don’t find OGG to be particularly interesting. Firefox 3.6 is the only version which doesn’t support WebM yet supports OGG. And obviously as more people update their Firefox installation these problems will naturally fix themselves. If you’re interested in these trends check out this great HTML5 video webpage which has some charts and statistical data for web developers.
Setting the Document Header
To get started let’s create a new blank index.html file. I’ll be adding in my own custom header information right after the HTML5 doctype declaration.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
It’s understandable how we need to include a large amount of custom tags in the document header section. The meta tags such as X-UA-Compatible and viewport are needed to force all mobile browsers into a 100% zoom state. That way the users aren’t pinching to zoom into the page every time it’s loaded onto an iPhone or iPad.
WordPress is one of the most powerful website platforms. The best thing about WordPress is that you can widen its functionality with any possible plugin and turn your website into anything you want whether that is a community website, ecommerce store, portfolio showcase site, membership site, online magazine the list is as endless as your imagination.
If you visit WordPress.org you will see that the number of extensions is absolutely incredible more than 20,000 and we know the wider the range is the harder the choice becomes. Still when picking the plugin you must not grab the first you come across, you need to consider multiple options
That’s why when picking any plugin for any possible functionality you need to pay attention to several important parameters that form trustworthiness rate of the extension. When relying on the plugin you can expose your site to an increasingly wide variety of risks. That’s why let’s discuss the problem with plugins and things you should consider before installing one.
What the plugin does is only part of the story. A good plugin will give you leverage, and won’t leave you stranded when its author abandons the development.
Here is a Guideline on How to Choose WordPress Plugins:
First and the most important you need to check how often the plugin is updated.
The ones produces years ago may not work in the latest versions of WordPress simply because they are not optimized for it. When using the administrative web interface for plugins press “Plugins >> Add new” and WordPress will tell you how many days passed since the plugin was last updated.
Can you find other works of this author?
Generally this may not be of the primary importance, still it will be good to know if you can trust the author of the plugin. Freelance developers have more time for a single project while full time devs have more time for bug fixes and updates. Check the plugin home page to get some insight on the plugin author. If the plugin home page wasn’t updated in a year or two why would you still be there? If the plugin home page has been recently updated, and has attracted a lot of comments, that’s a pretty good sign.