Scenario

We are Ruby on Rails developers (Silvio Relli and Matteo Papadopoulos) sharing the same office at Cantiere Creativo. As often happens in web agencies, for small or medium websites projects, the boss wanted a quick tool to setup a website, manage contents, reduce development time and costs.
Rails is our favourite framework but the admin interface is a big missing and build it from scratch all the time can take a while.

We didn’t want to use WordPress (max respect for this piece of software!) or others php based CMS.
Django could be the solution but we did prefer to use our favorite framework as we are more confident with it.

So, at the end, the solution is always the same: build your own CMS! Aaaarrrgghhh!!!! And we have done it! :)

We love to be part of the community and we absolutely wanted to share this project; we wanted Railsyard to be free and everybody can fork it and gives his contribution (or not!).

History

Railsyard is a CMS made with and for Ruby on Rails. It was born one year ago to build several websites for Cantiere Creativo, the company who invested on this project.

The first release of RY, built with Rails 2.3, was published on a GitHub repository but it was a first attempt written in “rush mode” (as often happens in software development).

What’s going on

In July 2011 we did release the second version of this CMS written from scratch in Rails 3 and Ruby 1.9.2 (but it can also run with 1.8.7). In August we made many commits of new features and debugs. This has been possibile thanks to a first project of a customer that is actually running in production. At the same time the community started it contribution (as hoped!) and @paul_spieker is actually a great contributor!

Features

From my point of view (front end designer), these are the main features:

• You can easily create own themes with your favourites tools (js, scss, sass ecc)
• Multilangs support for the whole contents and admin interface
• Has fews but usefull snippets ready to use
• It’s easy to build your own snippets for advanced personalisation
• It’s easy to design layouts and manage contents
• Has pages and articles
• You can manage meta information for each page.
• Has a really good WYSIWYG editor
• Has an intuitive drag and drop admin interface
• pretty urls and other seo-friendly features
• different user roles
• You have Rails behind and you can build your own controllers/model/views

A first public theme has been release in these days. It’s not so “beauty” and it’s called “rough“. We just wanted to give a first simple theme, extremely cleaned, with three different layouts (one, two and three columns); it’s a basic theme to let users to be free to personalize the css and design for a new own theme. It uses a responsive grid system (fixed or fluid) with an html5 markup, scss and jquery.

Next step will be e good looking theme just to show how Railsyard can be used with different templates.

Lot of features and good proposals are still in our mind and we are really excited of this tool that is growing up, day by day! Stay tuned, it changes quickly! Have a look and enjoy it!

I’m actually working on this project with @silviorelli

Update 9 november 2011

Following yesterday’s coverage of Railsyard on ruby5, here you can find some direct resources for tracking our progresses:

• official railsyard twittter account: @railsyard
• official project page: http://www.railsyardcms.org
• Fork on GitHub GitHub repository
• Cantiere Creativo (the lead agency)
• Silvio Relli twitter account: @silviorelli
• and finally, my twitter account: @spleenteo

E’ stato pubblicato oggi il sito http://www.lorenzopiggici.com dell’artista Lorenzo Piggici, compositore di soundtracks per spot commerciali per Nike, Uefa, Subaru, Alfa e molti altri.

Sul mio portfolio

Il sito è stato realizzato sulla base di un design statico che mi è stato fornito.

La richiesta da soddisfare (andando contro la regola fondamentale del web per cui prima esiste il contenuto e poi il modo di rappresentarlo!) era quella di far sì che il sito (pensato per una risoluzione di 1920 px) fosse visibile nella sua interezza indipendentemente da monitor utilizzato (escludendo smartphones).

E’ stato quindi realizzato un JS che “adatta” la griglia del sito web alla dimensione del browser, anche su resize. Il contenuto invece deve adattarsi senza ridimensionarsi.

Ho utilizzato la libreria Jquery Tools per realizzare il sistema di tab, lo scrollable della sezione media e gli overlay per la visualizzazione dei video. Per questi ultimi ho usato il Flowplayer per leggere in streming i file .flv

Il css è stato realizzato con un sistema scss per una gestione semplice e pulita delle classi.

Made with:

• html5
• css3
• jQuery
• jQuery Tools
• Flowplayer

This is not a “one time post”… it’s going to be updated in the next days. Any contribution is defenetly welcome!

CSS

Define the media screen size to override classes when the page is shown on ipad, iphone, android or desktop

• ipad landscape: @media screen and (max-width: 1024px)

• ipad portrait: @media screen and (max-width: 880px)

• smartphone: @media screen and (max-width : 620px)

HTML

Interesting notes on apple site

Meta Keywords to set the viewport for smartphone

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no" />

Tell IE to use chrome to render

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

JS

<script src="js/libs/modernizr-1.7.min.js"></script>

For Png problem in IE

<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->

Al contrario di molte conferenze a cui siamo da anni abituati, Better Software è un momento esaltante di estremo interesse per gli addetti ai lavori dell’informatica a cui interessa innovazione e qualità. Da non perdere!

Consulta il sito Better Software per scoprire il prgramam completo degli interventi oppure segui il canale twitter per tutte le novità!

Dal sito riporto:

Better Software è la prima conferenza Italiana dedicata allo sviluppo di software e rivolta a imprenditori e manager del settore. Better Software è un’opportunità per intrecciare relazioni durature con nuovi clienti e partner.

Il progetto nel mio portfolio: http://www.behance.net/gallery/Cantiere-Creativo-Web-Agency/1330777

La realizzazione del logo è stata completata grazie alla collaborazione con Luca Bonfiglio, uno dei proprietari. Il sito invece è stato realizzato grazie al framework RAILSGUN che è stato sviluppato da me e @silviorelli proprio all’interno della stessa azienda. Inoltre ho usato anche la libreria scss (spleen_scss disponibile su github) che ho creato proprio in occasione di questo progetto.

Il sito: http://www.cantierecreativo.net

Il sito è realizzato in html5 e css3 ed è compatibile fino alla versione 8 di IE.

Ho scelto un linguaggio diretto per i claim del sito. Per essere aggiornati coi tempi, il sito non è completo al 100% ma viene rilasciato step by step. I testi interno sono quindi provvisori ma questo non è una mia competenza! Mi sono invece occupato della relaizzazione del menù principale e dei claim interni.

Il sito è pubblicato sui server di Heroku e per il progetto abbiamo utilizzato Git.

Tencologie utilizzate:

• Ruby on Rails
• Railsgun
• Github
• Scss
• Html5 / css3
• Heroku
• Git

Per realizzare la base css di questo sito ho utilizzato la libreria SPLEEN_SCSS, (fork it on github!) ed è stato il primo grosso lavoro in cui ho applicato el nuove linee guida HTML5.

Certo riuscire a rendere la compatibiltà sulle versioni 8 e 7 di Internet Explorer non è stato uno scherzo; notti insonni e preoccupazioni crescenti ma alla fine, tra  colpi di javascript e mille tricks recuperati in rete, il sito è diventato compatibile (anche se sempre si possono trovare piccoli bug che via via verranno risolti!)

Sono stati usati vari plugin JQuery e non è potuto mancare il mio fido JQuery tools che ormai mi accompagna nei progetti web!

Ho usato per la prima volta Mercurial; essendo un amante di GIT devo dire che ho trovato i due progetti veramente simili, quasi indentici, ma rimango dell’idea che GIT sia più intuitivo o semplicemente, lo preferisco!

Devo dire che django è effettivamente un gran bel pezzo di software e che l’applicazione per l’ecommerce Satchmo è impressionante. Mi è risultato un po’ ostico riuscire ad entrare nel filesystem per effettuare l’overide del codice e poter capire come personalizzare l’interfaccia, ma grazie al prezioso aiuto di @dvd, mio mentore e programmatore del sito in questione, siamo riusciti a fare tutto!

Ne aprofitto per ringraziare proprio @dvd e @matteoscurati con i queli abbiamo passato romantiche serate in chat e Book Republic per il post di riferimento con tanto di citazione!

Strumenti/tecnologie usate:

• Html5 / Css3 / Scss
• Django / satchmo
• Jquery
• Mercurial

Compatibilità Browsers:

• Firefox 3 / 4
• Internet Explorer 7 / 8 / 9
• Chrome 9 / 10
• Opera
• Safari
• Lynx (browser testuale)

Il lavoro nel mio protfolio per vedere gli screenshot del progetto.

As always, when a new verison comes out, there’s the same annoing problem: extensions compatibility. I’ve been surprised to see that my favourites extensions were almost availables, with the execption of one of the most important for me: the delicious bookmarks saver.

Thanks to bart (http://www.gufp.nl/), who hacked the ext, I’ve got back this extension and I do wish to share this great news!!!

So, if you have the same problem, go ahead with the following steps:

1. Download the extension from http://www.gufp.nl/deliciousfirefox/
2. Press CTRL + SHIFT + A in your Firefox 4 browser
3. Drag the file you downloaded into firefox and it will install the extension as always.
4. Enjoy your delicious!

This is my delicious bookmarks page. Enjoy it!

Please, I beg you!

(in these days, Internet Explorer 9 and Chrome 11 have been released too); Please, I beg you, avoid to use Internet Explorer 6 / 7 / 8 in favour of a modern browser… you will only have an advantage of it and will help lots of webdesigners!

Cosa è successo?

OpenOffice è stato sponsorizzato da Sun Microsystem per circa 10 anni arrivando infine a vendere il progetto a Oracle. La comunità che da sempre sviluppa il progetto ha ritenuto quindi di estrema importanza creare una fondazione che potesse assicurare un futuro libero al progetto:  the Document Foundation.

Cosa succederà?

Fresca di giornata è la notizia che la distribuzione Ubuntu abbia scelto di sostituire la suite di Oracle con la nuova release LibreOffice 3.3 e questo aiuterà molto la promozione di questo progetto.

Nel frattempo ci sarà da diffondere la notizia (per questo ho deciso di fare questo post) per dire a tutti gli utenti di Windows, Osx o Linux che è arrivato il momento di provare questo nuovo prodotto che viene rilasciato in questi giorni alla sua versione 3.3.

Ovviamente, essendo il proseguimento dello stesso progetto, la compatibilità con quanto uno ha fatto finora (documenti .odt, ods, ,rtf ecc) è totale. Esattamente con OpenOffice, LibreOffice utilizza Open Document come formato standard.

Questa versione già presenta interessanti novità:

• la capacità di importare e di modificare i file SVG;
• la finestra di dialogo per definire formato e numerazione delle pagine sommario in Writer;
• un nuovo Navigatore per Writer; una migliore gestione dei fogli e delle celle in Calc;
• e i filtri di importazione per MS Works. In aggiunta, il pacchetto integra numerose estensioni, tra cui l’importazione dei PDF, la schermata di controllo delle presentazioni, e un migliore report builder
• la nuova gestione delle proprietà personalizzate, l’embedding delle font PDF standard nei documenti PDF
• la nuova font Liberation Narrow
• una protezione migliore dei documenti Writer and Calc
• la gestione automatica dei decimali per il formato “generale” di Calc
• 1 milione di righe in un foglio elettronico
• le nuove opzioni per l’importazione dei CSV in Calc
• l’inserimento degli oggetti in Chart
• le etichette gerarchiche delle assi sempre in Chart
• una migliore gestione del layout delle slide in Impress
• un nuovo dialogo di stampa più facile da usare
• più opzioni per la modifica maiuscolo/minuscolo
• le linguette colorate per i fogli di Calc

Quindi, visita il sito e scarica il pacchetto… sì, c’è anche in italiano! ;)

Se hai un sito, promuovi con questo bannerino!

Già da tempo si parla di HTML5 e CSS3. Da un po’ meno tempo si è cominciato timidamente ad utilizzare alcune funizonalità. Da ancora meno ci staimo prendendo confidenza (soprattutto con la parte CSS3). Che sta succedendo oggi?

É ancor più evidente lo sforzo che la comunità sta facendo per promuovere questa nuova versione del markup più famoso! Fiorefox 4 sta galoppando verso l’uscita, IE9 speriamo che abbui definitivamente l’era delle sue precedenti versioni, Chrome è quello più preparato al momento… e i desinger del W3 se ne escono con questa novità su cui alcuni storgono molto al bocca: il logo HTML5!

Trovo notevole anche il logo del CSS3 che richiama la struttura dello scudo integrando il numero di versione. E non mancheremo di trovare sempre più spesso il badge che indicherà le specifiche della pagina che stiamo vedendo. Certo non si può non osservare che sembra esserci un po’ un ritorno al web anni 90 quando sulle pagine web si trovavano messaggi sul browser supportato (e ci stiamo tornando), sulla risoluzione da utilizzare, sul tipo di html che si usa e per finire quello che prima era il contatore delle visite (vi ricordate shinystat?!) adesso è sostituito con i “like” di facebook o il numero di followers di twitter… sempre un contantore è!

infine, ogni buon marketing tecnologico che si rispetti non può mancare di offrire ai suoi geek l’oggetto del desiderio: la T-Shirt! E immancabile eccola qua, la maglietta HTML5 che da buon geek, non posso non avere! :)

L’unico vantaggio che finora vedo nell’usare flash è l’embed dei video in stile youtube. Cosa anch’essa che sta per tramontare!

Bene, oggi mi trovo a sperimentare un nuovo prodotto che tanto mi ricorda i tempi di flash 3, in cui imparavo a fare i primi keyframe nelle animazioni manuali per poi arrivare a fare interi siti super schizzatissimi in un solo frame con tutte le animazioni realizzate in AS!

Ecco che oggi si presenta questa nuova possibilità che sfrutta le potenti novità di CSS3 e HTML5

Sancha Animator permette di animare, fare presentazioni, piccoli filmatini ecc e tutto ciò che esce è html e css… ecco la vera lucuna di falsh in questi anni! niente plugin, niente software di terze parti ecc.

Certo ancora ci sono le grandi controindicazioni. Non tutti i browser supportano le stesse caratteristiche del CSS3. Infatti molte animazioni, con Firefox 3.6 ancora non si vedono. Dobbiamo ricorrere a Chrome o Safari i quali hanno implementato queste caratteristiche.

• Vedi le demo
• CSS3 info
• HTML5 info
• HTML5 alcune demo

Comunque, finisco la prova e commenterò, con un bel po’ di pregiudizi in partenza, lo ammetto!