{"id":948,"date":"2012-11-27T18:01:09","date_gmt":"2012-11-27T16:01:09","guid":{"rendered":"http:\/\/robert.kolatzek.org\/wblog\/?p=948"},"modified":"2012-11-27T18:01:09","modified_gmt":"2012-11-27T16:01:09","slug":"frei-von-powerpoint-beamer-und-prezi-modern-prasentieren-im-netz","status":"publish","type":"post","link":"https:\/\/blog.kolatzek.org\/wblog\/948\/frei-von-powerpoint-beamer-und-prezi-modern-prasentieren-im-netz","title":{"rendered":"Frei von Powerpoint, Beamer und Prezi &#8211; modern pr\u00e4sentieren im Netz."},"content":{"rendered":"<p>Wem M$ Powerpoint (OpenOffice Presender und wie sie alle hei\u00dfen) zu old-fashion, LaTeXs Beamer zu hacky und Prezi zu hipp und zu unruhig ist, hatte bisher kaum Alternativen zur Verf\u00fcgung. Es gibt aber Abhilfe in Sicht.<\/p>\n<p><!--more--><\/p>\n<p>Vor allem das Pr\u00e4sentieren im Web erweist sich als schwierig. Nat\u00fcrlich kann man <a title=\"HTML- und CSS-basierende Pr\u00e4sentationssoftware, die weitgehend unentdeckt blieb.\" href=\"http:\/\/meyerweb.com\/eric\/tools\/s5\/\">Eric Meyers s5<\/a> nehmen. Die gr\u00f6\u00dfte H\u00fcrde &#8211; IE 6 &amp; Co &#8211; gelten mittlerweile als arch\u00e4ologische Artefakte und man kann sich darauf verlassen, dass es \u00fcberall wie gew\u00fcnscht l\u00e4uft. Die Struktur ist recht einfach und von jedem HTML-Kenner gut zu bearbeiten. Das Layout kann mit CSS an die eigenen W\u00fcnsche angepasst werden.<\/p>\n<p>F\u00fcr diejenigen, die des HTML und CSS nicht m\u00e4chtig sind, bleiben nur Standard-Vorlagen und HTML-Editoren, die nicht immer ihren Dienst zur Zufriedenheit des Benutzers verrichten. Was also tun, wenn man die Pr\u00e4sentation ins Netz bringen will?<\/p>\n<p>Die erste L\u00f6sung besteht im Upload der Datei in den speziellen Hosting-Dienst wie <a title=\"Slideshare - die Pr\u00e4sentationsplattform mit sechs Jahren Erfahrung\" href=\"http:\/\/de.slideshare.net\/\" target=\"_blank\">Slideshare.net<\/a> (pdf, ppt, pps, pptx, ppsx, pot, potx, odp, Apple Keynote) oder <a title=\"Speeker Deck - die Presentationsplattform der Coder\" href=\"https:\/\/speakerdeck.com\/\" target=\"_blank\">Speakerdeck.com<\/a> (nur pdf). Diese binden die Dateien in der eigenen Website in einem kleinen Vorschaufenster ein, das man auf Wunsch zum Vollbild umschalten kann. Die Unterschiede zwischen den beiden Diensten sind nicht gerade enorm: W\u00e4hrend Speaker deck die PDFs zum Download anbietet, sehr minimalistisch gehalten wird und die Authentifizierung von Github akzeptiert, ist Slideshare um eine funktionsreiche kostenpflichtige Version erweitert worden, die das Hochladen von Videos, Analysen und private Pr\u00e4sentationen anbietet. Wer zu seinen Folien (oh man, h\u00f6rt sich das altert\u00fcmlich an) ein Video (Youtube oder Vimeo) synchron schalten will, sollte sie <a title=\"JS Bibiliothek zur Synchronisierung von Folien und Videos\" href=\"http:\/\/presentz.org\/\" target=\"_blank\">Presentz<\/a> genauer anschauen.<\/p>\n<p><a title=\"\" href=\"https:\/\/drive.google.com\" target=\"_blank\">Google Docs<\/a> bieten ebenfalls ein Werkzeug f\u00fcr die Erstellung und Vorf\u00fchrung von Pr\u00e4sentationen. Es orientiert sich an der entsprechenden Desktop-Software und bietet einen gro\u00dfen Schatz an Vorlagen und Funktionen. Auch die Pr\u00e4sentation mit speeker notes (getrennte Fenster f\u00fcr die Folien und Kommentare\/Anmerkungen des Vortragenden) beherrscht Googles Tool. Das Teilen im Netz ist nur einen Klick auf &#8222;Share&#8220;-Knopf entfernt. Man bekommt eine &#8222;unlesbare&#8220; URL, die ein SVG mit JavaScript f\u00fcr die ausw\u00e4hlbare Aufl\u00f6sung mixt. Durch den Einsatz von SVG sind Sp\u00e4\u00dfe wie &#8222;Zeichnungen&#8220; oder rotierte Texte m\u00f6glich. Interessant ist der Bereich &#8222;Research&#8220;, in dem man Literatur (z.B. im Scholar) recherchieren und mit einem Klick in die Pr\u00e4sentation als Quellenangabe hinzuf\u00fcgen kann. Auch die \u00dcbernahme von Bildern aus Googles Bildersuche funktioniert mit Drang&#8217;nDrop.<\/p>\n<p>Wem die vielen Funktionen zu un\u00fcbersichtlich sind und reines HTML mit animierten 3D-\u00dcberg\u00e4ngen bevorzugt (&#8230;und sich auf neueste Browser und Hardware mit 3D-Chips\u00e4tzen freiwillig beschr\u00e4nkt) findet im <a title=\"Reveal.js - die JS\/CSS-Basis von Hackim el Hattab (ob das sein echter Name ist?)\" href=\"http:\/\/lab.hakim.se\/reveal-js\" target=\"_blank\">Reveal.js<\/a> eine schicke Alternative samt Steuerungs-API, Sass- (CSS-Pr\u00e4prozessor) Vorlagen und unter <a title=\"Der Editor f\u00fcr reveal.js-Pr\u00e4sentationen und zugleich die Plattform f\u00fcr ihre \u00f6ffentliche Publikation\" href=\"http:\/\/www.rvl.io\/\" target=\"_blank\">rvl.io<\/a> einen geeigneten Editor, der visuell passende HTML5-Strukturen generiert. Diese L\u00f6sung eignet sich vor allem f\u00fcr Web-Entwickler, die sich mit CSS- und Sass auskennen aber auch offline pr\u00e4sentieren wollen (der ber\u00fchmte Vorf\u00fchreffekt: eine Netzst\u00f6rung genau zu dem zeitpunkt, wenn man die URL aufrufen will). Mit einem Trick bekommt man im Browser auch eine PDF erstellt (&#8222;<strong>?print-pdf<\/strong>&#8220; in der URL anh\u00e4ngen und in Chrome an stelle eines Druckers die Ausgabe in PDF ausw\u00e4hlen). Mit einem Tastendruck auf den Buchstaben &#8222;<strong>F<\/strong>&#8220; wird der Vollbildschirm (per API) gestartet. Mit den Pfeil-Tasten navigiert man zu den gew\u00fcnschten Seiten. Mit Leertaste geht man nacheinander alles durch. Mit einem Druck auf &#8222;<strong>Esc<\/strong>&#8220; werden alle Seiten recht \u00fcbersichtlich nebeneinander gelegt &#8211; so kann man sich in der Struktur auch w\u00e4hrend der Pr\u00e4sentation schnell und frei bewegen. Mit speziellen Klassen und bestimmten Events kann der Web-Programmierer f\u00fcr seine Sch\u00e4fchen (Abteilung, Organisation etc.) weitere hilfreiche Funktionen oder Verhaltens- bzw. Darstellungsweisen erg\u00e4nzen &#8211; genauso wie Stile\/Themen, die er aus angepassten Sass-Vorlagen in <a title=\"Rubys sass-file compiler\" href=\"https:\/\/github.com\/nex3\/sass\" target=\"_blank\">ruby<\/a> oder <a title=\"Sass compiler f\u00fcr node.js\" href=\"https:\/\/github.com\/andrew\/node-sass\" target=\"_blank\">node.js<\/a> generieren kann. Nur noch den HTML-Body muss man aus rvl.io-Editor exportieren und in das eigene HTML-Ger\u00fcst einf\u00fcgen &#8211; was auch ein Skript erledigen kann. Summa summarum: ein schickes etwas hippes aber vor allem offenes Pr\u00e4sentationswerkzeug mit vielen M\u00f6glichkeiten aber auch hohen Anforderungen an die Browser und die Hardware. Daf\u00fcr aber Flash-frei!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wem M$ Powerpoint (OpenOffice Presender und wie sie alle hei\u00dfen) zu old-fashion, LaTeXs Beamer zu hacky und Prezi zu hipp und zu unruhig ist, hatte bisher kaum Alternativen zur Verf\u00fcgung. Es gibt aber Abhilfe in Sicht.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[3,8],"tags":[10,26,48,55,78,126],"class_list":["post-948","post","type-post","status-publish","format-standard","hentry","category-informationswissenschaft","category-software","tag-ajax","tag-css","tag-html","tag-javascript","tag-pdf","tag-web","entry"],"_links":{"self":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/comments?post=948"}],"version-history":[{"count":0,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/posts\/948\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/media?parent=948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/categories?post=948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kolatzek.org\/wblog\/wp-json\/wp\/v2\/tags?post=948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}