TUTORIAL - Getting Started - THE BASICS

GETTING STARTED - THE BASICS
19th August 2009 for Beginners
In this tutorial you will learn about how to begin creating new sites and web services using HammerKit. At the end of this tutorial you will know your way around the interface and be able to create a simple component.

AUTHOR: Mark Sorsa-Leslie
The author is Managing Director of HammerKit and is NOT a designer!



Introduction
HammerKit is a complete solution to the challenge of creating and deploying websites. The difference with HammerKit is that you build using components inside a visual interface, rather than code with HTML. This tutorial is designed to get you familiar with the interface and the methods for building new websites.

To get the best out of this tutorial, sign-up for your own HammerKit Studio at www.hammerkit.com
Step 1 - Create a new site
First, lets create a brand new site so we can begin from a blank canvas. To do this, log into your HammerKit Manager site at [yoursitename].hammerkit.com. Use the administration name and password you received when you signed up for HammerKit.




Once you have logged in, click SITES to see a list of the current sites you have. Next, click the �NEW SITE� button and follow the steps to create a completely new site. Once you have done this, go back to the SITES list and click on the admin link next to the site you created.




Now lets move to Step 2 and add our first component.
Step 2 - Add your first component
Once you have clicked the admin button next to the site name you will arrive in the studio tool for that site. From here you can create and develop your site, edit content, control user access - in fact you can control everything related to the way your web site will function.

What makes HammerKit unique is that we do not use HTML to create web sites - we use components.

To add a component, click CONTENTS from the top menu bar to open the content editor screen. On the left hand side is where the components are stored. To create a new component click the button on the left side of the screen. The screen should look like this:



Give the component a name, untick the access control selection and leave the chooser for type of component saying �Page�. You can change the name of the component later by typing the new name in the title bar of the component and pressing save.



Now we can begin to add elements to the component in Step 3.

Step 3 - Add your first element
Now we can add our first element to the component. To do this, select the text element by pressing the button that looks like this on the button bar.This will open a text editor window that looks like this.



Type a message in the text area. You can use the formatting buttons and styles to alter the look and style of the text. When you have finished adding text click DONE to return to the component. You will now see your element displayed in the component with a small green box next to it. This is the control box - to edit the element, double click the control box.




Once you have saved the element we are ready to preview it. Lets move to Step 4.

Step 4 - Saving and previewing your component
Now press SAVE to store your component and click VIEW PAGE under the COMPONENT MENU at the top of the page.



This will display your component in a new browser window. You have now created a new web page with a single component and a single element.

The text element is one of 8 basic elements in HammerKit. Try experimenting with the other elements. To do this, click on the name of your component shown on the left-side of the screen and try adding another element. 



They are, from the left:  Text, Picture, Link, File, Table, Form, Module, Line Break
Step 5 - Using components
The heart of HammerKit is the ability to embed components inside other components. To test this, add a second component by following steps 1 & 2. Now click the component include button in the element button bar. It looks like this:





Click the symbol in the element button bar. This is the component include element and it will open a window that looks like this:



Choose the component to include by clicking BROWSE and selecting the first component you created. Click DONE when you have completed this. Your screen should look something like this:




Now press SAVE to store the new component and ciick VIEW PAGE from the component menu to see the results. You have created a new page simply by including the first component you created. There was no need to add the elements again, and if you edit the first component, the second one is automatically updated to. This is the foundation for HammerKit, and it is what we believe makes our approach more efficient than traditional editors and HTML coding.

That's really all there is to creating sites, adding components, adding elements and using components with HammerKit. Now it is just up to you and your creativity to work with the elements and components and build yourself new sites and services.


Finished!
Five Steps to creating your first pages with HammerKit

So, to summarise:
  1. add a site with the HammerKit manager
  2. add a component
  3. add a simple element, like text, image or link
  4. save and preview the page
  5. embed the component inside another component

If you have any questions about this, or would like some help, post your question on 
designer.hammerkit.com and one of the team will assist you.

Related Articles
Here are some articles that may also be of interest
Design Talk Forum
Tutorial Videos
HammerKit System Overview PDF

Did you enjoy this post?
Why not share it with your community?



Subscribe to the HammerKit Blog�


25.08.2009 10:03
� Chef Ramsay would fix Nokia
21.08.2009 08:03
� TwitBook - the only game in town
20.08.2009 12:07
� Mega-Trends in the Internet Industry
19.08.2009 04:25
� TUTORIAL - Getting Started - THE BASICS
06.08.2009 17:07
� New HammerKit website launched
05.08.2009 17:42
� TUTORIAL - Adding Google Analytics
30.07.2009 14:22
� TUTORIAL - Improving search engine visibility
29.07.2009 16:04
� TUTORIAL - Using Javascript
12.03.2009 12:32
� Plugg 2009 - Brussels (Part 1)
02.03.2009 16:50
� Industry recognition continues!
22.01.2009 13:37
� Red Herring 2008 Global 100 Winners!
31.12.2008 14:08
� Bye-bye 2008. Hello 2009!
22.12.2008 17:55
� HammerKit is selected as one of Red Herring Global 100 finalists
29.10.2008 00:40
� Component Factory goes live...
17.10.2008 12:42
� Our Prize: Technopolis Incubator
10.10.2008 11:40
� Winners at MindTrek 2008!
29.09.2008 17:15
� MindTrek 2008...in the finals
16.09.2008 08:45
� Do you want to be a HammerKit production partner?
16.09.2008 08:25
� We lost 4 Get HammerKit requests!!! (UPDATED)
04.09.2008 08:13
� Innokit innovates with HammerKit
26.08.2008 09:35
� HammerKit grows
20.08.2008 17:57
� Making font finding easy

Product

� Pricing
� Examples
� Features
� Sign Up
Company

� About HammerKit
� Contact
� Press Centre
� Terms of Service
� Privacy Policy
Community

� Designer Community
� Videos & Guides
� Our Blog
� Tweets
� Release Notes





� 2006-2009 HammerKit Oy