Web Design: How to Transform and Animate Elements on the Page with CSS3

Posted on by
Reply

I came across a cool looking website with animated clock. The minute hand was rotating, and it looked very neat. So I browsed the css stylesheet of the site to see how they did it. The clock itself was a graphic, a png file. The animated minute hand was coded to rotate. Intrigued I browsed the internet for a good source of code to replicate the effect and totransform elements on the page. Here is a website that describes it very well:

http://www.css3files.com/transform/

Imagine the possibilities? If you love to create website with cool graphics, then element rotation can be applied in so many ways. You can do anything from rotating clocks to creatures with moving parts or apply the code to various website elements.

Have fun!

 

Email

How To Remove Scrollbars on Facebook Pages Apps

Posted on by
Reply

I have built quite a few custom pages for Facebook. In the past it was a little more fun, but with the introduction of Timeline the whole Facebook page customization, with its multiples of tabs, suddenly became a little less attractive. For one – you no longer see all the custom tabs on the left. They are gone along with the left sidebar. Timeline looks great and enables user to engage fans with images that now can stretch across the entire width of the page. They can also use cover image – big header that allows one to showcase their brand, business or service. However, custom pages are still useful. One thing I used to struggle with when building custom Facebook pages were the scrollbars on the iframe. If you have long enough content the scrollbars will appear and spoil the look. I’ve tried different bits of code to fix the issue. Here is the one that is effective and works great. It only takes a second to implement. Paste this piece of code somewhere in the <head> tag and watch the scrollbars disappear:

<div id=”fb-root”></div>
<script src=”http://connect.facebook.net/en_US/all.js”></script>
<script>
FB.init({
 appId  : ’7575671676127′, //enter your app id here
 status : true, // check login status
 cookie : true, // enable cookies to allow the server to access the session
 xfbml  : true// parse XFBML
 });

 FB.Canvas.setAutoResize(7);
 </script>

Have fun Facebooking!

 

Email

Meta Tags

Posted on by
Reply

Meta tags. Every website should have them. Here is a quick overview of meta tags as Google explains them.

Meta tags are a great way to provide search engines with information about your website. Meta tags can be used to provide information to all sorts of clients, and each system processes only the meta tags they understand and ignores the rest. Meta tags are added to the <head> section of your HTML page and generally look like this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<META NAME=”Description” CONTENT=”Author: A.N. Author, Illustrator: P. Picture, Category: Books, Price: £9.24, Length: 784 pages”>
<META http-equiv=”Content-Type” CONTENT=”text/html; charset=iso-8859-1″>
<META NAME=”google-site-verification” CONTENT=”+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34=”/>
<title>Example Books – high-quality used books for children</title>
<META NAME=”robots” CONTENT=”noindex,nofollow”>

This tag provides a short description of the page. In some situations this description is used as a part of the snippet shown in the search results:

<meta name=”description” content=”A description of the page” />

This tag is often used together with the “description”. The contents of this tag are generally shown as the title in search results:

<title>The Title of the Page</title>

These meta tags can control the behavior of search engine crawling and indexing. The robots meta tag applies to all search engines, while the “googlebot” meta tag is specific to Google. The default values are “index, follow” (the same as “all”) and do not need to be specified. We understand the following values (when specifying multiple values, separate them with a comma):

  • noindex: prevents the page from being indexed
  • nofollow: prevents the Googlebot from following links from this page
  • nosnippet: prevents a snippet from being shown in the search results
  • noodp: prevents the alternative description from the ODP/DMOZ from being used
  • noarchive: prevents Google from showing the Cached link for a page.
  • unavailable_after:[date]: lets you specify the exact time and date you want to stop crawling and indexing of this page
  • noimageindex: lets you specify that you do not want your page to appear as the referring page for an image that appears in Google search results.

You can now also specify this information in the header of your pages using the “X-Robots-Tag” HTTP header directive. This is particularly useful if you wish to limit indexing of non-HTML files like graphics or other kinds of documents.

<meta name=”robots” content=”…, …” />
<meta name=”googlebot” content=”…, …” />

When contents of a page are not in the language that the user is likely to want to read, Google often provides a link to a translation in the search results. However, there may be situations where this is not desired. This meta tag tells Google that you don’t want us to provide a translation for this page:

<meta name=”google” content=”notranslate” />

This meta tag sends the user to a new URL after a certain amount of time, and is sometimes used as a simple form of redirection. However, it is not supported by all browsers and can be confusing to the user. The W3C recommends that this tag not be used. We recommend using a server-side 301 redirect instead:

<meta http-equiv=”refresh” content=”…;url=…” />

Email

How to Search Google Like an Expert

Posted on by
Reply

I came across an interesting article that gives tips on how to search Google like an expert. Here are some tips:

1. Use Explicit Phrase:
If you are looking for content about web design, instead of just typing web design into the Google search box, you will likely be better off searching explicitly for the phrase. To do this, simply enclose the search phrase within double quotes.

Example: “web design”

2. Exclude Words:
If you want to search for content about web design, but you want to exclude any results that contain the term advertising. To do this, simply use the “-” sign in front of the word you want to exclude.
Example Search: web design -advertising

3. Site Specific Search:
You can search a specific website for content that matches a certain phrase. Even if the site doesn’t support a built-in search feature, you can use Google to search the site for your term. Simply use the “site:somesite.com” modifier.
Example: “web design” site:www.smallbusinesshub.com

4. Similar Words and Synonyms:
If you want to include a word in your search, but also would like to include results that contain similar words or synonyms. To do this, use the “~” in front of the word.
Example: “web design” ~professional

5. Specific Document Types:
If you’re looking to find results that are of a specific type, you can use the modifier “filetype:”. For example, you might want to find only PowerPoint presentations related to web design.
Example: “web design” filetype:ppt

6.This OR That:
By default, when you do a search, Google will include all the terms specified in the search. If you are looking for any one of one or more terms to match, then you can use the OR operator. (Note: The OR has to be capitalized).
Example: web design OR web marketing

7. Phone Listing:
If someone calls you on your mobile number and you don’t know who it is, you can look up the number on Google using the phonebook feature.
Example: phonebook:305-555-5555 (note: you have to use a real number to get any results).

8. Area Code Lookup:
If all you need to do is to look-up the area code for a phone number, just enter the 3-digit area code and Google will tell you where it’s from.
Example: 305

9. Numeric Ranges:
If you want to find results that contain any of a range of numbers, you can do this by using the X..Y modifier (in case this is hard to read, what’s between the X and Y are two periods.) This type of search is useful for years (as shown below), prices, or anywhere where you want to provide a series of numbers.
Example: president 1940..1950

10. Stock (Ticker Symbol):
Just enter a valid ticker symbol as your search term and Google will give you the current financials and a quick thumb-nail chart for the stock.
Example: GOOG

11. Calculator:
The next time you need to do a quick calculation, instead of bringing up the Calculator applet, you can just type your expression in to Google.
Example: 48512 * 1.02

12. Word Definitions:
If you need to quickly look up the definition of a word or phrase, simply use the “define:” command.
Example: define:web design

Pretty cool, isn’t it? Have fun Googling!

You can find original article here.

Email

Facebook Introduces Clicks to Action

Posted on by
Reply

I came across this great article about Facebook and their introduction of clicks to action. Interesting read, so I am reposting parts of it. You can find the link to the original article at the bottom of this page.

Following the official roll out of its new Timeline, Facebook is introducing Actions, a series of new applications that change how people interact with apps, content, brands, and each other. The new apps will extend Mark Zuckerberg’s vision of frictionless experiences based on Facebook’s Open Graph platform, where apps introduce new ways to share your actions with your friends either implicitly or explicitly. With the new Open Graph platform, developers will introduce new Actions and Action buttons that extend the functionality of sharing beyond Likes to now include a dictionary of suggestive words such as “Want,” “Own,” “Read,” etc. These updates are designed to pique curiosity and motivate people to either click through to the source and ultimately, install the app for themselves.

With the new Open Graph platform, Facebook is going live with over 60 Timeline App partners including, Ticketmaster, Pinterest, Rotten Tomatoes, RunKeeper, among others. These apps will extend the interests, activities, and accomplishments of people beyond the moment, to create a more engaged ecosystem around you and your interests. Actions are now going to open up a new genre of buttons that share your accomplishments and desires with your network. Initially, developers will introduce action buttons on their Websites to alert friends to a greater variety of interests and achievements.

See example:

Facebook’s Open Graph invests in what I refer to as the Egosystem, a network in which each person is at the center of their own universe. Each app now extends the persona of each individual, where they tell their story through updates and actions and tailor engagement based on what they do and say. Facebook is simplifying the sharing process for doing so. The idea is that we strengthen relationships through interests and foster conversations based on our actions and intentions. As such, Facebook is investing in the quality of our relationships through technology where the social graph, people we know, slowly transforms into an interest graph, people with whom we share common interests.

TheVerge.com lists  full list of the apps Facebook is launching:

Travel

  • Gogobot
  • Airbnb
  • TripAdvisor​
  • Wipolo
  • Where I’ve Been

Food

  • Foodspotting
  • Cookpad
  • Snooth (wine)
  • Urbanspoon
  • Yummly
  • ​Foodily

Shopping / Fashion

  • Pose
  • Pinterest
  • Polyvore
  • Oodle
  • Fab.com
  • eBay
  • Giftrocket
  • Payvment
  • Livingsocial

Fitness

  • MapMyRun
  • Runkeeper

Entertainment

  • Rotten Tomatoes
  • Dailymotion (French video site)
  • Cinemur (French video site)
  • Metacafe (videos)
  • Ford (game)
  • Wooga (Bubble Island, Diamond Dash)
  • OMGPOP (Draw My Thing)
  • Zynga (Words with Friends, Castleville

Giving

  • Causes
  • Fundrazr
  • Artez.com

More

  • BranchOut (job search)
  • Monster (job search)
  • Color (photo and video sharing)
  • Courserank (education)
  • Grockit (education)
  • Foursquare (location)
  • Goodreads (books)
  • Kobo (books)
  • StubHub (ticketing)
  • Ticketmaster (ticketing)
  • Ticketfly (ticketing)
  • ScoreBig (ticketing)
  • Appsfire (app discovery)
  • Artfinder (art)
  • Autotrader (cars)

Original article: http://www.briansolis.com/2012/01/likes-genre-action-facebook-introduces-clicks-to-action/

Good luck!

V.

Email

How To Remove Comments in WordPress

Posted on by
Reply

I am working on a couple of WordPress sites for a client and came across a little challenge. After an hour of research and digging in code, the solution appeared to be quite simple. So I will share this newly acquired piece of knowledge with you.

WordPress has been steadily gaining popularity and has become a widely used platform. I am personally very partial to building sites from scratch, but WordPress plugins do offer a tempting alternative for particulary convoluted code implementation.

The challenge I was facing was how to remove the comments form from appearing anywhere on the pages. The theme I am heavily manipulating is called Twenty Eleven theme, the one that comes with your WordPress download. Now, after extensive online research, a couple of installed and uninstalled plugins, and modifications to all kinds of php scripts, I finally found what I was looking for.

How to remove comments (leave a reply form) from Twenty Eleven WordPress theme:

It’s actually very easy. You do not need to download and install any plugins that advertise comment removal and neither do you need to modify index.php or other php files that came with your theme. All you need to do is to go to your dashboard, click on “All Pages”

all-pages

Select all pages/posts and click “Bulk Edit”

bulk-edit

 

Click on the dropdown menu under “Comments” and select “Do not allow”

do-not-allow-comments

Make sure to press “Update” button to save the changes you just made. Now you have disabled comments and replies on your pages. This also removed the comments form and makes your pages look more like a website than a blog.

A couple of other things I tried before disabling comments in the manner described above was modifying the index.php file as well as installing remove comments plugins. Neither one worked for my site. They may work for yours, depending on your theme. So if the method described above doesn’t work you can try these:

1. Default theme: http://wordpress.org/support/topic/hide-comments-default-theme

2. index.php file manipulation: http://www.rlmseo.com/blog/turn-off-comments/

3. Go to Plugins and enter “remove comments” into search box

Good luck!

V.

Email

Red Sofa with iPad and a Cat

Posted on by
Reply

Red Sofa with iPad and a Cat

I was working on a vector graphic for iStockphoto and never finished it. Part of it was a cute red sofa with a cat underneath. So I placed the image on one of the pages on my website, just not to waste a nice graphic. Here is what it looks like: http://www.creativitydrive.com/contact-creativity-drive-miami-web-design-company.html

V.

P.S. I may put the vector graphic in freebies for download box later on.

http://www.creativitydrive.com/contact-creativity-drive-miami-web-design-company.html

Email