Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Realizzare applicazioni per iPhone con HTML, CSS e Javascript

ottobre 16th, 2009 by Giovanni Caputo

Jonathan Stark, è uno sviluppatore web e mobile che ha scritto un libro dal titolo‘ Building iPhone Apps with HTML, CSS, and JavaScript’, online rilasciato con licenza Creative Commons Attribution-Noncommercial.

In questo libro viene spiegato come realizzare applicazione iPhone con tool standard, come ristrutturare tradizionali siti web in wep app Iphone,  utilizzare le funzionalità dell iPhone tramite Javascript come accelerometro, geolocalizzatore, vibrazione e suono.

Puoi leggere il libro da qui.

Category: Novità, Open Source, Programmazione, Siti Web | No Comments »

Interfacce grafiche wev per iPhone

giugno 5th, 2009 by Giovanni Caputo

CSSiPhone è una collezione di Interfacce grafiche web ottimizzate per iPhone realizzata da Michael Dick.

http://cssiphone.com/_assets/websites/3-2009_sundance-thumb.gif

Sarà,quindi, possibile prendere ispirazione per le proprie creazioni di applicazioni web per iPhone.

Category: Siti Web, Tecnologia | No Comments »

Posizionare elementi con css

maggio 14th, 2009 by Giovanni Caputo

Di seguito 2 tutorial che spiegano come posizionare elementi con i css:

http://tutshelf.com/the-art-of-css-positioning/

http://www.italianwebdesign.it/come-posizionare-gli-elementi-in-una-pagina-html-con-i-css/

La proprietà position per gli elementi html è stata introdotta nella versione 2 dei CSS dal w3c, il loro utilizzo è molto semplice e spesso vengono utilizzati impropriamente da utenti poco esperti per la realizzazione del layout.

http://www.italianwebdesign.it/wp-content/uploads/2009/05/makepos_before_11-300x255.png

Come vedremo in questo tutorial il posizionamento dei vari elementi richiede qualche competenza per non compromette la compatibilità del layout nei vari browser.

La proprietà position

La proprietà position ammette quattro valori: static, relative, absolute e fixed. Esistono grandi differenze tra questi quattro valori che occorre capire per utilizzarli al meglio.

Posizionamento statico

Il valore static è attribuito di default ad ogni elemento ed ignora qualunque tipo di offset attribuito all’elemento come top, left, bottom e right. Questo tipo di posizionamento non altera la posizione dell’elemento e viene implicitamente attribuito ad ogni elemento della pagina com’è possibile vedere in questo esempio.

Posizionamento relativo

Il valore relative altera il posizionamento di un elemento tramite un offset impostato con le proprietà top, left, bottom e right. Gli altri elementi della pagina non mutano il proprio posizionamento in quanto il posizionamento relativo non estrae dal flusso l’elemento ma lo colloca su un livello superiore.

In questo esempio possiamo notare come il posizionamento relativo collochi l’elemento sopra un elemento con posizionamento statico. Per gestire la sovrapposizione degli elementi è possibile utilizzare z-index con un valore inferiore a 0 (avendo gli elementi della pagina z-index con valore 0 di default) come in questo esempio.

Posizionamento assoluto

Il valore absolute posiziona un elemento in relazione all’elemento html o all’elemento genitore che ha un posizionamento diverso da statico. Bisogna ricordare che a differenza del posizionamento raltivo quello assoluto colloca l’elemento al di fuori del tradizionale flusso della pagina influenzando quindi il layout.

In questo esempio vediamo come due elementi con posizionamento assoluto si comportino in maniera diversa a causa del riferimento per la posizione.

Il primo div infatti calcola l’offset partendo dall’elemento genitore (con id relativo) mentre il secondo non avendo un elemento genitore con posizionamento diverso da statico prende come riferimento l’elemento html.

Occorre ricordare che Internet Explorer 6 e versioni precedenti presentano numerosi bug sul posizionamento assoluto. Una buona soluzione per risolvere queste problematiche è quello di settare un’altezza dell’elemento contenitore a 0 solo per Internet Explorer 6 e precedenti.

<!--[if lte IE 6]>
div{height:0;}
<![endif]-->

Posizionamento fisso

Il valore fixed estrae un elemento dal flusso e lo posiziona in base all’offset (specificato con top, left, bottom e right) in relazione all’elemento html.

Il posizionamento fisso può sembrare simile al posizionamento assoluto, ma non rispetta la regola del genitore con posizionamento diverso da statico, infatti utilizza sempre come riferimento l’elemento html, utilizzando il precedente esempio con questo tipo di posizionamento notiamo che i due div si sovrappongo in cima alla pagina.

Un’altra differenza rispetto al posizionamento assoluto è che ignora lo scroll nelle pagine con contenuto più alto dell’area visibile nel browser e mantiene la posizione definita in relazione alla finestra del browser.

In questo esempio vediamo come si comporta un elemento con posizionamento assoluto ed uno con posizionamento fisso in una pagina con molto contenuto.

Occorre inoltre ricordare che il valore fixed per la proprietà position non è supprtato da Internet Explorer 6 e versioni precedenti.

Autore: Mauro Accornero

Category: Programmazione, Siti Web | No Comments »

Tecniche di navigazione con CSS

maggio 11th, 2009 by Giovanni Caputo

. The Menu menu The Menu menu .

2. Pure CSS hover menu

Pure CSS hover menuView Demo

3. Matte CSS Menu

Matte CSSView Demo

4. CSS Blur Menu

CSS Blur MenuView Demo

5. CSS Navigation with Glowing Icons

CSS Navigation with Glowing IconsView Demo

6. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 imageView Demo

7. Navigation Matrix Reloaded

Navigation Matrix ReloadedView Demo

8. CSS Horizontal Menu

CSS Horizontal MenuView Demo

9. Woody CSS Menu

Woody CSS Menu.

10. Advanced CSS Menu

Advanced CSS Menu

11. Simple Yellow Tabbed

Simple Yellow Tabbed .

12. Vimeo-Like Top Navigation

Vimeo-Like Top NavigationView Demo

13. Apple Like Colorful CSS Menu

Apple Like Colorful CSS Menu

14. CSS Hoverbox

CSS Hoverbox

15. Big CSS Box

Big CSS Box

16. Simple CSS-based drop-down menu

Simple CSS-based drop-down menuView Demo

17. Two Level Horizontal Navigation in CSS

Two Level Horizontal Navigation in CSSView Demo Uberlink CSS List MenusView Demo

19. CSS-Only Accordion Effect

CSS-Only Accordion EffectView Demo

20. Tabbed Navigation Using CSS

Tabbed Navigation Using CSS

21. CSS Mini Tabs (the UN-tab, tab)

CSS Mini Tabs (the UN-tab, tab)View Demo

22. Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal StyleView Demo

23. List Into a Navigation Bar

List Into a Navigation BarView Demo

24. CSS Tabs with Submenus

CSS Tabs with Submenus

25. CSS Block Navigation Menu

CSS Block Navigation Menu .

26. XHTML & CSS Sprite Navigation

XHTML & CSS Sprite NavigationView Demo

27. XHTML CSS Tabbed Menu

XHTML CSS Tabbed MenuView Demo

28. Cool, Simple, Horizontal CSS Menu

XHTML & CSS Sprite NavigationView Demo

29. CSS Menu with Descriptions

CSS Menu with DescriptionsView Demo

30. CSS Hover Button

CSS Hover ButtonView Demo

Read the rest of this entry »

Category: Arte, Programmazione, Siti Web | 1 Comment »

Sliding Doors con CSS

maggio 9th, 2009 by Giovanni Caputo

Di seguito il link al tutorial sullo sliding doors.

[Ordinary example of CSS-based tabs, using flat colors and squared-off corners.]

[Stylized tabs using rounded corners and subtle three-dimensional shading.]

Tutorial

Category: Programmazione, Siti Web | No Comments »

Gallerie di immagini per il proprio sito web

maggio 8th, 2009 by Giovanni Caputo

1. Gallery 2

2. Zenphoto

3. Minishowcase

4. TripTracker

5. Dynamic Drive CSS Image Gallery

6. Ajax Photo Gallery

Legge dall’XML di  Picasa

7. SimpleViewer

8. Jalbum

9. Coppermine

10. Plogger

11. CSS Play

12. Polaroid Gallery

13. dfGallery

14. (E)2 Photo Gallery

15. AutoViewer

16. Smooth Gallery

17. Satellite

18. Hoverbox

19. Flash Gallery

20. HighSlide JS

21. Pixelpost

22. Script and Style Auto-Generated Photo Gallery

23. Postcard Viewer

24. Andrew Berg’s Flash Photo Browser

25. Flickr Photo Album for WordPress

26. Galleria

27. Lightview

28. Fancy Zoom

29. Imagevue

30. jpGalScroll Photo Gallery

31. nextgen gallery

32. Singapore

33. jQuery Cycle

34. Imagin

35. Phormer

36. Gullery

37. How to Build a Photo Gallery with CakePHP and Flickr

38. filebrowser

39. FAlbum

40. Slimbox 2

41. Animated JavaScript Slideshow

42. iPhotoToGallery

43. FrogJS Gallery

44. Create a Spectacular Photo Gallery with MooTools

45. Django-based photo gallery tutorial

46. Zen Gallery

47. folderblog

48. Duh Gallery

49. Original Photo Gallery

50. Making the ultimate dynamic image gallery in Flash 8

Category: Open Source, Programmazione, Siti Web, Tecnologia, tutorial | 1 Comment »

Creare animazioni con jQuery e CSS

maggio 2nd, 2009 by Giovanni Caputo

demo.
Flashy intro with jQuery animation

Header:

<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" language="Javascript" src="js/jquery.color.js"></script>

Html della pagina

<body>
<div id="container">
<ul id="navigator" class="fancy" >
<li><a class="c1" href="#">Design-Notes</a></li>
<li><a class="c2" href="#">Likes to be</a></li>
<li><a class="c3" href="#">Creative</a></li>
</ul>
</div>
</body>

CSS

body{
background:#000;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
}
a{
color:#fff;
text-decoration:none;
font-weight:bold;
}
#container{
width:600px;
margin: 100px auto;
}
#navigator li{
display:inline;
}
#navigator li a{
position:relative;
padding:2px 5px;}

Javascript

Leggere ciò che riguarda:  chained animation and unqueued animation animation.

var menu_over_colors = ["#ffffff","#55C7FF","#FF5A8D","#FFA324","#f453g5"];/* the colors you want to use*/
$(document).ready(function(){
$("#navigator &gt; li &gt; a").each(function(){
var over_color = menu_over_colors[$(this).attr('class').substring(1,3)];
   $("#navigator li a").animate({ color: over_color }, 200);/* animate text color for all text*/
  $("#navigator li+li+li a").animate({fontSize: '3em'}, 300);/* animate text of the third list*/
 $("#navigator li+li a").animate({top: '50px'}, 300);/* animate text of the second list*/
  $("#navigator li a").animate({left: '50px',}, 300)
  .animate({fontSize: '1.5em'}, 300)
  .animate({ backgroundColor:over_color }, 500,
function() {var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];/* point out the colors again*/
$(this).animate({color:'white',backgroundColor:over_color},300);});
});/* animate all text again with callback function*/
	$("#navigator &gt; li &gt; a").hover(
		function(){//over
			var over_color  = menu_over_colors[$(this).attr('class').substring(1,3)];
			$(this).animate({ color: over_color }, 500 );
			$(this).animate({ backgroundColor:over_color }, 500 );
		},
		function(){//out
			$(this).animate({color: menu_over_colors[0]},500);
		});
});





Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Tutorial per convertire file psd in html e CSS

maggio 2nd, 2009 by Giovanni Caputo

1.  The Design Lab: PSD Conversion

2. From PSD to HTML, Building a Set of Website Designs Step by Step

3.  Coding: Design Lab TV Styled Layout

4. PSD to CSS/HTML in Easy Steps – Part 1

5. Slice and Dice that PSD

6.  Converting a Photoshop Mockup: Part Two, Episode One

7.  Build a Sleek Portfolio Site from Scratch

8. Portfolio Layout – Learn To Code It

9. Converting a Design From PSD to HTML

10.  How to Convert a PSD to XHTML

11. How to Convert PSd to Html

12.  Creating a CSS Layout from scratch

13. PSD > HTML/CSS

14. Encoding a Photoshop Mockup into XHTML & CSS

15.  Css Template Tutorial

16. Portfolio Layout 4: The Code

17. Tutorial Coding a Layout

18.  Converting a Photoshop Mockup

19.  Killer site – From Illustrator to Xhtm to Drubal

20.  From PSD to HTML

21.  Coding a Car Sales Layout

Read the rest of this entry »

Category: Programmazione, Siti Web | No Comments »

Elenco di player MP3 in flash

aprile 21st, 2009 by Giovanni Caputo

Flash Mp3 Player


Molto funzionale questo Player Flash mp3 realizzato in AS2 con il quale è possibile navigare all’interno di svariati album musicali e aprire determianti raccolte audio.

Flash Mp3 Player


Si tratta di un Player Flash mp3 gratutio rilasciato senza sorgenti, con il quale è possibile personalizzare il layout grafico cambiando i colori e inserendo le nostre canzoni da file XML esterno.

XSPF Player


XSPF Player legge file XML che rispettano lo standard XSPF che è un formato appositamente creato per condividere playlist di file mp3 utilizzate nel Podcast ma anche nelle Radio online o nei siti che divulgano musica online.

Simple Flash Mp3 Player


Semplice e minimale player mp3 in ActionScript AS3 che permette di attivare una traccia audio alla volta tramite file XML esterno

iPod Player Flash


Player Mp3 con la grafica del famoso iPod di Apple + ghiera interattiva, con il quale è possibile inserire brani da una file esterno XML e personalizzare la grafica

Flash Mp3 Player


XSPF Player legge file XML che rispettano lo standard XSPF che è un formato appositamente creato per condividere playlist di file mp3 utilizzate nel Podcast ma anche nelle Radio online o nei siti che divulgano musica online.

XSPF MusicPlayer


XSPF MusicPlayer è un player Mp3 in Flash che gestisce il formato XSPF che oltre ai classici audio .mp3 riproduce indirizzi di stazioni radio

DewPlayer


DewPlayer è un player Mp3 in Flash molto semplice e intuitivo con un’alto grado di personalizzazione per i nostri siti web o blog

Read the rest of this entry »

Category: Programmazione, Siti Web, Tecnologia, tutorial | No Comments »

Design: Out Of The Box

aprile 18th, 2009 by Giovanni Caputo

Setup

Uilizzare un’immagine

Logo

HTML per la pagina:

<div id="container">
<img id="logo" src="logo.png" alt="Lee Munroe" />
</div>

E stili css come segue:

body{
background:#999999;
}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

Preview

Inside box

Posizione relativa per ottenere il risultato

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}
#logo{
position:absolute;
left:-15px;
}
Outside box

Read the rest of this entry »

Category: programmi, Siti Web, tutorial | No Comments »