Posts tagged "CSS3"

Funktionierender iPod Classis im Browser

iPod Classic im Webbrowser

Schon unglaublich was man mit ein bisschen HTML5 und CSS3 so zaubern kann… Der Webdesigner Pritesh Desai hat zum ersten Todestag von Steve Jobs einen funktionierenden iPod Classic für den Webbroser nachgebaut nur mit HTML5 und CSS3.

Apple’s rise as the world’s biggest company ever in the history can be attributed to one single product – the iPod. Steve job’s pulled out the tiny mp3 player the size of a deck of a cards and ushered Apple towards it’s greatest era. I decided to recreate the original iPod using HTML5 and CSS3.

Und der iPod ist voll funktionsfähig. Das Scroll Wheel funktioniert und es können auch Songs abgespielt werden.
Die Demo könnt ihr hier begutachten: – http://inventikasolutions.com/demo/iPod/. Damit alles funktioniert wird ein moderner Browser wie Chrome, Safari oder Firefox vorausgesetzt.

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

Weisst das neue Apple.com Design auf kommende Liquid Metal Geräte hin?

Aluminium vs. Liquid Metal

Schön, die Gerüchteküche broddelt wieder. Die Schreiber von 9to5mac habe eine interessante Theorie aufgestellt. Angeblich soll das neue Website Layout der offiziellen Apple Website, übrigens umgesetzt in schönstem HTML5 und CSS3, darauf hinweisen, dass Apple nun von den Aluminium Geräten umstellt auf die Liquid Metal Legierung, zu deutsch besser bekannt als Metallisches Glas.

Wikipedia weiss dazu:

Metallische Gläser sind im Allgemeinen härter, korrosionsbeständiger und fester als gewöhnliche Metalle. Die für die meisten Metalle charakteristische Verformbarkeit fehlt jedoch gewöhnlich.

Die neuesten Legierungen sind noch sehr jung und kaum erforscht. Darum, und vor allem wegen dem hohen Preis, hat Liquid Metal bisher kaum Anwendung in kommerziellen Produkten gefunden. Apple hat sich mal eben Patente und Exklusivrechte für die Anwendung gesichert. Anscheinend soll Apple das spezielle Metal bereits eingesetzt haben, nämlich bei der Klammer um den SIM-Kartenslot heraus zu bugsieren.

Wie die Bilder oben von pedrofan zeigen, könnte ein MacBook mit einem Liquid-Metal-Überzug aussehen. Was haltet Ihr von dem Gerücht? Ich meine, das Webdesign hatte ja auch den typischen Aqua-Apple-Look als es noch die Plastik Mac-Modele gab. Dann kamen die Aluminium Geräte und nun Liquid Metal?

Safari 5 ist da!

Entgegen erste Vermutungen wurde der neue Safari Browser nicht an der WWDC 2010 Keynote vorgestellt, sondern wurde im Vergleich dazu eher still und heimlich heute Morgen zur Verfügung gestellt.

Glaubt man Apple, so soll Safari 5 der schnellste und innovativste Internetbrowsers der Welt sein! Immerhin soll die Version 5  eine 30-prozentige Leistungssteigerung im Vergleich zu Safari 4 haben.

Auch Philip Schiller, Senior Vice President Worldwide Product Marketing von Apple, ist stolz auf den Internetbrowser:

Safari ist weiterhin führend in Performance, Innovation und der Unterstützung von Standards. Safari läuft nun weltweit auf über 200 Millionen Endgeräten und seine Open Source WebKit Engine läuft auf über 500 Millionen Endgeräten.

Safari Reader
Der Safari Reader erleichtert es einseitige wie mehrseitige Artikel im Web zu lesen, indem er sie in einer neuen, scrollfähigen Ansicht ohne jeglichen zusätzlichen Inhalt oder störende Informationen präsentiert. Wenn Safari 5 einen Artikel erkennt, kann der Nutzer auf das Reader Icon im intelligenten Adressfeld klicken, um sich den gesamten Artikel für anschauliches, ungestörtes Lesen darstellen zu lassen, mit der Möglichkeit ihn zu vergrössern, zu drucken oder per E-Mail zu versenden. Die Vorteile für die Leser liegen auf der Hand, für die Werbeleute wird damit einmal mehr die Display-Werbung verdrängt.

Safari Extentions
Neu bietet Apple ein kostenfreies Safari Developer Program, welches den Entwicklern die Möglichkeit gibt Safari 5 mit Erweiterungen, basierend auf standardisierten Web-Technologien wie HTML 5, CSS3 und JavaScript, anzupassen und zu verbessern. Eigentlich nichts neues und längst überfällig! Firefox und Chrome bieten das schon längere Zeit an… Am Safari Developer Program kann man sich hier zur Teilnahme registrieren.

HTML 5 wird Standard
Apple schreibt sich gross den (beinahe) Webstandard HTML 5 auf die Flaggen. Kein Wunder also, dass der neue Browser diese neuen Standards unterstützt wo es nur geht. Safari 5 fügt mehr als ein Dutzend leistungsstarke HTML 5-Technologien hinzu, welche es Web-Entwicklern ermöglichen, multimediale Medienerfahrungen zu schaffen, darunter bildschirmfüllende Wiedergabe und Untertitel für HTML 5-Videos. Weitere, neue HTML 5-Funktionen in Safari 5 beinhalten ‚HTML 5 Geolocation‘, ‚HTML 5 sectioning elements‘, ‚HTML 5 draggable attribute‘, ‚HTML 5 forms validation‘, ‚HTML 5 Ruby‘, ‚HTML 5 AJAX History‘, ‚EventSource‘ und ‚WebSocket‘.

Darüber hinaus gibt es noch ein paar weitere kleine und feine Verbesserungen und Ergänzungen. Diese hat Leo vom fscklog zusammengetragen und veröffentlicht.