Obviously I googled to find the answer but the web didn’t return the results I was looking for. Just tutorials on vector patterns, not on rasters.

It’s a long time I don’t use these kind of software as I work in web development or dtp with Photoshop and Indesign and I nerver loved AI too much. But I defenetly agree with whom says that it’s unusable and less intuitive for such basic things. I used to build vector graphics with Corel Xara that was so simple as amazing in ’90s… and was so easy to do a pattern with bitmap…

Well, 3 simple steps (when you know them!):

1. drag your image to AI
2. select the image and click on “embed” <- this is the trick
3. go to edit menu and click on “define pattern”, named it and click on “add to swatches”
4. now you can create our custom shape and drag your raster swatch on it. It will be filled with your btmap. Take care of resolution ’cause you cannot resize or distorce it (or I didn’t found how)

Hope this can help

Thanks to Luca Bonfiglio from @teamcantiere for his help on this issue!

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

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]-->

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.

Personalmente, avendo sviluppato dal 2000 parecchie applicazioni flash, ritengo ormai con l’avvento delle fantastiche librerie JS e dell’HTML5, ritengo “inutile” l’utilizzo che finora è stato fatto di questa tecnologia per lo sviluppo di siti web. Credo invece che sia ancora una buona piattaforma per sviluppare alcuni tipi di applicazioni specifiche e abbastanza rare che richiedono sia interfaccia grafica che di un buon codice.

Ancora, fintanto che lo sviluppo e la diffusione dei formati open per i video non sarà tale da poterne godere, l’utilizzo di flash per i video sembra essere una gran cosa… ma coma la mettiamo con la storia dei vari iPhone, iPad ecc? Adobe e Apple si stanno organizzando ma ancora di strada ne manca.

Sto anche valutando per un cliente la possibilità di usare Flex per la realizzazione di un CMS, cosa che ho già dovuto valutare un apio di anni fa con una certa frustrazione! Perchè utilizzare flash et simili per la gestione dei dati? Continerò questo argomento quando avrò più dati!

Intanto invito alla lettura dell’articolo citato.
http://www.smashingmagazine.com/2010/04/12/the-gradual-disappearance-of-flash-websites/