SEOmistr.cz » Webdesign http://www.seomistr.cz Nejpoužívanější nástroje pro webdesignery Thu, 05 Mar 2020 22:58:29 +0000 cs-CZ hourly 1 https://wordpress.org/?v=3.9.40 Apple-touch-icon http://www.seomistr.cz/webdesign/apple-touch-icon/ http://www.seomistr.cz/webdesign/apple-touch-icon/#comments Sun, 03 Feb 2013 23:00:40 +0000 http://www.seomistr.cz/?p=494 Ikony pro iPhone, iPod a iPad

Připravte a umístěte na web, nejlépe do rootu, alespoň jednu ikonu pro zařízení Apple:

  • název: apple-touch-icon.png
  • velikost: 57 × 57 pixel (standard)

Zápis do meta značek

Ideálně, když připravíte celkem čtyři soubory. Velikost v pixelech té první ikony je rovněž 57 × 57 pixelů.


<link rel="apple-touch-icon" href="/apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-ipad3.png" />

Malá změna pro iOS 7 (2013)

pro iPhone Retina z 114 × 114 px na 120 × 120 px
pro iPad Retina z 144 × 144 px na 152 × 152 px

Ikony pro jiná rozlišení zůstávají stejné.
57 × 57 px  = default
76 × 76 px pro iPady bez retiny


<link rel="apple-touch-icon" href="/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png" />

Jak zjistíte, že návštěvníci vašeho webu používají zařízení Apple

Pokud monitorujete nedostupné stránky, objeví se tam za sebou požadavky na tyto čtyři soubory:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-57×57.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png

Odkazy

]]> http://www.seomistr.cz/webdesign/apple-touch-icon/feed/ 0 Jak připravit web stránky pro mobilní zařízení http://www.seomistr.cz/webdesign/jak-pripravit-web-stranky-pro-mobilni-zarizeni/ http://www.seomistr.cz/webdesign/jak-pripravit-web-stranky-pro-mobilni-zarizeni/#comments Sun, 29 Jul 2012 22:51:33 +0000 http://www.seomistr.cz/?p=443 Jak upravit webdesign pro chytré telefony je vcelku jednoduché :-)

Nejprve si spusťte testery

Pak si přečtěte články

Podle těchto návodů upravte svůj web

Placené nástroje pro vývojáře

Pluginy do WordPressu

]]> http://www.seomistr.cz/webdesign/jak-pripravit-web-stranky-pro-mobilni-zarizeni/feed/ 0 CSS stylování http://www.seomistr.cz/webdesign/css-stylovani/ http://www.seomistr.cz/webdesign/css-stylovani/#comments Tue, 10 May 2011 10:54:35 +0000 http://www.seomistr.cz/?p=330 Co si nemůžu zapamatovat, je pár věcí ohledně syntaxe. I když s tím skoro denně pracuji, občas se mi to plete.

Souvislost mezi HTML a CSS

zápis v HTML zápis v CSS
id #
class .

Příklad HTML kódu

<div id="ahoj">
<div class="nazdar">

Příklad zápisu CSS

#ahoj {..;..;..;}
.nazdar {..;..;..;}

Přebití stylování v CSS

V zápisu stylování se uvede !important.

Příklad zápisu CSS

ul {margin:0 !important;}

Vyčištění stylu

V HTML kódu
<div style="clear:both"></div>
nebo ve stylu
{clear:both}

Odkazy


a.nic, a:hover.nic, a:visited.nic {
font-weight:normal;
color: #000;
text-decoration:none;
}

]]> http://www.seomistr.cz/webdesign/css-stylovani/feed/ 0 Velikost obrazovky (screenu) http://www.seomistr.cz/webdesign/velikost-obrazovky-screenu/ http://www.seomistr.cz/webdesign/velikost-obrazovky-screenu/#comments Sun, 10 Apr 2011 19:59:15 +0000 http://www.seomistr.cz/?p=297 Jak je velký váš screen

Velikost (rozměr v pixelech) okna vašeho prohlížeče se zobrazí v pravém horním rohu na úvodní stránce serveru:

Jaké rozlišení obrazovky se právě dnes nejvíce používá

Univerzální kalkulátor velikosti obrazovky najdete zde:

Výpočet velikosti obrazovky

Univerzální kalkulátor velikosti obrazovky najdete zde:

]]> http://www.seomistr.cz/webdesign/velikost-obrazovky-screenu/feed/ 0 Webové barvy http://www.seomistr.cz/webdesign/webove-barvy/ http://www.seomistr.cz/webdesign/webove-barvy/#comments Sun, 10 Apr 2011 19:50:43 +0000 http://www.seomistr.cz/?p=293 Vyberte si barvy pro váš web pomocí známého univerzálního nástroje

Dalším jednoduchým a rychlým nástrojem pro výběr webové barvy je

]]> http://www.seomistr.cz/webdesign/webove-barvy/feed/ 0 GEO meta tag http://www.seomistr.cz/webdesign/geo-meta-tag/ http://www.seomistr.cz/webdesign/geo-meta-tag/#comments Thu, 03 Mar 2011 13:32:28 +0000 http://www.seomistr.cz/?p=252 Do šablony stránek lze vložit GEO meta-tag: Geo.position. Jedná se o pět řádek, které vyhledávači i návštěvníkovi vašich stránek říkají, kde se nacházíte, resp. na kterém místě máte firmu, provozovnu, obchod atd.

Abyste si ušetřili práci se zjišťováním údajů, stačí navštívit web:

Do pole zadáte jen poštovní adresu a dostanete kompletní zápis do hlavičky webového dokumentu, do meta značek.

Meta značky GEO

  • meta ICBM
  • meta DC.title
  • meta geo.position
  • meta geo.placename
  • meta geo.region
]]> http://www.seomistr.cz/webdesign/geo-meta-tag/feed/ 0 Obrázky ZDARMA http://www.seomistr.cz/webdesign/obrazky-zdarma/ http://www.seomistr.cz/webdesign/obrazky-zdarma/#comments Sun, 13 Feb 2011 23:47:49 +0000 http://www.seomistr.cz/?p=220 Na Internetu je možné najít velmi zajímavé fotografie nebo grafiku pro vaše webové stránky, a to dokonce ZDARMA.

Fotografie/obrázky pro volné užití

  • commons.wikimedia.org – velmi mnoho fotografií, avšak ne všechno lze volně užít
  • www.123rf.com – dobrý výběr, DOPORUČUJI, v rozlišení pro web ZDARMA, možnost stažení fotografie/obrázku je časově limitováno
  • iStockPhoto.com – každý týden jeden snímek ve vysokém rozlišení
  • Fotolia.com – každý den 15 fotografií, kvalita kompozice obrázků bývá však někdy příšerná, občas se poštěstí najít něco dobrého
  • www.pdphoto.org 1000 fotografií
  • www.sxc.hu – 400 000 obrázků
  • www.creattor.com

Ikony pro volné užití

]]> http://www.seomistr.cz/webdesign/obrazky-zdarma/feed/ 0 Šablony ZDARMA http://www.seomistr.cz/webdesign/sablony-zdarma/ http://www.seomistr.cz/webdesign/sablony-zdarma/#comments Sun, 13 Feb 2011 21:49:15 +0000 http://www.seomistr.cz/?p=204 Na Internetu je možné najít docela pěkné šablony webových stránek, a to dokonce ZDARMA.

Šablony pro HTML

Šablony pro WordPress

Šablony LEVNÉ

]]> http://www.seomistr.cz/webdesign/sablony-zdarma/feed/ 0 Náhledová ikona stránky http://www.seomistr.cz/webdesign/nahledova-ikona-stranky/ http://www.seomistr.cz/webdesign/nahledova-ikona-stranky/#comments Fri, 12 Nov 2010 13:53:16 +0000 http://www.seomistr.cz/?p=150
Náhled stránky

Náhled stránky


Pokud potřebujete pohotově udělat ikonu webové stránky (zmenšený obrázek, náhled stránky),
stačí navštívit web Thumbalizr. Jedním kliknutím myši vám web vygeneruje ikonu vaší stránky. Druhým kliknutím si snímek stránky stáhnete v libovolném zmenšení.

Formát souboru je PNG.

Další podobný server Thumbshots dělá v podstatě to samé. Navíc můžete pomocí příkazové řádky stahovat obrázek on-line. Jen se musíte registrovat.

Formát souboru je PXF.

Plugin Screengrab do Firefoxu je k dispozici zde:

]]> http://www.seomistr.cz/webdesign/nahledova-ikona-stranky/feed/ 0 Šablony pro WordPress http://www.seomistr.cz/wordpress/sablony/ http://www.seomistr.cz/wordpress/sablony/#comments Mon, 18 Oct 2010 23:01:41 +0000 http://it.seomister.com/?p=99 Šablony lze získat zdarma. Autoři šablon obvykle požadují uvedení odkazu v patičce stránky nebo malou částku (desítky dolarů).

Jak hledat

WordPress šablony – WordPress Teplates – WordPress Themes

Obecné odkazy na šablony pro WordPress

České šablony pro WordPress

Nejoblíbenější šablony

  • ]]>     http://www.seomistr.cz/wordpress/sablony/feed/ 0     Malování http://www.seomistr.cz/webdesign/malovani/ http://www.seomistr.cz/webdesign/malovani/#comments Mon, 18 Oct 2010 21:38:51 +0000 http://it.seomister.com/?p=81 Užitečné internetové on-line nástroje (programy) pro malování a úpravu obrázků.

    • www.sumopaint.com – on-line malování a úprava obrázků, uložení do formátů JPG a PNG
    ]]>     http://www.seomistr.cz/webdesign/malovani/feed/ 0     Favicon.ico http://www.seomistr.cz/webdesign/favicon/ http://www.seomistr.cz/webdesign/favicon/#comments Mon, 18 Oct 2010 21:08:11 +0000 http://it.seomister.com/?p=62 Stručný popis, charakteristika a nápověda jak vytvořit soubor Favicon.ico, tj. vlastní ikonku pro svůj web.

    Popis

    Soubor Favicon.ico je ikonka, která se objevuje na začátku adresního řádku a na ouškách záložek. Detail ikonky Favicon.ico je vidět na obrázku dole.

    Charakteristika

    Doporučené umístění: root webu
    Velikost: 16×16 pixelů

    Umístění ve zdrojovém kódu stránky

    Odkaz na ikonu Favicon.ico umístíte do části meta tagů, tj. kamkoliv do části ohraničenou značkami head, například takto:


    <head/>
    ...
    <link rel="shortcut icon" href="/favicon.ico" />
    ...
    <head/>

    On-line nástroje pro generování

    Kde najít ikonku v prohlížeči

    Následující obrázek názorně dokumentuje, kde ikonku Favicon.ico na monitoru najdete :-)

    Favicon.ico

    Favicon.ico

    ]]>     http://www.seomistr.cz/webdesign/favicon/feed/ 0     XML Sitemap http://www.seomistr.cz/webdesign/xml-sitemap/ http://www.seomistr.cz/webdesign/xml-sitemap/#comments Mon, 18 Oct 2010 20:28:36 +0000 http://it.seomister.com/?p=52 On-line nástroje pro generování XML Sitemap

    Tyto mám osobně odzkoušeny a běžně s nimi pracuji.

    ]]>     http://www.seomistr.cz/webdesign/xml-sitemap/feed/ 0