Font Pull -Down Menu

Ever had clients that could not decide on which font to use on their website?

here’s solution to implement choice!


Header Type 1

Header Type 2

Header Type 3

Header Type 4

Text Blocksatz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.

Text Linksbündig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Rechtsbündig

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Text Zentriert

Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit Email

Lorem ipsum dolor sit amet Kontaktformular

 


 

This is a technique to implement a pull-down menu to test fonts on a web page

The html for the pull-down menu:

<link href='https://fonts.googleapis.com/css?family=Abel|Crimson+Text:400,400italic,600,600italic,700,700italic|Varela+Round|Patua+One|Gudea:400,400italic,700|Lora:400,400italic,700,700italic|Open+Sans+Condensed:300,300italic,700|Fjalla+One|Arvo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<select id="input-font" class="input"  onchange="changeFont (this);">
  <option value="Times New Roman" selected ="selected">Times New Roman</option>
  <option value="Abel">Abel</option>
  <option value="Crimson Text">Crimson Text</option>
  <option value="Varela Round">Varela Round</option>
  <option value="Patua One">Patua One</option>
  <option value="Gudea">Gudea</option>
  <option value="Lora">Lora</option>
  <option value="Open Sans Condensed">Open Sans Condensed</option>
  <option value="Fjalla One">Fjalla One</option>
  <option value="Arvo">Arvo</option>
</select>

The Javascript function:

<script>
    function changeFont(font){
        document.getElementById("output-text").style.fontFamily = font.value;
    }
</script>

And the html for the content:

<h3>Lorem ipsum dolor</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida neque dolor, a ultricies justo viverra mattis. Donec feugiat mollis orci, commodo rutrum urna molestie et. In blandit lobortis eros, at tempus lacus suscipit non. Maecenas dolor nibh, dictum vel pellentesque eu, pharetra at libero. Donec placerat fermentum magna, sit amet vestibulum dui ullamcorper in. Suspendisse nisi urna, rutrum nec arcu quis, feugiat aliquam velit. Donec molestie nisi urna, sit amet fermentum nisi blandit a. Cras tincidunt semper vulputate. Aliquam vehicula eget felis nec molestie.</p>
<p style="text-align: justify;">Praesent eu scelerisque est, vel volutpat nulla. Cras imperdiet enim nulla, eget pretium nibh egestas non. Cras ullamcorper, purus in varius maximus, risus massa pharetra diam, sit amet congue elit nunc a nunc. Proin lobortis elementum ante. Aenean feugiat magna vitae massa dignissim, a pharetra ex posuere. Nam ut accumsan mauris. Morbi augue nulla, rhoncus eu turpis et, ornare rhoncus tellus. Quisque metus nisi, pretium vitae tortor ac, interdum tempor quam.</p>
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
&nbsp;
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="mailto:alex@fullframestudios.ch">Email</a></strong></p>
<p style="text-align: left;"><strong>Lorem ipsum dolor sit amet <a href="#">Kontaktformular</a></strong></p>

Google released open-source 3D API for the web

Could this be the one that changes the game? Google has released a 3D API, Quote by Google: “O3D is an open-source web API for creating rich, interactive 3D applications in the browser. This API is shared at an early stage as part of a conversation with the broader developer community about establishing an open web standard for 3D graphics.”

Read more here…

We’ve seen many formats and efforts of bringing 3D to the web in the past. At the begining there was vrml 1.0. I was very excited and built a lot of things in Power Animator and exported it to vrml inclusive authoring. Vrml 2.0 had animation, multi textures on one node and many more features like proximity sensors and 3D sound. I was especially impressed by “Floops” (unfortunately I found no usable links on Floops – anyone – comment?) created by Brad de Graaf for SGI (Silicon Graphics).

Later on vrml was replaced by X3D. X3D is an xml based file format and was supposed to widely spread and the plans were to create exporters for many applications in the animation and cad sector.

I’ve played with X3D and the Flux Player. Flux Player now merged into Vivaty but is still available to download here. I will put my experiment online soon… Stay tuned.

I am really hoping that this will finally kick of some serious business for 3D on the web. It’s about time I think. The bandwith, the gfx power on peoples machines and the technology is here. Now that Google has picked it up it has a real chance to succeed. What do you think?

Legal Disclaimer

DISCLAIMER:

ALLGEMEINE NUTZUNGSBEDINGUNGEN
Die Website von “Alex Furer – Full Frame Studios” stellt Informationen und Daten sowie mittels Hyperlinks (Internetverknüpfung) Informationen anderer Websites zur Verfügung. Diese Informationen und Daten dienen allein Informationszwecken, ohne dass sich auf die Aktualität, Richtigkeit oder Vollständigkeit der Informationen berufen oder verlassen werden kann.

GELTUNGSBEREICH
“Alex Furer – Full Frame Studios” ist ausschließlich für Inhalte verantwortlich, die selbst erstellt, veröffentlicht und verbreitet werden. Die Nutzungsbedingungen gelten für die Inhalte der Websites www.fullframestudios.ch sowie aller zu diesen Domains gehörenden Subdomains.

HAFTUNG
“Alex Furer – Full Frame Studios” haftet nicht für Inhalte und Programme, die auf der Website verbreitet werden, noch für Schäden die daraus entstehen, es sei denn, dass solche Schäden von “Alex Furer – Full Frame Studios” vorsätzlich oder grob fahrlässig herbeigeführt werden. Dies gilt für alle Arten von Schäden, insbesondere Schäden, die durch Fehler, Verzögerungen oder Unterbrechungen in der Übermittlung, bei Störungen der technischen Anlagen und des Services, unrichtige Inhalte, Verlust oder Löschung von Daten, Viren oder in sonstiger Weise bei der Nutzung dieses Online-Angebots entstehen können.
“Alex Furer – Full Frame Studios” übernimmt keine Verantwortung für die Inhalte, Fehlerfreiheit, Rechtmäßigkeit und Funktionsfähigkeit von Internetseiten Dritter, auf die mittels Links von der Internetseite von “Alex Furer – Full Frame Studios” verwiesen wird. Seitenaufrufe über Links erfolgen auf eigene Gefahr.

URHEBERRECHT
Die über die Website von “Alex Furer – Full Frame Studios” angebotenen Inhalte sind urheberrechtlich geschützt. Ihre Nutzung unterliegt den geltenden Urheberrechten. Diese Website darf ohne Zustimmung von “Alex Furer – Full Frame Studios” nicht verändert, kopiert, wiederveröffentlicht, übertragen, verbreitet oder gespeichert werden. Sämtliche weitergehende Rechte verbleiben bei “Alex Furer – Full Frame Studios”. So ist insbesondere der Verkauf und jegliche kommerzielle Nutzung unzulässig. “Alex Furer – Full Frame Studios” übernimmt keine Gewähr dafür, dass die Internetseite unterbrechungs- und fehlerfrei funktioniert und dass etwaige Fehler korrigiert werden.

DATENSCHUTZ
Grundsätzlich werden durch die Nutzung der “Alex Furer – Full Frame Studios” Website keine persönlichen Daten erhoben und/oder gespeichert. Werden Name, eMail-Adresse oder sonstige persönliche Daten für spezielle Angebote benötigt, erhoben und gespeichert, so wird an entsprechender Stelle darauf hingewiesen. Auf unseren Seiten verweisen wir auf verschiedene Kooperationspartner, die ihrerseits Internet-Sites und -Dienste anbieten. Diese haben in der Regel eigene Datenschutzerklärungen und/oder Richtlinien. Für diese nicht mit uns in Zusammenhang stehenden Erklärungen und Richtlinien übernimmt “Alex Furer – Full Frame Studios” keine Haftung.

* Sorry no English…

Website of gvz_rossat ag/sa goes online

The re-design of the website for the professional gardener supply company gvz_rossat ag/sa goes online. The site uses a Adobe Flex Accordion as navigation and is bilangual.

gvz-rossat_Web_Medium

 

Back in the day flash movies were really hype. Here’s the flash header that I created for this website.



Fallback or ‘alternate’ content goes here.
This content will only be visible if the SWF fails to load.


3D Internet – The future?

What if a website would be completly in 3D? I made the experiment and created this test using the X3D modeling package called Vizx3D. Media Machines (Tony Parisi) acquired Vizx3D and released later an application called Studio3D based on X3D.

You will need the newest installer to play this experiment. Get it here. Vivaty has taken over from Media Machines and has finally developed a plugin that also works in FireFox.

Update January 2016: Vivaty was bought up by Microsoft and their products and gallery were discontinued. More info also here. The player is now downloadable as part of this package.

Note: If you install the “SetupFluxPlayerStudio2-1.exe” from this package it will install the Flux Studio 2.1 and the Flux Player. Flux Studio is an interactive X3D authoring tool.

Warning: Although the Flux Player install will crash and report that FireFox is open and the plugin cannot be installed, the player will be installed. You can find it in the start menu under “Media Machines, Inc”. I can confirm that it runs on Windows 7.

If you run it you can then open the URL: http://fullframestudios.ch/AREA/X3D/files/index_04.x3d to see the demo I did 8 years ago.

Be aware, this is completely experimental and I don’t take responsibility if it crashes your computer.

 

My basic idea was to transport the regular experience of browsing a website into 3D space plus add a little more excitement.

X3D_Images_01

Continue reading 3D Internet – The future?