Posts tagged "html"

iPhone 4 in CSS

iPhone 4 in CSS

Ok, dieser Beitrag ist etwas Off-Topic. Aber wer mit Webdesign zu tun hat wird es lieben. Der Webdesigner TjRus scheint es sich zur Aufgabe gemacht zu haben, alles möglich nur mit HTML und CSS umzusetzen. Und so hat er auch gleich mal das iPhone 4 komplett in CSS umgesetzt. Ohne ein einziges Bild. Selbst die Icons sind nur mit CSS gestaltet. Kommt hinzu, der Power und Home Button funktioniert sogar und auch der „Slide to unlock“ Riegel funktioniert. Bei den Apps hört es dann auf, aber auch so ist es schon ziemlich beeindruckend.

Das ganze hat TjRus übrigens umgesetzt für sein Mac App Programm Ensoul. Damit lassen sich am Mac Bilder für die Telefonanrufe, bzw. Kontakte in der richtigen Grösse herstellen. Ebenso für Wallpapers. Die Bilder können aus allen gängigen Bild-Programmen und Kameras importiert und bearbeitet werden. Ensoul kommt mit einer ganzen Palette von Effekten und sorgt dafür, dass die Bilder sauber zugeschnitten und ans iPhone übertragen werden.

Danke für den Hinweis Philippe

Safari 4 Beta

Apple hat gestern die Public Beta von Safari 4 zum Download bereitgestellt. Angeblich soll Safari 4 der weltweit schnellste und innovativste Browser für Mac und Windows PCs sein. Unter anderem wird JavaScript, dank der neuen Nitro Engine, um den Faktor 4,2 mal schneller abgewickelt als im vorgänger Safari und sogar 30 mal schneller als im Internet Explorer 7! Auch sonst soll der Apple Browser mit neue Eigenschaften das Surfen im Web noch intuitiver und angenehmer machen.

Die Aussage von Philip Schiller, seines Zeichens Senior Vice President Worldwide Marketing von Apple, vermag besonders die Webdesigner unter uns erfreuen:

„Apple hat Safari entwickelt um Innovation, Geschwindigkeit und offene Standards zurück in Web-Browser zu bringen und heute machen wir einen weiteren grossen Schritt nach vorne. Safari ist der effizienteste und schnellste Browser für Mac und Windows, mit einer hervorragenden Integration von HTML 5 und CSS 3 Web-Standards, die die nächste Generation von interaktiven Web-Anwendungen möglich machen.“

Aber werfen wir mal einen Blick auf die innovativen, neuen Eigenschaften von Safari 4:

  • Top Sites, ein Überblick häufig besuchter Webseiten in Form einer optischen Übersicht von Vorschauen, so dass der Anwender mit einem Click zu seiner bevorzugten Webseite springen kann;
  • Full History Search, zum Durchsuchen von Überschriften, Web-Adressen oder kompletten Texten kürzlich besuchter Webseiten, um schnell und einfach zu diesen Webseiten zurückzukehren;
  • Cover Flow, mit dem das Suchen im Verlauf oder in den Lesezeichen genauso viel Spaß macht, wie das Durchblättern von Alben-Covern in iTunes;
  • Tabs on Top, für ein verbessertes Tabbed-Browsing mit einfachen Drag-and-Drop-Verwaltungsmöglichkeiten als auch einem intuitiven Button zum Anlegen neuer Tabs;
  • Smart Address Field, das automatisch URLs komplettiert, in dem es Vorschläge aus der Liste besuchter Top Sites, Lesezeichen und Verlauf anzeigt;
  • Smart Search Field, mit dem Anwender ihre Suche mit Google Suggest oder um kürzlich gesuchte Begriffe verfeinern können;
  • Full Page Zoom, um Webseiten vergrößert darstellen zu können, ohne einen Qualitätsverlust bei der Auflösung zu haben;
  • Integrierte Web-Entwicklungswerkzeuge, um Webseiten zu prüfen und zu optimieren und somit einen schnellstmöglichen Seitenaufbau und beste Kompatibilität zu erzielen;
  • Ein – in Safari für Windows – neues Design im nativen Windows-Look, das neben dem im Windows standardisierten Schrift-Rendering auch die Optik der Symbolleisten, Lineale und Überschriften verwendet, so dass Safari perfekt ins Erscheinungsbild von Windows XP- oder Windows Vista-Anwendungen passt.

safari4

  1. Top Sites Button. Egal wo man sich befindet, dank dem Top Sites Button kommt Ihr immer wieder auf die schöne Übersicht Top Sites zurück.
  2. Top Sites. Bietet eine schöne Übersicht der besuchten Website.
  3. Customize Top Sites. Die Seiten die hier in Top Sites dargestellt werden sollen können geändert und editiert werden. So könnt Ihr selber für den perfekten Einstieg sorgen.
  4. Fresh news. Dank dem Stern oben in der Ecke erfahrt Ihr, ob die Seite ein Update erfahren hat.

safari4-2

  1. Cover Flow. Die besuchten Websites könnt Ihr wie eine Photogalerie durchstöbern und so vielleicht einevermisste Website wieder leichter finden.
  2. Full History Search field. Wenn Ihr nach einem Stichwort sucht, so wird der Inhalt der besuchten Websites ebenfalls durchsucht.
  3. Clear History. Die besuchten Websites können mit einem Klick gelöscht werden.
  4. Bookmarks. Per Drag&Drop können die Bookmarks bequem organisiert werden.

Erste Tests unter Mac OS X Leopard haben bei mir einen guten und stabilen Eindruck hinterlassen. Das surfen im Web bekommt mit Safari eine ganz andere Bedeutung. Man fühlt sich bei den Streifzügen durch das World Wide Web, als würde man eine Photogalerie durchstöbern. Die Top Sites Funktion bietet einen schönen und übersichtlichen Start wenn man den Safari 4 startet. Dank dem Cover-Flow können bereits besuchte und vergessene Seiten wieder schneller gefunden, bzw. erkannt werden. Sehr zufrieden bin ich mit Tabs on Top. Dadurch lässt sich im GUI des Browsers viel Platz sparen, bzw. optimal benutzen!

Mich als Webdesigner freut es natürlich, dass Safari alle neuen Standards unterstützt. Leider aber macht es nur halb soviel Spass, wenn die anderen Browserhersteller noch hinterher hinken, bzw. Redmond noch nicht einmal die alten Standards einhält…

Die Public Beta von Safari 4 ist kostenlos erhältlich für Mac OS X und Windows. Downloaden kann man den Apple Browser unter www.apple.com/chde/safari. Ich möchte aber noch einmal darauf hinweisen, dass es sich um eine Public Beta Version handelt. Das bedeutet, dass die Software noch nicht fertig ist und nur getestet werden soll. Es kann also vorkommen, dass Funktionen nicht ausgeführt werden, oder das Programm abstürzen kann. Ich wünsche Euch viel Spass bei den Tests und bin gespannt welche Erfahrungen Ihr mit dem neuen Browser macht…