Google is much more than a search engine. It is the ultimate, most advanced network on this planet. No company can outshine Google at this point. It is without question that Google, along with the internet revolution has made our lives so much easier and has changed the internet for the better. With that being said, when comparing to other search engine resources, Google includes an astronomical variety of programs and new product developments. Most of them are not very familiar to most people. Before I joined this internet marketing team and started exploring the tools associated with SEO, I know I wasn’t aware of Google’s capacity. I have been introduced to a great amount of Google applications and was so impressed that I wanted to become more experimental with Google.com. After playing around with Google.com for several hours, I was so astounded that as a result of this brief research on the corporation, I can shamelessly admit that I have become seriously consumed and overly obsessed with it.

What do you know about Google?

Besides the search engine, I am sure you are all aware of Gmail, Picassa, Google Earth, Google maps, Google Images & Videos, yet there is still so much more. Google’s website is comprised of desktop products (standalone applications and desktop extensions), mobile products (online and downloadable), hardware products, web products (advertising, communication & publishing, development, mapping, search, and statistics), and even more.

“Huh?”

Don’t worry, I will go through a few of these handy applications and will explain some of the “Google Tricks” that I picked up on.

The first Google product that I found interesting was IGoogle. IGoogle is a personal Google webpage designed by Y-O-U, complete with multiple tabs of your interests (ie. Art tab, News tab, Humor tab, Entertainment, etc) as well as the search engine across the top of the page. You can design your Igoogle page so it suits you. You are able to make a personal to-do list, calendar of you personal events, your horoscope, and more that you can design for your homepage. One can create an IGoogle page by visiting to www.Igoogle.com.

Google Notebook and Google Docs are also useful apps, but they are entirely different. If you are at a website and come across content that you would like to save for later, Google Notebook allows you to highlight the content, clip it to the e-notebook so it is saved for future use, and finally add comments about the selection. This is very helpful, especially when researching a topic. Google Docs on the other hand is perfect for uploading, editing, and sharing your own documents, presentations, and spreadsheets with others on the web.

Google Sky is a particular function within Google’s mapping designed to view the stars and galaxies. There are several other off-the-wall mapping tools that are attention-grabbing too. To name a few, there is Ride Finder and Google Transit. With Ride Finder, it will show the real-time position of participating shuttle, limousine, and taxi service in 14 US cities. Google Transit makes planning public transportation trips trouble-free.

Goog411- By adding the number 1-800-Goog411 to your mobile’s address book, you can call Google’s 411 Directory for various listings and directions. Also, by adding the number 46645(Google SMS) to your phone, you can text Google to find out all sorts of listings. Google SMS can provide people with local businesses, weather, glossary, sports, movies, flights, weather, translation, stocks, airlines and more. Example: By texting Google with “Weather, 33928”, you will receive the weather forecast for that area.

Google Answers- Have a few questions? Google’s question and answer service allows users to pay researchers to answer your questions.

Google Calculator- Are your math skills a little weak? Well worry no more. Google, The Math Master, has made it incredibly simple for you! Type in any equation into the Google search engine and it will automatically calculate it for you. How neat is that?

Scholar- If you are researching a topic. Google Scholar provides relevant scholarly journal articles on the topic you are investigating. Professors and college students will love this app!

Blogging and Google Reader- Blogging addict, you’re in luck! By joining Google Blogs and Google Reader, you can blog on your own and can also subscribe and stay up to date with all of your favorite blogs. Google Reader is a tab located at the top of your G-Mail account that categorizes and updates your most preferred blogs and blogging sites. With this added application, you can participate daily in blogs and share them with friends!

Google toolbar- If you decide to download the Google toolbar, you will never see a flashy ad or mock computer system alert pop-up again. Phewww!

Google talk- Google Talk is very similar to Skype in that it allows you to IM and call your contacts for free from your computer. It is beneficial for communicating between businesses and for keeping in touch with close friends and relatives.

Real player- I was completely unaware of this tool. If you enjoy downloading music and videos in your spare time, this is ideal for you. This Google gadget allows you to transfer music and videos to your Ipod or MP3 player. Simple as that!

Google’s Business Solutions are extremely helpful for Atilus and we use them consistently throughout the day. We use Google’s Adwords account for SEO and PPC. We also use Google Analytics to monitor the traffic on our clients websites and our own. Google’s other business solutions services are located at www.google.com/services/.

The tools I have listed are only a few selected from Google’s limitless list of entertaining and useful applications. Google even has different kinds of communicating services and social networking memberships within its site. If you are interested in seeing what else Google has to offer, visit http://en.wikipedia.org/wiki/List_of_Google_products or browse around on http://www.google.com/intl/en/options/.

→ 4 Comments

A few weeks ago I joined Atilus as the company’s first intern. However, I am very new to the web design business. When I came across Atilus, I was incredibly interested in the company and hoped to gain significant knowledge of web design and internet marketing. So far I have. My recent experience with Atilus has been especially beneficial and all of my co-workers have been extremely helpful by introducing me to the world of web design and how it works. The other day, my boss and co-worker asked me to research the best color-schemes for middle-aged women. This really sparked my interest because I had no idea so much thought was put into each individual website created. Instantly I questioned, “Do men and women respond differently to web design colors?”, that is when I went into my in-depth research mode to find out. From my research findings, it was evident that color does matter for each gender.

It wasn’t a surprise that the color blue was a commonly favored color of both genders, but I didn’t expect that yellow was the most disliked by men and women. Blue is appealing because it has a “calming effect”, but who would have thought that yellow would prevent people from visiting a website? Apart from their similarities, men and women have an abundant amount of contrasting color preferences. I originally thought that women’s favorite color was pink, but each study I viewed proved me wrong, demonstrating that pink was only appropriate for young girls and that a woman’s color-preferences vary with age. A few websites I found affirmed that women respond more strongly to website colors than men do and are more attracted to cool colors, tinted colors(instead of shaded ones), pastels, de-saturated, and earthy tones. With maturity, colors such as blue, purple, and green (blue-greens and turquoise) were of greater liking over bright colors with hues of longer wave length such as red, orange, and yellow. Purple was noticed as a soothing color for women, especially lavender because it evokes feelings of nostalgia and romance for women. On the other hand, purple and blue-green colors do not have the same effect on men. In no such way do men find these colors mysterious, romantic, or spiritual. Men are drawn towards the “less colorful”. They find deep shades of blue, green, and black the most appealing. Deep shades of the popular color blue are said to reflect authority, stability, and intelligence; while dark green colors are associated with environment, renewal, and health. Lastly, men’s most preferred color is black. In conclusion, I have been able to point out the similarities and differences between men and women’s specific color preferences. When designing a web page for women, soft “cooling” colors of blue, purple, and green should be used. Deep colors of blue, green, and black are more suitable when targeting men. If you are trying to create a website to appeal to men and women, it will be easy to attract them with the color blue.

http://www.colormatters.com/khouw.html , http://joehallock.com/edu/COM498/preferences.html , http://content.karger.com/ProdukteDB/produkte.asp?Aktion=ShowFulltext&ArtikelNr=52802&Ausgabe=227952&ProduktNr=224091 , http://desktoppub.about.com/od/choosingcolors/f/womencolors.htm , http://www.colornexus.com/web-site-colors.html , http://desktoppub.about.com/od/choosingcolors/f/mencolors.htm

→ 5 Comments

Just found this cool new service called Blogrush that we will be trying out. It is a little widget you add to your blog that shows posts similar to yours across the web. Every time the widget is loaded (by a new visitor) your own blog and posts gains the opportunity to be shown across the web. It is a great idea, but lets see if it really works.

We will keep you posted as to the results!

→ 3 Comments

Hello to all of you web designers out there! If you’re like me, you prefer designing your sites using some form of css, especially when it comes to designing menus. We love the hover over effects, and the customizable-ness of styling both hover and non-hover states of the menu items.

Expression Engine PluginsSome weeks ago while finagling with an Expression Engine template, it occurred to me that it would be pretty neat if EE could add a “_selected” next to my menu item’s class name if a visitor was on that particular page. This would effectively give me the power to do things like: make the menu item that corresponds to the current page highlighted while the other menu items stay normal. So, I set off to research the documentation of EE for plugin programming. This is what I’ve created for you to use as well:

Download the Plugin: atilusmenuclass.zip

Here’s how you use it:

Once uploaded, you will be able to add this snippet inside any of your template files:

<a href="/about/" class="{exp:menuclass:item class="aboutlink" selected="_selected" uri="about"}" title="About Page">about</a>

Any parameter you pass for selected will be added trailing your class name you pass for class. The parameter uri is used to specify the page URI for which the plugin will trigger this class name change.

For example, if a visitor is at the address http://yoursite.com/contactpage/ and you have set one of your links assigned with uri=”contactpage” as well as selected=”_selected” and finally class=”contactpagelink”, the plugin will change your link’s class name to contactpagelink_selected. And of course, when the visitor is on a page other than http://yoursite.com/contactpage/ the class name will be displayed as “contactpagelink”.

Output:

If visitor is NOT on http://yoursite.com/contactpage/ :

<a href="http://yoursite.com/contactpage/" class="contactpagelink"/>

If visitor is on http://yoursite.com/contactpage/ :

<a href="http://yoursite.com/contactpage/" class="contactpagelink_selected"/>

→ 2 Comments

This plugin removes html line breaks, nl’s, p’s, and whitespace before and after comment text. It’s primary purpose is to stop those annoying spammers that like spacing their comments to get noticed.

Like this:
// starts here
<br/><br/><br/><br/>
Some text.
<br/><br/><br/><br/>
//ends here

Will be filtered and returned like this:
// starts here
Some text
// ends here

Download this plugin from Wordpress.org

Copy contents to folder /wp-content/plugins/

Be The First to Comment!

logodotcom.gif

Ok, we’ve created our fancy login system for our site. Now what? How do my members intereact with each other? This bring us back over 5 years ago when MySpace.com first debuted. Every web programmer on earth went “gaga” over how such a simple method used for “friending” another member became so big! Today we have sites like friendster, facebook, and orkut that use the same theory behind virtually friending your friends!

Here’s how they do it:

If Member1 wants to friend Member2, a request is made via a link or action on Member1’s part.

Using a relational database, this is what this request will look like.

Member’s Table (this contains all of our members, it may also contain other information like name, password, and other profile information.)

memberID
1
2

Friend’s Table (This table is updated whenever a member invokes a “friending” action.)

memberID	friendID 	Confirmed
2		1		0

When the member represented by the “friendID” confirms that they would in fact want to be friends with the member represented by “memberID,” then “Confirmed” will be updated to “1″ in place of “0.”

So now, our scripts will have a way to tell if one member is friends with another, how many friends any given member has, how many requests for friends a given member has.

MySQL Snippet for querying the number of friends of a given member

SELECT count(*)
FROM  Friends
WHERE memberID = 1
AND Confirmed > 0;
→ 2 Comments

Social networking applications usually take the form of websites that allow people to share information with other people. To really wrap our minds around the concept of a social networking application, we have to look at it’s purpose. As suggested by the name, the purpose of these applications for the user is to socialize. So process this in your mind: people of a community or network of communities come together in one place (a website) to socialize by: visiting the site, registering, logging in, sharing information with others — How does this work? What does it look like to the programmers behind it? What makes this website tick?

Let’s make up a name. We’ll call our social network, MyParenthood.com — a social network for parents. Great, we have a concept and we have a domain name (in our example we assume we have demand for such a website.) Next step is to enlist the help of some crazy-cool programmers to make our dreams a reality.

Personally, I would start with a screen design. Then I would throw it to the programmers to make the design come alive. The reason I do this is so the programmers have a good picture of the concept. The screen design shows them things like current features and potential future features.

Here’s what our site will hopefully look like:

myparenthood.jpg

For obvious simplicity sake, our application will only have 2 features:

  • MyParenthood.com will allow members that are stored in a database to login.
  • Once logged in, the following message will display: “Welcome, Devin Castro!”
    while my name will be replaced with the user’s name as stored inside a database.

The programmer will first choose a database technology suitable for your application. In our example, I will use MySQL. l then create a table to store users inside of. Databases use tables to store information, similar to an excel spredsheet that contains rows and columns.

This represents the data in our table:
myparenthood_usertable.jpg

Alrighty, the application’s coding will take the form of 1.) HTML (this controls what people see when they visit your site) and 2.) Dynamic Language (this processes information your users pass to your website e.g. username and password in order to login)

We’ll assume we have the HTML part done. It will look something similar to this:
(Note: this HTML does not represent the styling shown in our first figure.)
myparenthood_html1.jpg

Now, the part that people don’t see include things such as:

  • Database interaction.
  • Form processing.
  • Output of HTML.

Here’s a simple snippet of code that will accomplish our goals mentioned earlier:

myparenthood_code.jpg

This code will take the username and password that the user entered on our HTML page, then it will attempt to look for a matching user in our user table. Finally, if there is a match the script will output a welcome message that contains the user’s first name and last name as taken from the database table.

Albeit, this code is very crude, may be buggy, and has some serious security holes. Also, websites that have similar functionality may contain more than only 30 lines… more like hundreds or even thousands of lines if the site does more than a simple login. Professional programming requires consideration to factors such as security, reliability, and scalability.

So there we have it… a somewhat crude, but functional login area for our MyParenthood.com Social Networking website. Of course, no other functionality has been developed as we have not gone through how a social networking application actually allows users to share information with other users. That task involves a bit more complex coding and while this was only a mere example, you can see what the pre- “guts” of a social networking application might look like.

→ 4 Comments

Yesterday, we were working on a typical client site that required us to do the usual HTML/CSS template to wordpress template work… and when it came time to dump in the HTML contents of the site, it came apparent (once again) of how frustrating working with wordpress pages can be.

So, after some intense frustration, I came up with a wordpress plugin that will automatically create html files with the same name as any page created within wordpress (it will also create them within their respective sub-directories.)

Example:

http://www.mydomain.com/parentpage/parentchild/

– will create the directory /pages/parentpage/parentchild.html

Now we can edit parentchild.html and it’s contents will be included within the wordpress page while not compromising the HTML/CSS contained within! Wowee-wow-wow!

Keep in mind that this plugin will know to create the path for the html page when you load the wordpress page in your browser.

Instructions:

Create the a directory called /pages/ within the root location of your wordpress install and CHMOD it with permission 777.

Download atilus-page-include.zip and extract it inside your /wp-contents/plugins/ directory.

Then, in your page.php template file, place this php code where you want the html to be included:

if(class_exists(Atilus_PageInclude)) { Atilus_PageInclude::do_include(); }

Please email me at devin@atilus.com with any support questions.

Be The First to Comment!

under-construction.jpgThere hasn’t been one month that has gone by without one of my friends or relatives asking me about how a website is built. Most want to learn how they can build a “simple” website. The response expected would be, “Sure! It’s easy! I’ll show you.” For the most part, this is true as long as you’re willing to put a little time to learn some things.

Recently a friend of mine asked me this precise question: “How do I make just a website? You know… just a basic website.” Truth be told, there is no basic way to explain how to make a basic website. Anyone can Google for sites that can make cookie-cutter web pages based on some pre-made template. This article isn’t about providing that venue though… The purpose of this article and the succession of articles to come is to educate you, the reader, on what is involved in building a website.

My goal is to clarify what is involved in making a website, because a basic understanding of web development is crucial to learning how to build a website– even a simple one. By the end of these articles, we will have a good grasp of the technology used, why one is created in the first place, and finally how to get started in building your very own website.

We often take surfing the web for granted. Sometimes we pass from site to site without a second thought about the graphic design, styling, or page flow of any of site we come across. Besides the HTML and CSS we see when visiting a site, there may be some dynamic code that drives the site on the server it’s hosted on. — Hold on a second, what the heck is all this crazy jargon? HTML, CSS, dynamic code, server, host??? I’ll clarify with some definitions.

Basic Terminology to know:

  • Server - A computer accessible through the internet that holds the files of one or more websites.
  • Hosting - Service provided by an entity or third party that owns a server. The purpose of hosting is to have somebody else responsible for maintaining the technical aspect of keeping the resources on the server available to the world.
  • HTML - Stands for, “Hyper Text Markup Language.” It is programming code that is contained within a web page. HTML controls some (not all) of what you see in your web browser when you visit any page on the internet. For example, the text you are reading now is part of the HTML code within this website.
  • CSS - Stands for, “Cascading Style Sheet.” It is a programming language that is contained within HTML to control the style of most pages on the internet.
    • Why is CSS on “most” pages and not all? HTML has some basic capability of styling a website, but when a more elaborate or complex design is wanted, CSS has the flexibility that HTML does not.
  • Dynamic Code - Programming languages that are usually used when databases and/or cookies are required for a website to function. Dynamically coded websites display content that changes due to information that you give it. Note: In order for this kind of code to display something in your web browser for you to see, it will at some point output in HTML.
    • Why do websites use databases? If you login to a website to access your personal information, order products, or write on your blog, the website is using dynamic code to connect to a database. The “dynamics” in dynamic coding come into play when the website has to make decisions like, “Are you allowed to access this private page?” For example, you provide a website a user name and password in a login box. The website then compares that information you gave it with a list of user names and passwords in a database. If it finds a match with the information you provided, it will allow you to proceed into a member-only part of the website.
    • Yes, I said languages. Dynamic code can be written in more than one language. For example, ASP, PHP, PERL, Cold Fusion, and Ruby are fine examples of dynamic coding languages for the web.
  • Cookies - Small files that a website saves onto your computer that contain information the website requires for your next visit.
    • What kind of information can a website possibly require to save onto your computer? Commonly, many sites choose to save your user name on your computer to keep you from having to retype it every time you visit the site. For example, when you make your next visit to a site that previously saved a cookie onto your computer, it will access it and display its’ information onto a part of the page you’re on (likely the text box where you would usually type in your user name.)

Here’s a diagram that illustrates how HTML files, a server, a host, and you are involved with a website:

website_diagram.gif

For now, the preceding diagram and terminology should get you started on understanding some rudimentary techy concepts of website development. In Part 2 of this article we’ll learn about the reasons why a website is created and how one can benefit from one.

Visit www.duckypc.com for the future Part 2 of this article and more!

→ 4 Comments

Enewsletter

Stay up-to-date on all of the latest web technologies that impact your business and your clients' business.



Search Atilus.com