How to Build a Site Style. WebGUI LIVE!

Transcription

1 How to Build a Site Style WebGUI LIVE!

2 Where do we start? Create a design Turn it into HTML & graphics Introduce WebGUI Components Putting it all together A Closer Look

3 Creating a Design The Big Question... What are my limitations when desiging for WebGUI? NONE If anything, it gives more freedom

4 Our Example

5 Break it up however you normally would Such As... Photoshop Slices Text Editors (Notepad++, etc) WYSIWYG???

6 Break it up however you normally would Keep in mind Login Fields Areas that might have security Graphics Where is your content Navigation systems

7 Break it up however you normally would Login Fields Where to put them? WebGUI Templates define their look... to a point Easy to add via Macros

8 Areas that might have security Remember WebGUI Groups Can provide restricted access to... Special Links Login areas Special messages

9 Graphics What about em? Two different ways to reference them Both use macros

10 Where is your content? So, what exactly IS content? Anything that ISN T part of your design If you put content into a style, it shows up EVERYWHERE that style is used You insert content using template variables

11 Navigation Systems Just the highlights... Remember, WebGUI navigation is dynamic Automatically can add or remove pages Navigation is referenced by using a Macro

12 Introducing WebGUI Components Macros Helpful, and reusable, pieces of code that help you... Allow logins, access to your account, turn adminmode on Insert graphics, navigation, restricted content Display page titles And more!

13 Introducing WebGUI Components Macros Admin and Account Macros Login - ^L(...); Simple way to call the default login fields

14 Introducing WebGUI Components Macros Admin and Account Macros Login - ^L(...); Simple way to call the default login fields Account - ^a(...); Lets the user click on a link to access their account

15 Introducing WebGUI Components Macros Admin and Account Macros Login - ^L(...); Simple way to call the default login fields Account - ^a(...); Lets the user click on a link to access their account Gateway URL - ^/; Returns the URL of the domain

16 Introducing WebGUI Components Macros Admin and Account Macros Login - ^L(...); Simple way to call the default login fields Account - ^a(...); Lets the user click on a link to access their account Gateway URL - ^/; Returns the URL of the domain Admin Toggle - ^AdminToggle(...); Lets you flip to Admin mode and back... Look for them in WebGUI Help, there s more!

17 Introducing WebGUI Components Macros ^AssetProxy(...); Grabs an object and displays it (and it s smart too) <img src= myimage.gif /> becomes... ^AssetProxy(myImage.gif); Referencing Objects

18 Introducing WebGUI Components Macros ^AssetProxy(...); Grabs an object and displays it (and it s smart too) <img src= myimage.gif /> becomes... ^AssetProxy(myImage.gif); Referencing Objects ^FileUrl(...); Returns the URL of whatever you give it <img src= myimage.gif /> becomes... <img src= ^FileUrl(myImage.gif); />

19 ^AssetProxy(); vs. ^FileUrl(); Why use ^AssetProxy()? Grabs and processes passed values Recognizes what is being passed to it and creates necessary tags to display it Ex- <img> Great for quickly referencing assets

20 ^AssetProxy(); vs. ^FileUrl(); Why use ^AssetProxy()? Grabs and processes passed values Recognizes what is being passed to it and creates necessary tags to display it Ex- <img> Great for quickly referencing assets Why use ^FileUrl()? Returns the full URL (minus the domain) of the passed Asset Draws no tags at all Great for giving you more control in your template or for CSS backgrounds

21 Introducing WebGUI Components Macros Page - ^Page(...); Pass it menutitle and you ll display the menu title, pass it title and you ll get the title ^Page(title); becomes... An Example Title Page Titles

22 Introducing WebGUI Components Macros Page - ^Page(...); Pass it menutitle and you ll display the menu title, pass it title and you ll get the title ^Page(title); becomes... An Example Title Company - ^c; Returns the company name in your settings ^c; becomes... Widgets Inc. Page Titles

23 Introducing WebGUI Components Macros Page - ^Page(...); Pass it menutitle and you ll display the menu title, pass it title and you ll get the title ^Page(title); becomes... An Example Title Page Titles Company - ^c; Returns the company name in your settings ^c; becomes... Widgets Inc. <title> Widgets Inc - Home </title> <title> ^c; - ^Page(title); </title>

24 Putting It All Together The Beginning Prep Work Backup your work Keep your.htm file as a reference

25 Backup your work Keep your.htm file as a reference Putting It All Together The Beginning Prep Work Create a copy of that orginal.htm file Called the Working Copy Insert the macros here!

26 Backup your work Keep your.htm file as a reference Putting It All Together The Beginning Prep Work Create a copy of that orginal.htm file Called the Working Copy Insert the macros here! Create a WebGUI folder in your asset manager to store your- Template Images Snippets

27 Putting It All Together The Middle Setup Admin Mode and Content <tmpl_var head.tags> Inserts necessary code to handle editing on a page Needs to be in your <head></head> tags

28 Putting It All Together The Middle Setup Admin Mode and Content <tmpl_var head.tags> Inserts necessary code to handle editing on a page Needs to be in your <head></head> tags ^AdminBar(); Places the Admin bar at the left of the page in admin mode Should be right after your <body> tag

29 Putting It All Together The Middle Setup Admin Mode and Content <tmpl_var head.tags> Inserts necessary code to handle editing on a page Needs to be in your <head></head> tags ^AdminBar(); Places the Admin bar at the left of the page in admin mode Should be right after your <body> tag <tmpl_var body.content> This creates the area for your content Put it wherever you want your content to be (once!)

30 Putting It All Together The Middle, Still External References Use ^AssetProxy(); and ^FileUrl for your images ^AssetProxy(red.gif);

31 Putting It All Together The Middle, Still External References Use ^AssetProxy(); and ^FileUrl for your images ^AssetProxy(red.gif); Use ^FileUrl(); to reference javascripts, CSS files or backgrounds in CSS files background-image: url( ^FileUrl(red.gif); );

32 Putting It All Together The Middle, Still External References Use ^AssetProxy(); and ^FileUrl for your images ^AssetProxy(red.gif); Use ^FileUrl(); to reference javascripts, CSS files or backgrounds in CSS files background-image: url( ^FileUrl(red.gif); ); Use ^AssetProxy(); to pull in Snippets and your Navigation

33 Putting It All Together The End Installing the Template Use File Pile to upload images, CSS, Javascripts to WebGUI

34 Putting It All Together The End Installing the Template Use File Pile to upload images, CSS, Javascripts to WebGUI Create a template from the Asset Manager Be sure to select style!

35 Putting It All Together The Template

36 Putting It All Together The Template

37 Putting It All Together The Template

38 Putting It All Together The End Installing the Template Use File Pile to upload images, CSS, Javascripts to WebGUI Create a template from the Asset Manager Be sure to select style! Create a Navigation configuration from the Asset Manager Remember its URL!

39 A Few Important Bits Navigation & Snippets

40 A Word About Navigation Include a navigation system by ^AssetProxy(); Many available pre-installed You can always create your own Comes in 2 parts- Navigation Configuration Navigation Style Template

41 A Word About Navigation Navigation Configurations This is what is AssetProxy d Controls what pages will be displayed

42 A Word About Navigation Navigation Configurations This is what is AssetProxy d Controls what pages will be displayed Navigation Style Template Associated with the Configuration Controls the look of your navigation

43 Behold the power of Snippets Can be used for external file referencing CSS, Javascript, XML Just give the appropriate URL....css,.js.,.xml

44 Behold the power of Snippets Can be used for external file referencing CSS, Javascript, XML Just give the appropriate URL....css,.js.,.xml And select the appropriate MIME type text/css, text/javascript, text/xml

45 Behold the power of Snippets Can be used for external file referencing CSS, Javascript, XML Just give the appropriate URL....css,.js.,.xml And select the appropriate MIME type text/css, text/javascript, text/xml Why use a snippet instead of uploading a file? Speed and Ease Include template variables and macros

46 Behold the power of Snippets Can be used for external file referencing CSS, Javascript, XML Just give the appropriate URL....css,.js.,.xml And select the appropriate MIME type text/css, text/javascript, text/xml Why use a snippet instead of uploading a file? Speed and Ease Include template variables and macros Restrict sections of your template You can set the security properties for specific groups

47 A Closer Look at our Example

48 A Closer Look at our Example The Head

49 A Closer Look at our Example The Head WebGUI Components

50 A Closer Look at our Example The Body, Part 1

51 A Closer Look at our Example The Body, Part 1 WebGUI Components

52 A Closer Look at our Example The Body, Part 2 - HTML

53 A Closer Look at our Example The Body, Part 2 - HTML with WebGUI WebGUI Components

54 Questions?