CSS gradient background and Mobile browsers

comments Comments Off on CSS gradient background and Mobile browsers
By , May 18, 2011 21:09

While making the layout for a mobile app with the help of jquerymobile, I have questioned myself about the gradient background, for web and mobile.

Looks like the mostly used mobile browser is Opera Mobile – Opera mini,that since the end of 2010 replace “Web (mobile) Browser for S60” the default browser for the mostly sold operative system Symbian OS (originally Nokia propertary made after Open Source!),. Has a stable position with “29.2% of worldwide smartphone market share in 2011” (Wikipedia).

2nd  place is the Android that is increasing users!
3rd place for Iphone with iOS and Safari.
The mobile browsers are born around 1996, in text only mode, around 2006 start the usage of CSS2.1, but the hardware developed so fast that there is no old browser engine to fight with,  thee is just the choice or they cannot show a graphic layout or they render better of your others monitor.
So the list can be restricted to:

/* Safari, Chrome, Skyfire, Nokia Series 60, Polaris, BlackBerry, Android*/
background: -webkit-linear-gradient(bottom, #006353, #c7dad6);

/*Portable Firefox, Firefox Mobile Fennec 1.0 Alpha 3, SeaMonkey Portable 2.0.14*/
background: -moz-linear-gradient( center bottom, rgb(0,98,83) 50%, rgb(0,113,94) 50%, rgb(199,218,214) 99%);

/*Opera Mini & Opera Mobile*/
background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);

/*IE mobile */
-msfilter:”progid:DXImageTransform.Microsoft.gradient
(startColorStr=’#81aea7′, EndColorStr=’#81aea7′)”


For the computers Windows XP is always on the top usage, also if Windows 7 is increasing, but with a luck windows user start to leave Internet Explorer that is still on the top but decreasing, followed from Firefox and an increasing number of Chrome users. The fact that IE6 is still there make us brrrrr, IE6 is going down but is anyway counting almost the same users like Safari.
The CSS code for the computer web compatibility is really long:


/* W3C Standard */
background:linear-gradient(bottom, #81aea7, #c7dad6);

/* Safari 4-5, Chrome 1-9 */
background-image: -webkit-gradient(
linear,left bottom,left top,
color-stop(0.5, rgb(0,98,83)),
color-stop(0.99, rgb(199,218,214))
);

/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(bottom, #006353, #c7dad6);

/*Mozilla/Gecko (Firefox >= 3.6 etc) */
background: -moz-linear-gradient(
center bottom,
rgb(0,98,83) 50%,
rgb(0,113,94) 50%,
rgb(199,218,214) 99%
);

/* Opera 11.10+ */
background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);

/*IE 5.5 – 7*/
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#006353′, EndColorStr=’#c7dad6′, GradientType=0);

/*IE 8+*/
-msfilter:”progid:DXImageTransform.Microsoft.gradient
(startColorStr=’#81aea7′, EndColorStr=’#81aea7′)”

You could add even one more exception, for a while Opera used an external svg to create the gradient, but the work is not worth.


So many lines that makes me nostalgic about the old way to do it, that now can be used as fallback in emergency:

/* fallback, Opera <=10 */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;


Linkography

mobile browser counter

http://gs.statcounter.com/#os-ww-monthly-201004-201104

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

http://en.wikipedia.org/wiki/Mobile_browser

thanks for the great work:
http://www.normansblog.de/demos/browser-support-checklist-css3

JUnEx – Kontakt- und Infotag in Lichtenberg

comments Comments Off on JUnEx – Kontakt- und Infotag in Lichtenberg
By , May 2, 2011 09:11

lonex-berlin.de/junex

Wann: 12.05.2011 von 10:00 bis 19:00 Uhr

Wo: Rathaus Lichtenberg, Möllendorffstraße 6, 10367 Berlin

Wie viel: Die Veranstaltung ist für alle Besucher kostenlos!


Das Forum für junge Unternehmen und Gründer

Der LONEX e.V. veranstaltet am 12.05.2011 zum 2. Mal einen Kontakt- und Infotag für junge Unternehmen und Gründer.

Im Rathaus Lichtenberg wird es dazu neben Kurzseminaren und Workshops einen Ausstellerbereich und ein Forum geben, um gezielt Kontakte zu knüpfen und Informationen auszutauschen.
Das Hauptanliegen des JUnEx Kontakt- und Infotages ist die Vernetzung der einzelnen Teilnehmer und Besucher. Informationen und Kontakte kompakt an einem Tag, lautet das Motto.
Ein Onlineportal ersetzt die sonst übliche Anmeldung. Hier können Aussteller, Referenten, Unternehmen und Gründer ihr Profil eintragen und so gezielt Synergien schaffen.
Es haben sich bereits zahlreiche Unternehmen registriert. Diese werden sich am 12.05. persönlich begegnen und haben auch im Anschluss über das Portal die Möglichkeit, Geschäftsbeziehungen zu pflegen und zu erweitern.

Die Veranstaltung wird in folgende Bereiche unterteilt:

Informationsbereich

Der Informationsbereich beinhaltet Kurzseminare und Workshops. Diese werden in der Zeit von 10:00 – 19:00 Uhr angeboten werden. Die Schwerpunktthemen sind Gründung und Festigung, Franchising, Gemeinschaftsgründungen und Kooperationen, Nachfolge als Chance für Existenzgründer, Zukunftsmarkt Gesundheitswesen und Wellness.

Kontaktbereich

Der Ausstellerbereich ermöglicht es schnell und unkompliziert einen Überblick über Finanzierungs-, Förder- und Beratungsmöglichkeiten zu erhalten, des Weiteren bietet er Informationen zu Gründung und Festigung von Unternehmen.  Hier werden sich auch junge Unternehmer und Unternehmerinnen  präsentieren.
Im Netzwerkbereich können Sie  Kontakte zu knüpfen und Erfahrungen auszutauschen. So können Kooperationen entstehen, Ideen wachsen und wichtige Erkenntnisse gewonnen werden. Bereits im Vorfeld der Veranstaltung möchten wir alle Besucher des JUnEx Kontakt- und Infotages bitten ein eigenes Profil zu erstellen. Mit ihrem Profil haben Sie die Möglichkeit sich nicht nur aktiv am JUnEx Kontakt- und Infotag zu beteiligen, sondern weiterhin die Möglichkeit sich auch auf der JUnEx- Plattform zu vernetzen.

Synoptx.net wird mit einem Stand vertreten sein – Besuchen Sie uns!

“Free Web Consulting” – am Synoptx Stand auf der JUnEx Messe :: Wir beantworten Ihre Fragen zum Thema Webseiten und Webservices

www.lifelike-figures-com – Released!

comments Comments Off on www.lifelike-figures-com – Released!
By , May 1, 2011 17:08

Die neue Webseite von Lisa-B ist online:  www.lifelike-figures.com

Dieses Webprojekt wurde mit dem WordPress Blog-System realisiert.  Dazu wurde ein Template entwickelt, um die speziellen Layout-Funktionen zu realisieren. Die Info-Seite enthält Unterseiten mit animierten ‘Popups’ (Pop-ins?)

Den Kern der Seite bilden animierte Bildergalerien zur Darstellung des Portfolios von Lisas Arbeiten.

Lisa Buescher Webseite


Valid CSS!

Valid XHTML 1.0 Transitional

Neue Plugins im Synoptx-WordPress-Paket

comments Comments Off on Neue Plugins im Synoptx-WordPress-Paket
By , April 6, 2011 14:30

Bei der Entwicklung einiger WordPress-Internetseiten ist uns aufgefallen, dass diesem CMS ein paar Funktionen fehlen, die (inzwischen) wirklich jeder verwenden möchte.
Wir haben daher diese beiden Module entwickelt und integrieren diese von nun an neben weiteren Plugins auch in unser Standard-Wordpress-Paket:

Social Media Buttons
Facebook, Twitter, Xing, Delicious, MrWong, Linkarena und viele weitere Icon-Links als frei konfigurierbares Widget.

Metatags Plugin
Das WordPress System bietet nur die Möglichkeit, den Seitentitel mit dem Titel des Artikels zu versehen, aber es fehlen Felder für Keywords und Beschreibung, sowie die Möglichkeit, für jede Seite individuelle Werte zu setzen.

Dieses Plugin ermöglicht die Bearbeitung dieser Metatag-Felder für jede einzelne Seite und jeden Blog-Artikel:

  • <title> – Titel der Seite (wird in Suchmaschinenergebnissen angezeigt)
  • Description – Beschreibung
  • Keywords – Stichwörter

Das Plugin bietet die Möglichkeit, diese Metatags für beliebige Sprachen zu setzen und diese im Template-Quelltext zu integrieren.

Open Source Release
Beide Module sind Eigenentwicklungen von Synoptx.net und werden in Kürze auch als OpenSource (GPL Lizenz) veröffentlicht.

Icecast, Rails, ntop, etherpad,… via Apache Webserver: ProxyPass

comments Comments Off on Icecast, Rails, ntop, etherpad,… via Apache Webserver: ProxyPass
By , January 12, 2011 01:23

web services logoA quick tip, how to map web-apps on random ports to the main apache webserver. This way you can run these services on subdomains or sub-directories and support SSL encrypted  https connection, even if it is not directly supported.

Take care to not open a proxy for everybody or it can be abused by spammers. “ProxyPass” combined with “ProxyRequests Off” is save.

If the original port is not used anymore, it can be closed in the firewall. Only for the icecast stream it is s useful to keep :8000 open. By mapping to an internal IP a address of a virtual machine, you can also forward to vservers.

The admin webinterface on /admin/ can be redirected by mod_rewrite to a secure SSL connection.

Example: Icecast ProxyPass to map webinterface on port 8000 to apache subdomoain (port 80)

<VirtualHost *:80>
   ... # your vhost here: ServerName, Logs, etc
   ...
   # Proxy ACL
   ProxyRequests Off
   <Proxy>
      Order allow,deny
      Allow from all
   </Proxy>
   # Proxy directives
   ProxyPass / http://192.168.1.7:8000/
   ProxyPassReverse / http://192.168.1.7:8000/
   ProxyPreserveHost on

   # redirect /admin to https:
   RewriteEngine On
   RewriteRule /admin.*  https://tv.example.com:443/admin/ [R]
</VirtualHost>

Example: Icecast ProxyPass to map admin webinterface on port 8000 to apache subdomoain (port 443)


<VirtualHost *:443>
   ... # your vhost here: ServerName, Logs, etc
   ...
   SSLEngine On

   # Proxy ACL
   ProxyRequests Off
   <Proxy>
      Order allow,deny
      Allow from all
   </Proxy>
   # Proxy directives
   ProxyPass / http://192.168.1.7:8000/
   ProxyPassReverse / http://192.168.1.7:8000/
   ProxyPreserveHost on
</VirtualHost>

MirrorBot Video – Moving Projections Controller Interface

comments Comments Off on MirrorBot Video – Moving Projections Controller Interface
By , January 5, 2011 17:58

YouTube Preview Image

Part #02 of the MirrorBot Demo Video


** Video Installation Audio Visual Special Event n8 @Tacheles 17.12.2010

** Details of the Controller device:

  • Programs and Live Mode LCD screen interface

Part #01 of the Video, Installation in MIKZ, Berlin 03.2010: /2011/01/03/mirrorbot-video-moving-projections-in-action

Technical details: lab.synoptx.net/mirrorbot

Chaos Computer Congress Mirror – Videos of CCC Talks

comments Comments Off on Chaos Computer Congress Mirror – Videos of CCC Talks
By , January 5, 2011 08:07

There was some disc space free on a server and so we collected CCC Congress videos of the last years:

You can watch the talks directly in the brower

or start a player-program like vlc or mplayer with the http:// url

or download the file with “save as..”

MirrorBot Video – Moving Projections in Action

By , January 3, 2011 02:03
YouTube Preview Image

Demo Video of the “moving projection” video installation at Suchtfaktor elekto party in MIKZ, Berlin 03.2010
Monthly, every 1. saturday, also in 2011!

The “MirrorBot” is a Arduino minicomputer system to control the position of videobeamer projections. Two servomotors move a mirror in X- and Y- axis, which reflects the beamer image. The servos are controlled by a micro-controller with an LCD. It can play various movement pattern programs automatically, adjusted to the music speed by setting BPM or ‘live’ with the joystick and button.

Headsquatter VJs use it to move visuals around the whole dance floor when playing in clubs. Moving projections become a live instrument! 😀

more info in older posts :

lab.synoptx.net/2010/03/13/mirrorbot-v3-in-action

Music by droidsystem.com many ThanX!!

Video: PONGuino – Arduino & S65 Shield – 2 Player MiniGame

comments Comments Off on Video: PONGuino – Arduino & S65 Shield – 2 Player MiniGame
By , December 27, 2010 04:55
YouTube Preview Image

Here is a video about the PONGuino game for 2 players on a minicomputer with mobile-phone display and joysticks.
The box contains an Arduino 2009, a S65-LCD Shield and a gamepad from an old playstation 1. It runs autonomous on 9V battery.

The device is originally built for the “Mirrorbot” moving projection system [ lab.synoptx.net/mirrorbot ], but the pong-game-code from www.codetorment.com was perfect to test the LCD and – really – it’s fun to play!

The system is just fast enough to play a game, but you have to take care, how many pixels and how fast you draw. There is no double buffering and just a serial line between arduino and screen……

more info in this post from 02.2010

Sorry for the low quality photo-cam recording.
The LCD is not bad in reality: You don’t see the pixels and the scratches are only on a transparent folie..





27C3 – Chaos Communication Congress PeaceMissions: Livestreaming at Vetomat & Samacafe

comments Comments Off on 27C3 – Chaos Communication Congress PeaceMissions: Livestreaming at Vetomat & Samacafe
By , December 26, 2010 23:22

It’s time for the CCC congress!!

Tickets are sold out, as usual, so Berlin-Fhain nerds prepared worm-hole access to the congress:

  • All day livestreaming of lectures
  • VPN access to the congress network

FHain  Peace Missions:

27c3-banner

WordPress Open Source Blog System
SynOptX Lab Theme