Category: WebDevelopment

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>

Science meets Art – new Website released

comments Comments Off on Science meets Art – new Website released
By , August 29, 2010 04:17

www.sciencemeetsart.net

.. is a project of berlin based artists and university scientists in cooperation with prohelvetia.ch

Aritsts and Scientists colaborate for some weeks and present the results in an excebition.

They are going to post their latest results in this new blog during the next weeks: sciencemeetsart.net/blog

If you are based in berlin, checkout the events: Science meets Art —  Pilotprojekt Termine


Projekte

Ping Qiu

Web-Administration und Projektkoordination

bees&butterflies. artists in (e)motion, Carola Muysers

Grafik
Synoptx Webentwicklung, ZBognetti,  www.synoptx.net

Programmierung
Synoptx Webentwicklung, www.synoptx.net

Beratung / Suschmaschinenoptimierung
Synoptx Webentwicklung, www.synoptx.net

btw.: Have a look to this blog for more cultural berlin info: www.berlin.woman.de

Scroogle.org Anti Surveilance Searchengine

By , August 28, 2010 22:35
Scroogle Cookie Killer

Scroogle Cookie Killer

I use this google (TM) frontend since long time.

By using this site (as a ~proxy), google (TM) does not receive your cookie and cannot track your behavoir, as they normally do over long time periods. Scroogle stores the logs 48hours, but without IP. I just don’t find the info page..help!

Use this this link for your homepage and you will find a comic strip with info about Google (TM) every time you scroogle!

Datenschutz und Web 2.0 – Heise Artikel Serie

comments Comments Off on Datenschutz und Web 2.0 – Heise Artikel Serie
By , August 28, 2010 14:27

Nächsten Monat wollen wir bei der Korrupta Hackers Lounge im Samacafe über dieses Thema informieren.

Dazu passend hier einige interessante Artikel aus der CT — komplett online verfügbar!

Datenschutz und Web 2.0 – Heise Artikel Serie

Color Scheme Generator

By , August 15, 2010 11:28

I personally prefer to choose the Color Code by myself but when you suggest multiple sketches can be an help to dont repeat yourself.
the best tool is free to use on-line:
colorschemedesigner
with Html / Css / text / ACO (photoshop palette) / GPL (Gimp palette!) generator to save the color schem

Linux tools:
Firefox Plugin: Palette Grabber 0.4.1 [testing now come back visit us to know more!]

http://registry.gimp.org/node/15833 [Python plugin!]

AGAVE
ich spiele gerade mit diesen color code generator Agave
Agave is nothing special is only 1,262 kb big

I have found a Python plugin to let Agave run in Gimp ::
Color Scheme Helper for Gimp

A Python plugin that start the color scheme designer Agava for creating a new color scheme. The created color scheme can be saved as a Gimp color palette and loaded into Gimp.
In the software engine the only pretty idea is the contrast between text-background calculation…
changing the color automatically shows if is better a white or a black text on top of this color: Agave calculate if the bg color has a number higher then 555555 THEN the text is black and the opposite when the choosed gamma color is darker then 555555 the text will be white.

I m using AGAVE  as teaching tool, to show direct example of text contrast to graphic design students.

#tk: based on math – hmm naja interesting algorithm anyway … hehe ya should generate for special things like: body-font, screen-bgcolor, … i want some faders that automagically apply like livestyle to the site 😀 with correct pi and phi equations.

Color Scheme Generator version 3.51  has many new features!

The preview page I dont really like it use the colors in illogical contrast with the background

Timetracking Linux and Web Tools

comments Comments Off on Timetracking Linux and Web Tools
By , August 15, 2010 04:04

Here’s a comparison of some programs in debian/ubuntu repositories, that help to keep track of your worktimes

KTimetracker
This is in the Debian and Ubuntu repositories. it is programmed for the KDE window environment, but if you have all the KDE libraries already, just run this in a terminal:

wait! update first

it’s best practise to update the repositories before installing something, to get the latest versions:

sudo apt-get update

btw: sudo is only required in ubuntu, in debian type ‘su’ to get root access

sudo apt-get install ktimetracker

++
+ Nice and simple interface.
+ Timers
You can start and stop a timer when you begin and end a working session so you get the exact time.

+ It can even watch your desktops, including the virtual ones, so you can put all your work windows for example on desktop 2 and switching to 1 is enough to do something else and stop the counter. you will wonder about the short times it tracks (without mailchecks, etc.) !

must test the export..

For me this wins, because of the desktop tracking and  (sub) timers!


Gnome Time Tracker

Installation in Debian / Ubuntu:

sudo apt-get install gnotime

++
Nice interface with description and “diary” textfields. Nice list of projects and timers to count worktime on a daily basis are integrated.


Some things in the interface are broken or not understandable: export does not allow to select a file, maybe something must be created first?

Subprojects? must test..


Tine2.0 Web Groupware

++
Nice webinterface. Besides Todolist, Calendar, CRM and few more modules, a Time-tracking tool is built into this web groupware.

+ So called “Time-accounts” represent the different projects. You can add “time-sheets” to these projects for every session or ideally the hours of every day. There are filters to show only one project or a relevant period or user. You can save these filter options as a favorite view. That’s really cool and flexible! One problem is, that you cannot redefine the default favorite, which it show at first.

+ Tine can store € per hour, “billable” and more billing infos, so you it automatically calculates the full time and price of a project.


There is no counter to start and stop the session times. You can only enter the periods, after you finished the day work. Its useful to keep track of the works of a team, but if you want to track the exact times, you need another timer-software and enter the periods from there to tine  :-/

Must test:  Exports!   It ~should~ export .ods, which would be reaaaaally helpful to present the time-sheet to clients directly or put it in a bill! But maybe i have to fill a bug report on that..


eGroupware

Is a good, old PHP web groupware with many, many modules. The project module interface is not easy to understand, but when you get it, you can even use time counters online.

++
Many functions in the projects module,…


EGroupware is a huge system, only for timetracking you do not want to install it. There are many options to setup, specially if there is more than one user, it gets really complicated to give correct permissions to everyone.


OpenOffice Table with Formulars

still the easiest and best solution?

++
+ Table calculation software offers a nice overview with dynamic calculations: Press [F2] in a table cell and you can enter formulars for calculation. This way, you can, for example, enter exact minutes and get hours by [cell] * 60.

+ In OpenOffice Writer you can keep track of times in a simple table inside a odt text-office document. No need to use Calc, the Table calculation

Also the other programs offer ways to enter billing info like € per hour.


– Teamwork? Its not easy to work together on stupid office documents. They are practically always locked by other users 😉

.odt file coming soon..

WordPress Open Source Blog System
SynOptX Lab Theme