CercaCrea: un editor HTML WYSIWYG
e modulo di ricerca in Visual Basic .net
Puoi scaricare solo il programma
compilato oppure il codice
sorgente in vb.net
Per funzionare il programma ha bisogno di internet explorer (almeno 5.5) e
del framework.net che puoi scaricare gratis
Per modificare il codice sorgente hai bisogno di SharpDevelop,
che è un programma opensource per progammare in c# e vb.net e del framework.net
sdk versione 1.1(anche gratis)
Il programma è quasi interamente scritto da me, utilizza delle librerie
esterne: mshtml
di microsoft , una classe wrapper per mshtml (htmleditor.dll),
e parte del programma
search companion.
Questa versione è gratis e open source , è un programma gia
funzionante ma va migliorato e le prossime versioni saranno migliori,
probabilmente le prossime versioni saranno una gratuita e un nuovo programma
simile a questo ma con molte più possibilità a pagamento.
Per ora il programma puo aprire e salvare file web html.. - inserire nel documento
tabelle , immagini , collegamenti , elementi posizionati con i pixel, form
, script , metatag , e molti elementi html , si possono modicare velocemente
il font e il colore del testo , ridimensionare e posizionare immagini, tabelle
, controlli activeX e applet, i tag html del documento appaiono nella sinistra
, cliccando su un tag lo si seleziona e si possono visualizzare e cambiare
gli attributi e l'html e gli eventi script.
L'editor permentte di tagliare , copiare e incollare elementi e testo, anche
da altri programmi tipo internet explorer o microsoft word , di annullare
e ripristinare , di selezionare tutto e di trovare del testo nel documento.
Il documento puo essere modificato sia visualmente che nel codice, si puo
inoltre visualizzare un anteprima.
Al menu Inserisci html possono essere aggiunti facilmente nuovi elementi e
modificati quelli gia esistenti, gli elementi del menu vengono memorizzati
in un file xml.
Il programma ha anche un modulo di ricerca che puo essere facilmente espanso
inserendo nuovi motori di ricerca.
Da questo modulo si puo anche aprire la pagina visualizzata nel browser all'
interno della modifica visuale
Il codice sorgente è commentato e puo essere modificato facilmente.
tutto il codice contenuto nei
moduli vb del programma è sotto la licenza
GPL , nelle prossime versioni migliorerò il programma opensource
e farò anche un nuovo programma a pagamento.
Qui sotto riporto il file di aiuto che descrive anche le funzioni del programma:
Se vuoi imparare a usarlo c'è anche un piccolo
tutorial.
L'editor
visuale
Appena aperto cercacrea viene visualizzata una piccola icona vicino all' orologio,
cliccando destro su questa icona e poi su Editor, si apre l'editor visuale
con una pagina bianca. e quindi si puo cominciare a scrivere o aprire una
pagina dal disco, chiudendo il programma l'icona vicino all' orologio rimane
e si puo successivamente riaprire il programma..
Nella finestra dell' editor ci sono alcuni elementi, di seguito la descrizione:
- I
menu
- Il
menu file
- Apri : Apre un file sul disco
- Salva : Salva un file sul disco
- Stampa : Mostra una finestra di anteprima di stampa in cui si possono regolare alcuni parametri e stampare il documento
- Il menu preferenze
- Usa colori websafe : se selezionata questa opzione tutti i colori scelti nelle finestre di dialogo verranno convertiti nel colore websafe che si avvicina di più, i colori websafe sono solo 256 ma sono uno standard per tutti i computer e i sistemi operativi e quindi sono adatti per le pagine web.
- Visualizza albero html: Se selezionata questa opzione ogni volta che si clicca sulla pagina viene visualizzata di lato la struttura html (questa stuttura viene descritta sotto), non visualizzando la struttura il programma va più veloce perchè deve calcolare meno dati.
- Visualizza selezione html e aiuto : Se selezionata questa opzione, ogni volta che viene selezionato un tag nella modifica visuale o nella struttura html, l' HTML selezione viene visualizzato e puo essere modificato, inoltre viene visualizzato un testo di aiuto tag selezionato che descrive il tag e i suoi attributi principali non visualizzando l'html della selezione e l'aiuto il programma va più veloce perchè deve calcolare meno dati.
- Visualizza attributi: Se selezionata questa opzione, ogni volta che viene selezionato un tag nella modifica visuale o nella struttura html, tutti gli attributi tag selezionato vengono visualizzati e possono essere selezionati e modificati, non visualizzando gli attributi il programma va più veloce perchè deve calcolare meno dati.
- Il menu vista
- design: se selezionata la pagina nella modifica visuale puo essere modificata, ma non tutti gli elementi vengono visualizzati come se fosse aperta in un browser.
- browse: se selezionata la pagina viene visualizzata come se fosse aperta in Internet Explorer, quindi è un anteprima del risultato finale, ma non puo essere modificata
- HTML se selezionata si apre una nuova finestra con il codice sorgente HTML della pagina, si possono eseguire ricerche e modifiche che poi verranno applicate alla paginaù
- Il menu aggiungi html: Questo menu puo essere riprogrammato facilmente, si possono aggiungere e modificare gli elementi.
- aggiungi/modifica
elemento apre una nuova finestra in cui si possono modificare
gli elementi del menu.
in un menu a discesa vengono elencati tutti gli elementi, per ogni elemento vengono visualizzati nome,codice, menu e punto di inserimento - nome è il nome visbile nel menu
- codice
è l'html che verrà inserito nella pagina, con alcune
regole : prima va scritta una decsrizione del codice, poi vanno
inseriti 3 canceletti ### e dopo va scritto il codice html, nel
codice html si possonono inserire alcune parole circondate da due
cancelletti ## queste parole saranno quei campi che l'utente puo
scegliere quando inserisce l'html. un esempio di codice:
questo codice visualizzaerà un elemento del menu che se cliccato apre una finestra con scritto in alto:"questo tag visualizza un campo di testo in un form con il nome e il valore selezionati " , nella finestra ci sono due campi di testo: nome e valore , scrivendo per esmpio nome:"miocampo" e valore "miovalore" e cliccando su ok verrà inserito nella pagina il codice "<input type=text name=miocampo value=valore>" che verrà visualizzato così: - menu è il menu in cui viene inserito l'elemento, puo essere quello principale oppure un sottomenu dell' elenco, se si seleziona "nuovo" bisogna poi scrivere il nome nel campo di testo accanto
- Punto di inserimento puo essere selezione o HEAD, se è selezione l'html inserito nella pagina sovrascriverà l'elemento selezionato o verrà inserito nel punto dove è il cursore | che lampeggia, se è head l'html verrà inserito nella parte head (invisibile) del documento.
- Gli altri elementi del menu inserisci html possono essere modificati e contangono ognuno un piccolo aiuto specifico
- Il menu aiuto
- Aiuto visualizza queste pagine
- invia segnalazione errori apre una finestra che invia una segnalazione anonima di errore, così che gli errori possono essere corretti nelle prossime versioni.
- Il
menu file
- La
barra degli strumenti contiene una serie di pulsanti , ogni pulsante
ha un piccolo testo esplicativo quando il mouse viene fermato sopra, la
barra degli strumenti è molto simile a quella di word o delle e-mail
, i primi pulsanti sono per fare il testo selezionato in grassetto, corsivo,
sottolineato , o con una linea sopra, gli stessi pulsanti possono rimuovere
queste caratteristiche dalla selezione.
Il pulsante collegamento crea un collegamento ad un altra pagina dal testo o elemento selezionato( bisogna inserire l'url dell' altra pagina), il pulsante ancoraggio crea un punto con nome che puo essere raggiunto da collegamenti ipertestuali(bisogna inserire il nome).
I pulsanti seguenti sono per il paragrafo e possono allinearlo a destra, sinistra, centro, giustificato, aumentare e diminuire il rientro.
Dopo c'è il pulsante per il posizionamento assoluto, normalmente gli elementi (immagini, campi dei moduli, ecc..) vengono inseriti uno dopo l'altro da sinistra a destra nel testo, selezionando un elemento e cliccando su pos.assoluto si puo invece muoverlo con il mouse e metterlo dove si vuole, anche sopra ad altri elementi.
Dopo ci sono i pulsanti lista che permettono di inserire il paragrafo selezionato dentro una lista numerata o non numerata con i pallini.
Dopo ci sono i soliti pulsanti copia,incolla,taglia, cancella, seleziona tutto , deseleziona tutto e trova.
Dopo ci sono i pulsanti di inserimento, che possono inserire un immagine, una tabella, un testo scorrevole e un separatore orizzontale, per la tabella e l'immagine bisogna specificare alcuni attributi html.
Dopo ci sono i pulsanti per i moduli, ogni pulsante inserisce un tipo specifico di campo nella pagina - La
scelta font permette di scegliere il tipo di font e di visualizzare
le caratteristiche di quello selezionato.
Cliccando il pulsante font type si apre una finestra di dialogo con tutti i font installati nel sistema, altrimenti si puo sceglie un font dal menu a discesa, questo menu visualizza solo quei font che sono più comunemente installati e che è meglio usare su internet, oltre al font del testo selezionato.
Si puo scegliere anche la grandezza da 1 a 6 , il colore e il colore di sfondo del testo. - La
struttura html visualizza una rappresentazione a cascata degli
elemnti di programmazione HTML della pagina, l' elemento selezionato nella
modifica visuale ha scritto (sel) ed è espanso, cliccando su un qualsiasi
elemento si possono visualizzare e modificare i suoi attributi, si puo vedere
l'html dell'elemnto e quello contentuto all' interno, si puo leggere un
testo di aiuto che spiega a cosa serve quell' elemento nella pagina , quali
attributi ha e a cosa servono
La struttura HTML viene aggiornata ogni volta che si clicca sulla modifica visuale, e si puo disattivare dal menu preferenze. - La
modifica visuale contiene la pagina, gli elementi principali
della pagina (non tuti gli elementi) vengono visualizzati come se fossero
in un browser ma possono essere modificati, quindi quello che vedi mentre
modifichi la pagina è più o meno quello che vedrà chi
si collega a quella pagina sul tuo sito.
Cliccando sinistro su un elemento della pagina lo si seleziona e si attivano la struttura html di lato, gli attributi, l'aiuto e l'html selezione, cliccando destro avviene lo steso ma in più esce un menu contestuale con alcuni comandi.
Le immagini, le tabelle ed altri elementi possono se selezionati essere ingranditi e rimpiccioliti usando i quaratini neri di lato, gli elementi con posizionamento assoluto possono essere trascinati con il mouse in qualsiasi puto della pagina. - Gli
Attributi tag selezionato sono una lista di tutti gli attributi
possibili per quel tag, alcuni non hanno valore, hanno valore nullo o il
valore predefinito e in questo caso non vengono inseriti nell'html
Cliccando su un attributo viene visualizzato sotto in un capo di testo il suo valore, si puo modificare o inserire e cliccare sul pulsante modifica attributo, per sapere il significato di un attributo si puo guardare il testo di aiuto che spiega i principali attributi.
Non tutti gli attributi visualizzati fanno parte dello standard html 4.0, alcuni sono solo visibili in internet explorer ed altri sono inutili ma sono comunque attributi che è possibile inserire.
Se viene inserito un valore non valido per l'attributo il programma avvisa con un messaggio di errore.
- L'HTML selezione è il codice HTML che fa visualizzare l'elemento selezionato, si puo vedere per imparare come si fa a programmare certe cose, in molti elementi si puo anche modificare cliccando poi sul pulsante modifica HTML, se un elemento non è modificabile attraverso l'html il pulsante viene disattivato, oppure appare un messagio di errore.
- L'
aiuto tag selezionato visualizza un testo di aiuto realtivo al
tag selezionato nella modifica visuale o nella struttura html, il testo
spiega cosa visualizza quel tipo di tag e quali sono gli attributi possibili,
cosa significano e qual'è il loro valore attuale.
il modulo di ricerca
Appena avviato cercarea mostra un icona vicino all' orologio, cliccando sinistro sull'icona o cliccando destro e poi "cerca.." si aprono i campi di ricerca su internet.
Per cercare si deve inserire un testo in Testo Ricerca , selezionare un motore di ricerca da motori di ricerca e cliccare sul pulsante cerca , si aprirà una finestra di Internet explorer con il risultato della ricerca e nella barra url viene scritto il sito visualizzato nella finestra aperta.
E' possibile scegliere il motore anche scegliendo la categoria da Categorie motori e poi scegliendo dopo il motore.
Cliccando sul tasto rosso X si chiude il modulo di ricerca, ma resta attiva l'icona e si puo riaprire il modulo come si era fatto all' inizio
Cliccando sul pulsante altro> vengono visualizzati 3 nuovi pulsanti di lato:
1)Apri Editor aprirà l'editor html visuale con una pagina vuota
2)Modifica questa pagina aprirà l'editor html visuale con la pagina visualizzata nella finestra del browser, sarà poi possibile modificarla e salvarla su disco (Nota: l'editor salva l'html della pagina ma non le immagini, per salvare la pagina e le immagini bisogna salvarla da internet explorer sull' hard disk e poi aprirla nell'editor)
3)Aggiungi questo motore permette di aggiungere un nuovo motore alla lista, per aggiungerlo bisogna aprirlo nella stessa finestra dei risultati della ricerca, cercare la frase "la mia ricerca" e cliccare sul pulsante Aggiungi questo motore , se è possibile aggiungerlo si aprirà una nuova finestra in cui si puo scrivere un nome e scegliere una categoria, (si puo anche inserire una nuova categoria) cliccando su ok il nuovo motore viene aggiunto alla lista .
chiudi menu