Gioco a programmare: febbraio 2014

domenica 23 febbraio 2014

Lo scheletro del blog (ad eccezione dei commenti)

Ecco lo scheletro di tutto, tranne i commenti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">

<head>
  <title><$BlogPageTitle$></title>

  <$BlogMetaData$>

 <style>
</style>
</head>
<body>

<Blogger>
<BlogItemTitle>
   <$BlogItemTitle$>
</BlogItemTitle>

<$BlogItemBody$>


<$I18NPostedByAuthorNickname$> alle <a href="<$BlogItemPermalinkUrl$>"><$BlogItemDateTime$></a>

<BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$I18NNumComments$></a>


</Blogger>
</body>
</html>

Sintesi dei tags sulla pagina principale

Mi ricostruisco tutto...
Prendiamo nota dei tags...

Titolo del post

BlogItemTitle
   $BlogItemTitle$
/BlogItemTitle

Corpo del post
```
$BlogItemBody$
```

Footer

Postato da... il...

$I18NPostedByAuthorNickname$ $BlogItemPermalinkUrl$ $BlogItemDateTime$

Link ai commenti col numero commenti

BlogItemCommentEnabled
    $BlogItemCommentCreate$ $BlogItemCommentFormOnClick$ $I18NNumComments$
/BlogItemCommentEnabled

sabato 22 febbraio 2014

Il corpo dei commenti

Bene.
Ecco tutta la raccolta dei commenti scorporata dai tag HTML:

<BlogItemComments>
     <$I18NAtCommentTimeWithPermalink$>
     <$I18NCommentAuthorSaid$>
     <$BlogCommentBody$>
     <$BlogCommentDeleteIcon$>
</BlogItemComments>

Che danno una sistemazione grezza, la quale andrà rimaneggiata coi tag HTML.

La sezione commenti

Per quanto riguarda i commenti, c'è un'indicazione del numero dei commenti.

L'indicazione del numero dei commenti è quella che io ho colorato in rosso mediante un aggiustamento dello stile, per poterla meglio identificare.
E' specificata con questo codice:

<ItemPage>

  <div id="comments">
 <BlogItemCommentsEnabled><a name="comments"></a>

        <h4 style="background-color:red"><$I18NNumComments$>:</h4>

Lasciamo soltanto i tag di Blogger:

<ItemPage>


 <BlogItemCommentsEnabled>

        <$I18NNumComments$>

A parte il tag condizionale <ItemPage c'è di nuovo l'apertura del tag <BlogItemCommentsEnabled>, e di nuovo il tag che specifica il numero dei commenti, <I18NNumComments>, questa volta senza link.

Bene, per il momento mi fermo qua...

Footer: autore del post e commenti.

Adesso veniamo ai commenti.
Che sarebbe quell'altra scritta col numero dei commenti presente in basso a destra sul footer, insieme al "Posted by... @...".

Ripasso il codice necessario per il "postato da..."
Come prova, lo tolgo dal footer e lo metto nel BlogItemBody

<div class="post-body">

          <p>

      <$BlogItemBody$>

    </p>
<$I18NPostedByAuthorNickname$> alle <a href="<$BlogItemPermalinkUrl$>"><$BlogItemDateTime$></a>
        </div>

E vediamo se funziona (ho fatto tutto a memoria).

Perfetto! Postato da... eccetera, è andato fuori dal footer.

Adesso lo rimetto nel footer, sempre a memoria:

        <p class="post-footer">
<$I18NPostedByAuthorNickname$> alle <a href="<$BlogItemPermalinkUrl$>"><$BlogItemDateTime$></a>
      
      <BlogItemCommentsEnabled>
         <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
      </BlogItemCommentsEnabled>

Ah, ecco, viene così:

perchè ho dimenticato il tag <em>

        <p class="post-footer">
<em><$I18NPostedByAuthorNickname$> alle <a href="<$BlogItemPermalinkUrl$>"><$BlogItemDateTime$></a></em>
      
      <BlogItemCommentsEnabled>
         <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
      </BlogItemCommentsEnabled>

ed è tornato a posto!

Adesso veniamo ai commenti.

I tags che comprendono quella voce che dice il numero dei commenti, vicino alla matitina, sono

      <BlogItemCommentsEnabled>

      </BlogItemCommentsEnabled>

Se ce li metto da soli, non danno nessun effetto, il numero di commenti non compare.
Per quanto ho capito, per fare apparire il numero dei commenti bisogna mettere il tag $lt;$I18NNumComments$>
Proviamoci:

      <BlogItemCommentsEnabled>
         <$I18NNumComments$>
      </BlogItemCommentsEnabled>

E infatti appare il numero di commenti, ma NON come collegamento ipertestuale.

Per fare questo bisogna creare il link all'indirizzo specificato dal tag che, appunto, permette la creazione dei commenti, linkando o alla pagina del post o a una finestra popup a seconda delle opzioni.

Aggiungiamo <BlogItemCommentCreate$>

<BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"><$I18NNumComments$></a>
</BlogItemCommentsEnabled>

...e funziona!

Se però io nelle impostazioni seleziono i commenti in un form a parte (finestra popup), non funziona ancora.
E' necessario che io aggiunga, dopo il collegamento ipertestuale, <$BlogItemCommentFormOnClick$>.

<BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$I18NNumComments$></a>
</BlogItemCommentsEnabled>

Che faticaccia!

venerdì 21 febbraio 2014

Postato da... alle ... con link al Permalink del post

Adesso dobbiamo curare la parte che dice "Postato da Trigon @ 16:08

Il codice sarebbe questo:

<em><$I18NPostedByAuthorNickname$> @ 
<a href="<$BlogItemPermalinkUrl$>" title="permanent link">
<$BlogItemDateTime$></a></em>

Quell'I18N mi risulta strano. Prendiamolo per buono mnemonicamente.
Invece quel PostedByAuthorNickname è chiaro: traduciamocelo in italiano per memorizzarlo meglio:
Postato da Nickname dell'Autore.

La chiocciolina resta invariata perchè è un semplice carattere grafico.

Invece $BlogItemPermalinkUrl$ è l'url del Permalink del solito elemento blog, ed è l'indirizzo cui si va a finire cliccando sul link specificato da BlogItemDateTime, che sarebbe l'ora dell'elemento blog.

Provo a rimaneggiarmelo un po'...

Ripassiamo i tag di Blogger che abbiamo già imparato.

Vediamo...

Quelli che ho visto finora iniziano sempre per Blog.
E sono:

<BlogDateHeader>
 <$BlogDateHeaderDate$>
</BlogDateHeader>

Come ricordarli?

La parola iniziale è sempre Blog
Trattandosi di data, la parola successiva è Date, e siccome è un'intestazione, ricordiamo anche Header.
Il tag che specifica la data sarebbe la data dell'header di data del blog, e quindi va aggiunto Date componendo $BlogDateHeaderDate$

<BlogItemTitle>
 <$BlogItemTitle$>
</BlogItemTitle>

Il successivo è quello del Titolo

Inizia sempre con Blog.
Questa volta entriamo nell'elemento del post, quindi ci aggiungiamo Item

Essendo il titolo, andiamo con Title. Il tag che specifica il titolo resta invariato $BlogItemTitle$.

Andiamo al corpo.

La parola iniziale è sempre Blog
Si tratta sempre dell'elemento post, quindi aggiungiamo Item
Essendo il corpo, si aggiunge Body

Non ci vogliono i tag iniziali e finali e si scrive solo $BlogItemBody$.

mercoledì 19 febbraio 2014

Smontaggio e rimontaggio da zero di un blog

Ho distrutto completamente il blog JacTest di questa piattaforma, in modo da esercitarmi a ricostruirlo pezzo-pezzo.
Ecco lo scheletro essenziale cui mi sono ridotto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">

<head>
  
  <style type="text/css">
body {
background:#afc;
  </style>
</head>
<body>
</body>
</html>

Ed ecco cosa ne viene fuori:

Praticamente l'unica informazione che ho passato è quell' #afc del colore di background, che riproduce una delle tonalità azzurrine che a me piacciono tanto.

Ora cerchiamo di stabilire la struttura del blog.
Vediamo dal codice che ho salvato come vengono strutturate le varie sezioni...

Ecco!
Incontro il tag %lt;Blogger>.
Pongo l'inizio e la fine, e intanto ci metto dentro il tag <BlogDateHeader> e pongo l'inizio e la fine.
In mezzo ci metto <BlogDateHeaderDate>, ed ecco che mi compaiono le date dei posts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">

<head>
  
  <style type="text/css">
body {
background:#afc;
  </style>
</head>
<body>
<Blogger>
<BlogDateHeader>
<$BlogDateHeaderDate$>
</BlogDateHeader>

</Blogger>
</body>
</html>

sabato 15 febbraio 2014

Sfasciando e rimontando il date header dei post di blogger...

Vediamo di modificare le varie sezioni di un post...
Non è facile capire l'HTML di questi blog perchè ci sono dei tags particolari...

/* Posts
----------------------------------------------- */
.date-header span {
  background-color: red;
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

Ecco, adesso dovrebbe essere modificato il colore di sfondo della data:

Ho sostituito il colore predefinito con quello rosso.
Dunque so che la classe .date-header span sta a significare la data del post.

Provo a modificare altri dettagli...

.date-header span {
  background-color: cyan;
  color:blue;
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

Ed ecco:

Cominciamo a capirci qualcosa...

Ancora:

.date-header span {
  background-color: cyan;
  color:blue;
  padding: 20px;
  letter-spacing:15px;
  font-style:italic;
  margin:0px);
}

Ho alterato a man bassa il padding, il letter spacing e ci ho aggiunto anche il font-style italic.
Per quanto riguarda il margin, non sono riuscito a verificare gli effetti.

E abbiamo iniziato a dominare una parte del blog: il date header

giovedì 13 febbraio 2014

Riprovo il mio programmino per convertire i tag nei caratteri di escape...

Ho ripescato il mio programmino converti.exe
Lo metto in una cartella del desktop chiamata "Conversione".

Ecco:

C:\Users\Antonello>cd desktop

C:\Users\Antonello\Desktop>dir /p /o
 Il volume nell'unità C è Acer
 Numero di serie del volume: 9AE5-9692

 Directory di C:\Users\Antonello\Desktop

13/02/2014  22.39    <DIR>          .
13/02/2014  22.39    <DIR>          ..
20/01/2014  21.36    <DIR>          Camera Roll
04/12/2013  20.36    <DIR>          Computer di Daniele
13/02/2014  22.39    <DIR>          Conversione
11/02/2014  00.01    <DIR>          immagini dal cellulare
08/01/2014  01.05    <DIR>          Kyodai
20/01/2014  13.21    <DIR>          Nuova cartella
12/12/2013  15.32    <DIR>          Nuova filmati
29/12/2013  15.25    <DIR>          Tomb Raider 2
18/01/2014  19.30    <DIR>          wolf
19/01/2014  18.27    <DIR>          Wolf modificato
03/01/2014  20.48    <DIR>          wolfpic
07/12/2013  11.16           155.777 2013-12-07-320.jpg
03/02/2014  12.26         1.580.988 2014-02-03 12.26.41.jpg
03/02/2014  12.29         1.345.872 2014-02-03 12.29.32.jpg
13/12/2013  18.32            19.826 Applicazioni rimosse.html
12/01/2014  17.25                16 batch.bat
04/12/2013  15.41             1.468 BOOTEX.LOG
Premere un tasto per continuare . . .

E la apro:

C:\Users\Antonello\Desktop>cd conversione

C:\Users\Antonello\Desktop\Conversione>dir
 Il volume nell'unità C è Acer
 Numero di serie del volume: 9AE5-9692

 Directory di C:\Users\Antonello\Desktop\Conversione

13/02/2014  22.39    <DIR>          .
13/02/2014  22.39    <DIR>          ..
03/06/2009  15.55            20.480 converti.exe
               1 File         20.480 byte
               2 Directory  399.748.722.688 byte disponibili

Adesso, dato che il prompt del DOS mi si apre sulla cartella Antonello, mi creo su un file di testo un pipistrello.

@ECHO OFF
cd desktop/conversione

e lo salvo sulla cartella Antonello:

C:\Users\Antonello>dir /p /o
 Il volume nell'unità C è Acer
 Numero di serie del volume: 9AE5-9692

 Directory di C:\Users\Antonello

13/02/2014  22.45    <DIR>          .
13/02/2014  22.45    <DIR>          ..
04/12/2013  18.00    <DIR>          Application Data
19/12/2013  22.01    <DIR>          Contacts
13/02/2014  22.39    <DIR>          Desktop
12/02/2014  12.35    <DIR>          Documents
13/02/2014  02.28    <DIR>          Downloads
13/02/2014  17.36    <DIR>          Dropbox
11/02/2014  18.26    <DIR>          dwhelper
19/12/2013  22.01    <DIR>          Favorites
30/12/2013  19.35    <DIR>          Links
22/12/2013  10.57    <DIR>          Music
04/12/2013  16.09    <DIR>          PicStream
01/02/2014  21.45    <DIR>          Pictures
19/12/2013  22.01    <DIR>          Saved Games
19/12/2013  22.01    <DIR>          Searches
24/01/2014  13.42    <DIR>          Videos
13/02/2014  22.45                35 converti.bat
14/12/2013  18.04               621 Last session Antonello.prj
Premere un tasto per continuare . . .

Ed ecco che all'apertura del prompt del DOS mi basta digitare converti per trovarmi subito nella mia cartella per la conversione.

C:\Users\Antonello>converti

C:\Users\Antonello\Desktop\Conversione>

Roba da poco, ma dà soddisfazione

Per mettere qui il codice del prompt del DOS ho usato proprio il mio programmino!

mercoledì 12 febbraio 2014

Ancora sui menu...

Ora devo aggiungere alla Casella che ho messo nel contenitore un nuovo menu.
Intanto, se clicco su questa, si attiva il menu che viene in qualche modo "ereditato" dal controllo contenitore, e questo mi sballa tutta la logica...

Ci metto alcuni comandi "test"...

    Sub aggiungi(sender As Object, e As EventArgs)
        Debug.Print(mioMenu.SourceControl.GetType.ToString)
        Dim c As New Casella
        c.ContextMenuStrip = mioMenu
        elementoSelezionato.controls.add(c)
    End Sub

Ecco: ho aggiunto questa riga:

Debug.Print(mioMenu.SourceControl.GetType.ToString)

per desumere l'elemento che ha "innescato" il menu contestuale.
Poi ho impostato l'innesco del menu contestuale anche da parte della casella, per vedere se il sourceElement, ossia l'elemento che ha innescato il menu, sia sempre lo stesso.

        Dim c As New Casella
        c.ContextMenuStrip = mioMenu
        elementoSelezionato.controls.add(c)

Se evito di inserire la riga:

c.ContextMenuStrip = mioMenu

che attribuisce il menu contestuale alla casella, ottengo come sourceControl:

gridProject.Pannello
gridProject.Pannello

avendo cliccato la prima volta sul Pannello per aggiungere la Casella, e la seconda volta sulla Casella:

Invece se metto la riga che attribuisce alla Casella il menu contestuale:

    Sub aggiungi(sender As Object, e As EventArgs)
        Debug.Print(mioMenu.SourceControl.GetType.ToString)
        Dim c As New Casella
        c.ContextMenuStrip = mioMenu
        elementoSelezionato.controls.add(c)
    End Sub

Ottengo, sempre cliccando prima sul Pannello e poi sulla Casella:

gridProject.Pannello
gridProject.Casella

ottenendo quello che voglio, ossia che al click sul menu sia riconosciuto il controllo sul quale ho cliccato per aprire il menu contestuale.

Menu di contenitori e controlli...

Cerchiamo di risolvere 'sta cosa che non ne ho mai voglia e la sto tirando per le lunghe...

        mGrid = New Griglia(Of Pannello)(Me, True, 30, 5, 10, 10)
        For Each elemento As Pannello In mGrid
            elemento.ContextMenuStrip = mioMenu
        Next

Mediante la classe da me creata Griglia ho creato una griglia di controlli di tipo Pannello, erede di Panel.

Ad ognuno di questi attribuisco il menu contestuale mioMenu che ho creato in fase di progettazione, vuoto.
Ovviamente, quando clicco col destro, dato che il menu contestuale è vuoto, non succede, apparentemente, assolutamente niente.

Ecco, ho fatto delle aggiunte, che marco in rosso:

        mGrid = New Griglia(Of Pannello)(Me, True, 30, 5, 10, 10)
        For Each elemento As Pannello In mGrid
            AddHandler elemento.MouseDown, AddressOf SetMenu
            elemento.ContextMenuStrip = mioMenu
        Next

   
    End Sub

    Sub setMenu()
        mioMenu.Items.Clear()
        Dim m As New ToolStripMenuItem
        m.Text = VociDelMenu(0)
        mioMenu.Items.Add(m)
    End Sub

Così, prima che il menu si mostri, lo posso modificare in quanto al click del mouse sull'elemento chiamo la routine setMenu che mi aggiunge un menu con una voce, che nella fattispecie prendo da una matrice di voci del menu, e che ha come testo "aggiungi".

Adesso attribuisco al menu "aggiungi" l'esecuzione di una routine.
Per far questo, però, devo identificare e memorizzare in una variabile l'elemento da cui ho evocato il menu.
Dichiaro una variabile oggetto:

    Dim elementoSelezionato As Object

E poi, nella routine setMenu, prima di settare il menu, memorizzo l'elemento nella variabile oggetto.

    Sub setMenu(sender As Object, e As MouseEventArgs)
        elementoSelezionato = sender
        mioMenu.Items.Clear()
        Dim m As New ToolStripMenuItem
        m.Text = VociDelMenu(0)
        mioMenu.Items.Add(m)
    End Sub

E ora studio come aggiungere un controllo nell'insieme control dell'elemento (che è una classe derivata di Panel):

    Sub aggiungi()
        elementoSelezionato.controls.add(New Button)
    End Sub

quindi attribuisco all'evento click del menu aggiunto l'handler alla routine aggiungi.

    Sub setMenu(sender As Object, e As EventArgs)
        elementoSelezionato = sender
        mioMenu.Items.Clear()
        Dim m As New ToolStripMenuItem
        m.Text = VociDelMenu(0)
        AddHandler m.Click, AddressOf aggiungi
        mioMenu.Items.Add(m)
    End Sub

E pare che funzioni...

Ho sostituito al Button una classe Casella da me creata in pochi secondi (azz, che bravo!) provvisoriamente con un'ampiezza limitata in previsione di studi futuri.

Class Casella
    Inherits Label
    Sub New()
        BackColor = Color.LightGreen
        Width = 50
    End Sub
End Class

E adesso dobbiamo studiarci un po' la gestione dei menu per quanto riguarda i controlli aggiunti...

sabato 1 febbraio 2014

Smontare le costruzioni cervellotiche per i menu contestuali...

Personalizziamo il menu per i pannelli.

        'costruzione della griglia
        mGrid = New Griglia(Of Pannello)(Me, True, 30, 5, 10, 10)
        For Each elemento As Pannello In mGrid
            AddHandler elemento.MouseDown, AddressOf AggiustaMenuPannello
            elemento.ContextMenuStrip = mioMenu
        Next
    End Sub

    Sub AggiustaMenuPannello()

        aggiungiVociAlMenu(voci.aggiungi, voci.aggiungi)

    End Sub

    Sub aggiungiVociAlMenu(inizio As Integer, fine As Integer)
        mioMenu.Items.Clear()
        For n = inizio To fine
            Dim m As New ToolStripMenuItem With {.Text = VociDelMenu(n)}
            mioMenu.Items.Add(m)
        Next
    End Sub

Con il codice

        For Each elemento As Pannello In mGrid
            AddHandler elemento.MouseDown, AddressOf AggiustaMenuPannello
            elemento.ContextMenuStrip = mioMenu
        Next

Si attribuisce il gestore d'evento AggiustaMenuPannello al click su ciascuno dei pannelli della griglia, ossia si personalizza il menu mioMenu per il Pannello.
Nello stesso tempo si attribuisce come menu contestuale il menu mioMenu
L'aggiustamento del mioMenu per il pannello si vale delle due routines

    Sub AggiustaMenuPannello()

        aggiungiVociAlMenu(voci.aggiungi, voci.aggiungi)

    End Sub

    Sub aggiungiVociAlMenu(inizio As Integer, fine As Integer)
        mioMenu.Items.Clear()
        For n = inizio To fine
            Dim m As New ToolStripMenuItem With {.Text = VociDelMenu(n)}
            mioMenu.Items.Add(m)
        Next
    End Sub

...anche se forse si potrebbe fare prima con:


    Sub AggiustaMenuPannello()
        mioMenu.Items.Clear()
        mioMenu.Items.Add(New ToolStripMenuItem With {.Text = VociDelMenu(0)})
    End Sub

...che funziona lo stesso e non è così cervellotico.

Quindi il codice, a questo punto diventa, semplificando ed evitando di intricarsi in jungle di pensiero contorto:

        'costruzione della griglia
        mGrid = New Griglia(Of Pannello)(Me, True, 30, 5, 10, 10)
        For Each elemento As Pannello In mGrid
            AddHandler elemento.MouseDown, AddressOf AggiustaMenuPannello
            elemento.ContextMenuStrip = mioMenu
        Next
    End Sub

    Sub AggiustaMenuPannello()
        mioMenu.Items.Clear()
        mioMenu.Items.Add(New ToolStripMenuItem With {.Text = VociDelMenu(0)})
    End Sub

laddove a ogni pannello della griglia viene semplicemente attribuita la funzione che formatta il menu su misura per il pannello e il menu stesso come menu contestuale.
Punto!

Gioco a programmare

JavascriptProva