What really is Javascript, and how does it differ from other languages?

Javascript is a client side language, which means it runs on the end user’s computer rather than on a remote computer/ server somewhere else. This is both cool and useful, as it allows developers and web designers to create a website which truly interacts with the user. A server side language like PHP or Ruby on the other hand instead interacts with the server, but not directly with you.

If you are wondering what it means to say that the server side language does not interact with you, this is the paragraph to read. Everytime you click a link, or a submit button, you have most likely noticed your browser stops to load a new page. This lag between the current page and the next, is called a server request. In this request your browser is speaking to the server, requesting it to send a new page. In fact, each page can have many extra server requests for any images, audio and anything else required to build and display the page you requested.

This is important to understand for the sake of optimizing your websites. As the server keeps receiving requests to “send image a, send image b, send image c…”, it will take the server time to send them, which makes up your page load time. While you could say you are interacting with the page, what really is happening is that your browser is interacting with the server. The level of interaction between the user and a server side language is pretty much non-existent, however, this does not make server side languages useless. A lot of stuff also happens in the server which becomes obvious when thinking of a large scale website application. A website with thousands of users for example, does NOT store thousands of webpages (one for each user). Instead, it stores the user’s data separately and when a page is requested, it inserts the data into a template on the fly. This template is then the website you see on your browser. It is really nothing more than an html file that was generated on the fly. Not running on the server, Javascript on its own is severely limited, but wonderful when used along server side languages. You can have video games running on your browser, and just about anything which requires (seemingly) latency free interaction. Things like drag and drop, touchscreen swiping and just about any modern techniques can be done manipulating that which you see on the screen in real time. Also, running on the user’s device you can program smart interfaces that can detect and respond to the user’s screen size, as well as other input devices such as the keyboard, mouse, touchscreen etc.M ost websites today don’t really exploit the possibilities of Javascript, but this is sure to change as smart and interactive devices such as tablets and smartphones become more and more popular.

I have focused on the capabilities Javascript brings for interactivity; however, its versatility goes far beyond that. In the last few years it has become great for optimizing websites. Used along server side technology, you can make server requests without the need to completely reload the page. If you have used facebook, or google, you have surely seen this. One example of this is google’s search engine, which while running on your machine interacts with the keys you type. This is how google provides you with suggestions before you have even finished typing the text. At each key you enter in google’s search engine, the webpage communicates with the server in the background so your page does not load. Once google’s server has analyzed the data Javascript has sent, it returns a list of words that are suitable suggestions. With this new data available on the client side, Javascript can grab that information and render it into html allowing you to see it in the form of google’s search suggestions. This technology of communication between server and javascript is called Ajax. Ajax used to be a scary technology to me, but as I began using it, it became obvious that it is actually rather simple to use, and extremely effective.

As I write more of these articles I will explain more on how to actually use these technologies. To get a better idea as to where I should start, comment or email me.

Share this:

As you all know, I always like to write about my designs, and don’t think I ever mentioned a non-profit project which I worked on a few months ago. This project was for Global Mental Health Initiatives; an organization which specializes in mitigating mental illness from poor countries. The nature of what they do, requires their website to be very versatile when it comes to text, yet intuitive enough to use as to not require the slightest amount of something as irrelevant as web coding on their end. This is something boring plain text files will do right, however, a website should of course be richer, cleaner, and more expressive all at the same time than any text file. So before even getting started with the website, a content management system would need to be setup, in such a way as to allow easy content editing, while also keeping typography both uniform and dynamic.

To create a solution, I decided to go with CMSMS as the content management system. Just as its name says it is a content management system made simple. Using a simple and versatile CMS, would allow me to setup a tool that would allow me to more fully control how the users add content to the website preventing any inconsistencies that may arise. Using CMSMS, I created a series of typographical elements (CSS classes in reality), to provide the users with some control, while keeping the core of the typography uniform. These typographical elements were structured to look slightly different depending on the module where they show up, to ensure there are some dynamics in the text. All the content manager needs to worry about is filling the textboxes with content. The textboxes work just like the WYSIWYG editors in wordpress, Joomla and many more, but there is one advantage and it’s the reason I chose cmsms. My custom made elements, can be selected from a dropdown, allowing content editors to make decisions based on the semantic names I gave these elements (wrappedAroundImage,subHead,emphasizeMe….) therefore promoting consistency across the website.

I have a love and hate relationship with uniformity however. Too much uniformity can make visuals seem overly plain and dull, and too little of it can make for a messy effect on the wrong hands. So before even starting to design I had a new problem to think about. Fortunatelly, cmsms allows me to setup the content management system so that multiple boxes in a page correspond to multiple areas of the website. This allows me to mimic the modules of Joomla, except it’s a hundred times easier for content editors to manipulate.

So with the heart of the website setup, the next step would be to design it. Locking the system into generating pretty uniform text, the overall framework or shell of the website needed to look rich and dynamic. I experimented a bit but one thing was for sure, vibrant but friendly colors, and lighting are a must; these characteristics would set the right tone to create an interesting visual welcoming users to read the content. The content should be legible and therefore away from any distractions. Though the image above looks colorful and friendly it needed to reflect the seriousness of the logo.

On the logo I tried a few approaches, but ended going for a minimalist and precise direction, just like the website was to become. I felt these would be very defining touches to express the importance of the work gmhi is doing for communities. As an organization it needed to look firm, but also soft around the edges as their aim is after all to help communities. Long story short, the logo as well as the website should show up as both friendly and clear both reasons for going with a logo type. The g was given a roundness to help minimize hard edges, and the i wrong in their typographical heights and design to fit along the rest of the letters in more unity.

And with all said, here is the new design. You can visit their website to see how the content is maintained as it changes.

You can visit Global Mental Health Initiative’s website at www.gmhi.org

Share this:

About a year ago, I had designed 3 tabloid sized (11×17) posters with the diagrams for various scales.

Over the weekend I created an extra diagram with 2 more scales, and here it is along with the previous diagrams for you guys to download or even print at any location that does tabloid size printing.

These diagrams are very useful for guitarists, guitar instructors and students as they provide a visual aid as to how the scales work in the fretboard. They also provide a visual of the relationships between the intervals of the scale.

Being a design oriented blog, I should mention the minimalistic design which mimics a guitar fretboard, and keeps the content clear. The big cleanly titles the scale we are viewing while the smaller text gives the user the formula or intervals needed to create such scale. This gives musicians the idea that even though the diagrams are in the key of c, the formula can be used to recreate the scale in just about any key. It looks quite nice and easy to use once printed.

Here is the link to download the scale diagram posters. Rock on!

By the way, I will start writing a javascript series starting the end of this month. Any suggestions for this series, or feedback is always welcome.

Share this:

For those of you who missed part one, you can find the link here.

Please don’t freak out, sections 1 through 4 are on part 1 hehe

Retrieving data from new fields for output

5. Begin by modifying the content component’s view. As this time will be modifying it on the front end, you will need to go to components\com_content\views\article\default.php

An override can be done instead of altering the original file. This is done in your site template where this override is to take place. You can follow the steps for overriding in part one of the tutorial. The only things that will be different are the paths. This time we are creating an override for components\com_content\views\article\default.php instead

Near the end in the default.php file, we find the lines which output the data entered in the articles’ content field.

1 2 3

<?php if ($params->get('access-view')):?>    <?php echo $this->item->text; ?>    <!-- item->text is the default textbox which will duplicate with our field name-->

Lets add our new field right before the default field.

1 2	<?php echo $this->item->japaneseText; ?> <!-- notice I used japaneseText which I have been using for my textbox -->    <?php echo $this->item->text; ?>

If you have other languages installed you can even display one or the other with using a conditional, which is easier to maintain in many circumstances than the built in method of managing languages.

1 2 3 4 5

if(preg_match('/japan/', strtolower($lang->getName()))){     echo $this->item->japaneseText;    } else {     echo $this->item->text;    }

6. Allow Joomla’s front end to read our new field from the database. For this we edit the model in components\com_content\models\article.php

In this file there is a select statement that hooks up the fields for output. Add your new field with prefix ’a.’ In my case for example I add ‘a.japaneseText.’

1 2 3

$query->select($this->getState(     'item.select', 'a.id, a.asset_id, a.title, a.alias, a.title_alias, a.introtext, a.fulltext, a.japaneseText,'   //notice at the end I added 'a.japaneseText'

7. Do the same to the template at components\com_content\views\featured\tmpl\default_item.php, as well as to the model at components\com_content\models\article.php

In the template echo the new field, and on the model add the field to the select statement just as we did on steps 5 and 6.

At this point you are ready to add content to your new fields.

In the xml file we edited on part one of the tutorial, there are other types of fields you can use. Check out some of the other available types of fields to see what else can be added

I look forward to hearing your feedback and suggestions on this topic as well as any tricks on web design.

Here is a link to part I for those of you who missed it

Share this:

So in this tutorial I will cover how to add new fields to your articles, how to link them to the database, and how to modify the output of your modules and components so that you can achieve the results desired.

Adding a custom field

1. Go to administrator\components\com_content\models\forms\article.xml

In it you’ll find a list of field tags in xml. These are the fields that make the forms you see when you edit an article.

1 2 3 4 5

<field name="articletext" type="editor" class="inputbox" label="COM_CONTENT_FIELD_ARTICLETEXT_LABEL" description="COM_CONTENT_FIELD_ARTICLETEXT_DESC" filter="ContentHelper::filterText" buttons="true" />

You can copy and paste that, but make sure to change the name attribute to something else, preferably something which describes your textbox. Maybe you want to use it to be the text for a different language.

1 2 3 4 5

<field name="japaneseText" type="editor" class="inputbox" label="COM_CONTENT_FIELD_ARTICLETEXT_LABEL" description="COM_CONTENT_FIELD_ARTICLETEXT_DESC" filter="ContentHelper::filterText" buttons="true" />

In the example above I am creating a field which I will use to put Japanese text

2. Now that we added the fields to our admin model, lets add it to the view so we can see it on our admin Interface. For this, go to administrator\components\com_content\views\article\tmpl\edit.php (we can use these folder and file names for an override)

You can write changes here or override them while keeping the original. To do an override we use the same folder names but place them in our administrator template.

You can find out which admin template you are using by logging in to your joomla website, and going into extensions > template manager.

Below the area on the above image, in the template manager screen you should see a list of all your templates, as well as an indicator for that which is being used as your administration template.

3. Editing the Edit.php file

In the edit.php file you will see these lines that output an input field called articletext.

1 2 3 4

<div class="clr"></div> <?php echo $this->form->getLabel('articletext'); ?> <div class="clr"></div> <?php echo $this->form->getInput('articletext'); ?>

If you look at the xml file in the first step you will see the field we copied had that same name. With that said you can also copy this same code, but instead of using articletext as the name, use the name of your new textbox.

1 2 3 4 5 6 7 8 9 10 11

//Our new textbox <div class="clr"></div> <label>Article Text - Japanese Text</label> <div class="clr"></div> <?php echo $this->form->getInput('japaneseText'); ?> //The default textbox <div class="clr"></div> <?php echo $this->form->getLabel('articletext'); ?> <div class="clr"></div> <?php echo $this->form->getInput('articletext'); ?>

I had called my textbox japaneseText, and you can see I copied the getInput code and used JapaneseText as the argument above. I am hardcoding the label in this case, as Article Text – Japanese Text

Now we have a new textbox on the administration end. This is how it looks now when we go to add a new article.

4. Hooking up our new textbox with the database.

Although the textbox now exists, it is not hooked up to the database. In your database, in your content table called yourPrefiX_content we need to add a new field with the same name you used for your textbox in the xml file (in my case japaneseText)

You can add this new field through php my admin or using this command

1	ALTER TABLE ` yourPrefiX_content ` ADD `japaneseText` VARCHAR( 255 ) NOT NULL;

You may use mediumText instead of varchar(255)

If the command executed successfuly our new input field should now be writing to our database.

So this is all for the admin end. Next post this week I will write part 2 of “Add custom content fields to Joomla.” In part 2 I will cover how to output these textfields in your website, as well as some tricks for Joomla using some of the techniques covered in the two articles.

I look forward to reading any questions or suggestions you may have

PART II can now be found here.

Share this:

I began sketching, and the idea of using candy for typography hit me. Such an idea could be time consuming, and so I decided to focus my sketching to that concept, but before that, I researched sweets and candy known by everyone which I could use on my design. The result, was to use Twizzlers; this was a candy I could manipulate and photograph to create all sorts of shapes, while still keeping the essence of the shape recognizable as candy. Knowing that it would be easy to manipulate the shape of Twizzlers I felt comfortable sketching all sorts of design ideas, while feeling comfortable that i’d make all of the project deadlines.

Shown above is one of the sketches which helped me plan the overall structure. At this point, the design was to be a 3 panel brochure, without the usual vertical rectangle shape. From those sketches I planned how I’d have to design each fold-able side so that once printed and folded, the content would come out in the right order. With a foundation ready, the next step would be to create the font, which as mentioned would be made out of physical pieces of candy. I bought a few bags of Twizzlers for the typography, and drew a basic typography diagram in a large white sheet in which I would later place the Twizzlers. The diagram consisted of three horizontal bars to represent the cap-height, x-height, and baseline for the soon to be candy letters. Using the diagram I had someone hold the Twizzlers in the shapes of the letters, while I would photograph the results. This diagram was very important, as it is part of what helped the letters work so well together. You can see some of these photographs below.

I even took some extra photos of the Twizzlers laying down vertically and horizontally in a straight line, should I need some extra lines out of candy for the design later on. These shots both consisted of the candy shaped as a straight lines. This means perhaps one of these two straight line shaped shots would have been sufficient, however, the lighting is part of the effect that made them require their own image.

At this point had all the shots ready and so began constructing the logo. Although Twizzlers are already candy, I recolored them in all sorts of vibrant colors to integrate the concept with nightlife, and candy of all sorts.

I now had all the pieces together, and therefore began just following the sketches, to bring it together, while making small improvements along the way. The space was limited, and so a lot of work was made to make sure the space is used wisely without sacrificing the clarity of the menu. People should be able to know what they are looking at, as well the prices, and calorie counts of every item. The final result was this.

I hope you enjoyed the read.

Please feel free to write me with any questions or comments. I’d love to hear, or read your feedback.

Share this:

Unlike the other projects I tend to talk about in my blog, this project was done for a course I took in “information architecture.” The goal of the project was simple: we were given dozens of words related to information and the web, and were asked to create an effective medium in which to study using these words. With this being a group project, we quickly began to discuss ideas as to what types of media people could use to study these words. Amongst the plethora of ideas, there was a mention of index cards, quizzes, dictionary, and more. The final medium which consists of a website contains many elements from these ideas.

Before we got to the final result, and once we defined what the project was exactly going to be, we divided ourselves amongst two groups. These two groups were the technical group, which would make sure the project is delivered, and the editorial group which was to make sure that all the information populated in the project is written in a consistent manner.

Originally the project was meant to be simply a static page listing all the terms along with the corresponding definition. This, would have been a perfect answer to what we were looking for, however as the team started working on a google docs spreadsheet, I began to see the possibility of making the website dynamic. Everything on the internet can be interacted with, and so I found no reason for which we should not be able to have code read straight from the google docs spreadsheet. If we can have something read that data, we can have it automatically populate the website with the latest data as the editorial team makes updates to the content. With this idea, I assumed the role of leader of the technical team, and began working on a way to use the google docs spreadsheet as an userfriendly database. It worked!

Now that the project had gone from something static to something dynamic, we played with the idea of adding filters and with my teammates decided to create mockups so that we could figure out a simple yet beautiful user interface. My original mockup (pictured below) was used in the final design, but was modified with pieces from the other mockups that could make it even better; a positive characteristic of teamwork giving us a design with the strenghts of all our mockups. Some users found the idea of a wooden background a con, while others liked it. With this in mind, we added a stylesheet switcher to the list of things to implement, furthermore modified the wood appearance to look cleaner (You can see the difference in the mockup below vs our final version). Another modification was to add visual cues for the collapsible list of terms which can be seen in the final design. These visual cues let the user know that the items are clickable.

Below are some of the mockups and a wireframe our instructor, helped us put together so that we could analyze how users would interact with this app.

Once we had wireframes and mockups we had a good idea of how the project would look, furthermore as mentioned the google docs spreadsheet was already implemented to work with our website. By this time getting data from the google docs spreadsheet had become easy, and incorporated with a database gave me much room to go script happy. Creating a dictionary or glossary for example, was at this point very easy and could be done in minutes. We still had many days in which to improve this web application and so we decided to add a quiz functionality as well. I wrote this functionality in php, and javascript, after much planning to ensure big performance. At first I thought I could request the quiz questions one at a time, but later found it made no sense to make multiple requests for the sake of performance. Requesting all the questions in one shot, would allow me to not only simulate the “one question at a time” scenario, but would even allow me to have all the questions in one shot like a real paper quiz.

Working on the quiz was really fun. The biggest challenge in the entire project was that of getting a random quiz every time with random wrong answers related to the same category. Making things more complex, the right answers should always show up in a different spot, along the wrong answers. Randomizing was at first the obvious solution, but posed a huge problem. If something is random there is the possibility of getting the same result twice. The solution which took me a while to come up with ended up being really simple. I could just simulate a deck of cards, which is pretty much how the quiz works. One deck of cards is shuffled once PER QUIZ to get all the possible questions. Another deck of cards is shuffled once PER QUESTION with the first 3 cards used for the wrong answers, unless one of them is the same as the right answer. The process is: I get the first the question, and the first right answer from the first deck, shuffle the second deck, and pick out the first 3 answers unless one is the same as the right answer. Then I shuffle the answers to continuously show the answers in a different order every time. The second deck is shuffled every question.

At this point I had thought the quiz to be finished; however there was still something that needed fixing. It was not fun. Without results, there is not reward system for which one would do the quiz. I came up with an idea that would make the quiz more fun. The quiz starts with 50points. Getting all the right answers is equivalent to getting the missing 50 points for a score of 100. More interestingly, you lose points for every wrong answer which makes it fun as there are three wrong answers per question.

This covers most of this fun project. Please check out the project at csv.thelilt.com, and provide some feedback if needed. It can be installed on the ipad and iphone devices so it shows up in the homepage like an app, however it needs to be optimized to use webkit animation rather than javascript on ios devices. To install it as an app in safari, bookmark it, and “add to homepage.” When you open it from the home page it will open without the safari interface, and without the browsers zoom in capability.

If you have any questions or feedback please feel free to write me. I will be more than happy to answer any questions.

Share this:

This project which can be found at www.wheel.guitarliving.com consists of a diagram to help musicians study chords and how to build them. The text is mostly filler, but the wheel is the beauty of it. Musicians who understand the chord theory will appreciate the simplicity of the wheel as a learning tool.

This is the first time I show this wheel file. Just thought I’d share it as I thought it was a pretty cool idea especially for musicians. One the meanwhile as usual, I am learning new stuff. Please feel free to share what technologies intrigue you and what you all do about it; I am curious how others react to these changes in technology.

Share this:

Their old website was fully functional and did the job, but there were many things asking to be updated and improved. Amongst these things to improve were a better unique design style, brand identity, modern standard practices, improved navigation, and content management features to allow them to maintain the website with ease should they ever want to change the content of a page for example.

In order to explain the strategies for the design I have included some screenshots of the original design. As you can see in the pictures above, their old design is simple, and has an interesting menu, however, it lacks a good framework to place emphasis on the various elements throughout the website, especially their logo. Their logo is very small, and its actually a really nice logo worth displaying. The kerning and tracking is not exactly even, but it is perhaps that which gives it that recognizable natural appearance. Long story short, that logo deserves to stand out, so that we can try to record it in everyone’s mind. Like the logo, the menu also lacked clarity. Their original menu was very creative which I liked, but could benefit from more clarity in both the resolution of the images, and visual contrast, furthermore could be found confusing to some. With that said, I simplified it the menu while still keeping the context of “amplifier website.” In all of my mockups I made sure to tie the entire design to amplifiers, so people can tell what the website is about in a single view.

As you can see in the mockups below, there is more emphasis on the products, and the logos stand out more cleanly. Before making mockups however, it is always useful to make a rough map in pencil. Using a pencil allows me to be more free with my ideas, rather than limiting myself to the predefined tools in the computer. The idea is always first.

The final version, which is the last image was the one I ended executing as it has the most recognizable appearance which is of great advantage when it comes to brand identity. The look still keeps the vintage warm tones of their amplifier’s sound, and like amplifiers, the layout shares the stacked boxes look of amplification instruments giving a stronger visual cue as to what the website is about. In this layout there are lots of textures to tie into the idea that these amps provide that warm organic sound guitarists love so much. I also asked the client for a photoshoot of their products in very specific angles and lighting conditions. Not only do they make great products, but they were great people to work with. They hired a photographer and had the photoshoot follow my specifications, which was crucial to the execution of the concept. I cut these images providing a very consistent feel across the photographs and product pages. The reason behind the specific angles I requested for this photoshoot are so that users can see all the functions the products have to offer without even reading any technical specifications.

In executing this website I decided to use the HTML5 to make it ready for the future browsers, while ensuring functionality, and design are not compromised in older browsers. The entire website is done around the CMSMS content management system allowing the users to edit the titles, images, content, dealers list, order of products and more. I connected everything to make maintenance of the website a breeze. CMSMS is greatly flexible, and I highly recommend it to everyone who wants to make a truly custom website with its “template withing a template” type work flow.

Visit the final website at www.evansamps.com

I look forward to reading your thoughts on the subject

Share this: