Pre každého operátora existuje ľahšia verzia s kratším názvom (bez predpony all). Rozdiel je v tom, že allinurl nájde odkazy so všetkými slovami, zatiaľ čo inurl nájde odkazy iba s prvým z nich. Druhé a ďalšie slová z dopytu sa môžu objaviť kdekoľvek na webových stránkach. Operátor inurl sa tiež líši od iného operátora podobného významu - site. Prvý tiež umožňuje nájsť ľubovoľnú sekvenciu znakov v odkaze na požadovaný dokument (napríklad /cgi-bin/), čo sa široko používa na vyhľadávanie komponentov so známymi zraniteľnosťami.

Skúsme to v praxi. Vezmeme allintext filter a dopyt vráti zoznam čísel kreditných kariet a overovacích kódov, ktorých platnosť vyprší až po dvoch rokoch (alebo keď ich majiteľov omrzí kŕmiť všetkých v rade).

Allintext: číslo karty dátum vypršania platnosti /2017 cvv

Keď si v správach prečítate, že sa mladý hacker „nabúral na servery“ Pentagonu alebo NASA, pričom ukradol utajované informácie, potom je to vo väčšine prípadov práve táto elementárna technika používania Google. Predpokladajme, že nás zaujíma zoznam zamestnancov NASA a ich kontaktné údaje. Určite je takýto zoznam v elektronickej podobe. Pre pohodlie alebo z dôvodu prehliadnutia môže ležať aj na samotnej webovej stránke organizácie. Je logické, že v tomto prípade naň nebudú žiadne odkazy, keďže je určený na interné použitie. Aké slová môžu byť v takomto súbore? Aspoň - pole "adresa". Je ľahké otestovať všetky tieto predpoklady.

inurl:nasa.gov filetype:xlsx "adresa"

Využívame byrokraciu

Takéto nálezy sú príjemnou maličkosťou. Skutočne solídny úlovok pochádza z detailnejších znalostí Google Webmaster Operators, samotného webu a štruktúry toho, čo hľadáte. Ak poznáte podrobnosti, môžete ľahko filtrovať výstup a spresniť vlastnosti súborov, ktoré potrebujete, aby ste vo zvyšku získali skutočne cenné údaje. Je smiešne, že byrokracia tu prichádza na pomoc. Vytvára typické formulácie, ktoré uľahčujú vyhľadávanie tajných informácií, ktoré náhodne unikli na web.

Napríklad pečiatka Distribution statement, ktorá je povinná v kancelárii Ministerstva obrany USA, znamená štandardizované obmedzenia distribúcie dokumentu. Písmeno A označuje verejné vydania, v ktorých nie je nič tajné; B - určené len na interné použitie, C - prísne dôverné a tak ďalej až po F. Samostatne je tu písmeno X, ktoré označuje obzvlášť cenné informácie, ktoré predstavujú štátne tajomstvo najvyššej úrovne. Nech si takéto dokumenty vyhľadajú tí, ktorí to majú robiť v službe a my sa obmedzíme na súbory s písmenom C. Podľa DoDI 5230.24 je takéto označenie priradené dokumentom obsahujúcim popis kritických technológií, ktoré spadajú pod kontrolu exportu. Takéto starostlivo strážené informácie nájdete na stránkach v doméne najvyššej úrovne .mil pridelenej americkej armáde.

"VÝKAZ DISTRIBÚCIE C" inurl:navy.mil

Je veľmi výhodné, že v doméne .mil sa zhromažďujú iba stránky Ministerstva obrany USA a jeho zmluvných organizácií. Výsledky vyhľadávania obmedzené na doménu sú mimoriadne čisté a názvy hovoria samy za seba. Je prakticky zbytočné pátrať po ruských tajomstvách týmto spôsobom: v doménach .ru a .rf vládne chaos a názvy mnohých zbraňových systémov znejú botanicky (PP „Kiparis“, samohybky „Acacia“) či dokonca báječné (TOS "Pinocchio").

Pozorným preskúmaním akéhokoľvek dokumentu z lokality v doméne .mil môžete vidieť ďalšie značky na spresnenie vyhľadávania. Napríklad odkaz na exportné obmedzenia „Sec 2751“, čo je pohodlné aj na vyhľadávanie zaujímavých technických informácií. Z času na čas je odstránený z oficiálnych stránok, kde sa kedysi objavil, takže ak nemôžete sledovať zaujímavý odkaz vo výsledkoch vyhľadávania, použite vyrovnávaciu pamäť Google (operátor vyrovnávacej pamäte) alebo webovú stránku Internet Archive.

Stúpame do oblakov

Okrem náhodne odtajnených dokumentov z vládnych rezortov občas vo vyrovnávacej pamäti Google vyskakujú aj odkazy na osobné súbory z Dropboxu a iných služieb na ukladanie dát, ktoré vytvárajú „súkromné“ odkazy na verejne publikované dáta. S alternatívnymi a vlastnoručne vyrobenými službami je to už horšie. Napríklad nasledujúci dotaz nájde údaje všetkých klientov Verizon, ktorí majú nainštalovaný server FTP a aktívne používajú smerovač na svojom smerovači.

Allinurl:ftp://verizon.net

Takýchto šikovných ľudí je teraz viac ako štyridsaťtisíc a na jar 2015 ich bolo rádovo viac. Namiesto Verizon.net môžete nahradiť meno ktoréhokoľvek známeho poskytovateľa a čím je slávnejší, tým väčší môže byť úlovok. Prostredníctvom vstavaného FTP servera môžete vidieť súbory na externom disku pripojenom k ​​smerovaču. Zvyčajne ide o NAS na prácu na diaľku, osobný cloud alebo nejaký druh sťahovania súborov typu peer-to-peer. Všetok obsah takýchto médií je indexovaný Googlom a inými vyhľadávačmi, takže k súborom uloženým na externých diskoch sa dostanete cez priamy odkaz.

Prezeranie konfigurácií

Pred veľkoobchodnou migráciou do cloudu vládli ako vzdialené úložiská jednoduché FTP servery, ktoré tiež nemali slabé miesta. Mnohé z nich sú aktuálne aj dnes. Napríklad populárny program WS_FTP Professional ukladá konfiguračné údaje, používateľské účty a heslá do súboru ws_ftp.ini. Je ľahké ho nájsť a prečítať, pretože všetky záznamy sú uložené v obyčajnom texte a heslá sú po minimálnom zmätku šifrované pomocou algoritmu Triple DES. Vo väčšine verzií stačí zahodiť prvý bajt.

Dešifrovanie takýchto hesiel je jednoduché pomocou nástroja WS_FTP Password Decryptor alebo bezplatnej webovej služby.

Keď hovoríme o hackovaní ľubovoľnej stránky, zvyčajne to znamená získanie hesla z denníkov a záloh konfiguračných súborov CMS alebo aplikácií elektronického obchodu. Ak poznáte ich typickú štruktúru, môžete ľahko uviesť kľúčové slová. Riadky ako tie, ktoré sa nachádzajú v ws_ftp.ini, sú extrémne bežné. Napríklad Drupal a PrestaShop majú vždy ID používateľa (UID) a zodpovedajúce heslo (pwd) a všetky informácie sú uložené v súboroch s príponou .inc. Môžete ich vyhľadať takto:

"pwd=" "UID=" ext:inc

Odhaľujeme heslá z DBMS

V konfiguračných súboroch SQL serverov sú užívateľské mená a e-mailové adresy uložené ako čistý text a namiesto hesiel sú zaznamenané ich MD5 hash. Ich dešifrovanie, prísne vzaté, je nemožné, ale môžete nájsť zhodu medzi známymi pármi hash-heslo.

Doteraz existujú DBMS, ktoré ani nepoužívajú hashovanie hesiel. Konfiguračné súbory ktoréhokoľvek z nich je možné jednoducho zobraziť v prehliadači.

Intext:DB_PASSWORD filetype:env

S príchodom Windows serverov miesto konfiguračných súborov čiastočne prevzal register. Presne rovnakým spôsobom môžete prehľadávať jeho vetvy, pričom ako typ súboru použijete reg. Napríklad takto:

Filetype:reg HKEY_CURRENT_USER "Heslo"=

Nezabudnite na Obvious

Niekedy je možné dostať sa k utajovaným informáciám pomocou údajov náhodne otvorených a zachytených Googlom. Ideálnou možnosťou je nájsť si zoznam hesiel v nejakom bežnom formáte. Do textového súboru, wordového dokumentu alebo excelovskej tabuľky si informácie o účte môžu uložiť len zúfalci, no tých je vždy dosť.

Filetype:xls inurl:password

Na jednej strane existuje veľa prostriedkov, ako takýmto incidentom predchádzať. Je potrebné špecifikovať adekvátne prístupové práva v htaccess, patch CMS, nepoužívať ľavé skripty a uzavrieť ostatné diery. Existuje aj súbor so zoznamom vylúčení robots.txt, ktorý vyhľadávacím nástrojom zakazuje indexovať súbory a adresáre v ňom uvedené. Na druhej strane, ak sa štruktúra robots.txt na niektorom serveri líši od štandardnej, hneď je jasné, čo sa na ňom snažia ukryť.

Zoznamu adresárov a súborov na ľubovoľnej stránke predchádza štandardný index indexu. Keďže sa musí objaviť v názve na servisné účely, má zmysel obmedziť jeho vyhľadávanie na operátora intitle. Zaujímavé veci možno nájsť v adresároch /admin/, /personal/, /etc/ a dokonca aj /secret/.

Sledujte aktualizácie

Relevancia je tu mimoriadne dôležitá: staré zraniteľnosti sa uzatvárajú veľmi pomaly, ale Google a jeho výsledky vyhľadávania sa neustále menia. Je dokonca rozdiel medzi filtrom „posledná sekunda“ (&tbs=qdr:s na konci adresy URL požiadavky) a filtrom „v reálnom čase“ (&tbs=qdr:1).

Implicitne je uvedený aj časový interval poslednej aktualizácie súboru od spoločnosti Google. Prostredníctvom grafického webového rozhrania si môžete vybrať jedno z typických období (hodinu, deň, týždeň atď.) alebo nastaviť rozsah dátumov, tento spôsob však nie je vhodný na automatizáciu.

Podľa vzhľadu panela s adresou sa dá len hádať o spôsobe, ako obmedziť výstup výsledkov pomocou konštrukcie &tbs=qdr:. Písmeno y za ním určuje limit jedného roka (&tbs=qdr:y), m ukazuje výsledky za posledný mesiac, w za týždeň, d za posledný deň, h za poslednú hodinu, n za minútu, a s pre daj mi sek. Pomocou filtra &tbs=qdr:1 sa dajú nájsť najnovšie výsledky, ktoré Google práve oznámil.

Ak potrebujete napísať zložitý skript, bude užitočné vedieť, že rozsah dátumov sa v Google nastavuje v juliánskom formáte cez operátor daterange. Takto môžete napríklad nájsť zoznam dokumentov PDF so slovom dôverné nahraných medzi 1. januárom a 1. júlom 2015.

Dôverný typ súboru: pdf rozsah dátumov: 2457024-2457205

Rozsah je špecifikovaný vo formáte juliánskeho dátumu bez desatinných miest. Prekladať ich ručne z gregoriánskeho kalendára je nepohodlné. Jednoduchšie je použiť konvertor dátumu.

Opäť zacielenie a filtrovanie

Okrem zadania ďalších operátorov vo vyhľadávacom dopyte ich možno odoslať priamo v tele odkazu. Napríklad vlastnosť filetype:pdf zodpovedá konštruktu as_filetype=pdf. Preto je vhodné nastaviť akékoľvek objasnenia. Povedzme, že výstup výsledkov len z Honduraskej republiky sa nastaví pridaním konštrukcie cr=countryHN do URL vyhľadávania, ale len z mesta Bobruisk - gcs=Bobruisk . Úplný zoznam nájdete v sekcii pre vývojárov.

Automatizačné nástroje Google sú navrhnuté tak, aby uľahčili život, no často ešte viac komplikujú prácu. Napríklad mesto používateľa je určené IP adresou používateľa prostredníctvom WHOIS. Na základe týchto informácií Google nielen vyrovnáva záťaž medzi servermi, ale mení aj výsledky vyhľadávania. V závislosti od regiónu sa pre rovnaký dopyt dostanú na prvú stránku rôzne výsledky a niektoré z nich sa môžu ukázať ako úplne skryté. Cíťte sa ako kozmopolita a vyhľadávanie informácií z ktorejkoľvek krajiny pomôže jej dvojpísmenový kód za direktívou gl=country . Napríklad kód pre Holandsko je NL, zatiaľ čo Vatikán a Severná Kórea nemajú v Google vlastný kód.

Výsledky vyhľadávania sú často posiate aj po použití niekoľkých pokročilých filtrov. V tomto prípade je jednoduché dotaz spresniť pridaním niekoľkých výnimiek (pred každým z nich je znamienko mínus). Napríklad bankovníctvo , mená a návody sa často používajú so slovom Osobné. Preto čistejšie výsledky vyhľadávania nezobrazia učebnicový príklad dopytu, ale spresnený:

Intitle:"Index /Personal/" -mená -náuka -banking

Posledný príklad

Sofistikovaný hacker sa vyznačuje tým, že si všetko potrebné zabezpečí sám. Napríklad VPN je pohodlná vec, ale buď drahá alebo dočasná a s obmedzeniami. Prihlásiť sa sám za seba je príliš drahé. Je dobré, že existujú skupinové odbery a s pomocou Google je ľahké stať sa súčasťou skupiny. Ak to chcete urobiť, stačí nájsť konfiguračný súbor Cisco VPN, ktorý má dosť neštandardnú príponu PCF a rozpoznateľnú cestu: Program Files\Cisco Systems\VPN Client\Profiles . Jedna prosba a pripojíte sa napríklad k priateľským zamestnancom univerzity v Bonne.

Filetype:pcf vpn OR Group

INFO

Heslá sú uložené v zašifrovanej forme, ale Maurice Massard už napísal program na ich dešifrovanie a poskytuje ho zadarmo cez thecampusgeeks.com.

S pomocou Google sa vykonávajú stovky rôznych typov útokov a penetračných testov. Existuje veľa možností, ktoré ovplyvňujú populárne programy, hlavné databázové formáty, množstvo zraniteľností PHP, cloudy atď. Ak presne viete, čo hľadáte, je oveľa jednoduchšie získať informácie, ktoré potrebujete (najmä informácie, ktoré ste nechceli zverejniť). Nielen Shodan kŕmi zaujímavé nápady, ale akákoľvek databáza indexovaných sieťových zdrojov!

Vývoj, údržba a propagácia stránok

Vytvorte "tlačiteľnú" webovú stránku

Pri prehliadaní stránok na internete si návštevníci často vytlačia niektoré stránky, aby s nimi mohli ďalej pracovať, napríklad ich odovzdať priateľom alebo jednoducho uložiť potrebné informácie. Obzvlášť často tlačené stránky s popisom produktov, cenníkmi a kontaktnými údajmi organizácií.

Samozrejme, nikto sa neobťažuje získať výtlačok pôvodnej stránky priamo v prehliadači príkazom Tuleň alebo kombinácia CTRL+P tým sa však vytlačia nepotrebné prvky stránky – menu, hlavička atď., ktoré sťažujú vnímanie potrebných informácií. Navyše farebné prvky pri tlači na čiernobielej tlačiarni zvyčajne vyzerajú neatraktívne.

Pre pohodlie používateľov vývojári stránok zvyčajne vytvárajú samostatnú stránku - tlačená verzia, ktorý ponecháva len potrebný text, čiernobiele kresby (odtiene sivej) a kontaktné údaje na komunikáciu.

Pri vytváraní takejto stránky by ste mali odstrániť nepotrebné dekoratívne prvky, nahradiť hypertextové odkazy obyčajným textom, odstrániť farebné zvýraznenie slov a fráz a nahradiť ich kurzívou alebo tučným písmom. V hornej časti stránky je vhodné umiestniť logo a názov spoločnosti, telefónne číslo a iné komunikačné prostriedky. Nezabudnite zadať názov stránky, aby používateľ nemusel hľadať, odkiaľ túto stránku vytlačil.

V dolnej časti stránky je žiaduce uviesť úplné kontaktné údaje: adresa, telefón, e-mail, ICQ, adresa URL webovej stránky atď.

Ak chcete prejsť z hlavnej stránky na tlačená verzia Môžete použiť akékoľvek vhodné obrázky a text, napríklad tento typ:

Na samotnej stránke verzia pre tlač za dobrú formu sa považuje inštalácia tlačidla Tuleň, ktorý po kliknutí otvorí okno s nastaveniami tlačiarne. Na tento účel sa používa metóda JavaScript window.print(); ktorý vytlačí webovú stránku v aktuálnom okne na tlačiarni. Je tiež dobré uverejniť odkaz na návrat na hlavnú stránku.

Gombíky môžu byť ozdobené jednoduchými odkazmi
Tlač (kód Print) a , ale zaujímavejšie - pomocou značky :

HTML kód pre túto kombináciu je:

adresa hlavnej stránky");" />

V oboch prípadoch sa otvorí štandardné okno tlače dokumentu, ktoré môžete zobraziť kliknutím na uvedené príklady tlačidiel.

Na záver nezabudnite na tlačovú stránku uviesť kód štatistického počítadla, aby ste mali prehľad o počte návštevníkov, ktorí si uložili „vytlačenú kópiu“ popisu vášho produktu alebo služby, hoci tieto údaje vás nemusia vždy potešiť. Bohužiaľ...

Užitočné články na tému „Vývoj, údržba a propagácia stránok“

V ktorom poukázal na to, že ich detailné objednávacie strany sú v tlačenej podobe nepoužiteľné.

Keď som uvidel tento tweet, bol som ohromený - uvedomil som si, že je to už dávno, čo som optimalizoval štýly pre tlač a ani som nepomyslel na ich kontrolu.

Možno je to preto, že trávim veľa času zmenou veľkosti okna prehliadača, aby som zaistil, že moje stránky fungujú skvele vo všetkých veľkostiach a tvaroch, alebo možno preto, že si len zriedka tlačím stránky pre seba. Nech už bol dôvod akýkoľvek, úplne som zabudol na štýly tlače a to je zlé.

Optimalizácia webových stránok pre tlač je dôležitá, pretože tlačou stránok robíme stránku čo najprístupnejšou bez ohľadu na prostredie. Nesmieme si vytvárať domnienky o našich používateľoch a ich správaní. Ľudia stále tlačia webové stránky. Zamyslite sa nad článkami, blogovými príspevkami, receptami, kontaktnými informáciami, mapami alebo zoznamami nehnuteľností. Niekto sa určite niekedy pokúsi vytlačiť jednu z vašich stránok.

Domáce tlačiarne som opustil už dávno, keďže som si vždy myslel, že sa po 10 minútach práce pokazia. Ale nie všetci sú ako ja. - Haydon Pickering (vrátane dizajnových vzorov)

Ak sa ocitnete v podobnej situácii, tento príspevok vám pomôže rýchlo sa osviežiť. Ak ste svoje stránky neoptimalizovali na tlač, nasledujúce tipy vám pomôžu začať.

1. Spojovacie štýly pre tlač

Najlepší spôsob, ako zahrnúť štýly tlače, je deklarovať direktívu @media vo vašom CSS.

Body ( font-size: 18px; ) @media print ( /* štýly tlače nájdete tu */ body ( font-size: 28px; ) )

Prípadne môžete štýly zahrnúť do kódu HTML, ale bude to vyžadovať dodatočnú požiadavku HTTP.

2. Testovanie

Nemusíte tlačiť stránku zakaždým, keď urobíte malú zmenu štýlu. V závislosti od prehliadača môžete exportovať stránku do PDF, použiť náhľad pred tlačou alebo ladiť priamo v prehliadači.

Ak chcete ladiť štýly tlače vo Firefoxe, otvorte panel s nástrojmi pre vývojárov (Shift + F2 alebo Nástroje > Web Developer > Panel s nástrojmi pre vývojárov), do vstupného poľa napíšte media emulate print a stlačte kláves enter . Aktívna karta sa bude správať tak, ako keby sa typ média tlačil, kým sa znova nevloží.

Emulácia štýlov tlače vo Firefoxe

V prehliadači Chrome otvorte nástroje pre vývojárov (CMD + Opt + I (macOS) alebo Ctrl + Shift + I (Windows) alebo ponuku Zobraziť > Vývojár > Nástroje pre vývojárov) a otvorte konzolu, otvorte panel vykresľovania a vyberte položku Tlačiť z emulácie Menu CSS Media.

Emulácia štýlov tlače v prehliadači Chrome

3. Absolútne jednotky merania

Absolútne jednotky sú zlé na obrazovke, ale skvelé pre tlač. Je úplne bezpečné ich používať v štýloch tlače a dokonca sa odporúča použiť jednotky ako cm , mm , in , pt alebo pc .

Sekcia ( okraj-dolný okraj: 2 cm; )

4. Špecifické pravidlá pre stránky

Pomocou direktívy @page môžete nastaviť vlastnosti špecifické pre vytlačenú stranu, ako je veľkosť strany, orientácia a výplň. To je veľmi užitočné, ak chcete, aby všetky strany mali určité zarážky.

@media print ( @page (okraj: 1 cm; ) )

Direktíva @page je súčasťou špecifikácie Paged Media Module, ktorá má skvelé veci, ako napríklad možnosť vybrať prvú stranu na tlač alebo prázdne strany, umiestniť prvky do rohu strany a ďalšie. Dá sa to použiť aj na tlač kníh.

5. Spravujte zlomy strán

Keďže tlačené stránky na rozdiel od webových stránok nie sú nekonečné, obsah sa medzi stránkami preruší. Máme 5 vlastností, ktoré ovládajú, ako sa to stane.

Zalomenie stránky pred prvkom.

Ak chceme, aby bol prvok vždy na začiatku stránky, môžeme vynútiť zalomenie stránky pomocou pravidla page-break-before.

Sekcia ( zalomenie strany-pred: vždy; )

Zalomenie stránky za prvkom.

Pravidlo zalomenia stránky po nám umožňuje vynútiť alebo zakázať zalomenie stránky po prvku.

H2 ( zalomenie strany: vždy; )

Zlom stránky v rámci prvku

Táto vlastnosť je užitočná, ak sa potrebujete vyhnúť zlomom stránok v prvku.

Ul ( page-break-inside: avoid; )

Vdovy a siroty (závesné šnúrky)

Niekedy nepotrebujete kontrolu nad zlomom strany, ale kontrola nad tým, koľko riadkov sa zobrazí na aktuálnej stránke a koľko na nasledujúcej, je dôležité. Ak sa napríklad posledný riadok odseku nezmestí na aktuálnu stranu, zalomí sa na ďalšiu stranu spolu s predposlednou. Je to preto, že zodpovedajúca vlastnosť vdov je štandardne 2. Môžeme ju zmeniť.

P (vdovy: 4; )

Ak narazíme na druhú stranu tohto problému a na aktuálnej strane máme len prvý riadok odseku, tak celý odsek začne na nasledujúcej strane. Je za to zodpovedná vlastnosť siroty a jej predvolená hodnota je 2.

P ( siroty: 3; )

Tento kód znamená, že na aktuálnu stranu sa musia zmestiť aspoň 3 riadky, aby sa odsek nezalomil na ďalšiu.

Nie všetky tieto vlastnosti a hodnoty fungujú v každom prehliadači, mali by ste skontrolovať štýly tlače v rôznych prehliadačoch.

6. Obnovte štýly

Pri tlači má zmysel obnoviť niektoré štýly, ako je farba pozadia , tieň rámčeka a farba.

*, *:pred, *:po, *:prvé-písmeno, p:prvý riadok, div:prvý riadok, blockquote:prvý riadok, li:prvý riadok ( pozadie: priehľadné !dôležité; farba: #000 !important; box-shadow: žiadne !important; text-shadow: žiadne !important; )

Štýly tlače sú jednou z mála výnimiek, kde je použitie kľúčového slova !important v poriadku.

7. Odstránenie voliteľného obsahu

Aby ste predišli plytvaniu atramentom, mali by ste odstrániť nepotrebné položky, ako sú typografia, reklamy, navigácia atď. so zobrazením: žiadna vlastnosť.

V zásade môžete zobraziť iba hlavný obsah a skryť všetko ostatné:

Telo > *:nie (hlavné) (zobrazenie: žiadne; )

8. Tlač adries odkazov

A:after ( content: " (" attr(href) ")"; )

Samozrejme, všetko sa zobrazí týmto spôsobom: relatívne odkazy, absolútne odkazy, kotvy atď. Nasledujúca možnosť bude fungovať lepšie:

A:not():after ( content: " (" attr(href) ")"; )

Vyzerá to šialene, ja viem. Spôsob, akým tieto riadky fungujú, je zobraziť hodnotu atribútu href vedľa každého odkazu, ktorý ho má, ak začína reťazcom http, ale neukazuje na našu stránku mywebsite.com .

9. Tlač prepisov skratiek

Skratky musia byť zabalené do prvku s popisom v atribúte title. Má zmysel si to vytlačiť.

Abbr:after ( content: " (" attr(title) ")"; )

10. Tlač pozadia

Prehliadače zvyčajne netlačia farbu pozadia a obrázky na pozadí, pokiaľ im to výslovne nepovolíte. Existuje neštandardizovaná vlastnosť print-color-adjust, ktorá umožňuje prepísať predvolené nastavenia v niektorých prehliadačoch.

Hlavička ( -webkit-print-color-upraviť: presná; tlač-upraviť farbu: presne; )

11. Dotazy na médiá

Ak píšete mediálne dopyty ako v nasledujúcom príklade, uvedomte si, že štýly v tomto mediálnom dopyte sa pri tlači nepoužijú.

@media obrazovka a (min. šírka: 48em) ( /* iba obrazovka */ )

Budete sa pýtať prečo? Pretože pravidlá CSS platia len vtedy, keď sú splnené obe podmienky: minimálna šírka je 48 em , typ média je obrazovka . Ak sa zbavíme kľúčového slova screen, potom mediálny dopyt bude brať do úvahy iba hodnotu min-width.

@media (min-width: 48em) ( /* všetky typy médií */ )

12. Tlač kariet

Aktuálne verzie prehliadačov Firefox a Chrome sú schopné tlačiť mapy, ale Safari nie. Niektoré služby poskytujú statické mapy, ktoré je možné vytlačiť namiesto originálu.

Mapa ( šírka: 400px; výška: 300px; obrázok na pozadí: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh "); -webkit-print-color-uprav: presný; print-color-uprav: presný; )

13. QR kódy

Addon 2: Gutenberg

Ak hľadáte framework, potom by sa vám mohol páčiť Gutenberg, vďaka ktorému je optimalizácia stránky o niečo jednoduchšia.

Addon 3: Hartija

Toto je ďalší rámec pre štýl tlače

Často na stránkach, ktoré môžete nájsť verzia stránky pre tlač. Mnoho ľudí si myslí, že je to niečo zabudované v samotnom prehliadači alebo že je to veľmi jednoduché. V skutočnosti to vôbec nie je pravda. Verzia pre tlač je normálna stránka ktoré potrebujete sám za seba robiť.

Môžete si pozrieť verziu tohto článku na tlač. Čo by tam vlastne malo byť zobrazené? Názov článku, sekcia, kategória, autor, samotný text a dátum. Toto všetko je zobrazené na tejto stránke. Potrebujete jedálny lístok, vyhľadávací formulár, rôzne bloky? Nemyslím si, že preto nie.

Tiež sa uistite, že je šírka tlačenej verzie nepresahuje 650 pixelov, inak môže prehliadač orezať okraje.

Tak to si už pochopil tlačená verzia Musíte si vytvoriť svoj vlastný, zobrazujúci presne to, čo používateľ potrebuje. Teraz o tom, ako to urobiť.

Existuje 2 možnosti: vytvorte samostatnú stránku a vytvorte samostatnú šablónu so štýlmi. Prvá možnosť je podľa mňa jasná. Vytvorte ďalšiu stránku s verziou pre tlač a na hlavnej stránke dáte odkaz na túto tlačenú verziu. Používateľ sa ním riadi "Súbor" -> "Tlačiť" on si to vytlačí.

Druhá možnosť zahŕňa vytvorenie samostatnej šablóny so štýlmi, kde skryjete všetky nepotrebné bloky (cez displej: žiadny;) a nastavte príslušné rozmery pre výstupný obsah. Ďalej je takýto súbor štýlu pripojený nasledovne:

Teraz, ak chce používateľ vytlačiť túto stránku, nevytlačí to, čo vidí, ale to, čo je napísané print.css. V skutočnosti používateľ vidí stránku jedným spôsobom a tlačiareň úplne iným spôsobom.

To je tá cesta vytvára sa verzia pre tlač akúkoľvek stránku webu.

Zdá sa, že je ťažké vytvoriť stránku na tlač? Jednoducho vytvoríme rovnaký dokument s textom, ale bez akéhokoľvek dizajnu a prepojíme naň z bežnej stránky. Vyhľadávače však zaviedli filter na duplicitný obsah a správcovia webu musia pred indexovaním skryť stránky, ktoré je možné vytlačiť. Návštevníci stránok navyše nie sú príliš pohodlní, pretože najprv musia prejsť na kópiu stránky, ktorú potrebujú, na ktorej nie sú žiadne prvky dizajnu, a potom kliknúť na tlačidlo „Tlačiť“.

Tu môže prísť vhod CSS, ktorý nielen zníži množstvo práce pre webmasterov a uľahčí návštevníkom používanie stránky, ale tiež sa vyhne sankciám zo strany vyhľadávačov za duplicitný obsah.

Štruktúra stránky

Najprv teda použijeme HTML na vytvorenie štruktúry nášho dokumentu. Pre príklad som sa rozhodol použiť tabuľkové rozloženie, aby bolo ľahšie porozumieť:

Ako vidíte, máme tabuľku s tromi bunkami, ktoré sú usporiadané horizontálne. Všetko je ako na bežnej stránke: navigácia vľavo, obsah v strede a reklamné bloky alebo správy vpravo. Každá bunka má pridelené svoje vlastné ID. Pre ľavú stranu je to ľavý stĺpec, pre pravú je to pravý stĺpec a pre strednú bunku s obsahom je to obsah.

Pridanie CSS

Teraz pomocou CSS musíte prehliadaču povedať, aké štýly by mal použiť na zobrazenie prvkov stránky na obrazovke a ktoré by mal použiť pri tlači. Vytvorte style.css a napíšte tam nasledovné:

Prvý blok kódu CSS popisuje, ako sa majú prvky stránky zobrazovať v prehliadači. Blok bol vzatý do ďalších zložených zátvoriek, pred ktorými sme pridali obrazovku @media. Prehliadaču to oznámi, že na zobrazenie je potrebné použiť tieto štýly:

Takto vyzerá stránka pri zobrazení v prehliadači

Druhý blok popisuje zobrazenie rovnakých prvkov stránky ako prvý, ale v tomto prípade vo forme, v akej bude dokument vyzerať pri tlači a je indikovaný parametrom @media print. Keďže chceme, aby sa tlačil iba užitočný obsah, zakážeme zobrazovanie ľavej (#leftcolumn) a pravej (#rightcolumn) buniek tým, že ich nastavíme na display: none.

Takto vyzerá tlačená verzia stránky

Samostatné súbory štýlov

Nie je potrebné kombinovať všetko v jednom súbore štýlu. Namiesto toho môžete použiť dva súbory štýlov a pri ich pripájaní k stránkam lokality povedať prehliadaču, ktorý súbor štýlu má použiť pri tlači a ktorý na zobrazenie na obrazovke. Prvý (pre výstup na obrazovku) je definovaný parametrom media="screen" a druhý sa použije na tlač a je definovaný parametrom media="print":

Štýly pre tlač musia byť popísané až po tom všetkom, inak Opera vytlačí blok obsahu spolu s farebným pozadím, ktoré je určené pre výstup do prehliadača, a nie bielu farbu, ktorú sme zvolili na tlač.

Taktiež pri tlači striktne zmenšujeme šírku bloku obsahu na 600px, pretože pri 100% šírke tlačiareň „odstrihne“ malý pásik textu na pravej strane stránky. Venujte pozornosť aj skutočnosti, že pri tlači z Opery je odsadenie pozdĺž okrajov listu o niečo menšie ako v programe Internet Explorer a riadky textu na liste papiera sú širšie.

Teraz už nemusíte vytvárať ďalšie strany na tlač. O možnosti tlače stránky môžete používateľov informovať napríklad pomocou odkazu s textom „tlač“, po kliknutí sa zobrazí tooltip s hlásením o možnosti priamej tlače aktuálnej stránky bez dizajnu.

Kopírovanie článku je zakázané.