Welcome to the world of Blogging! ASSAF blog training Day 2: 20 August
HTML Bootcamp
What is HTML? <ul><li>HTML  or  HyperText Markup Language  is a structured way of telling web browsers how a web page shou...
WYSIWIG vs Manual coding <ul><li>WYSIWYG  is an acronym for  W hat  Y ou  S ee  I s  W hat  Y ou  G et </li></ul><ul><li>i...
Why HTML here, and now? <ul><li>Usually HTML is taught to web designers… But that’s not what you signed up for…  </li></ul...
First things to understand…  <ul><li>You’ll be using  tags , which are ‘ instructions’ surrounded by a < > </li></ul><ul><...
Basic formatting
Basic formatting <ul><li>Paragraph: <p> </p> </li></ul><ul><li>Line break: <br></br> </li></ul><ul><li>Browsers ignore sin...
A note on nesting HTML Tags should be nested. What you open you must close, and when you do, close them in reverse order o...
Links <ul><li><a  href=&quot;http://www.assaf-interactive.org.za&quot; > The ASSAf Blog </a>  displays as  The ASSAf Blog ...
Email links <ul><li><a   href=&quot;mailto:daniela@africancommons.org&quot; > Email Me </a> </li></ul><ul><li>displays as ...
Unordered Lists <ul><li><ul> </li></ul><ul><li><li>Item 1</li>  </li></ul><ul><li><li>Item 2</li> </li></ul><ul><li><li>It...
Ordered Lists <ul><li><ol> </li></ul><ul><li><li>Item 1</li>  </li></ul><ul><li><li>Item 2</li> </li></ul><ul><li><li>Item...
Tables
Tables Declares the table. Attribute says that there should be no border Declares the start of a new row Closes the row Cl...
Images <ul><li>The image tag is <img>  </li></ul><ul><li>Unlike other HTML tags, a closing tag is NOT necessary for an ima...
Video embeds <ul><li>< object width=&quot;384&quot; height=&quot;313&quot;> <param name=&quot;movie&quot; value=&quot;http...
Problems on Wordpress and how to solve them…  The infamous <div> tag The <div> tag is a tag that defines logical divisions...
In short… If you have a problem with  HTML formatting: <ul><li>Always check that your tags have been closed properly.  </l...
HTML Practical (40 minutes) <ul><li>Use the Sundial document that I’ve sent you on email.  </li></ul><ul><li>Copy and past...
MULTIMEDIA Why use it? Where to find it?
Why Multimedia? <ul><li>Multimedia adds a little extra something to a blog post - gives a little bit of depth/insight/humo...
Eyetrack III <ul><li>Can ‘look through the eyes’ of the test subjects to see how they consume media.  </li></ul><ul><li>Fi...
Eyetrack III <ul><li>Findings on  multimedia  from Eyetrack III (2004):  </li></ul><ul><ul><li>There is a marginally signi...
Eyetrack III <ul><li>Findings on  multimedia  from Eyetrack III (2004):  </li></ul><ul><ul><li>There is a marginally signi...
Okay, I’m convinced Now where do I find it?
Flickr.com Vast amounts of photos available under Creative Commons licenses. Excellent search. Great usability. Active com...
WikiMedia Commons Photos and other media that are used to provide Wikipedia entries with MM content.  All free and open, m...
Zoopy.com Local version, local content. Fast speeds. Mobile version, Pictures, audio and videos
Youtube.com Huge global audience. 10 million uploads a day – so lots and lots of content!  But  ALL are copyrighted. No do...
Blip.tv The place for webcasting of shows. Creative Commons is supported, so  many videos can be used on your blog.
Dotsub A vast and active community of translators working to provide video subtitled in an array of languages.
Can I use this in my blog? Debate around digital resources
Context <ul><li>The Commons and the Public Domain “rich incubator of innovation and value” </li></ul><ul><li>Market misund...
Wanna work together?
Creative Commons in the digital economy <ul><li>Creative Commons defines the  spectrum of possibilities  between full copy...
Commons resources http://search.creativecommons.org   will help you find CC-licensed photos, music, text, books, education...
Uploading images to your blog… A demo…
What you’ll learn <ul><li>Show how to find photo resources </li></ul><ul><li>Show how to resize photos  </li></ul><ul><li>...
PRACTICAL  (20 minutes) <ul><li>Using the steps you’ve just learned,  find a Creative Commons licensed photograph  that wo...
Uploading videos to your blog… A demo…
What you’ll learn <ul><li>Show how to find video resources </li></ul><ul><li>Show how to embed into a blog post  </li></ul...
PRACTICAL  (20 minutes) <ul><li>Using the steps you’ve just learned,  find a video  that would complement one of your prev...
If you build it they will come … You have the blog, now what?
Blog marketing strategies Why do you need to market your blog? <ul><li>to  drive  traffic to your blog - with people & tec...
Drive  traffic by  involving  people … <ul><li>Find and  involve key influencers  (knowledgeable and well connected indivi...
Drive  traffic by  maximising  technology … <ul><li>Submit your blog to  blog directories , eg: Afrigator </li></ul><ul><l...
Keep  people  reading  … <ul><li>Be the first one who publishes a  newsworthy story  within your area of expertise </li></...
Measuring  interest in your blog <ul><li>Google analytics  is an accessible measuring tool for blog traffic </li></ul><ul>...
Blog case study http://www.nominationwatch.org
Mailing lists and announcements <ul><li>Notify your stakeholders about recent blog posts by sending announcements to your ...
Create connections <ul><li>A step beyond a blogroll link is to  import feeds from other bloggers  and visa-versa. This is ...
Offline <ul><li>Tell people about your blog: at conferences, meetings or even braai’s! You never know who you’ll meet and ...
Upcoming SlideShare
Loading in …5
×

How to use a blog for publishing scientific research: A training guide part 2

1,428 views

Published on

The African Commons Project ran a two-day training workshop with the Academy of Science of South Africa in August 2009. We set up a basic Wordpress blog for them, and then led through intensive training on how to use the platform and the basics of blogging: from content to marketing.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,428
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • language, which means that it cannot process (or change its content based on) user input.
  • Why HTML? Think of Wordpress’ WYSIWYG as kind-of like delivering a speech through a translator: Although you might know exactly what you want to communicate, you can&apos;t always control the end result… why? Because your thoughts and ideas have been translated by someone else (in this case, Dreamweaver)! In the ideal situation we would translate our thoughts ourselves... but to do so, we need to learn the language (in our case, HTML and CSS)!
  • This comes into play when you have more than one tag.
  • OBJECT tag is used for IE on Windows, while EMBED tag is for Netscape Navigator on Windows and Macintosh and IE on Macintosh. IE on Windows play Flash with ActiveX component while other web browsers play Flash with Netscape plug-in technique.
  • In Eyetrack III, we observed 46 people for one hour as their eyes followed mock news websites and real multimedia content. Eyetrack 3 focused on website only. The more recent eyetrack looked at the intersection of print and online. (A heatmap is an aggregate image showing overall eye activity on a webpage. Red-orange areas indicate the most eye activity, blue-black the least.) Smaller photos just don&apos;t attract viewers -- they are often ignored entirely. However, there does seem to be a point of diminishing returns as photo size increases. Tighter cropped images of faces work well.
  • MM = udio-narrated slide shows, video, interactive animated info-graphics ... 2 tests: Multimedia Recall &amp; Comprehension and Observations on Multimedia News Features
  • Channels
  • You can follow the cick throughs – the newsletters work!
  • Put the url of your blog in your email signature, newsletter, journal publications, marketing material…
  • How to use a blog for publishing scientific research: A training guide part 2

    1. 1. Welcome to the world of Blogging! ASSAF blog training Day 2: 20 August
    2. 2. HTML Bootcamp
    3. 3. What is HTML? <ul><li>HTML or HyperText Markup Language is a structured way of telling web browsers how a web page should be displayed. </li></ul><ul><li>A static language (can’t do anything interactive) </li></ul><ul><li>Markup is about creating MEANING in a document or text, without directly showing that code in the final result. </li></ul><ul><li>You’ve probably all done this before: Wordperfect </li></ul>
    4. 4. WYSIWIG vs Manual coding <ul><li>WYSIWYG is an acronym for W hat Y ou S ee I s W hat Y ou G et </li></ul><ul><li>i.e. content displayed during editing appears very similar to the final output. </li></ul><ul><li>Look at your blog as an example… </li></ul>
    5. 5. Why HTML here, and now? <ul><li>Usually HTML is taught to web designers… But that’s not what you signed up for… </li></ul><ul><li>The answer? </li></ul><ul><li>Wordpress sometimes creates issues with your blog layout, creating much pain and gnashing of teeth… Knowing how to fix the code directly (from the backend) using HTML will allow you to manage and use your blog more effectively and more easily, not to mention less gnashing… </li></ul><ul><li>But remember: </li></ul><ul><li>WYSIMOLWYG – W hat Y ou S ee I s M ore O r L ess W hat Y ou G et – i.e. recognise that most WYSIWYG implementations are imperfect. </li></ul>
    6. 6. First things to understand… <ul><li>You’ll be using tags , which are ‘ instructions’ surrounded by a < > </li></ul><ul><li>You ALWAYS need to open and CLOSE the tag. e.g. <b> word </b> </li></ul><ul><li>Sometimes (in the cases of links, images and tables) you can add attributes to the tags. We use these attributes to display and change things about the tag and the way it behaves in people's browsers. For example, you can specify the height and width of an image as follows: </li></ul><ul><li><img src=&quot;image.gif&quot; height=&quot;100” width =“300”/> </li></ul><ul><li>Note how the attributes are found WITHIN the tag i.e. within the < > </li></ul><ul><li>Each attribute is assigned a value , which is specified by the =“ “ </li></ul>
    7. 7. Basic formatting
    8. 8. Basic formatting <ul><li>Paragraph: <p> </p> </li></ul><ul><li>Line break: <br></br> </li></ul><ul><li>Browsers ignore single line breaks, so the following: </li></ul><ul><li>This is HTML would display as: </li></ul><ul><li>This is HTML </li></ul><ul><li>Line (horizontal rule) : <hr /> </li></ul>
    9. 9. A note on nesting HTML Tags should be nested. What you open you must close, and when you do, close them in reverse order of their opening. When you have text in bold and in italics , the &quot;<b> </b>&quot; and the &quot;<i> </i>&quot; should go around each other like Russian dolls (babushka). Correct: <b><i> Like this </i></b> Like this Incorrect: <b></i> This is wrong </b></i> <i></b> This is also wrong </i></b> Another correct way: <i><b> fine </b></i> is fine .
    10. 10. Links <ul><li><a href=&quot;http://www.assaf-interactive.org.za&quot; > The ASSAf Blog </a> displays as The ASSAf Blog </li></ul><ul><li>A link is denoted by the <a> tag and requires a </a> closing tag. </li></ul><ul><li>The href=“http://www.assaf-interactive.org.za” tells the link where to go when it is clicked on. (note this is an attribute of the tag) </li></ul><ul><li>Don’t forget the “ on either end </li></ul><ul><li>The ASSAf Blog becomes the hyperlink </li></ul>
    11. 11. Email links <ul><li><a href=&quot;mailto:daniela@africancommons.org&quot; > Email Me </a> </li></ul><ul><li>displays as Email Me </li></ul><ul><li>This is a type of link hence the <a> tag with a </a> closing tag . </li></ul><ul><li>The href=“mailto: daniela@africancommons.org” tells the link where to go when it is clicked on i.e to open as a mail link. </li></ul><ul><li>Email Me becomes the hyperlinked mail link </li></ul>
    12. 12. Unordered Lists <ul><li><ul> </li></ul><ul><li><li>Item 1</li> </li></ul><ul><li><li>Item 2</li> </li></ul><ul><li><li>Item 3</li> </li></ul><ul><li></ul> </li></ul><ul><li>The output of the above code is: </li></ul><ul><li>Item 1 </li></ul><ul><li>Item 2 </li></ul><ul><li>Item 3 </li></ul><ul><li>So, < u l> </ u l> indicates the u nordered list, <li> </li> is the bullet </li></ul>
    13. 13. Ordered Lists <ul><li><ol> </li></ul><ul><li><li>Item 1</li> </li></ul><ul><li><li>Item 2</li> </li></ul><ul><li><li>Item 3</li> </li></ul><ul><li></ol> </li></ul><ul><li>The output of the above code is: </li></ul><ul><li>Item 1 </li></ul><ul><li>Item 2 </li></ul><ul><li>Item 3 </li></ul><ul><li>So, < o l> </ o l> indicates the o rdered list, <li> </li> is the bullet </li></ul>
    14. 14. Tables
    15. 15. Tables Declares the table. Attribute says that there should be no border Declares the start of a new row Closes the row Closes/ends the table Declares a cell Closes a cell
    16. 16. Images <ul><li>The image tag is <img> </li></ul><ul><li>Unlike other HTML tags, a closing tag is NOT necessary for an image. </li></ul><ul><li>The source attribute tells the browser where to find the image to be displayed: </li></ul><ul><li><img src=&quot;http://www.assaf-interactive.org.za/wp-content/uploads/2009/08/SAJS-Vol.105-No.5-6-web-210x300.jpg> </li></ul><ul><li>The width and height attributes tells the browser the size at which the image should be displayed: </li></ul><ul><li><img src=“http://www.assaf-interactive.org.za/wp-content/uploads/2009/08/SAJS-Vol.105-No.5-6-web-210x300.jpg” width=&quot;210&quot; height=&quot;300”> </li></ul>
    17. 17. Video embeds <ul><li>< object width=&quot;384&quot; height=&quot;313&quot;> <param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/opVillvexs8&hl=en&fs=1&quot;></param><param name=&quot;allowFullScreen&quot; value=&quot;true&quot;></param><param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;></param> <embed src=&quot;http://www.youtube.com/v/opVillvexs8&hl=en&fs=1&quot; type=&quot;application/x-shockwave-flash&quot; width=&quot;384&quot; height=&quot;313&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot;> </embed></object> </li></ul><ul><li>The <object> and <embed> tags work together </li></ul><ul><li>The height and width are defined twice in the code… </li></ul>
    18. 18. Problems on Wordpress and how to solve them… The infamous <div> tag The <div> tag is a tag that defines logical divisions within the content of a page. What this means is that a <div> tag defines sections of a web page to make it easier to manage, style, and manipulate. You can use the <div> tag when you want to center a block of content or position a content block on the page. The problem: Wordpress sometimes inadvertently inserts <div> tags on your page/post – creating havoc with your formatting. The solution: Go into the html section and remove/edit out the <div> tags. (Note a similar thing happens with the <strong> tag quite often…)
    19. 19. In short… If you have a problem with HTML formatting: <ul><li>Always check that your tags have been closed properly. </li></ul><ul><li>Always check that your tags have been nested properly </li></ul><ul><li>Always check that Wordpress hasn’t inserted any unnecessary extra tags, in which case you should go remove them… </li></ul>
    20. 20. HTML Practical (40 minutes) <ul><li>Use the Sundial document that I’ve sent you on email. </li></ul><ul><li>Copy and paste into a blog post </li></ul><ul><li>USING HTML : </li></ul><ul><li>Add a heading, a bold, italics </li></ul><ul><li>Add the follow urls using HTML: http://en.wikipedia.org/wiki/Sundials and http://en.wikipedia.org/wiki/Giuseppe_Biancani </li></ul><ul><li>Remember DO NOT hit publish </li></ul>
    21. 21. MULTIMEDIA Why use it? Where to find it?
    22. 22. Why Multimedia? <ul><li>Multimedia adds a little extra something to a blog post - gives a little bit of depth/insight/humour/a different take on what you’re writing on… </li></ul><ul><li>Helps create a relationship with the audience: Gives you something you can compare notes on or enjoy ‘together’. </li></ul><ul><li>And it’s proven to be effective… </li></ul>
    23. 23. Eyetrack III <ul><li>Can ‘look through the eyes’ of the test subjects to see how they consume media. </li></ul><ul><li>Findings on pictures from Eyetrack III (2004): </li></ul><ul><ul><li>Larger photo size increases the percentage of users seeing photos and the time they spend looking at them </li></ul></ul><ul><ul><li>The ideal photo size is larger than 210 x 230 pixels </li></ul></ul><ul><ul><li>Faces in photos draw users' eyes. Multiple faces in photos attract more viewers . </li></ul></ul>
    24. 24. Eyetrack III <ul><li>Findings on multimedia from Eyetrack III (2004): </li></ul><ul><ul><li>There is a marginally significant percentage of improved recall from text as opposed to multimedia </li></ul></ul><ul><ul><li>This doesn’t mean you should give up on MM: it did show that MM worked well for understanding processes and procedures, or for new terms and concepts. </li></ul></ul><ul><ul><li>Charts and graphs appear to have eye-pulling power. They drew more eye fixations than most photos tested elsewhere in Eyetrack III. </li></ul></ul>
    25. 25. Eyetrack III <ul><li>Findings on multimedia from Eyetrack III (2004): </li></ul><ul><ul><li>There is a marginally significant percentage of improved recall from text as opposed to multimedia </li></ul></ul><ul><ul><li>This doesn’t mean you should give up on MM: it did show that MM worked well for understanding processes and procedures, or for new terms and concepts. </li></ul></ul><ul><ul><li>Charts and graphs appear to have eye-pulling power. They drew more eye fixations than most photos tested elsewhere in Eyetrack III. </li></ul></ul>
    26. 26. Okay, I’m convinced Now where do I find it?
    27. 27. Flickr.com Vast amounts of photos available under Creative Commons licenses. Excellent search. Great usability. Active community. Photo and recently launched video.
    28. 28. WikiMedia Commons Photos and other media that are used to provide Wikipedia entries with MM content. All free and open, many in the public domain.
    29. 29. Zoopy.com Local version, local content. Fast speeds. Mobile version, Pictures, audio and videos
    30. 30. Youtube.com Huge global audience. 10 million uploads a day – so lots and lots of content! But ALL are copyrighted. No downloads allowed.
    31. 31. Blip.tv The place for webcasting of shows. Creative Commons is supported, so many videos can be used on your blog.
    32. 32. Dotsub A vast and active community of translators working to provide video subtitled in an array of languages.
    33. 33. Can I use this in my blog? Debate around digital resources
    34. 34. Context <ul><li>The Commons and the Public Domain “rich incubator of innovation and value” </li></ul><ul><li>Market misunderstands this value which does not generate private, monetized wealth </li></ul><ul><li>Excessively broad property rights and monetization of resources stifle innovation, competition and public access </li></ul><ul><li>Historically IP protection aimed t provide incentives to create new works; were thus to stimulate innovation </li></ul><ul><li>Currently, IP rights are seen as absolute and almost ridiculous </li></ul><ul><li>Market enclosure is pervasive - erodes valuable commons of creativity and knowledge </li></ul>
    35. 35. Wanna work together?
    36. 36. Creative Commons in the digital economy <ul><li>Creative Commons defines the spectrum of possibilities between full copyright and the public domain. </li></ul><ul><li>The licences help you keep your copyright while allowing certain uses of your work — a “some rights reserved” copyright. </li></ul><ul><li>Creative Commons licenses are not an alternative to copyright. </li></ul><ul><li>They work alongside copyright, so you can modify your copyright terms to best suit your needs. </li></ul>All rights reserved No rights reserved Public Domain Some rights reserved
    37. 37. Commons resources http://search.creativecommons.org will help you find CC-licensed photos, music, text, books, educational material, enabled search services at Google Yahoo! Flickr Blip TV (video - TV programmes) Jamendo (music) Also access this tool via Firefox web browser Wikipedia online encyclopedia for text and images licensed under GNU GPL Flickr Commons - public domain images with no licence restrictions Internet Archive Project : http://www.archive.org/index.php
    38. 38. Uploading images to your blog… A demo…
    39. 39. What you’ll learn <ul><li>Show how to find photo resources </li></ul><ul><li>Show how to resize photos </li></ul><ul><li>Show how to download from resource website and upload into a blog post </li></ul><ul><li>Show how to resize photos in a blog post </li></ul><ul><li>Show how to attribute photos </li></ul>
    40. 40. PRACTICAL (20 minutes) <ul><li>Using the steps you’ve just learned, find a Creative Commons licensed photograph that would complement one of your previous posts. </li></ul><ul><li>Upload the post to your blog and remember to include a caption. </li></ul>
    41. 41. Uploading videos to your blog… A demo…
    42. 42. What you’ll learn <ul><li>Show how to find video resources </li></ul><ul><li>Show how to embed into a blog post </li></ul><ul><li>Show how to resize video in a blog post </li></ul><ul><li>Show how to attribute videos </li></ul>
    43. 43. PRACTICAL (20 minutes) <ul><li>Using the steps you’ve just learned, find a video that would complement one of your previous posts. </li></ul><ul><li>Embed it into your blog and resize it. </li></ul>
    44. 44. If you build it they will come … You have the blog, now what?
    45. 45. Blog marketing strategies Why do you need to market your blog? <ul><li>to drive traffic to your blog - with people & technology </li></ul><ul><li>to keep people reading your blog </li></ul><ul><li>to create pathways : g enerate links to your blog so that other can find you </li></ul><ul><li>to measure your traffic to understand what drives your readers </li></ul>
    46. 46. Drive traffic by involving people … <ul><li>Find and involve key influencers (knowledgeable and well connected individuals) </li></ul><ul><li>Include leading personalities as guest bloggers </li></ul><ul><li>Do email interviews with well-known personalities (professors?) </li></ul><ul><li>Give credit (and link) to those who have inspired, influenced, implemented </li></ul><ul><li>Cross link with other bloggers </li></ul><ul><li>Post comments on other blogs </li></ul><ul><li>Notify your opt-in subscribers about new blog posts </li></ul>
    47. 47. Drive traffic by maximising technology … <ul><li>Submit your blog to blog directories , eg: Afrigator </li></ul><ul><li>Submit your RSS feed to feed directories to widen potential pool of readers, eg: Yahoo rss guide </li></ul><ul><li>Claim your blog at technorati </li></ul><ul><li>Use ping and trackbacks </li></ul>
    48. 48. Keep people reading … <ul><li>Be the first one who publishes a newsworthy story within your area of expertise </li></ul><ul><li>Post regular content and provide updates to your projects, publications. Announce launches of new reports and give background info on the process </li></ul><ul><li>Start a Running Post : EG: an experiment/ series that lasts a week or a month. This can bound many readers to your blog. Finish each post with a Big Question or a little pre-view on what’s coming next… that will leave them eager to read more and they will come back once you make the next post. </li></ul><ul><li>Post on weekdays; there are more readers </li></ul><ul><li>Create and/ or distribute multimedia , include link to you blog </li></ul><ul><li>Personalise your contact info - add your pictures! </li></ul>
    49. 49. Measuring interest in your blog <ul><li>Google analytics is an accessible measuring tool for blog traffic </li></ul><ul><li>rich insights into your website traffic and marketing effectiveness </li></ul><ul><li>easy-to-use features to analyse data that can drill down into </li></ul><ul><li>site usage </li></ul><ul><li>visitor stats </li></ul><ul><li>pages visited </li></ul><ul><li>where traffic comes from </li></ul>
    50. 50. Blog case study http://www.nominationwatch.org
    51. 51. Mailing lists and announcements <ul><li>Notify your stakeholders about recent blog posts by sending announcements to your mailing lists. </li></ul><ul><li>Give a brief overview of what the blog post is about and include a link to the entry where people can read more… </li></ul><ul><li>A fine balance must be achieved so as not to spam your mailing list subscribers. </li></ul><ul><li>A nice way to do this might be to release an online/email newsletter , highlighting the top five most popular blogs, for example… </li></ul>
    52. 52. Create connections <ul><li>A step beyond a blogroll link is to import feeds from other bloggers and visa-versa. This is very easy on Wordpress. Though choose carefully – too many feeds could get too busy! </li></ul><ul><li>Another idea would be to tell ‘science celebs’ about your blog. Forge a connection with them and ask if they are interested get them to ‘ guest blog ’ for you about a specified topic. This will lure other fans to your site… </li></ul><ul><li>OR… Guest blog on other sites… </li></ul>
    53. 53. Offline <ul><li>Tell people about your blog: at conferences, meetings or even braai’s! You never know who you’ll meet and what connections can be made… </li></ul><ul><li>Put the url of your blog in your email signature, newsletter, journal publications, marketing material… </li></ul>

    ×