how to build a site style · • css, javascript, xml • just give the appropriate url... •.css,...
Post on 12-Jul-2020
16 Views
Preview:
TRANSCRIPT
How to Build a Site StyleWebGUI LIVE!
Where do we start?
• Create a design
• Turn it into HTML & graphics
• Introduce WebGUI Components
• Putting it all together
• A Closer Look
Creating a Design The Big Question...
What are my limitations when desiging for WebGUI?
NONEIf anything, it gives more freedom
Our Example
• Photoshop Slices
• Text Editors (Notepad++, etc)
• WYSIWYG???
HTML & GraphicsBreak it up however you normally would
Such As...
• Login Fields
• Areas that might have security
• Graphics
• Where is your content
• Navigation systems
HTML & GraphicsBreak it up however you normally would
Keep in mind
• Where to put them?
• WebGUI Templates define their look... to a point
• Easy to add via Macros
HTML & GraphicsBreak it up however you normally would
Login Fields
• Can provide restricted access to...
• Special Links
• Login areas
• Special messages
HTML & GraphicsAreas that might have security
Remember WebGUI Groups
• Two different ways to reference them
• Both use macros
HTML & GraphicsGraphics
What about em?
• 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
HTML & GraphicsWhere is your content?
So, what exactly IS content?
• Remember, WebGUI navigation is dynamic
• Automatically can add or remove pages
• Navigation is referenced by using a Macro
HTML & GraphicsNavigation Systems
Just the highlights...
• Allow logins, access to your account, turn admin-mode on
• Insert graphics, navigation, restricted content
• Display page titles
• And more!
Introducing WebGUI ComponentsMacros
Helpful, and reusable, pieces of code that help you...
• Login - ^L(...); • Simple way to call the default login fields
Introducing WebGUI ComponentsMacros
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
Introducing WebGUI ComponentsMacros
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
Introducing WebGUI ComponentsMacros
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
Introducing WebGUI ComponentsMacros
Admin and Account Macros
Look for them in WebGUI Help, there’s more!...
• ^AssetProxy(...); • Grabs an object and displays it (and it’s smart too)
• <img src=”myImage.gif” /> becomes...
• ^AssetProxy(myImage.gif);
Introducing WebGUI ComponentsMacros
Referencing Objects
• ^AssetProxy(...); • Grabs an object and displays it (and it’s smart too)
• <img src=”myImage.gif” /> becomes...
• ^AssetProxy(myImage.gif);
• ^FileUrl(...);• Returns the URL of whatever you give it
• <img src=”myImage.gif” /> becomes...
• <img src=”^FileUrl(myImage.gif);” />
Introducing WebGUI ComponentsMacros
Referencing Objects
^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
^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
• 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
Introducing WebGUI ComponentsMacros
Page Titles
• 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.
Introducing WebGUI ComponentsMacros
Page Titles
• 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.
Introducing WebGUI ComponentsMacros
Page Titles
<title> Widgets Inc - Home</title>
<title> ^c; - ^Page(title);</title>
• Backup your work
• Keep your .htm file as a reference
Putting It All TogetherThe Beginning
Prep Work
• Backup your work
• Keep your .htm file as a reference
• Create a copy of that orginal .htm file
• Called the ‘Working Copy’
• Insert the macros here!
Putting It All TogetherThe Beginning
Prep Work
• Backup your work
• Keep your .htm file as a reference
• 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
Putting It All TogetherThe Beginning
Prep Work
• <tmpl_var head.tags>
• Inserts necessary code to handle editing on a page
• Needs to be in your <head></head> tags
Putting It All TogetherThe 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
Putting It All TogetherThe 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!)
Putting It All TogetherThe Middle
Setup Admin Mode and Content
• Use ^AssetProxy(); and ^FileUrl for your images
• ^AssetProxy(red.gif);
Putting It All TogetherThe 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);’);
Putting It All TogetherThe 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
Putting It All TogetherThe Middle, Still
External References
• Use ‘File Pile’ to upload images, CSS, Javascripts to WebGUI
Putting It All TogetherThe 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’!
Putting It All TogetherThe End
Installing the Template
Putting It All TogetherThe Template
Putting It All TogetherThe Template
Putting It All TogetherThe 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!
Putting It All TogetherThe End
Installing the Template
A Few Important BitsNavigation
&Snippets
• 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
A Word About Navigation
• Navigation Configurations
• This is what is AssetProxy’d
• Controls what pages will be displayed
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
A Word About Navigation
Behold the power of Snippets
• Can be used for external file referencing
• CSS, Javascript, XML
• Just give the appropriate URL...
• .css, .js., .xml
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
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
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
A Closer Look at our Example
The HeadA Closer Look at our Example
The HeadA Closer Look at our Example
WebGUIComponents
The Body, Part 1A Closer Look at our Example
The Body, Part 1A Closer Look at our Example
WebGUIComponents
The Body, Part 2 - HTMLA Closer Look at our Example
The Body, Part 2 - HTML with WebGUIA Closer Look at our Example
WebGUIComponents
Questions?
top related