1. Welcome to the world of Blogging! ASSAF blog training Day 2: 20 August

2. HTML Bootcamp 3. What is HTML?

HTMLorHyperText Markup Languageis a structured way of telling web browsers how a web page should be displayed.

A static language (cant do anything interactive)

Markup is about creating MEANING in a document or text, without directly showing that code in the final result.

Youve probably all done this before: Wordperfect

4. WYSIWIG vs Manual coding

WYSIWYGis an acronym forW hatY ouS eeI sW hatY ouG et

i.e. content displayed during editing appears very similar to the final output.

Look at your blog as an example

5. Why HTML here, and now?

Usually HTML is taught to web designers But thats not what you signed up for

The answer?

Wordpress sometimes creates issues with your blog layout, creating much pain and gnashing of teethKnowing how to fix the code directly (from the backend) using HTMLwill allow you to manage and use your blog more effectively and more easily, not to mention less gnashing

But remember:

WYSIMOLWYG W hatY ouS eeI sM oreO rL essW hatY ouG et i.e. recognise that most WYSIWYG implementations are imperfect.

6. First things to understand

Youll be usingtags , which are instructions surrounded by a < >

You ALWAYS need to open and CLOSE the tag. e.g. word

Sometimes (in the cases of links, images and tables) you can addattributesto 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:

Note how the attributes are found WITHIN the tag i.e. within the

Each attribute is assigned avalue , which is specified by the =

7. Basic formatting 8. Basic formatting

Paragraph:

Line break:

Browsers ignore single line breaks, so the following:

This isHTMLwould display as:

This is HTML

Line (horizontal rule) :

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 inboldand initalics , the "" and the "" should go around each other like Russian dolls (babushka). Correct: Like this Like this Incorrect: This is wrong This is also wrong Another correct way: fine isfine . 10. Links

The ASSAf Blog displays asThe ASSAf Blog

A link is denoted by the tag and requires a closing tag.

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)

Dont forget the on either end

The ASSAf Blogbecomes the hyperlink

11. Email links

Email Me

displays asEmail Me

This is a type of link hence the tag with a closing tag .

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.

Email Mebecomes the hyperlinked mail link

12. Unordered Lists

Item 1

Item 2

Item 3

The output of the above code is:

Item 1

Item 2

Item 3

So, < u l> u l> indicates theu nordered list, is the bullet

13. Ordered Lists

Item 1

Item 2

Item 3

The output of the above code is:

Item 1

Item 2

Item 3

So, < o l> o l> indicates theo rdered list, is the bullet

14. Tables 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. Images

The image tag is

Unlike other HTML tags, a closing tag is NOT necessary for an image.

The source attribute tells the browser where to find the image to be displayed:

The width and height attributes tells the browser the size at which the image should be displayed:

17. Video embeds

< object width="384" height="313">

The and tags work together

The height and width are defined twice in the code

18. Problems on Wordpress and how to solve themThe infamous

tag The

tag is a tag that defines logical divisions within the content of a page. What this means is that a

tag defines sections of a web page to make it easier to manage, style, and manipulate. You can use the

tag when you want to center a block of content or position a content block on the page.The problem: Wordpress sometimes inadvertently inserts

tags on your page/post creating havoc with your formatting.The solution: Go into the html section and remove/edit out the

tags.(Note a similar thing happens with the tag quite often) 19. In short If you have a problem withHTML formatting:

• Always check that your tags have been closed properly.

• Always check that your tags have been nested properly

• Always check that Wordpress hasnt inserted any unnecessary extra tags, in which case you should go remove them

20. HTML Practical (40 minutes)

• Use the Sundial document that Ive sent you on email.

• Copy and paste into a blog post

• USING HTML :

• Add a heading, a bold, italics

• Add the follow urls using HTML:http://en.wikipedia.org/wiki/Sundialsandhttp://en.wikipedia.org/wiki/Giuseppe_Biancani

• Remember DO NOT hit publish

21. MULTIMEDIA Why use it? Where to find it? 22. Why Multimedia?

• Multimedia adds a little extra something to a blog post - gives a little bit of depth/insight/humour/a different take on what youre writing on

• Helps create a relationship with the audience: Gives you something you can compare notes on or enjoy together.

• And its proven to be effective

23. Eyetrack III

• Can look through the eyes of the test subjects to see how they consume media.

• Findings onpicturesfrom Eyetrack III (2004):

• • Larger photo size increases the percentage of users seeing photos and the time they spend looking at them

• • The ideal photo size is larger than 210 x 230 pixels

• • Faces in photos draw users' eyes. Multiple faces in photos attract more viewers .

24. Eyetrack III

• Findings onmultimediafrom Eyetrack III (2004):

• • There is a marginally significant percentage of improved recall from text as opposed to multimedia

• • This doesnt 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.

• • Charts and graphs appear to have eye-pulling power. They drew more eye fixations than most photos tested elsewhere in Eyetrack III.

25. Eyetrack III

• Findings onmultimediafrom Eyetrack III (2004):

• • There is a marginally significant percentage of improved recall from text as opposed to multimedia

• • This doesnt 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.

• • Charts and graphs appear to have eye-pulling power. They drew more eye fixations than most photos tested elsewhere in Eyetrack III.

26. Okay, Im convinced Now where do I find it? 27. Flickr.com Vast amounts of photos available under Creative Commons licenses. Excellent search. Great usability. Active community. Photo and recently launched video. 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. Zoopy.com Local version, local content. Fast speeds. Mobile version, Pictures, audio and videos 30. Youtube.com Huge global audience. 10 million uploads a day so lots and lots of content!ButALL are copyrighted. No downloads allowed. 31. Blip.tv The place for webcasting of shows. Creative Commons is supported, somany videos can be used on your blog. 32. Dotsub A vast and active community of translators working to provide video subtitled in an array of languages. 33. Can I use this in my blog? Debate around digital resources 34. Context

• The Commons and the Public Domain rich incubator of innovation and value

• Market misunderstands this value which does not generate private, monetized wealth

• Excessively broad property rights and monetization of resources stifle innovation, competition and public access

• Historically IP protection aimed t provide incentives to create new works; were thus to stimulate innovation

• Currently, IP rights are seen as absolute and almost ridiculous

• Market enclosure is pervasive - erodes valuable commons of creativity and knowledge

35. Wanna work together? 36. Creative Commons in the digital economy

• Creative Commons defines thespectrum of possibilitiesbetween full copyright and the public domain.

• The licences help youkeep your copyrightwhile allowingcertain usesof your work a some rights reserved copyright.

• Creative Commons licenses arenotan alternative to copyright.

• They work alongside copyright, so you canmodifyyour copyright terms to best suit your needs.

All rights reserved No rights reserved Public Domain Some rights reserved 37. Commons resources http://search.creativecommons.org will help you find CC-licensed photos, music, text, books, educational material,enabled search services atGoogle Yahoo! Flickr Blip TV (video - TV programmes) Jamendo (music) Also access this tool via Firefox web browser Wikipediaonline 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. Uploading images to your blog A demo 39. What youll learn

• Show how to find photo resources

• Show how to resize photos

• Show how to download from resource website and upload into a blog post

• Show how to resize photosin a blog post

• Show how to attribute photos

40. PRACTICAL(20 minutes)

• Using the steps youve just learned,find a Creative Commons licensed photographthat would complement one of your previous posts.

• Uploadthe post to your blog and remember to include a caption.

41. Uploading videos to your blog A demo 42. What youll learn

• Show how to find video resources

• Show how to embed into a blog post

• Show how to resize video in a blog post

• Show how to attribute videos

43. PRACTICAL(20 minutes)

• Using the steps youve just learned,find a videothat would complement one of your previous posts.

• Embed it into your blog and resize it.

44. If you build it they will come You have the blog, now what? 45. Blog marketing strategies Why do you need to market your blog?

• todrivetraffic to your blog - with people & technology

• tokeeppeople reading your blog

• tocreate pathways :g enerate links to your blog so that other can find you

• tomeasureyour traffic to understand what drives your readers

46. Drivetraffic byinvolvingpeople

• Find andinvolve key influencers(knowledgeable and well connected individuals)

• Include leading personalities asguest bloggers

• Doemail interviewswith well-known personalities (professors?)

• Give credit(and link) to those who have inspired, influenced, implemented

• Cross linkwith other bloggers

• Post commentson other blogs

• Notify your opt-in subscribersabout new blog posts

47. Drivetraffic bymaximisingtechnology

• Submit your blog toblog directories , eg: Afrigator

• Submit your RSS feed tofeed directoriesto widen potential pool of readers, eg:Yahoo rss guide

• Claim your blog attechnorati

• Use ping and trackbacks

48. Keeppeoplereading

• Be the first one who publishes anewsworthy storywithin your area of expertise

• Postregular contentand provide updates to your projects, publications.Announce launches of new reports and give background info on the process

• Start aRunning 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 whats coming next that will leave them eager to read more and they will come back once you make the next post.

• Post on weekdays;there are more readers

• Create and/ or distributemultimedia , include link to you blog

• Personaliseyour contact info - add yourpictures!

49. Measuringinterest in your blog

• Google analyticsis an accessible measuring tool for blog traffic

• rich insights into your website traffic and marketing effectiveness

• easy-to-use features to analyse data that can drill down into

• site usage

• visitor stats

• pages visited

• where traffic comes from

50. Blog case study http://www.nominationwatch.org 51. Mailing lists and announcements

• Notify your stakeholders about recent blog posts by sending announcements to your mailing lists.

• Give a brief overview of what the blog post is about and include a link to the entry where people can read more

• A fine balance must be achieved so as not to spam your mailing list subscribers.

• A nice way to do this might be to release anonline/email newsletter , highlighting the top five most popular blogs, for example

52. Create connections

• A step beyond a blogroll link is toimport feeds from other bloggersand visa-versa. This is very easy on Wordpress. Though choose carefully too many feeds could get too busy!

• 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

• OR Guest blog on other sites

53. Offline

• Tell people about your blog: at conferences, meetings or even braais! You never know who youll meet and what connections can be made

• Put the url of your blog in your email signature, newsletter, journal publications, marketing material