Pixelsilk Training Manual 8/25/2011. Pixelsilk Training. Copyright Pixelsilk

Transcription

1 Pixelsilk Training Copyright Pixelsilk

2 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

3 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

4 Who Uses Pixelsilk and what do they enjoy? WYSIWYG Content Editor Edit Images and Pages Easily Manage Domains/DNS 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

5 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

6 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

7 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

8 Edit Content and Pages Copyright Pixelsilk

9 How to Login Login = Copyright Pixelsilk

10 Manage Pages Copyright Pixelsilk

11 Navigate to Page to Edit Content Copyright Pixelsilk

12 On-Page Content Editing Copyright Pixelsilk

13 MS Word-like Editor Copyright Pixelsilk

14 Editor Highlights Easy Text Formatting <h1> Tags Made Simple HTML Editor is XHTML Compliant Copyright Pixelsilk

15 Up Close With The Admin Bar Copyright Pixelsilk

16 Admin Bar Overview Copyright Pixelsilk

17 Page Information Copyright Pixelsilk

18 Page Information - URL Copyright Pixelsilk

19 SEO Advice Copyright Pixelsilk

20 Manage Site Copyright Pixelsilk

21 Edit Page Properties Copyright Pixelsilk

22 Add a Page Copyright Pixelsilk

23 Move a Page Copyright Pixelsilk

24 Managing Your Library Copyright Pixelsilk

25 Manage Files and Their Albums Copyright Pixelsilk

26 Copyright Pixelsilk

27 Add Images to Album Copyright Pixelsilk

28 Edit or Delete Individual Images Copyright Pixelsilk

29 Editing an Image in the Image Editor Copyright Pixelsilk

30 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

31 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

32 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

33 Sadie The Site Manager Copyright Pixelsilk

34 Roles Copyright Pixelsilk

35 Users Copyright Pixelsilk

36 Page Level Permissions Copyright Pixelsilk

37 Controls Permissions Copyright Pixelsilk

38 Site Manager Exercise 1) Add A Role 2) Add a User 3) Change Permissions Page Level 4) Change Permissions Controls Level Copyright Pixelsilk

39 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

40 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

41 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

42 10 Suggested Steps for Site Deployment Copyright Pixelsilk

43 Webster Suggested Steps Step 1: Change User Password (from default) under (Manage Users) Copyright Pixelsilk

44 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

45 Webster Suggested Steps Step 3: Create a CSS file (Manage Design) Copyright Pixelsilk

46 Webster Suggested Steps Step 3: Paste Developed CSS (Manage Design) Copyright Pixelsilk

47 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

48 Webster Suggested Steps Step 5: Create and Skin Controls for Custom Tokens (Manage Design) Copyright Pixelsilk

49 Webster Suggested Steps Step 6: Create Needed Page Types (Manage Design) Copyright Pixelsilk

50 Webster Suggested Steps Step 7: Skin Needed Page Types (Manage Design) Copyright Pixelsilk

51 Webster Suggested Steps Step 8: Add Pages of Content (Manage Design) Copyright Pixelsilk

52 Webster Suggested Steps Step 9: Add Content Copyright Pixelsilk

53 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

54 Webster s Tips and Tricks Time Saving Tips 1) For cross platform web fonts: 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

55 Theme Overview Copyright Pixelsilk

56 Theme Overview Import, Create, Edit a Site Theme (Manage Design) Copyright Pixelsilk

57 Theme Overview Import, Create, Edit a Site Theme (Manage Design) Copyright Pixelsilk

58 Tokens Copyright Pixelsilk

59 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

60 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

61 General Tokens: Exhibit 1.1 [[PrimaryDomain]] [[PathName]] agencies/cms web design/design article1 [[ParentPath]] [[PagePath]] Copyright Pixelsilk

62 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

63 Controls and their Skins Copyright Pixelsilk

64 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

65 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

66 Tokens How to Create a Token from a Control Copyright Pixelsilk

67 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

68 Skins Overview Copyright Pixelsilk

69 Skins Overview Copyright Pixelsilk

70 Skins Overview Copyright Pixelsilk

71 Skins Overview Copyright Pixelsilk

72 Types of Controls Copyright Pixelsilk

73 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

74 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

75 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

76 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

77 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

78 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

79 Controls: Webboxes Skins Definitions: Content for webboxes is contained within the Content Skin. The [[Content]] Token brings up a client editable area. Copyright Pixelsilk

80 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

81 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

82 Controls: Menu Definitions: Allows you to create a site menu and multiple levels (unlimited) of the menu. Skins: Content, Item, Active Item Copyright Pixelsilk

83 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

84 Controls: Pagination Skins: Content, Item, First Item, Last Item, Active Item Copyright Pixelsilk

85 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

86 Controls: List Feed General Options Sorting Copyright Pixelsilk

87 Controls: List Feed Filtering Skins populated (by default) Copyright Pixelsilk

88 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

89 System Files Copyright Pixelsilk

90 System Files Copyright Pixelsilk

91 System Files Copyright Pixelsilk

92 Page Types Copyright Pixelsilk

93 Adding a Page Type Copyright Pixelsilk

94 Defining Page Type Fields Copyright Pixelsilk

95 Defining Page Type Skins and Fields Copyright Pixelsilk

96 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

97 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

98 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

99 Forms Copyright Pixelsilk

100 Forms: Security For most forms, only the Add Items permission should be checked, while View Items and View are unchecked. Copyright Pixelsilk

101 Forms: Skins Copyright Pixelsilk

102 Forms: Page Default View Copyright Pixelsilk

103 Forms: Redirect After Submit Copyright Pixelsilk

104 Forms: New Items Copyright Pixelsilk

105 Forms: View Answers Copyright Pixelsilk

106 Webster Exercises 1) Page Types Modify an Existing Page Type Create a Page Type Build a Form Copyright Pixelsilk

107 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

108 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

109 Oscar The Optimizer Sitemaps 1) HTML 2) XML Search Advice 1) Search Advice Input 2) Search Advice Display Copyright Pixelsilk

110 Page Properties Copyright Pixelsilk

111 Page Names / Navigation Structure Back end (Manage Pages) Copyright Pixelsilk

112 Page Names / Navigation Structure Back end (Manage Pages) * Moving a page updates the URL in a spider friendly folder directory structure. Copyright Pixelsilk

113 Page Names / Navigation Structure Back end (Manage Pages) Copyright Pixelsilk

114 Page Names / Navigation Structure Front end Copyright Pixelsilk

115 Page Names / Navigation Structure Front end Copyright Pixelsilk

116 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

117 Netti s Story/Overview Manage Domains/DNS 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

118 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