idsa.org 3.0 Content Creation for Chapters and Sections January 2012 INDUSTRIAL DESIGNERS SOCIETY OF AMERICA

Transcription

1 idsa.org 3.0 Content Creation for Chapters and Sections January

2 This is the 3 rd iteration of the website since Idsa.org is built on the Drupal Content Management System (CMS). Drupal is the 3 rd most popular CMS with usage on about 7 million websites. The White House, CNN, Cartoon Network, Rackspace, Sony Music, McDonald s, Yahoo, Popular Science, Fast Company and MTV UK are a few of the sites utilizing Drupal. Drupal was chosen for: 1. Flexibility. 2. Social Media Integration. 3. Wide availability of modules for increasing and improving functionality. 4. Wide support base. 5. Cost effectiveness. 2

3 SITE OVERVIEW RED AREAS: The top navigation and right-hand column will appear on every page. The right-hand column has dynamic elements and is slightly different on some pages. Example: The NEWS block does not appear on the News page. GREEN AREA: This is the content area of a page. We will sometimes refer to this as a panel. This area is customizable by changing its layout. 3

4 SITE OVERVIEW LAYOUTS: There are currently 48 layouts and more are in the works. The layout determines how many blocks are on a page, the width of each block and the how the blocks are arranged. 4

5 SITE OVERVIEW BLOCKS: A block can be a full panel wide, half panel wide, 1/3 panel wide or 2/3 panel wide. The height of each block is fluid and will stretch to accommodate its content. The way content is displayed within a block is controlled by its view. A block usually has a header graphic to identify the contents of a block, but it s not mandatory. 5

6 Idsa.org 3.0: Content Creation for Chapters and Sections SITE OVERVIEW VIEWS: Views control how content is to be represented within a block. Views almost always display one or more images and each image is linked to and represents an individual piece of content ( article ). The image can be accompanied by all or part of the article s title and sometimes a portion of the article s text ( teaser ). There are currently 175 views. Here are some examples: 1. Featured article: A 450px by 240px image, article title and teaser text. 2. Wall: A full panel wide grid of images. They can vary from 3 to 7 across. 3. Banner: A full panel wide image. 4. Mini wall: A wall in a smaller block. 5. Content list: A square image and article title. Can include teaser text. 6. Blog: A 311px by 166px image, article title and teaser text. 6

7 SITE OVERVIEW 1 2 VIEWS: Views can display the same articles in different ways on the same page or multiple mages. Multiple views can also be used within the same block. Here is the same article shown in a: 1. Featured article. 2. Blog. 3. Chapter News. 3 7

8 SITE OVERVIEW ARTICLES: The article (or story) is the primary element of the website. There are currently about 7,000 articles. An article is displayed in a single block and must have a title and an image. The title will always appear at the top of the panel and the primary image right below it. The Body of the article can contain text with simple formatting, links, images, videos and HTML. 8

9 SITE OVERVIEW ARTICLES: At the bottom of each article is an option to share the article via your social media applications. The most common are listed when you click on the SHARE/SAVE bar, but there are a total of 119 options so far. If you are logged in you will also see the option to comment on the article. If you are logged in with member credentials your comment will post immediately. All other comments are screened. Every word in each article of 3 or more characters is indexed. Type in one or more words in the Search bar and hit enter (or click the red arrow) and you will see a list of every article which includes ALL of the words you typed in. 9

10 SITE OVERVIEW TAGS: Tags are the magic that makes the website work. Each block is assigned a tag to restrict which articles can be displayed. 1 If an article is not tagged correctly it will not display within the site. Here are 3 blocks and their corresponding tags: 2 1. NYC featured article. 2. NYC blog. 3. Content list

11 Idsa.org 3.0: Content Creation for Chapters and Sections CHAPTERS AND SECTIONS Each of the Chapter and Section pages was built with the same basic blocks and layout but as you browse them you will notice a few variations. The basic blocks: 1. Title. 2. Featured article. 3. Leadership. 4. Events. 5. Design In 6. About. 7. IDSA ad 8. Navigation. 9. News. 8 11

12 The first step to creating articles is to log in using the new Chapter/Section logins. You can log in from any page of the website. Once you log in, the LOG IN block becomes an ACCOUNT block and looks like this: Click the Create content link to get started. 12

13 You will then select Story with Image from the next page. You will never need to click on Image. 98% of all articles on idsa.org are Story with Image. The only exceptions are job postings. These articles still have an image which displays on the Succeed page, but the image does not appear within the article itself. 13

14 The form you will need to fill out is in 3 parts Content. 2. Tags. 3. Attachments. Before you start, you should have the following items prepared: The main image for the article (appropriately sized). 2. A title for the article. 3. The text for the body of the article (without formatting). 4. Images for the body of the article (appropriately sized). Optional 5. Code for embedded videos. Optional 6. Attachments. Optional 14

15 CONTENT: There are 4 components of the content part of the form. 1. Main Image. 2. Title. 3. Sort Text. (NEW) 4. Body. Main Image and Title are required. 15

16 CONTENT: Main Image: Requirements: 1. Maximum file size is 1 MB. This should not be an issue if you follow the recommendations. 2. Allowed file types: PNG, GIF, JPG. 3. Images larger than 680px by 380px will be resized (scaled) to fit within those limits. Recommendations: 1. The resolution of the image should be no more than 100 dpi. We strongly suggest 72 dpi. 2. For leadership and bio pictures the size should be 288px by 288px. 3. All other main images should be 450px by 240px, the size of the image in the featured article view. 16

17 CONTENT: Main Image: Recommendations: All images that refer directly to a Story with Image will be resized and cropped automatically by Drupal. All views with rectangular images are based on the proportions of 450 by 240. All views with square images are cropped from the middle and scaled. Examples: 17

18 CONTENT: Main Image: Click BROWSE and select the image from your computer then click UPLOAD. CONTENT: Title: Type in the title of the article. NOTE: The title of the article is used to create the URL for the article page. If the exact title is already being used a slightly different URL will be created. NOTE: If you ever need to change the title of an article and you don t want the URL to change, please contact IDSA National staff. 18

19 CONTENT: Sort Text: For events, enter the event date in the YYYYMMDD format. For leaders, enter a 3-digit number which corresponds with the leader s position. Use the following as a guide: Chair Vice Chair Co-Chair Secretary Treasurer Secretary/Treasurer Communications Chair Creative Director Social Coordinator Student Liaison Corporate Relations Outreach Liaison Innovation Liaison For positions with multiple leaders, Co-Chairs for example, additional leaders would use a number incremented by st Co-Chair nd Co-Chair st Student Liaison nd Student Liaison rd Student Liaison 19

20 CONTENT: Body: Type in the main text of the article or copy and paste from an unformatted document. The most popular and word processing programs have embedded code that can disrupt CMS pages. Copying the desired text into a simple text editor like Notepad or Wordpad will strip away all formatting and the unwanted coding. Formatting can be added by using the toolbar. Do not uncheck Show summary in full view 20

21 CONTENT: Body: Toolbar: The first 9 tools on the toolbar are activated in the same way. Highlight the text to be formatted then click the formatting button. 1. Bold use for emphasis in headings or key words. 2. Italics use for publication/book titles and quotations. 3. Underscore use for emphasis (sparingly). 4. Strikethrough use to show deletions or changes without removing original text. 21

22 CONTENT: Body: Toolbar: The default alignment of text is Full. 5. Left align use sparingly. 6. Right align use sparingly. 7. Full align use to revert back to Full. 8. Bulleted list highlight multiple lines separated by hard returns (enter). 9. Link enter the URL in the Link URL box. If you forgot the you will be asked if you want to add it. If you enter an address you will be asked if you want to add the mailto: code which makes an address open an program when clicked. If the URL is to an external site click the Target drop down menu and select open link in new window. Click Insert to finish. 22

23 CONTENT: Body: Toolbar: 10. Blockquote do not use. 11. HTML this will open a window which displays the HTML that is currently behind the scenes. This can be used for embedding code for videos. 12. Erase formatting do not use. 13. Paste from Word do not use. 14. Insert or update embedded image more details on next page. 15. Separate teaser and body this will affect how much of the body will appear as a teaser. Place your curser where you want the teaser to end then click this button. 23

24 CONTENT: Body: Insert or update embedded image: Before embedding images into an article it is recommended that you do so only after the article has been saved. It is easier to start over than to try and fix an image that has not been embedded correctly. You should also be sure that your images are appropriately sized before you start. Images can be as large as 700px by 700px but you ll find that images ranging from 150px to 250px for square images or 150px-250px by 200px-400px will work best. Be sure to place your cursor where you want the image to be placed then click the Insert or update embedded image button. 24

25 1 CONTENT: Body: Insert or update embedded image: The Add Image will pop-up showing the latest embedded images that have been uploaded. If this window does not pop-up you may not be using a new Chapter/Section login or the pop-up may have been blocked by your browser. At this point you can use a previously uploaded image or upload a new one. UPLOAD: 1. Click the Upload button. 2. Enter a Title and an Image tag for the image. See note on next page. 3. Browse for the image on your computer. 4. Save. 25

26 CONTENT: Body: Insert or update embedded image: Next this pop-up window transforms to determine how you want the image to display. The Title entered on the previous screen is prepopulated on this screen and appears as a caption under the sample image. Since the Title and Image Tag are required and need to be unique but serve no purpose other than backend management it is recommended that they be the same and contain descriptive words. Removing spaces will make these unique. Examples: catalystlogotest nydesignevent thomasjohnson 26

27 CONTENT: Body: Insert or update embedded image: If you want a caption, change the Title to the text you want to display. Although this is an option it is not recommended as there is no easy way to modify it after it has been placed. 1. Remove the Title. 2. Leave Description blank. 3. In the Size dropdown select Original. 4. In the Alignment dropdown select none. See note on next page. 5. If the image is to be a link select Go to URL in the Link dropdown. You will then be prompted for a URL. Optional 6. Leave Insert mode as HTML Code. 7. Click Insert. 27

28 CONTENT: Body: Insert or update embedded image: The Alignment options are based on HTML rules and may not be clear. This is what each does: 1. Left Image is aligned to the left of the text area AND the text is wrapped around it. Not recommended. 2. Right Image is aligned to the right of the text area AND the text is wrapped around it. Not recommended. 3. None Image is aligned to the left of the text area. Recommended. 4. Center - Image is aligned to the center of the text area. Recommended. If you are having difficulties with embedded images please contact IDSA National staff. 28

29 CONTENT: Tags: The tags are managed in the area of the form called vocabularies. This is how you use them: 1. Area For Sections this will always be IDEA. For Chapters select your Chapter from the list. 2. Visibility This will always be Public. 3. Icons Do not use. 4. Tags Use the tags you have been given that correspond with where you want this article to appear. Do not create new tags and do not enter words which are not tags. 5. Reserved Tags Chapters leave this blank. Sections can add the tag for their section. 29

30 CONTENT: Attachments: Attachments are optional. But if you have a printed or other materials to share this is where you can make them available. You can have up to 3 attachments per article. The following file extensions can be attached: doc pdf docxtxt aieps gif jpg xlsxlsxwmvmpg mpeg mp3 mp4 movavi For printed materials PDF is recommended. If you have a MS document or spreadsheet consider saving them using the 2003 options so they will be accessible to more people. For audio or video files please be aware of the 64 MB file size limit for uploads. 30

31 CONTENT: Attachments: Click BROWSE and select the file from your computer then click UPLOAD. When finished with all 3 parts of the form click the Save button. If you make a mistake do not create another article. You can save time and energy by editing the article you created. If you cannot find the article, use the SEARCH option with words you know are in the article. If an article was created using the login you are using you will see the option to edit it at the top of the article. 31

32 NEXT STEPS Create new articles. Let us know if you have any questions. For general help or questions with content creation please contact Jennifer Sadrak at or call x112. For other questions or problems please contact Kurt Howard at or call x103. Thank you and we look forward to seeing what you do! 32