Kategorien
Fotografie Inspiration

Videodreh fürs Web: Teil 1 – die günstige Lösung

Ein Internet ohne Videos? Fast unvorstellbar. Ob YouTube oder über die eigene Webseite – schnell produzierte und originelle Filme sind voll im Trend. Braucht man für einen Text nur das Notebook, für einen kleinen Audiobetrag auch nicht viel mehr – sind Videos doch deutlich schwieriger zu produzieren. Es braucht eine Kamera, richtigen Ton, gutes Licht und Geschick bei der Postproduktion. Zumindest bei der Hardware liegen im Einstieg die Hürden nicht unendlich hoch, wie man am Beispiel des iPhone sieht.

Keine Frage: Moderne Smartphones haben eine beeindruckende Videokamera eingebaut. Da liegt die Idee nahe, auch zumindest halbwegs professionelle Produktionen mit dem kleinen Wegbegleiter zu realisieren – vorneweg als erstes taugliches Gerät dieser Art, das Apple iPhone. Schon viele Fernsehsender und Produktionsgesellschaften experimentieren seit geraumer Zeit mit der Technologie in der Westentasche. Die Investitionen sind jedoch entsprechend. Nur hochpreisige und überaus schwerfällige Technik wird angebunden. Das ist schon hinsichtlich Komplexität und des finanziellen Aufwandes wirklich nur für ambitionierte Videoproduzenten brauchbar. Dabei kann der Einstieg ganz einfach sein.

Kein Video ohne Stativ

Vieles lässt sich mit Unerfahrenheit und dem Newcomer-Bonus verzeihen – nicht jedoch verwackelte Videos. Über kurze Zeit liegt das Smartphone vielleicht noch gut in der Hand und die Ergebnisse sind relativ ruhig. Interviews oder lange statische Aufnahmen sind jedoch unmöglich ohne richtiges Stativ. Entsprechend des unkonventionellen Einsatzes bedarf es jedoch auch einer klugen Lösung. Der GorillaPod Video ist für mich am praktikabelsten. Auf kleinsten Raum ist das zähe Ungetüm unterzubringen und wirklich immer griffbereit. Durch flexible Beine und magnetische Füße lässt sich das kleine Stativ nahezu überall anbringen. So wird die relativ kleine Größe schnell kompensiert. Doch auch auf den drei kleinen Füßen auf einem Tisch stehend lassen sich gute Videos machen. Der integrierte Schwenkarm ist jedoch leider nicht mehr als eine kleine Anspielung an die großen Stative. Wirklich effektiv nutzen lässt sich die Funktion durch eine manchmal schwerfällige Mechanik und die fehlende Stabilität leider nicht. Trotzdem ist der kleine Helfer für knapp 30 US-Dollar fast unabdingbar. Für weitere 20 US-Dollar gibt es die Halterung für das Mobiltelefon. Durch die Federmechanik ist diese jedoch leider etwas wackelig – da gibt es besseres.

ece1

Eine solidere Haltung

Auf dem Stativ muss das iPhone auch halten. Anders als professionelle Videokameras ist das iPhone jedoch nicht für ein Stativ gedacht. Entsprechend muss nachgerüstet werden. Die optionale Halterung des GorillaPod ist leider etwas anfällig – GLIF ist da weitaus besser. Die multifunktionale iPhone-Halterung für solide 30 US-Dollar ist absolut das Geld wert. Einmal das iPhone eingespannt ist es fast bombensicher eingeklemmt. Schließlich gibt es kaum einen tragischeren Vorfall, als ein während des Drehs ein fallendes iPhone beobachten zu müssen. Die kleine Halterung ist voll kompatibel zum GorillaPod und wenn der Dreh vorbei ist, lässt sich mit dem kleinen Tool auch noch das iPhone im Bett schräg stellen. Passt.

ece2

Guter Ton für den direkten Kontakt

Eingebaute Mikrofone sind seit jeher ein Ärgernis für aufnahme-ambitionierte Nutzer. So ist auch kaum daran zu denken, mit dem integrierten Mikrofon des iPhone irgendwelche Videos produzieren zu können. Schon bei geringer Entfernung dominieren die Störgeräusche und für eine gute Qualität müsste man fast mit der Nase das Display berühren. Ein externes Mikrofon muss her. Leider gibt es nicht unendlich viel Auswahl. Mit dem iRig Mic existiert zumindest eine solide Lösung. Das Handmikrofon kann einfach in den Kopfhöreranschluss gesteckt werden. Gleich im Anschluss können spannende Interviews geführt oder auch Ansager gedreht werden. Das Mikrofon liegt durch die schwere Verarbeitung gut in der Hand. Leider ist der Eindruck besser, als die Resultate wirklich werden. Einige Störgeräusche sind unvermeidlich und auch die Bedienung steckt voller Tücken. Das Mikrofon verfügt über drei Einstellungen der Empfindlichkeit. Nur die mittlere Position liefert wirklich akzeptable Resultate bei einer normalen Verwendung – das muss man auch erstmal herausfinden. Für knapp 50 US-Dollar ist das Teil zudem nicht gerade günstig, bei richtiger Verwendung jedoch gut angelegtes Geld.

ece3

Ton für die volle Handfreiheit

Nicht immer muss es ein Handmikrofon sein. Wer nicht das iRig Mic auf einen Besenstil als Mikrofonangel schrauben möchte, hat wenig Alternativen. Der gleiche Hersteller bietet mit dem iRiG Mic Cast einen kleinen Mikrofonaufsatz an, der es mächtig in sich hat. In nicht allzu weiter Entfernung liefert das kleine Mikrofon wirklich solide Ergebnisse und ist kein Vergleich zu dem integrierten Tonabnehmer. Mittels verschiedener Empfindlichkeiten lässt sich der Klang noch etwas optimieren. Für ungefähr 30 US-Dollar ein kleines Wunderwerk, das im Einsatz wirklich überzeugt. Die Grenzen sind jedoch auch klar die Stärken, bei dem der große Bruder aufholen kann. Auch hier gebe ich klar eine Empfehlung als zweites Mikrofon, wenn gerade kein Handmikrofon benötigt wird.

ece4

Fazit

Für ungefähr 100 US-Dollar lässt sich aus einem normalen iPhone eine solide Lösung für die mobile und stationäre Videoproduktion schaffen. Ausprobieren lohnt, wenn sonst die Anschaffung einer Videokamera ansteht. Die Ergebnisse lassen sich sehen und mit den Hilfsmitteln wird der Abstand zu (semi-)professionellem Video relativ gering. Problempunkte wie Licht oder Objektiv können leider im Fokus einer möglichst günstigen Umsetzung nicht vollständig gelöst werden – zu kostenintensiv sind die Lösungen im Vergleich. In einem weiteren Beitrag werden wir uns bald mit einer professionelleren Lösung befassen…

(dpe)

Kategorien
Essentials Icons & Fonts

Angebissen: 5 Iconsets für echte Apple-Fans

Heute stellen wir Ihnen ganz spezielle Icons vor, nämlich solche für wahre Apple-Fans. Wenn wir die Verkaufszahlen etwa des iPhone 5 als aussagekräftig definieren, dann können wir wohl als sicher annehmen: Wahre Apple-Fans gibt es ganz schön viele. Falls Sie sich angesprochen fühlen, wird Sie der folgende Beitrag besonders freuen. Wir stellen Ihnen nämlich fünf Iconsets in Apple-Optik vor. Alle sind völlig kostenfrei, aber nicht alle zu jedem Zweck verwendbar! Egal, schön sind sie alle. Und darauf kommt es bei echten Fans schließlich an!

appicns

Appicns ist ein Projekt, geführt von Kara und Andrew McCarthy. Die Icons erhalten Sie gegen eine ungewöhnliche Bezahlung. Sie müssen einen Tweet darüber versenden. Nachdem der Tweet abgeschickt ist, können alle Icons als Zip-Datei runtergeladen werden.


Einige Apple-Icons von appicns.com


So sieht der Download aus: Pay with a Tweet

Polestack

Das Polestack Icon-Set wurde von Delta Nine, einem User der deviantArt-Plattform, entwickelt. Im Paket sind drei Symbolsätze enthalten. Im ersten Set sind alle Icons in Schwarz dargestellt. Der zweite Satz beinhaltet Icons, welche im Stil einer Schultafel kreiert sind. Der dritte enthält Icons, welche wie ein Holzaufdruck aussehen. Jeder Satz enthält die Icons im ICNS-, PSD- und PNG-Format, alle sind in einer Zip-Datei verpackt. Die Größe der Icons in jedem Set beträgt 512×512 px. Der Download ist kostenlos, genutzt werden dürfen diese allerdings nur privat. Ich fand dieses Set dennoch sehr hübsch und als Inspirationsquelle gut geeignet.


Polestack-Set: ein Überblick


Black Stack: ein Beispiel


Schultafel-Style: ein Beispiel


Holz-Style: ein Beispiel

Holz-Laufwerke

Dieses Icon-Set enthält Symbole in der Optik hölzerner Laufwerke. Diese originelle Idee und ihre Umsetzung stammt von Thrasos Varnava, ebenfalls ein User von deviantArt. Die Icons sind im ICNS- und PNG-Format enthalten und in einer Zip-Datei verpackt. Die Größe aller Icons ist 512×512 px. Sie stehen unter der Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Lizenz.


Wooden-Slick-Drives-Set: ein Überblick


Wooden-Slick-Drive Icon: Movies

Mac USB Icons

Die Icons dieses Sets sehen aus wie USB-Stecker für den Mac. Meiner Meinung nach eine ebenfalls coole Idee. Der Designer des Set ist Ömer Cetin, ein Illustrator aus der Türkei. Die Icons sind im ICN- und PNG-Format enthalten und wiederum in einer zip-Datei verpackt. Die Größen der Icons im PNG-Format betragen 256×256 px, 128×128 px, 64×64px und 32×32 px. Icons im ICN-Format sind nur in der Größe von 256×256 px vorhanden. Das Set steht unter der Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Lizenz.


Mac USB Icon

Totem Pole Icons

Diese Icons sind von Talos Tsui kreiert. Allerdings dürfen Sie diese ausschliesslich zu privaten Zwecken verwenden. Die Icons liegen im dmg-Format in einer Zip-Datei verpackt vor und sind für die Betriebssysteme Mac und Windows verfügbar.


Totem Pole Icon Set

(dpe)

Kategorien
Apps Design HTML/CSS Programmierung

Ratchet: Framework zur Erstellung von Prototypen für iPhone-Apps mit HTML5

Mobile Apps für das iPhone sind mittlerweile zu einer Art Statussymbol für Websites geworden, wie es einst die Flash-Intros waren. Sie erfreuen sich großer Beliebtheit und auch als Webdesigner ist man immer öfter gefordert, solche Apps zu entwickeln. Vor der Programmierung steht in der Regel die Konzeption und Gestaltung der App. Das Framework Ratchet hilft dabei, auf der Basis von HTML, CSS und JavaScript, Prototypen für mobile Apps zu erarbeiten.


Ratchet

Und genau das ist das Schöne an Ratchet: Als Webdesigner erstellt man einen App-Protypen mit bekannten und vertrauten Techniken und muss sich nicht mit Objective-C, der iOS-App-Programmiersprache, herumschlagen. Für einen Prototypen, der zunächst einmal Konzept und Aussehen der App darstellen soll, ist das in vielen Fällen ausreichend.

Wie funktioniert Ratchet?

Zunächst einmal müssen die Ratchet-Beispieldateien heruntergeladen werden. Diese bestehen aus einer HTML-, einer CSS- und einer JavaScript-Datei. Neben festen Bedienelementen (zum Beispiel Titel- und Navigationsleiste) gibt es einen Content-Bereich, der scrollbar ist. Über entsprechende Klassen wird den einzelnen Elementen Aussehen und Verhalten zugewiesen:

<header class="bar-title">
  <h1 class="title">Titel der App</h1>
</header>
<nav class="bar-standard">
  <ul class="segmented-controller">
    <li class="active"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</nav>

Grundsätzlich sind alle Elemente, die mit „bar-“ beginnen, feststehend und müssen als erstes deklariert werden. Der eigentliche Inhalt erhält die Klasse „content“. Für den Content-Bereich stehen weitere vordefinierte Inhaltstypen zur Verfügung, beispielsweise Listen mit Buttons:

<div class="content">
  <ul class="list">
    <li>List item 1 <a class="button">Button</a></li>
    <li>List item 2 <a class="button-main">Button</a></li>
    <li>List item 3 <a class="button-positive">Button</a></li>
    <li>List item 4 <a class="button-negative">Button</a></li>
  </ul>
</div>

Über die mitgelieferte CSS-Datei kann man das Aussehen der einzelnen Typen verändern und dem geplanten Design anpassen. Auf der Grundlage der Beispieldateien kann sehr schnell und einfach ein Prototyp für eine App zusammengeklickt werden. Eine Liste aller Komponenten mit Quelltextbeispiel wird sehr anschaulich auf der Website von Ratchet vorgestellt.


Komponentenübersicht mit anschaulichen Beispielen

Zusätzliche Meta-Angaben im HTML-Head sorgen dafür, dass das HTML-Dokument – zumindest auf Apple-Geräten – vom Look-and-Feel wie eine App dargestellt wird:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Die erste Meta-Angabe bewirkt, dass die Webanwendung im Vollbildmodus ausgeführt wird, die zweite dafür, dass die Satusleiste schwarz dargestellt wird. Außerdem sind in der Beispieldatei Apple-Touch-Icons in unterschiedlichen Auflösungen eingebunden.

Seitenübergänge mit Push.js

Jetzt ist man es von Apps ja gewohnt, dass Seitenübergänge per schicker Slider-Animation geschehen. Auch dies lässt sich auf den App-Prototypen übertragen – mit Hilfe von Push.js. Die JavaScript-Bibliothek lädt verlinkte Seiten per Ajax und animiert anschließend den Übergang zwischen den Seiten. Ist Push.js im Head eingebunden, ist der Effekt schnell auf einen Link angewendet:

<a href="seite2.html" data-transition="slide-in">

Neben dem Slide-Effekt kann ein Seitenübergang auch per einfachem Fade („fade“) realisiert werden.

Fazit: Mit Ratchet kann jeder Webdesigner – ohne Kenntnisse in App-Entwicklung – schnell sehr eindrucksvolle Prototypen entwickeln, die beim Kunden einen realistischen Eindruck der App hinterlassen.

(dpe)