Pixelsilk Training Copyright Pixelsilk 2009 1
Pixelsilk Training Guide Copyright 2009, Pixelsilk All rights reserved. No part of this book or accompanying class may be reproduced or transmitted in any form by any means graphic, electronic, video, audio, or mechanical without prior permission from the publisher. Copyright Pixelsilk 2009 2
Agenda DAY 1 DAY 2 Time Description 8:30 9:00 Overview and Introductions Goals and Expectations 9:00 10:30 Brief Admin Overview Training by Role: Ed Overview Story Content Editor, Library, Manage Pages 10:30 10:45 Break 10:45 12:00 Sadie Overview Story Users and Roles, Page Level Security 12:00 1:00 Lunch 1:00 3:45 Webster Overview Story Theme, Controls and Tokens Page Types, List Sections Time Description 8:30 10:00 Ed, Sadie, Webster, Oscar Q/A Netti Overview Story Devon Overview Story API Development Walk through Support Services/Bug Submission Final Q/A 10:00 10:15 Break 10:15 3:00 pm Client Practice (including lunch) 3:00 Class Ends 3:45 4:00 Break 4:00 5:00 Oscar Overview Story URL Control, Theme Flexibility Search Advice 5:00 7:00 Dinner (optional) Copyright Pixelsilk 2009 3
Who Uses Pixelsilk and what do they enjoy? WYSIWYG Content Editor Edit Images and Pages Easily Manage Domains/DNS E-mail Administration Manage Permissions/Roles Implement Basic Workflow Client and Server APIs Integration Made Easy Full HTML Control Leverage CSS, AJAX, Flash Search Advice Tools Full HTML and URL Control Copyright Pixelsilk 2009 4
Ed s Story/Overview WYSIWYG Content Editor Edit Images and Pages Easily Ed, The Editor handles adding, editing and deleting pages, content and page properties. Ed typically does not know HTML and primarily works inside of the WYSIWYG interface. He understands basic Word Processing (MS Word). With proper training, Ed is savvy enough to understand how to add links, documents, media and content to grow content on the site and add frequently updated information. Copyright Pixelsilk 2009 5
Ed The Editor Overview Admin Overview 1) Logging In 2) Backend: Manage Pages, Users, Library, Design 3) Frontend: Admin Bar, Edit Tabs Content Editing, WYSIWYG Editing 1) Add a Page, Move a Page, Delete a Page 2) Page Properties (Ed) Front end Options 3) Page Properties (Admin) General Options, Security, Skins, URL, Advanced Copyright Pixelsilk 2009 6
Ed The Editor Overview Library 1) Overview Images Add an Album Add Images to an Album Resizing Images 2) Adding Files, Media Exercise Copyright Pixelsilk 2009 7
Edit Content and Pages Copyright Pixelsilk 2009 8
How to Login Login = http://www.domain.com/admin Copyright Pixelsilk 2009 9
Manage Pages Copyright Pixelsilk 2009 10
Navigate to Page to Edit Content Copyright Pixelsilk 2009 11
On-Page Content Editing Copyright Pixelsilk 2009 12
MS Word-like Editor Copyright Pixelsilk 2009 13
Editor Highlights Easy Text Formatting <h1> Tags Made Simple HTML Editor is XHTML Compliant Copyright Pixelsilk 2009 14
Up Close With The Admin Bar Copyright Pixelsilk 2009 15
Admin Bar Overview Copyright Pixelsilk 2009 16
Page Information Copyright Pixelsilk 2009 17
Page Information - URL Copyright Pixelsilk 2009 18
SEO Advice Copyright Pixelsilk 2009 19
Manage Site Copyright Pixelsilk 2009 20
Edit Page Properties Copyright Pixelsilk 2009 21
Add a Page Copyright Pixelsilk 2009 22
Move a Page Copyright Pixelsilk 2009 23
Managing Your Library Copyright Pixelsilk 2009 24
Manage Files and Their Albums Copyright Pixelsilk 2009 25
Copyright Pixelsilk 2009 26
Add Images to Album Copyright Pixelsilk 2009 27
Edit or Delete Individual Images Copyright Pixelsilk 2009 28
Editing an Image in the Image Editor Copyright Pixelsilk 2009 29
Content Editing Exercise 1) Add A Page (Staff Page) 2) Move it Under Contact Us 3) Add Content to Staff Page (Demonstrate adding: text, header tag, image, link, table and simple text formatting) 4) Create an Album 5) Add Images Copyright Pixelsilk 2009 30
Sadie s Story/Overview Manage Permissions/Roles Implement Basic Workflow Sadie The Site Manager assigns permissions/security roles and users. Sadie would guide access to various areas of the site and assign editing tasks to those working within the system. Sadie can easily add roles and create/define users assigned to those roles. She also is known for review and monitoring of web analytics. Copyright Pixelsilk 2009 31
Sadie The Site Manager Overview Setup Roles, Users and Assign Permissions 1) How to Add a Role 2) How to Create a User and Assign them to a Role 3) Page Level Permissions/Security 4) Control Level Permissions/Security *For Image, Text and HTML Webboxes Copyright Pixelsilk 2009 32
Sadie The Site Manager Copyright Pixelsilk 2009 33
Roles Copyright Pixelsilk 2009 34
Users Copyright Pixelsilk 2009 35
Page Level Permissions Copyright Pixelsilk 2009 36
Controls Permissions Copyright Pixelsilk 2009 37
Site Manager Exercise 1) Add A Role 2) Add a User 3) Change Permissions Page Level 4) Change Permissions Controls Level Copyright Pixelsilk 2009 38
Webster s Story/Overview Full HTML Control Leverage CSS, AJAX, Flash Webster The Web Developer has a solid knowledge base using HTML, JavaScript and CSS and is typically responsible for theme/skin development. Webster s domain and access is under the Design area where full theme editing takes place. Webster utilizes controls and subsequent [[tokens]] to setup the theme templates, forms, navigation and easy thirdparty plug ins. Copyright Pixelsilk 2009 39
Webster The Web Developer 10 Suggested Steps For Site Deployment Theme Overview 1) Import, Create, Edit a Site Theme Tokens 1) What is a [[Token]]? 2) [[System Tokens]] vs. [[Custom Tokens]]; Tokensense 3) Where Tokens are: Created, Stored, Used Copyright Pixelsilk 2009 40
Webster The Web Developer Controls 1) Creating Tokens from Controls 2) What are Skins? 3) Various Control Types and their Properties System Files 1) Creating and Editing a System File Page Types 1) Adding a Page Type 2) Define Fields and Skins 3) Building Forms Copyright Pixelsilk 2009 41
10 Suggested Steps for Site Deployment Copyright Pixelsilk 2009 42
Webster Suggested Steps Step 1: Change User Password (from default) under (Manage Users) Copyright Pixelsilk 2009 43
Webster Suggested Steps Step 2: Add a Theme; Replace hard-coded elements with tokens such as: menus, webboxes, meta information, analytics, headers, footers, etc. (Manage Design) Copyright Pixelsilk 2009 44
Webster Suggested Steps Step 3: Create a CSS file (Manage Design) Copyright Pixelsilk 2009 45
Webster Suggested Steps Step 3: Paste Developed CSS (Manage Design) Copyright Pixelsilk 2009 46
Webster Suggested Steps Step 4: Upload Site Images to Default Image Library Album; *These are images referenced in the theme and CSS files. (Manage Library) Copyright Pixelsilk 2009 47
Webster Suggested Steps Step 5: Create and Skin Controls for Custom Tokens (Manage Design) Copyright Pixelsilk 2009 48
Webster Suggested Steps Step 6: Create Needed Page Types (Manage Design) Copyright Pixelsilk 2009 49
Webster Suggested Steps Step 7: Skin Needed Page Types (Manage Design) Copyright Pixelsilk 2009 50
Webster Suggested Steps Step 8: Add Pages of Content (Manage Design) Copyright Pixelsilk 2009 51
Webster Suggested Steps Step 9: Add Content Copyright Pixelsilk 2009 52
Webster Suggested Steps Step 10: Review and Complete Pre Launch SEO Elements: Site Architecture and URLs, Meta Data, Page Content and <h1> tags, Redirects, Sitemaps, Robots.txt Copyright Pixelsilk 2009 53
Webster s Tips and Tricks Time Saving Tips 1) For cross platform web fonts: http://www.ampsoft.net/webdesign-l/windowsmacfonts.html 2) Create a Sprite image for background references and use background image positioning to save files size. (One image for.png, One for.gifs) 3) Create the background definition in the CSS at the end of the line. 4) Create theme in third party app with hard coded elements and comments to represent future [[Tokens]]. Copyright Pixelsilk 2009 54
Theme Overview Copyright Pixelsilk 2009 55
Theme Overview Import, Create, Edit a Site Theme (Manage Design) Copyright Pixelsilk 2009 56
Theme Overview Import, Create, Edit a Site Theme (Manage Design) Copyright Pixelsilk 2009 57
Tokens Copyright Pixelsilk 2009 58
Tokens What is a [[Token]]? [[Tokens]] are like variables: references to objects or content, such as data fields in a List Section, Controls, or System Tokens. When Pixelsilk encounters a [[Token]] while building a page, the system replaces the [[Token]] with the appropriate content it represents, which can be HTML, CSS, JavaScript, or anything that can render in the browser. Copyright Pixelsilk 2009 59
Tokens [[System Tokens]] vs. [[Custom Tokens]] System Token Definitions System Tokens have been previously created and are defaults for you to use that are common items and tasks to help site deployment and updates. The names are intuitive to the item it replaces. Ex: Tokensense Custom Tokens are those created by Webster on the fly that may represent customized items on the site. Token names are unique and different from system tokens. Copyright Pixelsilk 2009 60
General Tokens: Exhibit 1.1 [[PrimaryDomain]] [[PathName]] http://www.pixelsilk.com/marketing agencies/cms web design/design article1 [[ParentPath]] [[PagePath]] Copyright Pixelsilk 2009 61
Tokens Where Tokens are: Created, Stored, Used Tokens can be used in many areas of Pixelsilk. Common uses are inside of the theme, page type and control skins (Manage Design), or page properties of list sections (Manage Pages), even inside of the content editor. Copyright Pixelsilk 2009 62
Controls and their Skins Copyright Pixelsilk 2009 63
Controls What is a Control? Controls are dynamic components or blocks of content that can be inserted anywhere in a theme page, skin, and/or content. When Pixelsilk renders a page, any controls found in the process (represented by the token with the control between the brackets Ex. [[Control]]) are activated and their resulting content is inserted into the render. Copyright Pixelsilk 2009 64
Controls What is a Control? Since controls can be dynamic, the content they produce may be dependent upon the context of the output built a menu control, for example, will produce different results depending on which page the user is viewing. Some controls also provide the opportunity to setup authentication restrictions on parts of a page, or give the user the ability to hide or show content in certain areas of the website. Copyright Pixelsilk 2009 65
Tokens How to Create a Token from a Control Copyright Pixelsilk 2009 66
Controls: Skins What is a Skin? What types of Skins are available? Skins are customizable templates invoked by the system when rendering data for output (either for a user in front of a monitor, or an RSS feed for another website). Skins usually contain HTML code to be rendered on a browser, but there is no limit to what format they can represent, as long as it s in a text based format: HTML, XML, JavaScript, RSS, plain text, or anything else a browser can render. Skin Definitions ** Skins include: Content, Item, Alt Item, First Item, Last Item, Separator, Active Item, Item Page, Edit Item Copyright Pixelsilk 2009 67
Skins Overview Copyright Pixelsilk 2009 68
Skins Overview Copyright Pixelsilk 2009 69
Skins Overview Copyright Pixelsilk 2009 70
Skins Overview Copyright Pixelsilk 2009 71
Types of Controls Copyright Pixelsilk 2009 72
Controls: Head Definitions: Allows extra HTML information inserted into the <head> tag. Examples would be Google or Yahoo! verification codes, JavaScript and CSS references. Skins: Place a [[Content]] Token in the Content Skin Copyright Pixelsilk 2009 73
Controls: Login Definitions: Creates a login area including username/password fields. If you choose to skin your own login, and not use the default, you must include the login fields/submit button in your Content Skin. Skins: Content Skin (only) Copyright Pixelsilk 2009 74
Controls: Webboxes Definitions: The most common control is a webbox (outside of a menu) and is a defined snippet of HTML that can be client editable, or not, or both editable and not. User permissions can be used for editing and viewing as well as inclusion and exclusion definition for visibility of token on specific sections/pages. ** There are three types of webboxes: HTML, Text, Image Skins: Content Copyright Pixelsilk 2009 75
Controls: HTML Webbox Definitions: 1) An HTML Webbox is a defined box of content that can be editable by the client using the full content editor. 2) A Text Webbox does not use the content editor and is for text only. 3) An Image Webbox is used for images only and is directly tied to the image library. Front-end HTML Webbox Copyright Pixelsilk 2009 76
Controls: Webboxes - Options Definitions: General Options for a webbox determine the visibility of the desired webbox on the site level, section or page level using inclusion/exclusion logic. Use a line break as a separator between pages. Examples: / = Home * = All Site Pages /PageName/ = Individual Page Copyright Pixelsilk 2009 77
Controls: Webboxes User Permissions Definitions: Unique to webboxes, you can assign user permissions/security to any particular webbox locking down visibility or editing per role. Copyright Pixelsilk 2009 78
Controls: Webboxes Skins Definitions: Content for webboxes is contained within the Content Skin. The [[Content]] Token brings up a client editable area. Copyright Pixelsilk 2009 79
Controls: Breadcrumb Definitions: Breadcrumbs are a type of menu to help guide a visitor where they came from. Breadcrumbs has defaults setup; however, you can edit skins and format links using CSS to complete the skin. There is no need to nest controls for breadcrumbs. Skins: Content, Item, Separator, Active Item Ex: Breadcrumbs Copyright Pixelsilk 2009 80
Controls: Sitemap Definitions: Sitemap controls allow formatting of various HTML sitemap levels. You must create a sitemap control per level and can nest sitemap levels inside of each other. The sitemap control is populated with defaults. Skins: Content, Item Copyright Pixelsilk 2009 81
Controls: Menu Definitions: Allows you to create a site menu and multiple levels (unlimited) of the menu. Skins: Content, Item, Active Item Copyright Pixelsilk 2009 82
Controls: Pagination Definitions: Pagination identifies the items per page and links per page in a list section or e commerce categories. Defaults are included; however, you may customize the skins. Define the pagination per list section under the Page Properties (Manage Pages) and the List tab. Copyright Pixelsilk 2009 83
Controls: Pagination Skins: Content, Item, First Item, Last Item, Active Item Copyright Pixelsilk 2009 84
Controls: List Feed Definitions: A List Feed control brings dynamic items (news, events, photos, audio, video, blog posts, etc.) to automatically generate and be visible on other pages from a list section. A list feed includes sorting, filtering, display count and inside of a webbox inclusion/exclusion logic. Skins: Content, Item Copyright Pixelsilk 2009 85
Controls: List Feed General Options Sorting Copyright Pixelsilk 2009 86
Controls: List Feed Filtering Skins populated (by default) Copyright Pixelsilk 2009 87
Exercises 1) Create a Control Simple Head Moderate Webbox Complex Sitemap or Menu 2) Edit Layout Theme Add Head, Webbox and Sitemap or Menu to theme Copyright Pixelsilk 2009 88
System Files Copyright Pixelsilk 2009 89
System Files Copyright Pixelsilk 2009 90
System Files Copyright Pixelsilk 2009 91
Page Types Copyright Pixelsilk 2009 92
Adding a Page Type Copyright Pixelsilk 2009 93
Defining Page Type Fields Copyright Pixelsilk 2009 94
Defining Page Type Skins and Fields Copyright Pixelsilk 2009 95
Defining Page Type Skins Page Level If you choose Section, you disconnect the page from the Type skin for that page type. If later you go back to Type your customization will override the Type skin settings and update the Type skins. Copyright Pixelsilk 2009 96
Recommended Tokens for Page Type Skins 1) Content Skin *[[Items]], [[Pagination]], [[AddItemControl]] 2) Item Skin *[[Title]], *[[Item Page URL]], [[Brief Description]], [[EditDeleteControl]] 3) Edit Item Skin *[[SortOrder]], *[[PathName]], *[[MetaDescription]], *[[MetaKeywords]], plus any item detail tokens needed such as: [[Title]], [[BriefDescription]], [[FullDescription]] 1) Include [[*FieldName*InvalidText]] 4) Item Page Skin [[Title]], [[FullDescription]], [[EditDeleteControl]] Copyright Pixelsilk 2009 97
Page Type Fields Overview 1) TIP: Fields are organized alphabetically 2) Default fields include: BriefDescription, DateTimeCreated, FullDescription, Image, Title, NumberOfViews 3) TIP: Add a SortOrder field 4) Definitions: 1) Image, File, Media Library = Pulls up site library 2) Image, File, Media Browser = Pulls up desktop computer Copyright Pixelsilk 2009 98
Forms Copyright Pixelsilk 2009 99
Forms: Security For most forms, only the Add Items permission should be checked, while View Items and View are unchecked. Copyright Pixelsilk 2009 100
Forms: Skins Copyright Pixelsilk 2009 101
Forms: Page Default View Copyright Pixelsilk 2009 102
Forms: Redirect After Submit Copyright Pixelsilk 2009 103
Forms: Email New Items Copyright Pixelsilk 2009 104
Forms: View Answers Copyright Pixelsilk 2009 105
Webster Exercises 1) Page Types Modify an Existing Page Type Create a Page Type Build a Form Copyright Pixelsilk 2009 106
Oscar s Story/Overview Search Advice Tools Full HTML and URL Control Oscar The Optimizer is the SEO guru. He enjoys the ability of full HTML/URL control implement his SEO strategy. Oscar typically sets up proper URL structures, meta data, robots.txt and other SEO items. He works with Webster to deliver optimized, clean (non bloated) code. Oscar may also use the Search Advice interface to put his advice into the system and make it available for Ed while editing. Copyright Pixelsilk 2009 107
Oscar The Optimizer Page Properties 1) Page Names / Navigation Structure 2) Title, Keywords, Descriptions, URL 3) Content Editor Custom 404 and 410 Error Page Theme and System Files 1) Theme Layout 2) Web Analytics 3) Robots.txt Copyright Pixelsilk 2009 108
Oscar The Optimizer Sitemaps 1) HTML 2) XML Search Advice 1) Search Advice Input 2) Search Advice Display Copyright Pixelsilk 2009 109
Page Properties Copyright Pixelsilk 2009 110
Page Names / Navigation Structure Back end (Manage Pages) Copyright Pixelsilk 2009 111
Page Names / Navigation Structure Back end (Manage Pages) * Moving a page updates the URL in a spider friendly folder directory structure. Copyright Pixelsilk 2009 112
Page Names / Navigation Structure Back end (Manage Pages) Copyright Pixelsilk 2009 113
Page Names / Navigation Structure Front end Copyright Pixelsilk 2009 114
Page Names / Navigation Structure Front end Copyright Pixelsilk 2009 115
Oscar Exercises 1) Optimize On Page Properties Change the URL Update the Meta Information 2) Search Advice Add Metrics for a Page View Advice for the Page Copyright Pixelsilk 2009 116
Netti s Story/Overview Manage Domains/DNS E-mail Administration Netti The Network Admin is the keeper of Domain, DNS and E mail management for individual sites. The Pixelsilk Control Panel is where Netti accomplishes Domain registration, renewal and domain properties as well as DNS name server information. Netti also manages e mail accounts associated with the client and is the technical contact, coordinating hosting related issues. Copyright Pixelsilk 2009 117
Devon s Story/Overview Client and Server APIs Integration Made Easy Devon The Developer has a wide spread knowledge base of server side languages, such as: PHP,.NET, Cold Fusion, etc. Although not needed to theme and deploy a site, Devon is useful when third party integration is needed. He enjoys access to both the server and client APIs to accomplish more complex integration between Pixelsilk and a third party application. Copyright Pixelsilk 2009 118