Contraddizioni dell’elemento

Soluzione

La prima cosa da fare è ripristinare i vostri stili. Disporre all’inizio del vostro css una soluzione di reset che rimuove il padding, margin e border e altre incongruenze dagli elementi.
Un buon esempio è il codice reset.css di Eric Meyer.

Image Rendering

Soluzione

Ridimensionare le immagini alla dimensione desiderata prima di utilizzarla nel sito.

Font Rendering

Soluzione

E’ necessario aggiungere questa regola al selettore:

p {
    text-shadow: #000 0 0 0;
}

Selezione font

Soluzione

Finché è un font sicuro va tutto bene nella visualizzazione. Tuttavia bisogna informarsi e verificare questi problemi di rappresentazione: ad esempio, un font che probabilmente non dovreste usare è Lucida Grande/Sans, il quale rende bruttissimo in Internet Explorer.

Dimensione testo

Soluzione

È necessario specificare la dimensione in percentuale nell’elemento body, e quindi la dimensione in em, attraverso il resto del foglio. line-height è necessario definirla in em, piuttosto che in pixel, per una rappresentazione costante.
Una cosa da ricordare è che la dimensione del font di default è 16px. Quindi, per ridimensionarlo a 12px usiamo:

body {
    font-size: 75%;
    line-height: 1.5em;
}
h1 {
     font-size: 3em; /* 36px */
}

Doppi margini su elementi flottanti

#content {
    float: right;
    width: 300px;
    margin-right: 10px;
}
#sidebar {
    float: right;
    width: 100px;
}

In IE qualsiasi margine che si trova sullo stesso lato del float sarà raddoppiato. Questo significa che l’elemento content a sinistra avrà tale margine esteso a 20px.

Soluzione

Per risolvere il problema, tutto quello che dovete fare è applicare la proprietà display:inline sui box del layout:

#content {
    float: right;
    width: 300px;
    margin-right: 10px;
    display: inline;
}
#sidebar {
    float: right;
    width: 100px;
    display: inline;
}

Compensazione elementi flottanti

Soluzione

La soluzione migliore è un semplice overflow:auto o overflow:hidden nel div contenitore:

#container {
    width: 966px;
    margin: 0 auto;
    overflow: auto;
}

È necessario tenere a mente che overflow: auto potrebbe causare alcuni problemi con Firefox: se si verificano problemi usare overlflow:hidden.

CSS selettori

Soluzione

Usare soltanto E + F, E > F, E ~ F. Se realmente dovete utilizzare questi selettori, dovreste esaminare IE8.js che dà a IE6 il migliore supporto dei selettori. Tuttavia questo rallenterà il vostro sito.

PNG Trasparenza

Soluzione

Esistono tre soluzioni per questo problema.
E’ possibile utilizzare AlphaImageLoader in un foglio di stile specifico per IE: aggiungi queste proprietà a qualsiasi immagine PNG che si desidera avere la trasparenza.

.trans {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

È necessario creare una PNG trasparente 1×1 e collegarla ad essa nell’attributo src.
Un modo migliore per farlo è IE5.5+ PNG Alpha Fix simile al AlphaImageLoader, tranne per il fatto che si collega ad uno script JavaScript che innesca la trasparenza.
Il terzo metodo è quello di utilizzare IE8.js citato sopra. E’ anche più sicuro rispetto al metodo precedente. Realizzerà la trasparenza a qualsiasi png che finisce -trans; ad es. myimage-trans.png.

Compatibile con i maggiori browser, anche i più datati, il plugin jQuery Corners è cartterizzato dalle seguenti features:

• pesa meno di 8000 bytes dopo la compressione effettuata con YUI Compressor
• anti-aliasing veloce per i browser più anziani
• angoli nativi per browser utilizzati su Safari, iPhone e Firefox 3
• tasti dei moduli e ancore facilmente designati e arrotondati

Una volta che jQuery e lo script jQuery.corners vengono caricati, è semplice creare gli angoli arrotondati:

<div style="background-color:#c00; padding:5px;" class="rounded">
    Esempio div
</div>
<script type="text/javascript">
    $(document).ready( function(){
        $('.rounded').corners();
    });
</script>

l’unica raccomandazione è dare abbastanza riempimento al box, poi è possibile anche impostare il raggio d’angolo:

<div style="background-color:#acc; padding:10px" class="rounded">
    Esempio con raggio X e Y con dimensioni diverse.
</div>
<script type="text/javascript">
    $(document).ready( function(){
        $('.rounded').corners("30px 10px");
    });
</script>

Per quanto riguarda i bottoni nei moduli e le ancore possono essere trasformati in pulsanti con angoli arrotondati:

<a href="javascript:" onclick="alert('Hello, World!')" class="rounded {transparent} button">
    Premere
</a>

<form action="#">
<input type="submit" value="Submit" class="rounded {transparent} button"> 
<input type="button" value="Javascript" class="rounded {transparent} button" onclick="alert('OK!'); return false;">
</form>

richiedono regole CSS

a.rounded, .button {
    outline: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle; /* or top */
    display: -moz-inline-box;
    display: inline-block;
    overflow: visible; /* IE6 form button fix */
}
.button {
    color: #000;
    background-color: #c00;
    padding: 5px 7px;
}
.button:hover {
    background-color: #c00;
}

E’ possibile personalizzare lo script con opzioni passate come stringhe:

• 5px - imposta raggio dell’angolo (di default è 5)
• 10px 6px - imposta raggio X e Y con valori diversi
• anti-alias - angoli anti-alias (di defaut)
• transparent - per immagini di sfondo utilizzare qusta opzione
• no-native - disabilita tutte le estensioni border-radius specifiche per i diversi browser
• webkit - consente l’uso di -webkit-border-radius compatibile con i browser Safari e iPhone
• mozilla - consente l’uso di -moz-border-radius su Firefox 3+ e altri browser basati su Mozilla
• top, right, bottom, left, top-left, top-right, bottom-left, bottom-right - applica effetto solo su specifici angoli
  

Google ha realizzato un importante aggiornamento per Gmail: voce e video chat in un sol colpo.

Per utilizzare queste nuove funzionalità, bisogna semplicemente installare un plugin per browser, basta poi fare click su “video & more” dal menu nella finestra di chat di Gmail e selezionare “Start Video chat” o “Start Voice chat“. E’ possibile passare ad una visualizzazione a schermo intero o finesta pop-up.

Introducendo la video chat, Google si avvicina sempre di più all’unione di tutti i relativi servizi: dopo Google Calendar, Google Documenti.

La nuova caratteristica è stata sviluppata dal gruppo di ingegneria del Google in Svezia, dove è nel lontano 2007 fu acquistato la Marratech, applicazione in grado di far comunicare gli utenti via chat, VoIP e video e condividere applicazioni … forse nei prossimi mesi vedremo tali funzionalità comprese in Gmail?!  :wow:

Fonte: TechCrunch

Conversioni di tipo implicite

I casi più frequenti in cui avvengono conversioni implicite (automatiche) di tipo sono i seguenti:

• Operatori aritmetici binari. Se un operando è un intero e l’altro è un numero a virgola mobile, il valore intero viene convertito in float. Se uno è una stringa e l’altro è un intero, PHP converte la stringa in un intero prima di valutare entrambi gli operandi come interi.
• Espressioni booleane e operatori di espressione. Nel caso in cui un’espressione deve essere valutata come un booleano, PHP converte il risultato dell’espressione in un booleano.
• Alcuni metodi che richiedono le stringhe. Alcuni metodi e operatori, echo, print o l’operatore di concatenazione della stringa (.), richiedono che i loro operandi siano stringhe.

Conversioni di tipo esplicite

Si tenta la conversione di tipo utilizzando il cosiddetto type casting: si fa precedere una variabile (o una qualsiasi espressione) da un tipo di dato racchiuso tra parentesi e php prova a convertirla.

• (float), (double), (real) Converte in un numero a virgola mobile.
• (int), (integer) Converte in un intero.
• (string) Converte in una stringa di testo.
• (bool), (boolean) Converte in un valore booleano.
• (array) Converte in un array.
• (object) Converte in un oggetto.

<?php
    $strQta = $_POST['qtaDesiderata'];
    $strQta = (int)$strQta;
?>

Conversioni di tipo specifiche

Conversione in interi

E’ possibile convertire esplicitamente i valori in interi utilizzando anche la funzione intval. Quando si convertono i valori a virgola mobile in interi, php tronca la parte decimale. Quando si converte una stringa in un intero, php analizza la stringa un carattere alla volta finché trova un carattere che non è una cifra; il mancato parsing di un numero decimale valido restituisce il valore 0.

<?php
    echo (int)"123";  //visualizza 123
    echo (int)"+456";  // 456
    echo (int)"55e2";  // 55 - il parsing si ferma alla e
    echo (int)"3 cani"; // 3 - il parsing si ferma allo spazio
    echo (int)"tre cani"; // 0 - non interpretati num scritti in lettere
    echo (int)"-4321"; // -4321
?>

Quando si convertirà da un booleano in un intero, FALSE restituirà 0 mentre TRUE restituirà 1. La conversione da array, oggetti o risorse in interi è indefinita e non dovrebbe essere eseguita. Il valore NULL è convertito sempre nel valore intero 0.

Conversione in numeri in virgola mobile

Le varibili e le espressioni possono essere convertite nel tipo a virgola mobile anche chiamando la funzione floatval.

Un intero convertito in numero a virgola mobile potrebbe non essere identico al valore intero originale ( 10000 generi un valore a virgola mobile 9999.9999999 o anche 10000.000001). Non si dovrebbe mai fare affidamento su confronti con valori a virgola mobile. Quando si convertono le stringhe, qualsiasi stringa numerica contenente un decimale (.) o la lettera e può essere convertita in un valore a virgola mobile.

<?php
    $f1 = (float)"+123";  // 123.0
    $f2 = (float)"-123";  // -123.0
    $f3 = (float)"123.456";  // 123.456
    $f4 = (float)"1.23456e2";  // 123.456
    $f5 = (float)"1.234e-2";  // 0.01234
    $f6 = (float)"1000000000000";  //1e12 (mille miliardi)
?>

Per il resto avviene come nella conversione in interi, in più specificata la parte decimale.

Conversione in stringhe

E’ possibie convertire le variabili in stringhe chiamando la funzione strval o racchiudendole tra virgolette doppie.

Gli interi e i valori a virgola mobile sono convertiti in stringhe che rappresentano valori numerici. I valori booleani sono convertiti trasformando il valore TRUE nella stringa “1″, mentre FALSE nella stringa vuota (”"). Gli array sono sempre convertiti nel valore della stringa “Array” e gli oggetti nel valore “Object”. Le risorse sono convertite in una stringa come “Resource id #X” in cui X è un identificatore numerico univoco, utilizzato da php per identificare la risorsa. NULL viene convertito nella stringa vuota (”").

Conversione in array

E’ possibile convertire una variabile o un’espressione in un array tramite anche la funzione array, la stessa utilizzata per creare un nuovo array.

Gli interi, i numeri a virgola mobile, le stringhe, i valori booleani e le risorse sono convertite creando un array con un unico elemento (con indice pari a 0), ossia il valore della variabile o dell’espressione. Gli oggetti vengono convertiti creando un array con le chiavi rappresentate dai nomi delle variabili membro dell’oggetto e con i valori costituiti dal valore delle variabili.

Funzioni utili per la conversione di tipo

is_type

Tutte queste funzioni restituiscono un valore booleano che indica se il valore specificato è o non è del tipo richiesto:

is_integer, is_float, is_numeric (restituisce TRUE se l'argomento è un numero a virgola mobile, un intero o una stringa numerica), is_string, is_bool, is_array, is_object, is_null

gettype

Segnala di quale tipo php considera attualmente una variabile o un’espressione; restituisce:

“boolean”, “integer”, “double”, “string”, “array”, “object”, “resource”, “NULL”, “unknown type”.

settype

Questa funzione richiede di specificare due argomenti: la variabile da convertire e il tipo nel quale deve essere convertita, espresso come una stringa. Restituisce un valore booleano che indica se la conversione è avvenuta con successo o meno.

<?php
    $var = 234.234;
    settype($var, "string");
    //ora $var hai il valore "234.234", del tipo stringa
?>

Spazio gratis in rete per lo sviluppo web

Angelo ci presenta una lista di hosting gratuiti con traffico web illimitato, supporto a php 4 e 5, con tanto di database MySql.

Ottimizzare i nostri layout per iPhone

Quarto capitolo della serie “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“. I miei complimenti per Francesco, articoli veramente molto utili.

Come iniziare efficacemente un articolo per il Web

Il consiglio di Robin Good è di utilizzare l’approccio tramezzino a piramide rovesciata, comunicando immediatamente cosa c’è di così speciale nell’articolo.

Free Site Validator: HTML valido su un intero sito

Tommaso ci svela un nuovo servizio permette di controllare la validità del codice HTML di un intero sito e di ricevere il resoconto via email.

Buona domenica!!!

echo

Mostrare il testo all’utente; quindi anche variabili.

<?php echo "HELLO WORLD"; ?>

N.B. echo non è una funzione PHP, ma è un costrutto, per questo non richede l’uso di parentesi tonde.

var_dump

La funzione var_dump mostra il tipo e il valore di una variabile nello stream dell’output (in realtà è possibile assegnarvi più di una variabile: la funzione elabora il risultato di qualsiasi espressione PHP valida). Nel caso delle stringhe, var_dump restituisce anche il numero di caratteri che compongono la stringa:

<?php
    $randomNum = array(5, 3, 6, 4, 2, 1);
    var_dump($randomNum);
?>

Il codice precedente genera in un browser web il seguente output:

array(6) { [0]=> int(5) [1]=> int(3) [2]=> int(6)
               [3]=> int(4) [4]=> int(2) [5]=> int(1) }

print_r

La funzione print_r è simile a var_dump, ma cerca di rendere leggibile l’output agli utenti. print_r permette anche di specificare un valore facoltativo (chiamato parametro di una funzione) che indica alla funzione di restituire i risultati in una stringa e non di mostrarli nello stream di output.

L’output particolarmente leggibile generato da questa funzione è utile soprattutto per oggetti e array.

<?php
    $drinks = array("Coffee", "Café au Lait", "Mocha", "Espresso", "Americano", "Latte");
    print_r($drinks);
?>

Lo script precedente mostra il seguente output in un browser web:

Array ([0] => Coffee [1] => Café [2] => Mocha
         [3] => Espresso [4] => Americano [5] => Latte )

var_export

L’ultimo di questo gruppo di funzioni utili per la visualizzazione delle variabili e del loro contenuto è la funzione var_export, anch’essa molto simile a var_dump, tranne per il fatto che l’output è costituito da una rappresentazione valida di codice PHP dei valori contenuti nelle variabili fornite come parametro.

Per esempio, il seguente script:

<?php
    $arr = array(1, 2, 3, 4);
    var_export($arr);
?>

produce il seguente output (formattato per una lettura più semplice):

array (
    0 => 1,
    1 => 2,
    2 => 3,
    3 => 4
)

HTML

<div id="navcontainer">
    <ul id="navlist">
        <li id="active"><a href="#" id="current">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>

CSS

#navcontainer {
    width: 12em;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #90bade;
    color: #333;
}
#navcontainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}
#navcontainer li {
    border-bottom: 1px solid #90bade;
    margin: 0;
}
#navcontainer li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover {
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
}

;

Lista orizzontale

HTML

<div id="navcontainer">
    <ul id="navlist">
        <li id="active"><a href="#" id="current">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</div>

CSS

#navcontainer {
    margin: 0;
    padding: 0;
    height: 22px;
    font: 11px Verdana, sans-serif;
    width: 100%;
    border-bottom: 1px solid #bbb;
    list-style-type: none;
    background: #fff;
}
#navlist li {
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
    display: block;
}
#navlist li a, #navlist li a:link {
    background: #fff;
    color: #555;
    text-decoration: none;
    padding: 3px 5px 3px 5px;
    display: block;
}
#navlist li a:hover {
    color: #039;
    border-bottom: 3px solid #bbb;
    cursor: pointer;
    background: #eee;
}
#navlist li a#current, #navlist li a#current:link {
    color: #000;
    cursor: default;
    font-weight: bold;
    border-bottom: 3px solid #999;
}
#navlist li a#current:hover {
    border-bottom: 3px solid #f90;
    background: #eee;
}

1. virgolette singole
2. virgolette doppie
3. notazione heredoc

Nel primo sistema non sono supportati né l’escaping né l’estensione; quindi ‘\A’ visualizza solo i due caratteri. Le stringhe con virgolette doppie sono simili a quelle con virgolette singole, a parte il fatto che l’interprete del linguaggio PHP le analizza per trovare e sostituire le sequenze di escape e le variabili.

Il terzo sistema per includere le stringhe in uno script PHP è un’innovazione riscontrabile in linguaggi come Perl. Esclude gli apici come delimitatori, e questo è sicuramente un vantaggio perchè ci permette di sfruttarli per ulteriori annidamenti. Le stringhe heredoc si comportano come le stringhe delimitate da vingolette doppie anche se non è necessario applicare l’escaping ad altrettanti caratteri: è sufficiente effettuare l’escaping dei caratteri $.

In questo caso una stringa inizia con <<< e un identificatore e continua finché PHP non incontra una riga di testo di input che consiste solo nello stesso identificatore allineato a sinistra e in un punto e virgola, senza spazi prima o dopo il (;). L’identificatore ha un unico vincolo: deve contenere solo lettere, numeri e underscore e il primo carattere deve essere una lettera o un underscore.

Nel caso di stringhe di un certo ‘peso‘, la notazione heredoc è sicuramente il migliore delimitatore di stringhe: è l’ideale per la stesura di grossi blocchi di codice html o javascript (da inviare poi con un unico comando ‘echo’) pur mantenendo un certo ordine di codifica.

<?php
echo <<<HTML
    <p>
        Lorem Ipsum is simply dummy text of the printing and
        typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown
        printer took a galley of type and scrambled it to make a
        type specimen book.
    </p>
HTML;
?>

In Australia è stato sviluppato un software in grado di contare con massima accuratezza il numero di capelli, o di peli su zone delimitate. E’ opera dei ricercatori di scienze matematiche e dell’informazione del Csiro (Ente Nazionale di Ricerca).

Il software si affida a immagini catturate da uno scanner pressato sulla pelle. Usando un algoritmo matematico rintraccia e identifica ogni singolo capello, rilevandolo comprendendo sue caratteristiche, distinguendolo da rughe, cicatrice o nei.

Il software renderà più facile il compito di chi prepara creme depilatorie, che potrà valutare così con precisione la loro efficacia.

Ora Napolux potrai contarti i capelli in tempo reale.