ASPNET Tips 'n' TricksIt’s a best practice storing scripts like js, or css, in an external file, the only exception to this rule is for lightweight script specific for a page like the following example:

$(function() {
alert('do something');
});

in the other cases the external file is the best choice for scalability, maintainability, degradability of your code. Asp.Net Web Forms is not supports the special grapheme for including external file .js using tag <script></script>.

The Visual Studio compilator not signs this syntax like an error or like a warning:
<script type=”text/javascript” src=”~/Scripts/jquery-1.4.1.min.js”></script>

But running our appliaction on Cassini we have this run-time error: $ undefined.

Javascript ettor

How can we solve this problem?

We have many ways to solve the problem with advantages and disadvantages.

Solution nr. 1 : using absolute path

Using syntax: <script src=”/Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script> the script is include correctly.

This are the advantages:

  1. Standard HTML code
  2. Easy solution

This is the disadvantage:

  1. If the root of your application is different when will deploy it, the problem will not to be resolve.

Solution nr. 2: resolve the script with ResolveUrl

ResolveUrl is a method (of namespace System.Web.UI), supported by .Net Framework 1.0,  for converting a URL into one that is usable on the requesting client. We can solve, therefore, our problem with follow syntax:

<script src='<%=  ResolveUrl(“~/Scripts/jquery-1.4.1.min.js”) %>’ type=”text/javascript”></script>

the advantages of this choice are:

  1. easy solution
  2. solution indipendent by root of application

the disadvantage is that the solution is not a standard and performances of the page decrease because we are using server function inside a client declaration.

Solution nr. 3 : using ASP-NET Ajax

ScriptManager is the first aspnet control inside a web page. For MSDN It manages ASP.NET Ajax script libraries and script files, partial-page rendering, and client proxy class generation for Web and application services. We can use it for all application that we have written with MS Framework 3.0+ based on Asp.Net Ajax technology.

Using ScriptManager control we can solve our problem with this markup:

<form runat="server">
<asp:ScriptManager ID="sm1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
</Scripts>
</asp:ScriptManager>
<script type="text/javascript">
$(function () {
alert('Do something');
});
</script>

//

It’s a best practice (only for internet applications)  add commons libraries, like jQuery core, from a web repository. With ASP.NET 4.0 we can do this with simple two steps.

1. Insert this code into the section Application_Start of Global.asax.cs

void Application_Start(object sender, EventArgs e)
{
// map a simple name to a path
ScriptManager.ScriptResourceMapping.AddDefinition("jQuery", new ScriptResourceDefinition
{
Path = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.min.js",
DebugPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.js"
});

}

2. Change the script manager mark up with this declaration:


<form runat="server">
<asp:ScriptManager ID="sm1" runat="server">
<Scripts>
<asp:ScriptReference Name="jQuery" />
</Scripts>
</asp:ScriptManager>
<script type="text/javascript">
$(function () {
alert('Do something');
});
</script>

the advantage of this solution is the easy implementation on asp.net ajax web application. The disadvantage is that the ScriptManager load many libraries and than the page will be heavier than simple HTML page.

The CDN solution not working if your application is an intranet asp net project with some with limitations in web surfing.

rien ne va plus and happy coding  =)

Google Shopping Center cellula del Google Merchant Center è stato attivato stamattina, pensiamo che l’applicativo farà del servizio di geolocalizzazione del famoso Google Map e dell’atesissimo Google HotPot dei punti di forza. Nell’immagine alleghiamo una visualizzazione del nuovo Google Shopping Italia:

Il servizio è raggiungibile al seguente URL, sarà la rinascita dell’ecommerce? Per maggiori info seguite il blog di Giacomo Pelagatti e Nicola Iacoucci.

Torniamo a scrivere sul nostro blog dopo lunghi impegni di lavoro, in questo periodo abbiamo affrontato e superato diverse problematiche e, da oggi e nei giorni a seguire, vorremmo mettere la nostra esperienza a disposizione dei nostri lettori. In questo articolo forniremo alcune nozioni sulla copia e sul download di file da spazio FTP tramite script per sistemi operativi Windows.

Entrare in uno spazio FTP da sistema operativo Windows è di una semplicità estrema, basta infatti digitare il comando FTP dal prompt dei comandi per vederci catapultati nel nostro spazio web come in figura:

Una foto che visualizza il propt dei comandi con l'accesso allo spazio FTP

Nella tabella (in inglese) possiamo vedere i comandi eseguibili nello spazio FTP sono i seguenti:

FTP commands
Command Description
!   escape to the shell
?   print local help information
append   append to a file
ascii   set ascii transfer type
bell   beep when command completed
binary   set binary transfer type
bye   terminate ftp session and exit
cd   change remote working directory
close   terminate ftp session
debug   toggle debugging mode
delete   delete remote file
dir   list contents of remote directory
disconnect   terminate ftp session
get   receive file
glob   toggle metacharacter expansion of local file names
hash   toggle printing `#’ for each buffer transferred
help   print local help information
lcd   change local working directory
literal   send arbitrary ftp command
ls   nlist contents of remote directory
mdelete   delete multiple files
mdir   list contents of multiple remote directories
mget   get multiple files
mkdir   make directory on the remote machine
mls   nlist contents of multiple remote directories
mput   send multiple files
open   connect to remote tftp
prompt   force interactive prompting on multiple commands
put   send one file
pwd   print working directory on remote machine
quit   terminate ftp session and exit
quote   send arbitrary ftp command
recv   receive file
remotehelp   get help from remote server
rename   rename file
rmdir   remove directory on the remote machine
send   send one file
status   show current status
trace   toggle packet tracing
type   set file transfer type
user   send new user information
verbose   toggle verbose mode

La cosa che più ci può essere utile in questa situazione, non è tanto però, l’utilizzo della shell (che sarebbe comunque richiamabile soltanto in locale), quanto la creazione di uno script che potrebbe automatizzarci il lavoro. Un esempio di script per la copia FTP potrebbe essere il seguente:

MyUserId
MyPassword
cd files/pictures
binary
prompt n
mget *.*

Salvate questo script con il nome script.ftp  (la cui funzionalità è quella di copiare tutti i file presenti nella cartella pictures) e, per utilizzarlo, basta lanciare da riga comando la seguente istruzione:
FTP -s:script.ftp ftp.myhost.net
sostituendo i valori di MyUser, MyPassword e MyHost.net con quelli che vi interessano avrete un facile script per l’invio/ricezione dei dati. Attenzione però, essendo le password in chiaro, riteniamo che sia best practice quella di creare “on the fly” il file script e, dopo averlo, eseguito rimuoverlo.

A furor di popolo il tasto mi piace ce l’ha fatta! Erano nate pagine su facebook che tifavano il famoso Like al posto del pulsante condividi, il popolo di facebook ha chiesto a gran voce: rivogliamo il tasto mi piace, avete cliccato su questo link? Ecco bravi, quella pagina ci serve a mo’ di cappello, non imitatela mai se siete poco esperti di facebook, non è così che si attira gente verso la propria attività!

Il tasto mi piace, dunque, è risorto: lunga vita al tasto mi piace!


 

Effettuando un’analisi di quello che è il nuovo tasto, però ci accorgiamo che qualcosa è cambiato…

Finora sappiamo tutti che è cambiata la visualizzazione dei link esterni quando cliccate su mi piace:

Non c’è che dire: i click sul nuovo tasto mi piace sono molto più visibili sia nel nostro profilo che sulla home page della nostra bacheca facebook, ma per comprendere queste funzionalità vi rimando all’ottimo lavoro di Facebook strategy (cioè al primo link inserito in questo post).

 

Ma quali sono gli effetti collaterali che possono scaturire da questo trionfo? Innanzi tutto, prima di decretare la vittoria del nuovo Like, Facebook aveva decretato una scelta che provocò diversi spasmi ai designer web: la deprecazione del proprio FBML a vantaggio di una delle tecniche più schifose che l’HTML abbia mai potuto immaginare: l’IFrame! L’IFrame è, per chi non lo conoscesse, un’istruzione HTML, un bel riquadro fluttuante nel bel mezzo della pagina dove potete caricare di tutto, dal sito della Coca-Cola o della Pepsi (per par condicio) a un bel malaware-spyware-virus troiano come la mamma che l’ha generato. Ma perché una mossa del genere? Secondo alcuni apocalittici che, in questo caso, vede anche la nostra presenza, l’IFrame servirà per inserire praticamente tutto il web dentro le pagine facebook: una gran bella risposta a chi aveva pensato di far fuori facebook dal suo ambìto motore di ricerca, voi cosa ne pensate siamo troppo apocalittici? Di sicuro c’è che qualcosa sta cambiando sul serio, stiamo a guardare e, nel frattempo, pensiamo a come comportarci con i nostri fan (e in alcuni casi clienti) ora che Facebook si è rivolto all’esterno per prenderselo in blocco 🙂

 

 

 

L’immagine che vedete, quella a sinistra per capirci, è il nuovo logo della tecnolgia CSS3, lo riteniamo talmente brutto che, non sappiamo nemmeno noi il perché, ma ci pareva doveroso far cominciare questo articolo da cotanta bruttezza. Il lettore è stato messo alla prova con un incipit ostico, ci faremo perdonare nel proseguo dell’articolo, al momento può cominciare con lo stropicciarsi gli occhi e, se vuole, proseguire con la lettura.

Al di là dello schifo di logo creato per i CSS3, i nuovi fogli di stile sono una tecnologia tutt’altro che brutta, insieme ad HTML5 rappresentano la next big thing e, mentre il mondo aspetta impaziente la nuova release di Internet Explorer i CSS3 hanno cominciato a diffondersi viralmente nel web: dagli ultimi temi di WordPress e Joomla! ai tanti esperimenti che hanno cominciato a farne uso. Noi abbiamo sperimentato queste tecniche in due lavori recenti: http://www.gardenpeticca.it e http://www.alessandroporretti.it (tutt’ora in costruzione). Nell’ultimo lavoro abbiamo esteso un tema di WordPress mediante la tecnica dei child theme ampliandolo con tecniche proprie dei CSS3.

Ma veniamo all’argomento principale: Le media Query, ovvero l’investigatore che tutto sa e tutto redirige:

Le media query dei nuovi CSS3 sono la diretta evoluzione delle media types introdotte in CSS2:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css" />
<link rel="stylesheet" type="text/css" media="print" href="serif.css" />

I Media Type servivano per definire dei fogli di stile partendo dal tipo di media, nell’esempio di codice appena trascritto, vediamo come abbiamo la possibilità di caricare due diversi fogli di stile, la scelta è legata al tipo di media che carica la pagina, nel primo caso uno schermo, nel secondo una stampante. Per quanto riguarda le media query è stato fatto un passo in più nella definizione del tipo di foglio di stile da caricare. Le media query infatti permettono di differenziare lo stile della pagina per le seguente tipologie:

  • Dimensione minima e massima della larghezza dello schermo.
  • Dimensione minima e massima dell’altezza dello schermo.
  • Colore dello schermo.

Vediamo alcuni esempi di codice:

/* Carica il foglio di stile small.css se il dispositivo che sta caricando la pagina è uno schermo con una larghezza massima di 600px */
<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="small.css" />
/* Carica il foglio di stile new.css se il dispositivo che sta caricando la pagina è uno schermo con un'altezza massima di 380px */
<link rel="stylesheet" type="text/css" media="screen and (max-height:600px)" href="new.css" />
/* Carica il foglio di stile example.css se il dispositivo che sta caricando la pagina è uno schermo con un determinato colore di sfondo */
<link rel="stylesheet" media="screen and (color)" href="example.css" />

Analizzando il codice possiamo vedere come potrebbe essere facilmente esteso il funzionamento della media query per caricare il foglio di stile che ci serve per la visualizzazione del nostro sito. Abbiamo pensato di farvi cosa gradita fornendovi una serie di layout standard (mockup 1024 x 768, iPad, iPhone) per facilitarvi la creazione di applicativi utilizzando CSS3 media query.

E’ possibile utilizzare le media query, ovviamente, anche all’interno di un foglio .css per cambiare uno stile soltanto ad un elemento o ad una classe, vediamone il codice:

@media screen and (max-width:600px) {
.test {background-color: #fff}
}

Chiudiamo la rassegna sulle media query con due link fondamentali:

Documentazione ufficiale CSS3 Media Query

Limiti e potenzialità nello sviluppo di CSS3 Media Query

 

Mi scusi, ma per andare dove dobbiamo andare, per dove dobbiamo andare? La celebre frase di Totò e Peppino può sintetizzare lo stato confusionale che deve affrontare il web designer oggi. Non stiamo parlando dei grafici web che lavorano per grandi agenzie con facoltosi clienti che non badano a spese, bensì dei creativi che lavorano principalmente con la Piccola e media impresa.

Il problema principale è l’accessbilità: accessibile a chi? Ora che non basta progettare siti per le diverse risoluzioni dei browser pc, sono intervenuti una serie di nuovi dispositivi che stanno prendendo sempre più quota sul mercato e che non possiamo tralasciare. Parliamo di iPhone, iPad (le quali ci invitano a sviluppare app ad hoc), ma anche tablet e mobile Android, che sposano la filosofia dell’Open Source e, come se non bastasse, BlackBerry e tutta quella serie sterminata di smart phone uno diverso dall’altro sia come schermo che come sistema operativo.

Proviamo a tornare calmi, scomporre il problema e proviamo a ragionare su questa nuova mole di lavoro che ci attanaglia. Partiamo con il primo problema, le applicazioni che sfruttano iOS.

Il sogno e l’incubo dell’Apple Store

L’Apple Store è una gran bella cosa perché: innanzitutto ci fa creare applicazioni per una serie di dispositivi che possiamo considerare il meglio per quello che riguarda i tablet e gli smart phone.

  1. Molti esperti concordano che non ci siano proprio paragoni tra le tecnologie iOS e i suoi simili, anche quelli basati su Android checché ne dica Google.
  2. Le validazioni dell’App da parte dello staff di Jobs & co. assicura la creazione di applicazioni valide e well-formed.

Ma l’Apple Store appare a molti anche una gran brutta cosa:

  1. Non si possono usare per la programmazione prodotti che non utilizzano piattaforme di sviluppo accettate da Apple: “Flash sì, Flash no”, in periodo sanremese, potrebbe essere una sorta di refrain riscritta da Elio e le Storie Tese.
  2. Le validazioni delle App sono qualcosa di cervellotico.
  3. L’iscrizione ad Apple Store costa 99 dollari all’anno
  4. Una volta che avrete ottenuto le autorizzazioni per la vostra applicazione (se avete letto il punto 2 non sembra cosa facile), Apple vi detrarrà il 30% di commissioni per ogni singola app venduta.

La cosa che ci fa ben sperare è che Apple stessa, forse pressata dalla concorrenza, si sta ricredendo sulle sue leggi ferree  e, dopo aver ascoltato le lamentele dei designer e degli sviluppatori, sta pian pianino modificando la propria filosofia cercando di ammorbidirla. Noi, da buoni web designer stressati quali siamo, speriamo che questo proceda il più volecemente possibile, così potremmo aver creato la nostra applicazione per iOS.

Una volta creata la nostra applicazione per l’Apple Store saremo ben felici di constatare che tutti gli utenti di smart phone e tablet diversi non potranno mai utilizzarla.

Passiamo allora al secondo punto per colmare questa spiacevolezza.

Creazione di applicazioni per Android: facile come bere un bicchier d’acqua

La creazione di applicazioni per Android è assolutamente diversa rispetto alle tecniche di sviluppo Apple. Una piattaforma molto semplice da utilizzare per lo sviluppo si chiama App Inventor: il prodotto è estremamente semplice e, i novizi programmatori, potranno esultare: per programmare con App Inventor non serve niente, nessuna base di programmazione, nessuna riga di codice.

I miscredenti dicono che il problema del mondo open source e dei prodigi di App Inventor sia nella qualità di applicazioni che verrebbero rilasciate, per quanto riguarda il primo punto secondo noi non è così importante, “piattaforme” come Java o PHP su tutte hanno rilasciato degli ottimi progetti open, certo, non tutti, ma comunque più di qualcuno degno di nota sì. Per quanto riguarda l’App Inventor siamo scettici anche noi, una piattaforma di sviluppo per neofiti che permette di creare Applicazioni senza scrivere una riga di codice non ci sconfifera tanto, la proveremo e vi diremo, va comunque evidenziato che i programmatori doc possono sempre utilizzare C++ per le loro applicazioni Android.

A questo punto abbiamo capito che una volta effettuata un’applicazione per iOS possiamo crearne una per Android e il maggiore mercato dei principali smart phone e tablet è completato ma, gli altri smart phone, quelli meno “importanti” come, per esempio, BlackBerry?

Realizzare una versione mobile per un sito web

Forse è la soluzione ideale, anche perché non sempre un cliente è disposto a spendere per un sito pc con app Apple, una Android e una versione visible sugli altri smart phone. Secondo noi risulta essere best practice anche perché non bisogna versare soldi a nessuno (Apple Store), né tanto meno chiudere un applicazione soltanto ad un dispositivo (iOS o Android), molte volte un application mobile non è nient’altro che un sito ben fatto, allora perché non utilizzare le media query dei nuovi CSS3 per realizzare un sito visibile su più dispositivi?

Meditate web designer, meditate…

Lo avevamo preannunciato in un link pubblicato all’interno della nostra pagina web: il logo del summit del web 2.0, tenutosi a san Fransisco nel mese di Novembre, sembrava quello di una battaglia a Risiko: Google contro Facebook, Apple contro Adobe, Google contro Apple, Netfix contro Hulu, Twitter contro Facebook, Microsoft contro Google.

I primi sentori di questa battaglia si sono avuti già dall’Aprile del 2010, quando Steve Jobs, in occasione della presentazione della nuova versione Beta dell’iPhone OS 4.0 (il primo iOS), si scaglia pesantemente contro Adobe Flash, la quale, dal canto suo, aveva presentato da qualche mese la versione del nuovo Flash CS5: un software dedicato alla creazione e alla compilazione di applicativi per iPhone e iPod touch, la risposta di Jobs e soci è chiara e semplice: Adobe Flash non fa parte degli standard di sviluppo per iOS. Dal 13 Settembre 2010, anche grazie al fiorire di soluzioni mobile che fanno largo uso di applicativi Open Source, le cose sembrano campiere e Adobe Flash rientra nei piani Apple. Siamo solo alla fine di una prima guerra? Staremo a vedere, intanto, un’altra sta bussando alle porte.

Per tutti gli utenti di Google.com (il tool non è ancora disponibile per la versione .it), BigG ha proposto la sua nuova versione del motore di ricerca: il Search Engine del web per eccellenza si presenta con una barra in alto che ricorda molto il design dei social network, che Google sia interessata a questo mercato di certo non fa notizia, il progetto Google Me, di cui abbiamo parlato in passato e i tentavi mal riusciti di Google Buzz vanno in quella direzione. Oltre al design va segnalato sicuramente il tanto chiacchierato “nuovo” Google social search: il motore di ricerca lanciato più di un anno fa, che si apre al mondo dei social network e, mentre Facebook modifica il suo search interno seguendo lo stile di BigG, quest’ultima modifica il suo design con una barra in stile Facebook. Tutti d’amore e d’accordo? Assolutamente no, perché su Google Social Search compaiono tanti social network tranne che… Facebook! (social su cui invece punta il rivale Bing): come mai Google ha deciso di chiudere le porte della ricerca sul social web proprio al sito di Zuckerberg e soci? ne sapete qualcosa di più? vi siete fatti un’idea? Parliamone… 😉 a parte questi dubbi amletici c’è da dire che Google social Search riabilita (tra l’altro non ce n’era proprio il bisogno), la forza dei social network: il funzionamento  è molto interessante e, chi meglio, di giorgiotave, esperto SEO può spiegarne il funzionamento? Così abbiamo deciso di pubblicare questo link da YouTube che spiega le differenze tra le ricerche social effettuate in Bing e le rispettive eseguite dal software di Mountain View.

Il tuo sito ha poche visite? mettilo nel tosta pane

Nati nella fase di passaggio tra il web 1.0 e la sua normale evoluzione, i CMS (almeno secondo Wikipedia) nascono nel 1995, poco tempo prima dei Blog e, di lì a poco, costituiranno un’importante soluzione, per tutte quelle aziende (anche medio, piccole) che necessitano di un sito web sempre aggiornato cercando di limitare le spese di produzione.

Dal 1995 ad oggi i CMS hanno fatto “il bello e il cattivo tempo” su internet, alcuni hanno avuto un successo interplanetario, su tutti e soprattutto in Italia, è da menzionare almeno Joomla e, visti gli ultimi sviluppi, WordPress; altri si sono orientati verso portali aziendali professionali rivolti sia ad Internet che ad Intranet: è il caso di SharePoint; altri ancora si sono creati una porzione talmente particolare di mercato che gli sviluppatori sono tutti affacciati alla finistra per vedere come si evolveranno, è il caso di Osiris e SEO Toaster.

Siamo giunti all’oggetto di questo discorso: SEOToaster (sicuramente più vicino a piattaforme di tipo Joomla che al “mastodontico” prodotto di Microsoft SharePoint) tra i suoi punti di forza ci sono soprattutto la possibilità di crearsi un sito ottimizzato per i motori di ricerca. Attualmente il prodotto si trova nella sua versione 1.1 build 16, il progetto, purtroppo, non è ancora ottimizzato per essere visualizzato su browser Internet Explorer ma, seguendo gli sviluppi e gli sforzi che casa Microsoft sta effettuando per la realizzazione della versione 9 del nuovo browser, potremmo pensare che questa pecca verrà presto risolta.

La forza di SEOToaster, comunque, sta tutta nell’orientamento di questo prodotto verso i motori di ricerca, una manna per tutte quelle PMI che vogliono risparmiare le spese di consulenza per una maggiore visibilità su Internet (anche se ci preme evidenziarlo, l’utilizzo migliore di questo prodotto e quindi il vero risparmio sta proprio nell’affiancare SEOToaster ad un esperto SEO conoscente di tecniche di Web Marketing). SEOToaster permette, infatti, la gestione dei link rotti (tecnicamente redirect 301), l’evidenziazione di contenuti che l’azienda vuol “far comparire per primi su BigG”; insomma: la gestione di tutti quei processi che fanno di un sito un’estensione di Google Webmaster’s Tool, il tutto con un comodo pannello fluttuante privo di area riservata che ricorda un altro CMS dot.Net: N2CMS.

Siete interessati ad una consulenza gratuita per questo progetto? Scriveteci a info@ecceweb.it il nostro staff sarà in grado di darvi tutte le info di cui necessitate.

Per la nostra azienda, stiamo ricercando la seguente figura professionale: promoter per vendita software/siti, requisiti richiesti: buona presenza, diploma superiore, mezzo proprio, ottime doti di comunicazione e forte orientamento commerciale.​ Verrà valutato come elemento preferenziale l’aver maturato precedente esperienza nella vendita di servizi.

Il compenso, di sicuro interesse, verrà stimato su una percentuale di provvigione per ogni nuovo contratto firmato. Gli utenti interessati possono inviare il loro CV all’indirizzo curricula@ecceweb.it

Ecceweblog va in ferie

Pubblicato: agosto 9, 2010 in Senza categoria

Salutiamo i nostri lettori augurandogli di passare una serena estate.