Articoli con tag web

switch_sprite_slidetoggle

jQuery e CSS – Sprite mapping (image slicing) technique

0
1 anno fa
Scritto da Rocco Musolino in

jQuery e CSS

Qualche giorno fa Youtube in occasione dell’evento l’ora della terra. Ha inserito nelle sue pagine, un interruttore per permettere di spegnere il “bianco” delle sue pagine, oscurando buona parte della pagina.
Una simpatica iniziativa per ricordarci di questo evento globale e spegnere le nostre luci per 1 ora. Iniziativa cui prendono parte ogni anno moltissime città d’America ed Europa, che puntualmente staccano l’illuminazione di importanti e simbolici edifici (torre eiffel, colosseo etc.) per 1 ora.

Colpito dall’interruttore posto sulle pagine di youtube, ho pensato di mostrarvi come ottenere lo stesso effetto “apertura/chiusura” dell’interruttore. Utilizzando qualcosa che si discosta dal semplice e convenzionale cambio di immagine cui siamo stati abituati con javascript. Piuttosto, voglio mostrarvi qualcosa di alternativo usando jQuery e i CSS, alla stessa maniera dei web designer di Youtube, attraverso l’utilizzo di una sprite map (nel nostro caso 1 singola immagine che contiene l’icona di un interruttore chiuso, affiancata a quella dello stesso interruttore, spento) e la tecnica dell’image slicing (in cui si adopera jQuery per modificare all’evento .click alcuni parametri CSS, che permettono di visualizzare un’altra porzione di immagine).

Passiamo subito all’esempio, salvate questo codice sul vostro desktop come pagina di esempio, banalmente chiamiamola, prova.html:

<html>
<head>
<title>Sprite technique example with jquery e css</title>
<style>
#logo-link
{
  width:19px;
  height:49px;
  text-decoration:none;
  display:block;
  background-image:url(switch_sprite_slidetoggle.png); /*la foto unica che verrà splittata (in realtà viene spostata nel riquadro di visuale fisso) */
  background-position:0px 0;
}
/*#logo-link:hover,#logo-link:active  { background-position:0 0; }*/
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready( 
/*
MADE BY ROCCO MUSOLINO - WWW.HACKERSTRIBE.COM
# Esempio di Sprite mapping (Image slicing), con jquery e i css.
 
*/
  function() {
  var k = 0;
    $("#logo-link").click(
	function(){ 
    if (!k) {
    //si apre
	$("#logo-link").animate({
    backgroundPosition: "21px 0",
	opacity: 0.7
  }, 200, function() { $("#logo-link").animate({opacity: 1}, 200); } 
  ); 
 
	k = 1;
	} else {
	//si chiude
	$("#logo-link").animate({
    backgroundPosition: "0 0",
	opacity: 0.7
  }, 200, function() { $("#logo-link").animate({opacity: 1}, 200); } 
  ); 
 
	k = 0;
	}
 
});  
});
 
</script>
 
</head>
<body>
 
<div id="logo-link"></div>
 
</body>
</html>

Questa è l’immagine usata nell’esempio, salvatela e inseritela nella stessa directory di prova.html:

:) Avrete così ottenuto un simpatico pulsante On – Off realizzato con un’unica sprite map “tagliata” dinamicamente con jquery, facendo uso delle proprietà dei fogli di stile a cascata (CSS).

Lezione 10 – Privacy e Sicurezza web [PDF]

0
1 anno fa
Scritto da Rocco Musolino in

In questa 10 lezione in pdf si affronta uno degli argomenti più importanti di questo ultimo decennio.
La sicurezza web. Nel pdf si parla di html, linguaggi di scripting, sicura delle applicazioni web e comunicazioni sicure cifrate.
Buona lettura.

Download:

web 2.0 secondo luxx

0
4 anni fa
Scritto da luxx in ,

In questo periodo il web viene identificato come Web 2.0

Nell’articolo propongo la mia opinione sull’argomento dando consigli pratici ad un eventuale webmaster interessato.

Il web 2.0 va definito in due rami, ovvero da un punto di vista grafico e da un punto di vista dei contenuti.

Da un punto di vista dei contenuti arriva la maggiore novità rispetto al precedente web 1.0.

I siti web 2.0 vengono scritti secondo linguaggi di scripting e programmazione definiti dinamici come PHP e Asp.NET.

La dinamicità di questi linguaggi indica la loro predisposizione ad essere flessibili alle richieste dell’utente del sito web.

I siti web 2.0 portano quindi ad un notevole coinvolgimento dell’utenza, in quanto chiunque può diffondere il proprio messaggio attraverso la rete.

Esempi di sistemi 2.0 sono i blog, i forum o i portali.

Questi sistemi adottano anche una particolare forma di informazione, ovvero la news per feed RSS, che permette di tenerci aggiornati sul sito web, senza per forza visitarlo, saranno infatti le notizie ad arrivare direttamente da noi.

Il web 1.0 lo possiamo immaginare invece come una vetrina dove gli amministratori aggiornavono periodicamente il codice HTML e l’utente restava al di fuori del sistema stesso.

Lo sviluppo così accentuato del web in questi anni lo si deve all’Open Source.

Open Source sta a significare Codice Apero, ovvero rilasciare il codice sorgente del software per permettere a terze persone di sviluppare altro software sulla base del precedente.

Le comunità che rilasciano in Open Source applicazioni Web 2.0 hanno fatto molto in questi anni, e basta elencare alcuni nomi per rendersene conto, ad esempio WordPress, Joomla, PHPbb.

Queste piattaforme, chiamate anche CMS, si trovano oggi ovunque e la loro semplicità di utilizzo ha reso accessibile a tutti il web.

La seconda distinzione, come abbiamo detto è da fare secondo un punto di vista stilistico e grafico.

Il web 1.0 era caratterizzato da una serie di punti facilmente riconoscibili

  • • Utilizzo di tabelle HTML
  • • Scelta di colori molto forti
  • • Pesante utilizzo di gif animate
  • • Pesante utilizzo dei bottoni
  • • Pesante utilizzo dei frames

Un esempio di sito web 1.0 lo potete vedere qui

Il web 2.0 presenta notevoli novità

  • • Utilizzo dei DIV CSS
  • • Completa rimozione delle gif animate
  • • Utilizzo di strumenti multimediali, quindi flash
  • • Scelta di uno stile grafico leggero
  • • Selezione dei colori
  • • Scomparsa dei bottoni
  • • Scomparsa dei frames

Per quanto riguarda i colori nello specifico, sono stati definiti dei colori 2.0, che potete trovare qui

ulteriori risorse grafiche per la realizzazione di siti web 2.0 le potete trovare qui

WhiteHat Security: 9 siti Web su 10 sono carenti in sicurezza.

0
5 anni fa
Scritto da Rocco Musolino in , ,

White hat securityLe minacce informatiche e gli attacchi maliziosi continuano a perseguitare i gestori di siti Web e i navigatori. Con questo scenario sembra ovvio che molti sforzi vengano impiegati per risolvere problemi legati all’affidabilità dei siti Web.

Qual’è quindi lo stato della sicurezza in questo ambito? Pessimo, almeno a sentire quanto dichiarato da WhiteHat Security nella sua ultima analisi su un campione consistenti di siti Web.

Nove siti su dieci risultano infatti vulnerabili ad attacchi informatici. Le vulnerabilità riscontrate sono molto critiche e si attestano in media sulle sette per singolo sito. La vulnerabilità principale è la XSS (Cross-Site Scripting), che compare nel 70% dei siti e danneggia milioni di utenti in tutto il mondo.

Sembra quindi evidente un duplice comportamento da parte degli attori della Rete. Da una parte ci sono i client che si stanno attrezzando per proteggere i navigatori dalle insidie di Internet. Gli esempi più noti sono le notevoli evoluzioni in ambito sicurezza dei due browser più diffusi ovvero Internet Explorer, con la sua versione 8 beta, e Mozilla Firefox con la sua versione 3 beta. Dall’altra parte i siti e i loro amministratori che sembrano lenti nel rispondere agli attacchi.

Chiaramente questo atteggiamento è comune, ma non totale, nel senso che esistono sempre eccellenze che hanno puntato e investito sull’affidabilità e l’efficienza. Attendiamo stime più confortanti che magari smentiscano questo pessimo trend.

Reverse IP domain search, un tool per ricerche “al contrario”

0
5 anni fa
Scritto da Rocco Musolino in

Visual Trace Tool
Alessandro Vinciarelli
Come sappiamo le informazioni su Internet si trovano molto facilmente. In alcuni casi la ricerca è più difficile, ma probabilmente il risultato si ottiene lo stesso. Di fatto, le informazioni più semplici da individuare sono quelle relative ai siti web, al loro stato, alla macchina sui quali sono istallati, ai loro contenuti, ecc.
In questo post volevo fornirvi l’indicazione di una serie di tool curiosi disponibili on-line. Probabilmente attireranno la vostra attenzione e spenderete almeno qualche minuto a vedere di cosa si tratta.

Il sito che offre questi servizi gratuiti è YouGetSignal. In particolare i due che mi hanno più colpito offrono la possibilità di tracciare il percorso della richiesta http fino a raggiungere la destinazione oppure di individuare tutti i siti Web in hosting su quella macchina, a partire da un indirizzo Web.

Nel primo caso, denominato Visual Trace Tool, nella pagina Web verrà mostrata la sequenza di passi seguiti dalla “richiesta http” e verrà infine individuata la destinazione della stessa.

Nel secondo caso, Reverse IP domain search, dopo un piccolo periodo di elaborazione vengono elencati tutti gli altri siti Web presenti su quell’host. Anche in questo caso i risultati vanno presi con le molle, ma danno comunque indicazioni sulla correlazione tra differenti siti e macchine.

Per quanto riguarda le altre funzionalità troviamo: la localizzazione di numeri telefonici e indirizzi Internet ed un piccolo applicativo che individua il proprio indirizzo IP con l’indicazione delle porte aperte verso l’esterno.

Sicuramente sono presenti moltissimi altri tool in rete, anche molto più potenti, tuttavia in questo caso la semplicità di utilizzo è davvero notevole.

Torna all'inizio