Späť na zoznam

WebJET novinky 2/2017

Novinky v redakčnom systéme WebJET CMS - nový spôsob nahrávania súborov a adresárov, kopírovanie stránok a nová verzia appstore

V tomto blog príspevku vám predstavíme novinky v redakčnom systéme WebJET CMS:

  • HTML5 chunked upload,
  • nahrávanie celých adresárov,
  • zvýrazňovanie syntaxe HTML kódu v editore,
  • kopírovanie web stránok / celých sekcií,
  • nový spôsob kombinovania JS/CSS súborov,
  • rýchle review ďalších zmien.

HTML5 chunked upload

Názov chunked upload môžeme do slovenčiny preložiť ako blokové/kusové nahrávanie súborov. Princíp spočíva v rozdelení veľkého (napr. 300MB) súboru na menšie (v prípade WebJETu 2MB) časti a ich následné postupné nahrávanie na server. Toto rozdelenie zabezpečia moderné prehliadače s podporou HTML5. Takéto nahrávanie súboru má nasledovné výhody:

  • nevzniká záťaž na infraštruktúru pri nahrávaní veľkého súboru,
  • dá sa zobraziť ukazovateľ postupu nahrávania (progress bar), keďže v prehliadači presne vieme akú časť zo súboru sme už nahrali,
  • nevzniká problém s vypršaním spojenia (timeout), pretože prehliadač komunikuje opakovane zo serverom,
  • vieme riadiť počet požiadaviek a ich veľkosť (ochrana infraštruktúry).

Všimnite si na video nahrávke ako sa pri prenose 10MB súboru postupne nahrávajú menšie časti. Celý prenos je možné vidieť na ukazovateľovi postupu nahrávania, ako aj vpravo dole v monitore sieťovej prevádzky, kde vznikajú zelené bloky reprezentujúce jednotlivé časti nahratého súboru.

Dôležitá vlastnosť je práve možnosť riadenia veľkosti a množstva požiadaviek. Pokročilejšie infraštruktúry, ako je napr. hosting pre klientov v InterWay (viď obrázok), sú zložené z viacerých serverov, cez ktoré požiadavka prechádza. Pri nahrávaní veľkého súboru tento postupne vzniká na jednotlivých uzloch a postupne prebubláva na ďalší uzol a zaberá teda násobne viac miesta v pamäti a aj na disku ako je jeho veľkosť.

Architektúra dátového centra InterWay

Z dôvodu ochrany pred DOS útokmi má infraštruktúra obmedzenia na počet a rýchlosť HTTP požiadaviek. To je možné vo WebJETe regulovať nastavením konfiguračnej premennej uploadProtectionInterval, ktorou sa nastavuje čas medzery v milisekundách po jednotlivých blokoch (chunk) nahrávania súboru. Efektívne tak spomalíme množstvo požiadaviek na server.

Nahrávanie celých adresárov

Od verzie WebJETu z decembra 2016 je v časti Súbory podporované prehliadačmi Chrome a Firefox nahrávanie celých adresárov Jednoducho tak môžete pomocou funkcie drag & drop skopírovať celý adresár z vášho počítača do WebJETu. Upozorňujeme, že pri kontrole existencie súboru a potvrdení sa overuje len prvý adresár. Ak potvrdíte prepísanie, prepíšu sa aj súbory a podadresáre, v prípade, že už existujú.

Zvýraznenie syntaxe HTML kódu

Do WebJETu sme pridali nový plugin pre zvýraznenie syntaxu HTML kódu. Dôležitá je jeho podpora pre vyhľadávanie a nahradzovanie HTML kódu, čo bol hlavný dôvod jeho pridania. Podporuje nasledovné klávesové skratky:

  • CTRL+q - prepínanie medzi HTML kódom a režimom WYSIWYG
  • CTRL+f - vyhľadávanie v HTML kóde
  • STRL+SHIFT+f - nahradenie HTML kódu
  • CTRL+G - skok na ďalší nájdený výraz

Na obrázku si môžete všimnúť, že sa zobrazujú čísla riadkov, na ktorých sa vám po kliknutí zatvorí daný blok kódu. Ľahko tak nájdete koniec nejakého elementu, ktorý potrebujete vyhľadať.

Kopírovanie sekcií webu

Až do 8.verzie WebJETu bolo jedinou možnosťou ako kopírovať sekcie web sídla nástroj Klonovanie štruktúry, ktorý sa používal primárne pri vytváraní jazykových mutácií.

Vo WebJET 8 sme implementovali zobrazovanie zoznamu web stránok cez súborový manažér z dôvodu jeho použitia pri vytváraní odkazov (liniek) na iné stránky v editore. Súborový manažér samozrejme podporuje kopírovanie súborov a keďže zobrazuje aj štruktúru web stránok, je možné takto ľahko kopírovať/presúvať celé sekcie web sídla. Pri kopírovaní sa vytvorí kópia adresárov a stránok, pri presune sa len existujúcim stránkam a adresárom zmení rodičovský adresár, zostane tak zachovaná aj história.

Na kopírovanie/presun môžete používať štandardné klávesové skratky CTRL+C, CTRL+X ale aj kontextové menu, ktoré sa zobrazí, keď na adresár/stránku kliknete pravým tlačidlom myši.

Pre obnovenie zoznamu stránok a stromovej štruktúry je po skopírovaní stránok potrebné kliknúť na ikonu Obnoviť.

Kombinovanie súborov

Moderné web stránky potrebujú na svoj beh veľa CSS a JavaScript súborov. Ich správa nie je jednoduchá pokiaľ používate viacero šablón. Môžete používať <jsp:include tag pre vkladanie spoločnej časti súboru (napr. všetkého čo patrí do hlavičky) do jednotlivých JSP šablón, čo je ale niekedy nepraktické z pohľadu záťaže na server pri rekompilácii jednotlivých šablón.

Vo verzii WebJETu z februára 2017 je možné používať v JSP šablóne <iwcm:combine tag s odkazom na konfiguráciu WebJETu, kde sa definuje zoznam súborov. Naviac combine tag vám automaticky vytvorí z viacerých súborov jeden pre jeho rýchlejšie stiahnutie do prehliadača.

Výhodou je centrálna správa zoznamu vkladaných súborov a ich automatická kombinácia do jedného výsledného súboru.

Do šablóny potom stačí vložiť kód

 

ktorý vám zabezpečí vloženie a kombináciu súborov definovaných v konfigurácii WebJETu pod názvom combine-ublocks. Ako hodnotu parametra type je možné nastaviť css alebo js pre JavaScript súbory.

V konfigurácii WebJETu pridáte premennú s názvom combine-HODNOTA_PARAMETRA_SET, kde na nový riadok vložíte odkaz na súbor, ktorý má byť do stránky vložený.

Ako hodnotu set je možné použiť výraz tempCss pre vloženie zoznamu CSS súborov definovaných v šablóne vo WebJETe.

Počas vývoja môžete vypnúť kombinovanie súborov pridaním parametra combineEnabled=false do URL adresy.

Rýchle review ďalších zmien

  • Formuláre - pridaná skupina a matica polí
  • eShop - kompletná prerábka na bootstrap, automatické vkladanie komponenty košíka, ajax načítavanie dát košíka
  • eShop - pridaná možnosť použitia platobnej brány pay24.sk
  • Editor - upravené CSS štýly pre zarovnanie textov vľavo/na stred/vpravo podľa Bootstrap konvencie (text-left, text-center, text-right, text-justify). Pre kompatibilitu so staršími verziami WebJETu je možné nastaviť konfiguračnú premennú bootstrapEnabled na false
  • Editor - pri vkladaní obrázku alebo odkazu na súbor je možné 2x na súbor kliknúť pre priame vloženie do stránky (bez potreby kliknutia na tlačítko OK)
  • Editor - pridaná možnosť zadania URL vo forme kotvy (#nazov) - ak nie je nič označené, vytvorí sa pri vložení odkazu kotva
  • Galéria - pridaná podpora custom štýlov galérie - v dialógu pre vloženie galérie sa prehľadá adresár /components/INSTALL_NAME/gallery na custom verzie gallery-style.jsp ktoré sa zobrazia vo výberovom poli štýlu. Pekný názov je možné použiť definovaním prekladového kľúča components.gallery.visual_style.STYLE
  • Editor - ak má obrázok nastavený štýl img-responsive nenastavujú sa na ňom atribúty width a height
  • Editor - ak má obrázok CSS triedu fixedSize-W-H, kde W je šírka a H je výška, bude obrázku zachovaný rozmer cez /thumb servlet po jeho zmene (napr. fixedSize-100-100)
  • Appstore - upravený vizuál s jednoduchým vyhľadávaním a vkladaním top aplikácií (definujú sa konfiguračnou premennou appstorePromo - pre inštaláciu u klienta si môžete ľahko upraviť zoznam top aplikácií)

Redakčný systém WebJET