Centering a div in Vertical

comments Comments Off on Centering a div in Vertical
By , May 24, 2011 16:57

Sprachkurier.de : the website is made from another crew, but the owner asked me to center the website vertically in the browser, and voila´

the idea is to give a vertical dimension of an empty div of 50% to get the middle of the height, and a margin bottom negative of the value of half of the height of the content DIV that need to be centered. That means that the content need a fixed height to be positioned.

here the code

——————————-
HTML
<div class=”floater”> </div>
<div id=”content”>
Content here
</div>

CSS
/* floater is required to center the content wrapper in vertical*/
.floater {
float:left;
height:50%;
min-height:120px;
margin-bottom:-400px;
border:1px solid transparent;
}
#content {/*main wrapper centered thanks to the 2 properties clear and position*/
clear:both;
position:relative;

height: 800px
}
———————————
The content is vertically center using this simple method, that I found in this  CSS blog ; but also if was declared as cross browser method,  the result was not working so well: with Firefox that was sometimes not rendering the floater as emptx div so that the content was jumping around, I  implemented the code adding an “invisible” border without background color to don´t let jump the div  and a min-height to preserve visibility on different screen size.

To make the border invisible I did not specified the color, or the color could be the same of the background.

NOW is a bit more cross browser 😉

If you work on small monitors and you are unsure if is working because the website is anyway higher then the browser, is enough to use CTRL –  to make the website proportions smaller.

Valid XHTML 1.0 Strict

Those are the regular cross browser tests we make : Internet exploder 6, 8, 9; Safari, Chrome, Opera, Firefox

on linux, mac and pc.

Monitors dimensions: 1920×1080, 1280×800, 4:3 and 16:9, netbook and Sony Ericson mobile Walkman and Android mobile phone
Nevertheless after we used our machines we let run some test on this web utility http://browsershots.org/

———————————————————————————————————

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

Blender video editor

comments Comments Off on Blender video editor
By , December 21, 2010 02:56

I m producing a video in Blender so thats my live report, this tutorial will be corrected and make it bigger in the future.

WORKSPACE

To start lets enter in the windows setup for video editing: drop down menu and choose the number 4th : SEQUENCE

Strange that Blender dont use the standard names, like footage or clip, using strip instead.

blender video add fxEFFECTS

Select the strips you want to apply the effect to and press spacebar to see appear the menu, then click on

[ADD] -> effect -> Add

That will create a strip that is your effect, with the length of the strips intersection, right above the selected video strips,

move the mouse around to decide on witch level is positioned.

The effects strip can be resized like any other video strip.

Frequently unfortunally is not possible to add an fx contemporary on 3 strips or more, only 2 strips are aloud.

But there are many effects possibilities and each effect has different setup.

TRANSITIONS

“FADE IN / FADE OUT”
To fade is not so intuitive, but give you the possibility to fade not only to black or white as normal video editor, you choose the background color, so at first
You can use it for fade in and fade out between to clips, ehm Strips in Blender terms, Fade from a strip the first selected to the other, the last selected

Gamma Cross

Add Sequence Strip

select the clips and press (spacebar) -> Gamma Cross

Now you ll need to add a efx strip called
[ Color Generator ]
and then Setup the sequence strip

Color Generator fills the frame with whatever color you select (via a color picker in the buttons window). You can make it black, put it in a channel over your video strip, then select both strips and add a Cross on top of them to dissolve between your strip and the Color Generator. (http://www.thriceberg.com/2010/02/09/editing-with-blenders-vse/)

SHORTCUTs
Remember that the standards shortcut are the first Letter of the action you need.
Frequently in Blender the commands are compressed into 1 shortcut, and not into two different actions.

a -.-.-. it means ALL
select / deselect all clips
In this case what happen clicking A it depends if the strip is already selected or not.

G .-.-..- grab move
move the selected files
for example to move all the strips together: (a) then (g)

C.-.-.-. copy
copy that automatically paste

K is CUT HARD
pratically KUT! coming back on the idea that normally the first letter of a command is a shortcut, is not always like that, but in this case nothing is better then K shortcut, when C is copy combined with CTRL,

mouse usage:
the mouse is sensible to dynamic that means that you click and move the mouse to activate some actions
right click hold press + mouse move it means G (grab / move)

TEXT editing
Drop down menu to enter in model windows setup

ADD (Spacebar) -> text
and then edit Mode to change the text

(http://wiki.blender.org/index.php/Doc:Manual/Modeling/Text)
(http://de.wikibooks.org/wiki/Blender_Dokumentation:_Text)

Rendering FRAMES
press [Render] then press F3 save jpg as

RENDERING VIDEO

“…

In order to render the videos, you have to select the [Do sequence] option right below the [ANIM] in the Scene (F10) menu. The output file(s)

will create in the directory set in the first box of the output group.

By default, blender will render each frame into a separate jpg file, but the output could also be an avi file. To do this, you chose AVI codec in the drop-down list of the format group. In this case, the name of the output avi file will be taken from the text entered in the output box.

For instance, if it says C:\Users\Render\test the output file will be named test0001-0250.avi and created in C:\Users\Render. 0001-0250 reflects the frame range, which of course can be also modified by just entering the desired values for the start and end frames of the animation.

…” ( http://codeanticode.wordpress.com/2008/04/13/using-blender-for-video-editing/ )

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

Video Editing with Open Source

By , August 14, 2010 11:35

After 4 years in the Open Source scene I m finally able to generate a complete video with Open Source Software.
Was an hard work, many video editors are started but none is complete.
Guys cooperation! please!
Do not try to do only your own stuff, if there are some developer reeding this post, please start to develop Blender features.
YES after my testing, Blender is the best Video Sequence Editor the open market propose:
– stable, Blender dont crash [ if you dont change the CPU usage settings and at the same time rendering (:P) ]
– has many functionality and easy to add FX when you know the technical words that the software use
– Is planned to render, so the dimension of the output has completly individual setup. You can choose between standard formats, but also choose the dimensions of the video in pixels AND the dimensions of the pixel individually, mix up the settings, things that in Kdenlive & co I did not found, there are in Kdenlive many choises between different format and pixel dimensions, no more paranoia about strange web video format, you can make your video with your own custom format
– with particles engine and video texture can be used for post production and compositing like After Effects
– Titles and credits, the text is already editable in EDIT MODE
– Good windows Customization, you can combine the editing windows, but you can choose between 5 view mode in a quick drop down menu, again also the drop down menu has ADD NEW to personalize.

I tought was banal speak abuot Blender video editor but then I have recognize that not all the nerds are informed about, then soon I will post more info about video editing on Blender.

All the other free software I tried have some gap to fill.
There is no chance, I can proudly say
I m a Blender!

Italian article that thinks the same as me:
http://blenderedintorni.blogspot.com/2006/12/situazione-del-video-editing-in-linux.html

Eco-sostenibile search engines

By , August 13, 2010 21:06

Snufu suggested Ecosia on this Blog

Search engine test

Ecosia.org

—————————-

I was looking  for:

(Gitschiner strasse 61)
At first it gave not such a good result compared to other search engines.

1.wrong result
2.wrong result
3.wrong result
4.wrong result
5.wrong result
6.ABC-ETech
robot portal:  http://www.pointoo.de/poi/Berlin/Abc-etech-775582.html
7.wrong result
8.ABC-ETech
www.abc-etech.de
robot portal: http://www.berlin.city-map.de/01110000/abc-etech
9.wrong result

but as second chance I searched a Blender Video Sequence Editor
The research gave better quality
then I decided to give a chance to Ecosia to be my eco “sucht-machine”
and I have installed the add-on for Mozilla many browsers are compatible

znout.com
I asked Znout the same questions :

(Gitschiner strasse 61)
gave medium results, also if reacts super-fast, the results are 7 matching on 10

(Blender video sequence editor)
full prestation fast and correct

But it anyway uses the google search engine.
———-
another one to test: Forestle.org

Linux gfx Workshops

comments Comments Off on Linux gfx Workshops
By , August 13, 2010 16:36

Linux Works, in cooperation with Bruecken Schlaeger and Synoptx present

graphic design with linux – skillsharing workshops in Berlin!

each Tuesday from 21 September on

in Kreutzigerstr.19 in F’hain in Soned e.V office

starting at 18.00

* migration to linux software

* photo and image editing (GIMP)

* using vector graphic software (Inkscape)

* film animation

* short films, discussions

* and more !

We are looking forward to people who want to come regularly and work on a common project that we will develop together!

The workshop is based on donations.

We will publish what we produce under Creative Commons License.

more info soon on

friedrichshain.homelinux.org

search engine comparisation

comments Comments Off on search engine comparisation
By , August 13, 2010 02:50

I have let it run a question  “gitschiner strasse” in multiple search engine, just to check  REALLY  what was happening on a Berlin Address
and combine it with my curiosity to run a quality test

Google
————————————–

(Question:  Gitschiner 61)

1.Flow tech GmbH
beim “Silber Mitglieder” von einen SportVerein
http://www.mtv1860.de/handball/index.php?option=com_content&view=article&id=252&Itemid=147
2.Beim Robot-Portal: http://www.cylex-telefonbuch.de/suche/deutschland/bundesland-berlin/stadt-berlin/l-0049-plz–strasse-gitschiner%20str._name–s1_filter-0.html
ABC-ETECH Inh. Dietmar Brillski Elektrotechnik (0) 0 5
beim Robot-Portal: http://www.klicktel.de/branchenbuch/abc-etech-inh-dietmar-brillski-elektrotechnik,berlin,4617500,QOIVZNWW92A5C7.html
3.Zebra Comunication Gmbh
info@ethno-trade.de
ethno-trade.de
Beim Schlechte Evil Portal Pop up Bastards links:
http://web2.cylex.de/firma-home/zebra-communications-gmbh-2352671.html
4. http://www.firmendb.de/firmen/6302631.php
beim Robot-Firmen Portal with no firma signed in (:|)
5.K. Mumcu
beimbeim Robot telephone catalogue

Yahoo  ??
——————

( Gitschiner strasse 61)

1.The first, Top, search result is wrong give the number 91 – Buahahah –
2.wrong result : strasse nummer 94
3.  wrong result  94
4.“Dreieck Funkturm (motorway Hannover-Nürnberg), urban motorway to Tempelhofer Damm – Mehringdamm – Gitschiner Strasse – Skalitzer Strasse – Warschauer Straße “
5.wrong result
6.….

(Yahoo…Gitschiner 61)
1.Youtube- Miss Moth
2.wrong result
3.wrong result
4. Zebra comunication
5. Tutorial diversion (miss moth
6. wrong result
7. http://reinhold-friedl.de/
8.” JANUARY 24
REINHOLD FRIEDL / PHILIP SAMARTZIS / MICHAEL VORFELD – inside piano, prepared electric guitar, percussion, electronics
8P, new loft Christopher Dell
http://www.zeitkratzer.de for information
(culled from Sarah Wong – danke!) “beim: http://www.chaindlk.com/community/index.php?topic=3422.0
9. wrong result
10. Robot route Map

(Yahoo failed the exame)
Aaargh I have used YahOO()()00°° !!!  I M DOING ONLY FOR RESEARCH, CHILDREN DO NOT DO IT AT HOME!
————————————————————————————————–

—————–

Answers.com
—————–
(Gitschiner strasse 61)

1.FE61
Offünungyeit 19:30 (jeden 1. und 3. Do im Monat)
Beim a sharing english website, human generated content, It specify on the page that in berlin they spaces are legal
http://www.qype.co.uk/lists/610322-Squats-in-Berlin
2.Musicians: Christopher Dell (vibraphon), Christian Ramond (bass), Felix Astor (drums) www.christopher-dell.de
Recent CD: DRA: DRAREAL (edition niehler werft 2004)
Christopher Dell, c/o Institut für Improvisationstechnologie,
++49 (0)30 6167-5351, Fax ++49 (0)30 6167-5351, cd@christopher-dell.de
Beim: Bundeskonferenz Jazz (German Jazz Meeting) :http://www.bkjazz.de/index.php?id=78
3.[24/1/2009] Berlin, Germany
new loft, 8:00 pm, free entry
Christopher Dell, Gitschiner str. 61, 10969 Berlin
Beim musicianßs site http://www.reinhold-friedl.de/

http://ecosia.org
—————————-

(Gitschiner strasse 61)

1.wrong result
2.wrong result
3.wrong result
4.wrong result
5.wrong result
6.ABC-ETech
beim robot portal:  http://www.pointoo.de/poi/Berlin/Abc-etech-775582.html
7.wrong result
8.ABC-ETech
www.abc-etech.de
beim  robot portal: http://www.berlin.city-map.de/01110000/abc-etech
9.wrong result

Ask.com
———————————————–

(Gitschiner strasse 61)

BTW NOTICE: Cool simulated pop up setup to turn off the search bar on the top of the blank page results for ever, in cookie, its Css styled not external js nasty-popup

1.“    March 27th, 2010, Villa Newman (Gitschiner Str. 61), Berlin, MISS MOTH: “Home Tour – the Answers to Solutions”
March 13th, 2010, Villa Newman (Gitschiner Str. 61), Berlin, Launching MISS MOTH       ”
beim : http://www.tutorialdiversions.org/1.html
a.http://www.youtube.com/watch?v=Uuwg9Fv-LAI
b.http://www.youtube.com/watch?v=0ZLM6atqEJ0
c.http://www.myspace.com/mistressmoth
d.qype → Fe61
e.Edition Niehler Werft
Music Label
http://www.christopher-dell.de/enw.htm
Beim: http://rateyourmusic.com/label/edition_niehler_werft/

———————————–

NO results:
—–

(CC http://search.creativecommons.org/ )

———
(Amazon . Gitschiner strasse 61)

————
(de.wikipedia no results / similar results)

well those last search engines are empty but are the engines that we can fit into….. then we will fill theme;)

Style to Sell

By , August 12, 2010 15:28

There are some tricks to have “style”

When your graphical production does not look harmonic || professional || complete, you have to work on your sketches and find the main style (like a corporate identity) that represents the project.

Colors & Light
The colors change, based on the ambient light where you watch them, that means  if you want to have a realistic effect on your illustrations you cannot use a warm gray and a cold gray in the same image, in nature that will not happen.
But you can use those gray variants  to create a surreal image for example.
Remember that the colors are influencing the mood, so use them with a meaning.
If you are working on web, search for the standard  colors for similar projects, because the meaning of the colors is really different in the different continents and the meaning changes a bit even between the European countries.

Background
The Background is really boring to make but really important to do.
Empty background is a ZEN solution, white for day, and Black for night. works only in ZEN context.
None color works as a single color in professional illustrations.
If you want to use one tone a good suggestion is to make a material background:
*  take many different white and trow them together on the paper
* take a brush technique and use one color, you will get a single color but with brushes signs, a bit of 3D

Minimize or exaggerate
When something does not convince you, here is the best trick to be used:
* minimize: take it out and delete it, minimize the objects  and the number of images helps to make the structure easier to read and be modeled.
* exaggerate: the other way is to take this not stylish component and repeat it, use it multiple times, even always.
For example you are not sure if a text needs to have a Outline color, you can take out the Outline at all minimize(), or make it fat, stronger color and repeat it for multiple text on the composition (exaggerate).

Harmonia and Elegance
Don’t be afraid, is easy. Everything around you can be represented by math, mathematics as convention to explain the world, Music is math based, and Art too. You can compose your images with math help, use the “guide lines”  to see clearly the position of your object on the page, to calculate the empty spaces … and remember Math,  Geometry, Perspective, Harmonia and Elegance are all the same thing !
z.B. Leonardo Da Vinci
The elegance is into clear lines, so if you use a Vector Program  smooth your lines or draw with a smoother plugin activated:
Inkscape  you can realize this in many ways; for example take the tool ->  [ EDIT PATH BY NODES ]  ; now click on -> [ Make selected nodes symmetric ]
Elegance has few lines, not many particulars, like an Armani suite 😛
Harmonia is based on the cycle of the objects, how and how many times the object is represented.
If there is an object on the left and on the right is empty, that means the emptyness has a meaning, when there is no meaning make full the right side with something that balance the left content.

In history of art the idea of composition is always present, every artist uses a personal way to do it, but many people use the 3,14 rule, go check how the greek temples were built, how Eisenstein decided the video Editing of “Panzerkreuzer Potemkin”, how  Bruno Munari plans his graphics design.

Probably I will be banned from many Graphics websites after this post, because those tricks and tips are the precious knowledge of who work and study ART || GFX

but you know what? lets support and produce Evolution: OPEN SOURCE, OPEN MIND, NOT COMMERCIAL, SHARE ALIKE

Alice Z Bognetti

Firefox Firebug plugins for designer

comments Comments Off on Firefox Firebug plugins for designer
By , August 4, 2010 16:06

Well supercool plugins for designers arrived fresh on FireBug

Pixel Perfect
Add the layout design in alpha transparency directly over the website in the browser.

CSS usage
Check which css properties are actually called from the code and applied. NOTICE: not everythin inactive is not used, it analyzes only the current page

(I love Firebug!)

WordPress Open Source Blog System
SynOptX Lab Theme