Category: WebDevelopment

Designer Work Tools 2013

comments Comments Off on Designer Work Tools 2013
By , November 9, 2013 15:33

I can already complaiine that none of the tools for live CSS editing, support SASS or LESS  (or other pre processor).

But they speed up your life so much we cannot complaine longer.

CSS updater

FireBug plug in http://www.cssupdater.com/
Prerequisites: Adobe Air, Firefox and minumum FireBug

Style Editor 1.0

https://addons.mozilla.org/en-US/firefox/addon/style-editor/?src=api
Requirements: Firefox 12.0 and later
Ma con Firefox 25.0 non compare il menu in right click

Synoptx LiveStyle

Propertary plugin build in PHP and Javascript is a multiplatform solution, adaptable for different CMS: WordPress Drupal Joomla. is the direct son of the propertary Spacecake CMS of the Web and Software Developer SynOptx.net

Colorpicker

What a waste Filezilla Colorpicker it copy just the color hexe code that are wrote in the css code

Colorzilla

Not only the best colorpicker on add ons market but also a precious tool for gradient generator!
Colorzilla pick also the value color from images, jpg… converting in webstandard Hex format.
If I can say something the only bad thing will be to have another standalone on the tollbar of my browser.

Metadata e archivistica

comments Comments Off on Metadata e archivistica
By , November 6, 2013 14:53

Arkiwi é un archivio Audio/Video che si basa sui metadata per mostrare le informazioni dei files. Le Metatag sono informazioni riguardo il contenuto come il titolo o l’autore del brano che vengono incorporate direttamente nel file. Il sistema dei metatag viene usato comunemente per gli audio player, ad esempio il titolo metatag viene visualizzato nei players, in mancanza di cui si legge il nome del file che spesso é oltretutto impresentabile perché scritto in maniera criptica o autoreferenziale come “oei_11.ogg”. Nella messa in onda da una webradio i metatag diventano ancora piú importanti, visto che la selezione musicale viene ascoltata da persone che non sanno il nome di ció che ascoltano, l’ignoto ascoltatore legge: oei_11.ogg e spreca un secondo a cercare di decifrare. Se si fosse usato il campo Titolo dei Metatag “Otra Europa Info 11”, il display avrebbe mostrato il nome corretto e comprensibile, inoltre é estremamente comodo per il DJ poter leggere informazioni riguardo il brano direttamente da dentro il software di riproduzione musicale. Continue reading 'Metadata e archivistica'»

wtf/ pro minute on unbelievable levels

comments Comments Off on wtf/ pro minute on unbelievable levels
By , October 20, 2013 19:45

We got to work on a website were already 4 different groups (individual and studios) worked on.

Was a mess, we are collecting the best absurd thing from the code.

Have fun!

h2:first-letter {position: fixed;}

How to write not comments, comments are made to help understand, not playng role games while coding :

#conttopl .field-title {/*moved 2 line 832*/}

HTML5 Video

comments Comments Off on HTML5 Video
By , November 26, 2012 17:00

So, here we are, with the hope to kill Adobe flash player from our carrier.

The only chance ATM (at the moment) is HTML5 video embed.

the compatibility does not seem to be so good:

  • MP4 opera 10.6 does not support this format
  • OGG/OGV  explorer 9 and safari 5 do not support
  • webM explorer 9 and safari 5 do not support

WTF!!! we can anyway integrate all 3 formats::

  • .mp4 = H.264 + AAC
  • .ogg/.ogv = Theora + Vorbis
  • .webm = VP8 + Vorbis

<video poster=”immagine.jpg”>
<source src=”esempio.ogv” type=”video/ogg “>
<source src=”esempio.mp4″ type=”video/mp4″>
<source src=”esempio.webm” type=”video/webm”>
<p>this text will be visualized if the browser do not support HTML5. Download the video <a href=”esempio.webm”>here</a>.

</p>
</video>

You can also insert controls command inside the VIDEO tag

controls adds a default video control overlay;

width and height: dimensions with preload:

start the video download in autorun or not with preload=”none”
u stop it specify a codec inside the SOURCE tag

<video autoplay=“autoplay” loop=“loop” controls=“controls” tabindex=“0” preload>

<source src=”movie.webm” type=’video/webm; codecs=”vp8, vorbis”‘ />

<video>

 VIDEO + JS
explorer 8 does not read the tags, there are some ways to add theme in js:
<script type="text/javascript">
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>
or  use the already done files used in the file html5.js
For an even better compatibility with Flashplayer < 10 the fallback flash object requires flv file, not mp4.

Linkografy

http://it.wikipedia.org/wiki/HTML5_video

http://www.w3schools.com/html/html5_video.asp

http://www.html5rocks.com/en/tutorials/video/basics/

http://www.youtube.com/html5

http://www.html.it/articoli/il-tag-video-di-html5/

http://thewebthought.blogspot.com/2011/04/html5-and-internet-explorer-8-not-good.html

codecs="vp8, vorbis"

UNRESOLVED WP Multisite bugs

comments Comments Off on UNRESOLVED WP Multisite bugs
By , November 7, 2012 07:17

This post is WIP

WordPress 3.4.1

Plug in: WordPress Importer

Missed categories
“Ho notato un errore nel blog.
Zbog mi diceva che postavo le cose senza aggiungere le categorie
in realtà, quando posto le robbe dal network mexico,
mette le categorie , una volta ripostate da li nella pag centrale nn compaiono” PkT

Ravanando nell’installazione multisito trovo che effettivamente le categorie del sito principale e dei vari sottositi non combaciano.
Al contrario di PkT io postavo dal sito principale e nel correllato sito guinea le Category erano scomparse.
Ma anche le stesse categorie con stesso settings, non vengono riconosciute.
Creandone di nuove non compaiono nei siti correlati…

Ho trovato molto interessante questo Blog post
http://halfelf.org/2011/dont-use-wordpress-multisite/
da dove traggo l’informazione che google e simili potrebbero leggere i post identici di un multisito come spamming, e far scendere di visibilità l’indirizzo del sito.
Quindi sarebbe meglio limitare il numero dei Post doppioni, meglio usare pagine che visualizzano tutti i post con le stesse category e tag.

Proprio ciò che non funziona!
proverei prima con una diversa plugin:

http://wordpress.org/extend/plugins/wordpress-mu-sitewide-tags

“This plugin creates a new blog on your server for all the posts on your site, much like http://wordpress.com/tags ”

CSS multisito
Suggerisco di dare un impaginazione standard, a tutti i siti nel network, almeno per quanto riguarda il box selector,
dato che se il post ha 3 foto in verticale una dopo l’altra affiancate dal testo grazie al posizionamento <align=”links”>
si perde il bordo vertical and horizontal settato nell’interfaccia.

Log in
altro bug se accedo dal sito principale, poi edito il post dalla dashboard del sottosito, e lo condivido sul principale non compare sul sito madre

Analyse zu Facebooks Datenbestand ÜBER DICH

comments Comments Off on Analyse zu Facebooks Datenbestand ÜBER DICH
By , October 29, 2011 00:34

highly interesting website on facebooks data collection  (en/de)

Analyse zu Facebooks Datenbestand ÜBER DICH

Hintergrund. Jede Person in der EU hat das Recht eine Kopie von allen Daten, die ein Unternehmen über die Person speichert, zu bekommen. Wie das geht findest du unter “Daten verlangen!”. Nachdem wir die ersten Antworten auf unsere Auskunftsersuchen angesehen haben, war klar: Das muss veröffentlicht werden. Wir wollen mit dieser Aktion Facebook transparenter machen und Usern eine Vorstellung von den Daten geben, die Facebook von uns speichert.

Facebook Privacy Policy

comments Comments Off on Facebook Privacy Policy
By , September 3, 2011 01:23

Facebook complains about heise.de code to protect privacy by a two click-step confirmation , before heise even published the news and the code!

The prob is, that each Facebook button sends user tracking data to Facebook, just by visiting the site, without clicking any ‘like’/’share’… button. Heise implemented a system, which requests a click-confirmation before sending any userdata to Facebook/twitter/../../../.

We have been waiting for this code since a long time and implemented it in a similar way on our own sites so we are very happy about heise.de fighting for our rights once again!

This story reveals the true intentions of FB once again: they veeery keen on tracking the complete surf history of $any web-user: they know $every page you visit!1!

A very simple profile of a web user is worth min. >10€ on the ad-market – for sure much more if you can deliver tracking data like that..

References:

http://heise.de/-1230906

http://heise.de/-1333879

http://heise.de/-1335658

Create favicon.ico on Linux in 2 links

comments Comments Off on Create favicon.ico on Linux in 2 links
By , August 14, 2011 19:24

1. Tutorial Image editing:

U can create the image as .png with the Gimp Software, here the tutorial:

http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp

Drupal interface did not like the.ico format directly saved from GImp, did not appear so I have saved a .png in Gimp and converted …


2. Post Image converting:

Post about converting .png to .ico with the Terminal on Linux:

http://steve.kargs.net/hosting/create-a-website-faviconico-with-ubuntu-linux/

Designers: Dont Panic !

If the lines of code make bleed your eyes, but you still want to work with Open Source Software … work with Linux developer or

get Ubuntu Studio optimized for Graphic Design, then all the tools are already include into your Operative System.

In the case you have all the tools:

you ´ll need to go into the directory where you have the png

$ cd Documents/design/logo/

and use just the last line from the article

$ icotool -o favicon.ico -c favicon.png

:first-letter pseudo-element for drop cap

comments Comments Off on :first-letter pseudo-element for drop cap
By , July 19, 2011 17:03

If you want the  first-letter  of a <p>aragraph to look like Drop Cap (old fashion newspaper style), with a bigger letter floated to the left every browser shows up something different.

The main problem is to align in vertical the letter to the top of the text,the property vertical-align apply on the first-letter pseudo-element only if the float is set to none, that is a waste, the target I want to reach is big Letter with text around.  if I dont float the results, it shows a line break after the first line high like the height of the first letter.

Mozilla Firefox is the only one understanding a margin or padding from the top, so thumb up for this browser.

The developer tools presented in other browsers than Firefox dont allow me to edit the CSS in live, in order  to see faster which solution I can take.  for the other browsers I used the edit & try option of http://www.w3schools.com

IE6

This pretty article http://www.satzansatz.de/cssd/pseudocss.html discusses the classic IE behavior for typo and spacing errors,  IE6 requires an empty space between the class/id name and the comma and a space between the class/id  and the {} to read the properties

SOLUTIONS: Lets fight the Browser compatibility

  1. Using spans: create a span around the first letter is the mostly compatible solution, frequently used in the past, but does not work for dynamic created content, at least it does not without a script that add the span automagically
  2. insert line height and work on margin-bottom!
  3. Use a specified font for the first letter , where the uppercases are positioned into the font editor 4 pixel down to the bottom line (simply crazy for mostly common low payed jobs!)

thanks to this article (http://www.users.globalnet.co.uk/~arcus/html/dropcaps.html) I noticed that the margin bottom on the contrary of the margin-top it works in many browser!

Important is also the line height which forces the browser to think about the first letter like if was height like the text.

the results are still really different for each browser, that terrifies me and the letter  is frequently higher than the line. but acceptable.

HERE THE CODE:
/*TODO check IE6*/

p:first-child:first-letter{
float:left; /* Make the text flow around the letter */

font-size:3em;
margin:4px 4px 0px 0px;/*for firefox that is the only one reading the margin-top*/
margin-bottom:-0.25em;/*for the other browsers, Chrome, Opera*/
line-height:0.97em; /*Adjustment mainly for IE , help position the letter on the same height then the text,  that has 0.97em line-height/
}

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/

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

WordPress Open Source Blog System
SynOptX Lab Theme