Free PHP, HTML, CSS, JavaScript editor - Codelobster IDE

Released: March 26, 2020

In this article, we suggest you to get acquainted with the free editor of web languages - Codelobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.

Codelobster IDE allows you to edit PHP, HTML, CSS and JavaScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.

If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript code, which is contained in HTML files.

The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors.

Codelobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript function by pressing the F1 key.

The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script.

You can view the HTML templates directly in the editor, highlight the interesting elements on the page and explore the associated CSS styles. HTML and CSS inspector works by the principle of all known FireBug

Other useful functions and features of the IDE:

• A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it.
• Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale.
• Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others.
• The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian.

The professional version of Codelobster IDE provides the programmer with even more features.

For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting.

In addition the professional version includes an extensive set of plug-ins:

• Fully implemented support for JavaScript libraries, such as jQuery, Node.js, AngularJS, BackboneJS and MeteorJS.
• A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins.
• Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress.

We can download and install any framework directly from the program without being distracted from the main tasks.

In general, for a year of work, our team had no complaints against the editor. Codelobster IDE works fast, does not hang and allows us to work even with large PHP projects.

You can download Codelobster IDE from the official website codelobsteride.com

Un ottima soluzione per la creazione di pagine statiche (HTML)

Hugo è uno dei più popolari generatori di siti statici (HTML) open source; con una incredibile velocità e flessibilità.

Questo è il link https://gohugo.io/

L'installazione viene via terminale se si usa Mac OS questo è lavvio. (ma con delle accortezze)

brew install hugo

Vedi pagina dedicata:
https://gohugo.io/getting-started/installing/

 Come primo Step (Per sistemi Mac OS):

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

L'installazione e molto "Romantica" in stile Linux ;-)

IE non è ancora morto in Italia

Nonstante tutto il mondo abbia proclamato la morte del famoso Bug Browser IE... tra l'11 il 10 e il famigerato 9...
per chi dovesse fare cross-browsing diventa veramante drammatico implementare animazioni CSS3 e molto altro ancora.


Nel nostro paese ancora nonostante si parli di Digital ce molta ingnoranza e la cattiva abbitudine di non voler adeguarsi alle nuove tecnologie che non siano a stretto legame con il mondo social e il gico d'azzardo online.

Ma per chi volesse avere lamassima compatibilità e offrire una adeguata navigazione anche a coloro che sono rimasti all'inteno del mondo IE
possiamo implementare una soluziuone efficace via @media query:

Internet Explorer 10 & 11

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 /* IE10+ CSS styles go here */
}

Microsoft Edge 12:

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Richimare CSS per la versione IE11 IE10 e risolvere i problemi tramite @media query per il giusto cross-browsing e la soddisfazione di tutti gli utenti...

Più di una semplice raccolte di librerie JS

Questo progetto è indubbiamente una miniera d'oro per un web designer e developer.
Una suite di librerie e strumenti modulari che lavorano insieme o in modo indipendente per abilitare ricchi contenuti interattivi su tecnologie web aperte tramite HTML5.

EaselJS

Una libreria JavaScript che facilita il lavoro con l'elemento Canvas HTML5.
Utile per creare giochi, arte generativa e altre esperienze altamente grafiche.

EaselJS offre soluzioni dirette per lavorare con grafica ricca e interattività con HTML5 Canvas.
Fornisce un'API che è familiare agli sviluppatori Adobe Animate, ma abbraccia la sensibilità JavaScript.
Consiste in un elenco di visualizzazione completo, gerarchico, un modello di interazione core e classi helper per semplificare il lavoro con Canvas.

TWEEN JS

Una libreria JavaScript semplice ma potente per il tweening e l'animazione di proprietà HTML5 e JavaScript.
Funziona stand-alone o integrato con EaselJS.

TweenJS è una libreria di tweening semplice da utilizzare in JavaScript.
È stato sviluppato per integrarsi bene con la libreria EaselJS, ma non è dipendente o specifico. Supporta il tweening di entrambe le proprietà degli oggetti numerici e le proprietà di stile CSS. L'API è semplice ma molto potente, facilitando la creazione di interpolazioni complesse concatenando comandi.

SOUND JS

Una libreria JavaScript che fornisce una semplice API e potenti funzionalità per semplificare il lavoro con l'audio.
Si collega facilmente il caricamento del file audio a PreloadJS.

SoundJS riassume l'implementazione del suono HTML5, rendendo molto più semplice l'aggiunta di suoni cross-browser coerenti ai tuoi giochi o esperienze ricche.
È possibile richiedere le funzionalità, quindi specificare e assegnare la priorità a quali API, plug-in e funzionalità vengono sfruttati per dispositivi o browser specifici. 

PRECARICO JS

Una libreria JavaScript che consente di gestire e coordinare il caricamento di risorse e dati.

PreloadJS facilita il precaricamento delle risorse: immagini, suoni, JS, caratteri, testo e altro.
Usa XHR2 per fornire informazioni di progresso reali quando disponibili, o ricade per taggare il caricamento e agevolare il progresso quando non lo è.
Consente più code, più connessioni, interrompendo code e molto altro.

Considerando che è sponsorizzato da Adobe, Microsoft, Mozzilla e Gskinner

Se ne vedranno delle belle!!!!

SVG animato durante lo Slide by Sencha

Questa demo è stata realizzata da Sencha (crea applicazioni web e mobile // Sencha Extjs.)

Una presentazione sperimentale che mostra un frame SVG animato durante la transizione dello Slide.
Possono essere utilizzate diverse forme per creare una varietà di stili creativi e molto emozionanti.

L'idea è di animare un frame SVG mentre passiamo da uno slide ad un altro.
Usando diverse forme possiamo creare una varietà di stili e di frame trasformando l'SVG.

Una delle cose molto importanti per usare bene questo plugin ehavere il Browser aggiornato visto sono stati usati delle nuove proprietà CSS moderne come CSS Flexbox e variabili varie.

Qui Trovate la Demo live
Qui Trovate il Download Source

Qui stiamo animando una semplice forma a scatola:

In questa demo è stato usato un modello per il riempimento a forma di rettangolo leggermente inclinato.
Il pattern è tratto da Hero Patterns:

In questo esempio possiamo usare qualsiasi tipo di forma, anche molto piccola.
Nota come i titoli sopra l'SVG in questa demo:

Non resta che testare e ancora una volta ringraziere Shota e Codrops! Grazie! Thank you! 感謝

Interactive Data Visualization for the Web, 2nd Ed.

Seconda edizione

Ottima guida arrivata alla seconda edizione, per lo sviluppo di animazioni 3d per il web.
Ideale per  chi vuole diventare un Web Developer,  tanti esempi: HTML, CSS, JavaScript , e SVG, ben 140 esempi!

La compressione CSS

La Compressore in linea del CSS oggi diventa sempre più essenziale, per garantire un lavoro professionale e preformante.
Non solo per ridurre le dimensioni, quindi ottenere tempi di download più bassi (che ci farebbe risparmiare la larghezza di banda)

ma anche in ottica SEO, inquanto lo stesso Google ci ricorda che per essere performanti e posizionati nel suo motore di ricerca, il caricamento delle pagine Web devono essere adeguate hai suoi parametri.

Nel web ci sono molti siti che offrono questo servizio gratuitamante, uno di questi e:csscompressor.com
È possibile scegliere tra 4 livelli di compressione, a seconda di delle esigenze di compressione per file CSS.

Inserire Video all'interno del nostro sito Web

Implementare video all'interno della nostra pagina HTML5 nulla di più semplice.
Oggi è sempre più usato visto le connessioni molto più veloci rispetto a qualche anno fa.
Questo lo rende sempre di più un ottimo strumento da implementare per rendere la nostra web site più accattivante sia dal punto di vista visivo che a livello di comunicazione.

Usando il tag <video> </video> dell'html5 siamo in grado di inserire un video.
Facendo sempre attenzione lato SEO (grandezza del file per caricamnto della pagina) e buttando un occhio al mobile.(Che vederemo più avanti)

Questo il codice base:

<video autoplay loop poster="/img/IMG.jpg">   
<source src="PATH_TO_MP4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.             
<source src="PATH_TO_WEBM" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
           

Nel prossimo articolo andremo più nel dettaglio. Considerando e implementando l'auto play e la visione nel Mobile, Android e IOS. Al prossimo step ;-)

Atom non chamatelo solo editor!

Editing multipiattaforma

Atom funziona su sistemi operativi. Si può usare su OS X, Windows o Linux.

Gestore di pacchetti integrato

Cercare e installare nuovi pacchetti o iniziare a creare il vostro proprio-tutto all'interno di Atom.

È possibile scegliere tra migliaia di pacchetti software open source che aggiungono nuove caratteristiche e funzionalità di Atom-o costruire un pacchetto da zero e pubblicala per tutti gli altri per l'uso.

Intelligente completamento automatico

Atom consente di scrivere codice più veloce con un intelligente, completamento automatico flessibile.

Browser file system

Facilmente sfogliare e aprire un singolo file, un intero progetto o più progetti in una sola finestra.

lastre multiple

Dividi la tua interfaccia Atom in più riquadri per confrontare e modificare il codice attraverso i file.

Trova e sostituisci

Trova, anteprima, e sostituire il testo durante la digitazione in un file o su tutti i tuoi progetti.

Temi

Atom viene pre-installato con quattro UI e otto sintassi temi a entrambi i colori chiari e scuri. Se non riesci a trovare quello che stai cercando, è possibile anche installare temi creati dalla comunità Atom o creare il proprio.

Personalizzazione

E 'facile da personalizzare e Atom stile. È possibile modificare l'aspetto della vostra interfaccia utente con i CSS / Meno e aggiungere caratteristiche principali con HTML e JavaScript. Guarda il video sulla creazione di Atom .

Sotto il cappuccio

Atom è un'applicazione desktop costruito con HTML, JavaScript, CSS e l'integrazione Node.js. Funziona su Electron , un framework per la creazione di applicazioni multi-piattaforma che utilizzano tecnologie web.

Open source

Atom è open source. Se vuoi far parte della comunità Atom o contribuire a migliorare il vostro editor di testo preferito, ci trovate su GitHub , Discutere e Slac!

 Insomma un editor fanatastico Free e sopratutto molto completo in tutte le sue forme!!!!!!

Adesso no ci resta che provarlo!: link https://atom.io/

Cosa sono i Favicons?

I Favicons sono piccoli file icon 16x16 che vengono visualizzati accanto all'URL del tuo sito nella barra degli indirizzi del browser. Inoltre vengono spesso visualizzati accanto al nome del tuo sito nell'elenco di schede aperte e negli elenchi dei segnalibri dell'utente che rende più facile per l'utente di identificare rapidamente tra altri siti.

Quali sono le icone app?

Icone delle applicazioni sono le immagini che si premono sullo smartphone per avviare un'applicazione. Quando nuovi telefoni vengono rilasciati con schermate di risoluzione più elevate, sono necessarie icone app di risoluzione superiore. Gli sviluppatori continuano a mantenere il supporto per i telefoni più vecchi con risoluzioni più basse, quindi quando si crea un'icona dell'applicazione è necessario creare diverse variazioni di dimensioni della stessa immagine. Questo è vero per tutti gli smartphone come iPhone e Android, e anche i Tablet e iPad.

favicon-generator.org Ottimo!

Anche se molti browser web moderni supportano faviconi salvati come GIF, PNG o altri formati di file popolari, tutte le versioni di Internet Explorer richiedono ancora che favicon sia salvato come file ICO (un formato di icona Microsoft).

Favicon-generator.org fornisce un modo semplice per convertire qualsiasi GIF, PNG o JPEG in ICO, supportato da tutti i browser web moderni. Permette anche di creare faviconi da zero grazie a un comodo editor online.

Inoltre, l'editor consente di modificare manualmente le favicon generate per garantire il miglior risultato possibile. Utilizzando un favicon Dopo aver generato un favicon con questo strumento scaricate e salvate nella directory principale del tuo sito. Quindi includere il seguente codice nella testata del documento HTML.

Link: favicon-generator.org