Web publishing training pack Level 2 Extend your knowledge of the web publishing system

Transcription

1 Web publishing training pack Level 2 Extend your knowledge of the web publishing system Learning Objective: Understanding of concepts to enhance web pages look, streamline web publishing and evaluate your website. Materials from this session are available at Page 1 of 14

2 Web publishing training participants notes Level 2 Extend your knowledge of the web publishing system Learning Objective: Understanding of concepts to enhance web pages look, streamline web publishing and evaluate your website. Workshop Agenda Session 1 55 minutes 1. Welcome 2. Tables and layouts 3. Image optimisation 4. Metadata templates Welcome Participant s introduction Background and experience Expectations of the workshop Break 10 minutes Session 2 55 minutes 5. Archiving 6. Statistics and reporting 7. Help and support 8. Closing All notes and manuals in this workshop are available on the Web Publishing web site: Please tick each section as you complete it. NOTE: Please set up your proedit folder before beginning session Data Tables and Layout Tables 1.1. Using tables There are two different types of table, Data and Layout. Data tables have formatting automatically applied to them to make them easier to read. Layout tables have no automatic formatting. Although tables can be useful to present information, be aware that some devices (such as screen readers) may present information differently to how it appears on screen. Insert a table To insert a table, select the Table Style button on the RMIT web toolbar. The RMIT Web tool bar You may then select the type of table to use. Data Tables have styling applied The table style selection list Layout Table has no styling Page 2 of 14

3 Please note: If Word automatically puts a single celled table into the page, right click the cell and choose Split Cells. Then select the number of rows and columns you require. Documentation and practical activity More information: Sitemap path: Web Publishing System Manual / Creating content / Tables / Creating data and layout tables 2.3. Data tables Data tables are for presenting information which is more easily read in table format. There are four types of data tables, all with the same basic alternate white and grey shading automatically applied. This shading makes information in the table much easier to read. Note: The table will resize to fit its contents. > Data In Data tables, no text is bold (no headings). Row 1 column 1 Row 1 column 2 Row 1 column 3 Row 2 column 1 Row 2 column 2 Row 2 column 3 > Data Both Header In Data Both Header tables, the text in both the top row and left hand column is bold. Row 1 column 1 Row 1 column 2 Row 1 column 3 Row 2 column 1 Row 2 column 2 Row 2 column 3 > Data Column Header In Data Column Header tables, only the text in left hand column is bold. Row 1 column 1 Row 1 column 2 Row 1 column 3 Row 2 column 1 Row 2 column 2 Row 2 column 3 > Data Row Header In Data Row Header tables, only the text in the top row is bold. Row 1 column 1 Row 1 column 2 Row 1 column 3 Row 2 column 1 Row 2 column 2 Row 2 column 3 Exercise: Take the following data and create a table that we will be uploaded to the WPS Week 1: Tutorials: Generating Imagery in Photoshop Tasks: Read Online Notes, complete checklist Submission: Exercise 1 Week 2: Tutorials: Creating Unique Graphic elements Tasks: Read Online Notes Submission: Exercise 2 Week 3: Tutorials: Using Layer Modes Tasks: Read Online Notes Submission: Exercise 3 Plan out your table first by sketching or using Excel. Final result will vary depending on how you set up the table, but this is a good example: Documentation and practical activity More information: Sitemap path: Web Publishing System Manual / Creating content / Tables / Creating data and layout tables Page 3 of 14

4 3. Image Optimisation 3.1 Background: Media Asset Management System (MAMS) The Web Publishing System stores, catalogues and indexes media assets so they can be inserted into web pages. This promotes reuse of content, and makes content creation faster. Media assets include images, sound, video, documents, software, multimedia any file that is not a web page. The maximum size file you can upload into the media asset system is approximately 30mb. Media assets inserted in web pages can appear in two forms: embedded objects: small images (less than 200k) will be inserted directly into the page larger images and other media types will appear as links to the media asset. MAMS and metadata A media asset is more than just an image, sound or video. It contains metadata (information) about who created the asset, its intended use, retrieval information and rules on its use. This extra information is stored with the media asset when it is uploaded into the site, in a database. Advantages of this system are: RMIT only displays content that it owns, or has the right to use media assets are easier to find, as they can be searched upon work is not duplicated (an image only needs to be created once) media assets are easily accessible for creating content media assets are linked to, so if an image is changed (e.g. the University logo or a common images such as the PDF logo), then every page that contains this image will display the new image. 3.2 Using images in web pages Web publishers often add images to a page with the aim of making a website more colourful or userfriendly. Images should be used with care. They can distract the reader from the main message, or add valuable seconds to the time the page takes to download. The RMIT University Web Standards Guide provides advice about images their style, purpose, size and placement. In summary: Format: JPG for photographic images or GIF for images with flat colour and text File size: 30kb (except for maps, diagrams and video) Images placed in the body of text: Images should be no more than 350 pixels wide or high Please see Appendix 1: RMIT Image requirements and guidelines for full list. Documentation More information: More information: Image editing software Image editing software is included in the RMIT Desktop Standard Operating Environment (DSOE). Photoshop is a fantastic image optimisation program or there is a number of free programs you can use GIMP or Irfanview. Contact or request software through the IT Helpdesk, or see the DSOE web site at GIMP: Infranview: Page 4 of 14

5 3.4 Creating images for the web Resolution: Print vs Screen Print and screen resolutions are different. Web and on-screen presentations only need to show the details of an image that is necessary. The monitor displays a resolution of 72 dpi, therefore it is pointless having an image of higher quality for screen use. (The higher the resolution of an image, the longer it will take to download it for viewing on the internet.) Using GIMP to create image for the web Start Program files Viewers GIMP GIMP2 1. Make a copy of the image (backup) and open in GIMP. 2. Open the program and go to File Open 3. Use the crop tool to zoom and crop into the area of the image you need. 4. Change the dimensions and then lick on Resize when you have selected the area you want to keep. Page 5 of 14

6 5. Open the Scale Image options under Image Scale Image 6. In the Scale Image options, change the X and Y resolution from 300px, to 72px 7. Now change the Width and Height by editing the boxes. 8. Remember 350px is the MAX width and height allowed on the RMIT website, hence find the highest number and change it to 350px. (Ensure Constrain proportions (the link graphic) is locked.) When you are ready to save your image, go to File Save as Choose JPG or GIF depending on your image. You will then be required to Export the file. Select Export and then check ON the Show preview in image window option Using the quality slider, adjust the image until the quality of the image is relative to the size of the image. Select the best suited quality figure. Click OK to save your file. Page 6 of 14

7 4. Metadata Templates 4.1 Introduction Each page in the RMIT web publishing system has its own metadata. To save time filling out this information, you can use a metadata template to make the metadata for a new page or media asset identical to one you have prepared earlier. There is no limit to the number of different metadata templates you may create. You can create a metadata template by cloning the metadata of an existing page, or you can create a brand new template that is not attached to any page. You can create metadata templates for each of the different document types. It is also possible to create a Media Asset Template. Remember that it is best to fill out the metadata for pages individually. Different pages will almost always require a unique abstract and key words. However, if you have many similar pages or media assets to upload, using a metadata template may save you time and make it easier to publish your page. 4.2 Cloning the metadata of an existing page Rather than create a new metadata template, it can be easier to use the metadata of an existing page. To create a metadata template for an existing page, get the page on screen and select the Clone Metadata button. The Clone Metadata button You will then be asked to name the template. Naming a metadata template If you select Create you will see a message telling you a metadata template has been generated and giving a link back to document you made the template from. If you go to My Home Page you will see that the template name has been added to your list of templates. The metadata template list on a home page When you next upload a page you will be able to select the new metadata template. 4.3 Creating a new metadata template Page 7 of 14

8 To create a new metadata template select the Create New button below the metadata template list on your home page. You will then be asked to select which document type you want to create a metadata template for. Selecting a metadata template document type. After you select a document type you will be shown a metadata screen with the template name in the title field. Fill out the metadata for your template (a minimum of the abstract, interest area and keywords) then select the Apply Edits button to save your changes. Select the Cancel and Exit Editing button to return to your Home Page. 4.4 Editing a metadata template To edit a metadata template, select the check box next to the template you wish to edit, then select the Edit button. You will be taken to editing screen for the selected template. Make your changes to the metadata, then select the Apply Edits button to save your changes. Select the Cancel and Exit Editing button to return to your Home Page. 4.5 Using a metadata template When you upload a new page or media asset into the RMIT web publishing system you are asked to select the owning group for that file and whether you want to apply a metadata template. Selecting a metadata template Once you have chosen the metadata template you wish to apply, select OK. Page 8 of 14

9 You will then be taken to the editing screen for that file. Make sure you change the title of the file to something other than the name of the metadata template. 4.6 Deleting a metadata template To delete a metadata template, select the box next to the name of that metadata template on your home page then select the Delete button. You will then be shown a screen which will give you the option to either delete the metadata template permanently or cancel, which will take you back to your editing home page. Activity Using the XML or PDF documents in the Training materials Zip folder, create a Metadata template for a monthly newsletter. Documentation More information: Sitemap path: Web Publishing System Manual / Publishing content / Metadata Templates 5. Archiving 5.1 Why archive Saving web pages for university archives It is important that content on the web reflects what is currently relevant. The web publishing system that we use at RMIT is not a document management system, and is not the appropriate place for storing out of date information or documents. Everything published on the web should be archived by the area that publishes it as a matter of course, the same as they would archive any other work. Web publishers are encouraged to archive and delete all content that is not current, using the following guidelines based on advice from the University Archivist. 5.2 Preparing archived pages Instructions for making a suitable PDF file for archiving individual web pages: Get Adobe Acrobat Pro 9.0 installed by filling in the software compliance form (DOC 54.5kb) This should create a Convert icon, top right of Internet Explorer browser. Click on Convert icon and choose Preferences. Ensure page size is A4, and choose Landscape setting. Click on Convert button, and choose Convert Web page to PDF. Resulting file should be landscape format, include masthead, logo and should include working hyperlinks. Enter file in TRIM record management system. Archiving is best done methodically when sites are periodically reviewed. See Maintaining your website - Rules for dating for help in deciding when to review web sites. Outside of the review process, it is not recommended to archive pages when minor details, such as telephone numbers, change. However, it is essential when there is a substantial change to the meaning or import of the content. Page 9 of 14

10 5.3 Archiving process The archiving process on what needs to be retained as archived web pages is currently under review. See Handout for Records appraisal guidelines provided by the University archivist. As this process develops, please follow the current guidelines for archiving web pages: 1. Follow the instructions below in 6.2 to Create a PDF version 2. Contact University archives, the PDF to: a. Sandy Gillam - sandy.gillam@rmit.edu.au (and please CC Jason McGlone - jason.mcglone@rmit.edu.au ) b. Your web page will be appraised and you will be advised if the page is required for ongoing retention (and as to what else needs to occur). c. University archives can then assist you to enter the file into the TRIM record management system. Documentation More information: 6. Statistics and reporting 6.1 Gizknow The metrics system Gizknow contains statistics on hits to the RMIT web site. This includes statistics for entire publishing groups or individual pages. Reports can be viewed online or downloaded. You can also download complete log files. It stores vast amounts of information about how the RMIT web site is used: how many visits your site receives, when, and where these visits come from. Before you start: Check you have Internet Explorer 5.5 or above. Gizknow does not work on Firefox, Safari, etc. If you ve not used Gizknow on that computer before, download the Adobe SVG Viewer. This is a browser plug-in to display Gizknow s graphs. 6.2 Accessing Gizknow After login to the website, a link to Gizknow Stats is available in the footer of every RMIT web page. Select that link to view the stats for the current month for that page. Be patient, it may take a few moments for the graph to be generated. Search for more detailed reports The main navigation menu at the top of the Gizknow screen includes a link to Search. Use this option for more detailed reports. Date Select the time period: year, month and day/s. Due to increased site traffic and the subsequent need for data storage, Gizknow Stats only remain online for one year before they are archived offline. Group number or Page ID There are three options for what websites or pages to include in your search: a whole web publishing group (self-contained website) a website including any child groups (websites within a parent website) just one particular page or media asset Page 10 of 14

11 How to find the Group Number Web publishers will be familiar with group numbers. Each web publishing group has a number. Group members can see the group number in My Home Page. Group numbers can also be ascertained by using OGRE to find out what publishing group a document belongs to. How to find the Page ID The Page ID is the Document ID or SIMID, a unique alphanumeric identifier for every page and media asset, automatically assigned when that item was first uploaded to the Web Publishing System. Sometimes the Page ID can be seen in the web browser s Address bar. If the web publisher has not masked the URL with something a more user friendly alternate URL, visible in the footer of the page. For example, this page URL is The SIMID is q89rrdz7f7bk1 On every page, a link in the page footer Information about this document and its content will take reveal the metadata and the Document ID. Activity 1. Navigate to the Staff page: RMIT Homepage Staff 2. Using OGRE [ and the document s metadata, locate the PageID and Group/Owner for this document. 3. Click on the Gizknow stats link on the bottom of the page 4. When Gizknow page loads, click on Search and perform some searches on the PageID and the Group/Owner. 6.2 Reporting Report Type Finally, select one or more items to include in the report. External Search Queries, Hits By Country, Hits By Time, Internal Search Queries, Top 10 Entry, Pages, Top 20 Pages, Top 20 Referrers Using the report The report will provide a summary of every aspect you asked for. At each section of the report, a link Download lets you download the results in CSV format, for use in a spreadsheet. Logs for complete web stats The main navigation menu at the top of the Gizknow screen includes a link to Logs. Use this option if you want complete log files. The search options for Logs are similar to those described above: specify the Group Number or Page ID. Logs can be downloaded and processed in specialised third-party software. See Process Gizknow stats with Funnel Web Analyzer here: Documentation More information: Sitemap path: Web Publishing System Manual / Statistics and Reporting / Gizknow Page 11 of 14

12 6. Help & Support Web publishing help site Includes manuals, FAQs, publishing standards a very resourceful website that should be your first stop for any questions or problems. Web Interest Network The Web Interest Network (WIN) is an initiative to provide a mechanism for communication between web publishers, managers and others interested in web development at RMIT. You will be automatically subscribed to this when you complete your training. If you have any suggestions or comments, send an to: web.network@rmit.edu.au Helpdesk All questions and problems need to be send to the ITS helpdesk [ via at helpdesk@rmit.edu.au or phone and they will assigned a tracking number and then forwarded to the person best able to help. For questions and issues, please consult the frequently asked questions (FAQ) section on the web publishing help site that provides a comprehensive resource for web publishers Closing Question and issues time. Want to improve your web publishing skills further? You can now sign up for a number of Level 3 training sessions, including: Level 3 Applying HTML styles Level 3 Dynamic queries and RSS Level 3 Forms See all web publishing training sessions at the professional development site: If you have any enquiries, please contact its.training@rmit.edu.au Page 12 of 14

13 Appendix 1: Creating images for the web using Photoshop Prepare images using Photoshop Make a copy of the image (backup) and open in Photoshop. Open the program and go to File Open Use the crop tool to zoom and crop into the area of the image you need (Fig. 1) Open the Image size options under Image Image Size (Fig. 2) In the Image Size options, change the resolution from 300px, to 72px (this will reduce the number of Width and Height pixels, Fig. 3) Now change the Width and Height by editing the boxes. Remember 350px is the MAX width and height allowed on the RMIT website, hence find the highest number and change it to 350px. (Ensure Constrain proportions is checked, see below.) Change the highest number i.e. Height to 350px Fig 2: Image size before changes Fig. 3: Images size after changes Save for web in Photoshop When you are happy with your image and have changed the resolution, width and height, you will now need to save the image for the web. Depending on the type of image, the two file types to use are JPG (for photographs) and GIF (graphics, animations and logos). To find the ideal settings for your image, we will use the save for web function in Photoshop to determine the best size/quality mix. Go to File Save for Web and Devices Click on the 4-up tab on top of the screen to view 4 different settings of your image. Click on each image and choose a different format and setting. In the example below, we have a photograph, so JPEG format will be used. We can click on each box and change the settings to JPEG High, next box JPEG Medium and the next box JPEG low to see how our image will look in each setting. Take note of the information panel below each image which displays the image size, quality and time taken to download the image. You can right click on these settings to change. Also use the information panel on the right hand size to either chose a preset, or manually adjust the image, for example by increasing/decreasing the quality slider. When you have chosen the ideal settings, click on Save. Page 13 of 14

14 Typical example (below) of format and dimensions of an image. Format: Image 1: JPEG, 50% quality Image 2: GIF, 32 colour, diffusion dither Dimensions: Image 1: 180 pixels wide, max 160 pixels high Image 2: 180 pixels wide, 38/55 pixels high Font (Image 2): Arial regular (12 point at 72dpi) Page 14 of 14