- Learn
- Guida Ruby On Rails 2
- Immagini, JavaScript e fogli di stile
Immagini, JavaScript e fogli di stile
- di Luca Bozzo
Le viste di norma utilizzano differenti asset per la corretta visualizzazione della pagina HTML (fogli di stile, immagini, file Javascript); Rails mette a disposizione una serie di tag specializzati per l’inclusione di questi asset nella pagina, e prepara una serie di cartelle nelle quali depositare i relativi file.
Durante la creazione dello scheletro dell’applicazione Rails sono state preparate alcune cartelle dedicate ad ospitare immagini, javascript e css:
public/images
– per le immaginipublic/javascripts
– per i javascriptpublic/stylesheets
– per i fogli di stile
L’applicazione di prova che abbiamo creato contiene già alcuni file all’interno di queste cartelle: public/images
contiene il logo di Ruby on Rails che appare nella schermata di benvenuto, public/javascripts
contiene i file del framework javascript Prototype (integrato in Rails) e public/stylesheets
contiene il foglio di stile scaffold.css
, generato automaticamente dal comando scaffold
utilizzato per la creazione della risorsa Bookmark
.
Depositando immagini, javascript e fogli di stile nelle rispettive cartelle, abbiamo accesso ad alcuni comandi dedicati alla loro inclusione nelle viste.
Supponiamo di aggiungere alle nostre cartelle una immagine dal nome immagine.gif
, un file Javascript dal nome javascript.js
e un foglio di stile dal nome stile.css
, ognuno nella cartella predisposta per il diverso tipo di file.
Per includere l’immagine è possibile utilizzare il comando:
<%= image_tag("immagine.gif") %>
che produrrà il codice HTML:
<img src="immagine.gif" />
È possibile specificare alcuni attributi tipici del tag <img>
, come alt
, width
, height
:
<%= image_tag("immagine.gif", size => "16x16", :alt => "Immagine") %>
produce il codice HTML:
<img src="imagine.gif" width="16" height="16" alt="Immagine" />
Per includere il file javascript è sufficiente inserire il comando:
<%= javascript_include_tag 'javascript'%>
Per includere il foglio di stile possiamo invece utilizzare il comando:
<%= stylesheet_link_tag 'stile' %>
Per il tag di inclusione del foglio di stile l’opzione :media
permette di specificare il media al quale il foglio di stile è dedicato; inserendo il codice:
<%= stylesheet_link_tag 'stile', :media => "print" %>
Si otterrà il codice HTML:
<link href="stile.css" media="print" rel="stylesheet" type="text/css" />
È possibile organizzare i file in cartelle e sottocartelle, ad esempio creare una cartella images/avatars
, e specificare la sottocartella nel tag:
<%= image_tag("avatars/immagine.gif") %>
Se vuoi aggiornamenti su Immagini, JavaScript e fogli di stile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Event driven game engine con AngularJS
Mettere insieme direttive custom e servizi per implementare un motore per giochi event driven/turn based. Sviluppato con AngularJS 1.x, ma […]