Mobile Publishing. Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland

Size: px

Start display at page:

Download "Mobile Publishing. Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland"

Clare Randall
8 years ago
Views:

1 Mobile Publishing MARCO GIARDINA a,b a Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland b Sensiel Research, Bern, Switzerland Faculty of Economic Sciences, University of Neuchâtel, Switzerland Faculty of Economic Sciences, University of Neuchâtel, Switzerland 1

Research, Bern, Switzerland Faculty of Economic Sciences, University of

2 OUTLINE 1. Basic exercises with HTML/CSS for Journalists (2x45 min) 2. Exercises handling Multimedia Content for Mobile Publishing (2x45min) 3. Exercises with CMS (Wordpress & GitHub Pages) (2x45min) 4. Exercises with responsive templates targeting mobile publishing(2x45min) Glossary CMS: Content Management System CSS: Cascading Style Sheets FTP: File Transfer Protocol HTML: HyperText Markup Language Faculty of Economic Sciences, University of Neuchâtel, Switzerland 2

Exercises with CMS (Wordpress & GitHub Pages) (2x45min) 4.

3 1. HTML Basics: HTML files, HTTP, HTML- Setting your (free) HTML editor on a MAC. TexEdit>Preferences Faculty of Economic Sciences, University of Neuchâtel, Switzerland 3

4 1. HTML Basics: Exercise 1 HTML (main) tags: 1.<html></html> 2.<body></body> 3.<head></head> 4.<title></title> 5.<p></p> 6.<img src=""/> 7.<a href=""></a> 8.<div></div> 9.</br> 10.<h1></h1> 11.<style></style> Faculty of Economic Sciences, University of Neuchâtel, Switzerland 4

5 1. HTML Basics: Exercise 2 HTML (main) tags continued: 1.<html></html> 2.<body></body> 3.<head></head> 4.<title></title> 5.<p></p> 6.<img src=""/> 7.<a href=""></a> 8.<div></div> 9.</br> 10.<h1></h1> 11.<style></style> Faculty of Economic Sciences, University of Neuchâtel, Switzerland 5

6 1. HTML Basics: Exercise 3 Responsive CSS (media-queries) Faculty of Economic Sciences, University of Neuchâtel, Switzerland 6

7 1. HTML Basics: RECAP Basic HTML page structure doc type <!DOCTYPE HTML> Faculty of Economic Sciences, University of Neuchâtel, Switzerland 7

8 1. HTML Basics: The hidden semantics of sites Faculty of Economic Sciences, University of Neuchâtel, Switzerland 8

9 1. HTML Basics: The hidden semantics of sites Naming Conven,ons Most Web sites are a costella,ons of files Faculty of Economic Sciences, University of Neuchâtel, Switzerland 9

10 1. HTML Basics: The hidden semantics of sites Faculty of Economic Sciences, University of Neuchâtel, Switzerland 10

11 1. HTML Basics: The hidden semantics of sites Faculty of Economic Sciences, University of Neuchâtel, Switzerland 11

12 1. HTML Basics: The hidden semantics of sites Faculty of Economic Sciences, University of Neuchâtel, Switzerland 12

13 2. Handling Multimedia Content Faculty of Economic Sciences, University of Neuchâtel, Switzerland 13

14 2. Handling Multimedia Content: Jtools Faculty of Economic Sciences, University of Neuchâtel, Switzerland 14

15 2. Handling Multimedia Content Dropbox: Cloud file sharing Faculty of Economic Sciences, University of Neuchâtel, Switzerland 15

16 2. Handling Multimedia Content Filezilla: remote server file sharing Faculty of Economic Sciences, University of Neuchâtel, Switzerland 16

17 2. Handling Multimedia Content: Exercise 7 text embed <article> <section> <aside> <time> <details> <figure> & <figcaption> <mark> <wbr> Advanced: <canvas> Advanced: geolocation in HTML5 <script> var x=document.getelementbyid("demo"); function getlocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposit ion(showposition); } else{x.innerhtml="geolocation is not supported by this browser.";} } function showposition(position) { x.innerhtml="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude; } </script> Faculty of Economic Sciences, University of Neuchâtel, Switzerland 17

innerhtml="geolocation is not supported by this browser.";} } function showposition(position) { x.innerhtml="latitude: " + position.coords.

18 2. Handling Multimedia Content: Exercise 8 audio embed <audio> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> Faculty of Economic Sciences, University of Neuchâtel, Switzerland 18

mp3" type="audio/mpeg"> Your browser does not support the audio element.

19 2. Handling Multimedia Content: Exercise 9 video embed <video> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Faculty of Economic Sciences, University of Neuchâtel, Switzerland 19

mp4" type="video/mp4"> <source src="movie.

20 2. Handling Multimedia Content: Exercise 10 social media memes embed::homework Faculty of Economic Sciences, University of Neuchâtel, Switzerland 20

Web Browser. Fetches/displays documents from web servers. Mosaic 1993

Web Browser. Fetches/displays documents from web servers. Mosaic 1993 HTML5 and CSS3 Web Browser Fetches/displays documents from web servers Mosaic 1993 Firefox,IE,Chrome,Safari,Opera,Lynx,Mosaic,Konqueror There are standards, but wide variation in features Desktop Browser