Anonymní profil peter – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Anonymní profil peter – Programujte.comAnonymní profil peter – Programujte.com

 

Příspěvky odeslané z IP adresy 2001:718:2601:1f7:b04d:42...–

peter
CSS › Neposlušný sloupec na webu
4. 6. 2015   #202673

Vladusko

- html -
Das si treba seznam.cz
Najdes si v menu zobrazit zdrojovy kod.
Zkopirujes do schranky (ctrl+c), otevres soubor, vlozis, ulozis.

- text -
Das si treba seznam.cz
Najdes v menu vybrat vse (ctrl+a)
Zkopirujes do schranky (ctrl+c), otevres soubor, vlozis, ulozis.

Nechas si zobrazit velikost souboru text a souboru html. (Mozna obe hodnoty dokaze zobrazit prohlizec nebo mozna pres plugin, ale takhle to taky funguje; Pozor, FF treba doplnuje tagy, tak ta velikost muze byt trosku jina nez realny html. Orientacne to vsak nevadi)

Jako, to je na tobe, jak si to udelas. Uzivatel vidi jen ten text a obrazky. Co je v pozadi ho nezajima (a mozna ani vetsinu vyhledavacu). Mne to zajima. Chci usetrit uzivateli cas, usetrit linku.

Treba, pro zajimavost, toto tema bez me reakce a vsech pod ni
http://programujte.com/…pec-na-webu/
text / html = 8801 / 69418 = 0.127

Jo, a u toho google bacha. On tam mas pribaleny do stranky JS pro jquery. To je kolem 130k. Minifikovane. Pokud neco dal stahuje, tak jen vysledek vyhledavani. Takze z hlediska rychlosti ma stranku optimalizovanou. samozrejme, kdyby to dal externe, tak je tam jeden pozadavek na soubor na vic, coz muze chvili trvat. Ale zas vy se to pekne kesovalo. Ja treba davam prednost tomu externimu i za cenu zpomaleni pri prvnim nacteni.
Kdyz se nad tim zamyslis jeste vic, tak se cela stranka opakovane kesuje. takze to ma google z hlediska rychlosti a uspory v poradku. Ikdyz se mi to nelibi :)

peter
CSS › Neposlušný sloupec na webu
4. 6. 2015   #202664

Sloupce - To je normalni chovani. Pouzil jsi flota a on presne tohle dela. Pokud to chces zarovnavat do sloupcu, musis tam ty sloupce vytvorit a clanky davat do nich. Ted to mas tak, ze, co clanek, to novy sloupec, ktery je bud zarovnany vravo nebo vlevo. Nebo muzes pouzit html5/css3, to tusim sloupcovani nejake ma, zati jsem to nepouzil.

Css externi - tak urcite :) i javascript. Google treba hodnoti kvalitu stranky podle toho, zda je pomer text / html blizky 1 (pokud ne, tak by mel, a jak koukam, mel by zacit i u sebe :) ). Pak hodnoti, kolik souboru se kvuli strance musi otvirat. Takze idealni je jeden css a jeden js soubor, minimum obrazku na strance nebo jako pozadi, minimum videji a tak.

Wordpress - Muze to byt problem. Zalezi na tom, jake mas s redakcnimi systemy zkusenosti. Funguje to tak, ze php vykresluje oblasti na strance pomoci sablony. Muzes udelat vlastni sablonu, rict, jaka cast se na ktere misto bude vykreslovat. Ale to, co generuje php ma vlastni strukturu html a vlastni className, id. takze budes muset svoje css prepsat. navic budes muset mozna hledat plugin, ktery ti to zobrazi tak, jak chces nebo si ten program napsat sam. idealni je najit si template s sablonami, ktery se nejvic podoba tvemu vysnenemu vzhledu a bude vyzadovat malo zasahu do css, mozna html.

Ta sablona muze vypadat treba takto ( tu sem si delal v js, wp bude mit php) Celou tu slozitost delam ted kvuli tomu, ze chci docilit vyrazny podil textu vuci nadbytecnemu html, ktery dela vzhled, menu a jine nesmysly. Je to dlouhodoba zalezitost, co to mam v hlave, zatim jsem to ale neuvedl do praxe :) Mezitim jina reseni objevila kvuli mobilum, schovane menu pod tlacitkem tri carek pod sebou, a tak.

// js kod, ktery nahradi "{neco}" za hodnoty v js poli "root.data['neco']"
	str = root.data.layout;
	for(i in root.data)
		{
		str = str.replace('{'+i+'}',root.data[i]);
		}
// tam, ja je {content}, tam vkladam obsah stranky

var TPL  = {
'layout': "\
<!DOCTYPE html><!-- web Peter Mlich -->\n\
<html id=\"html\">\n\
<head>\n\
  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1250\"\/>\n\
  <title>mracek: {title}<\/title>\n\
  <link rel=\"shortcut icon\" href=\"favicon.ico\"\/>\n\
  <link rel=\"stylesheet\" href=\".\/site\/css\/2014\/style_2014.css\" type=\"text\/css\" id=\"site_css\"\/>\n\
<\/head>\n\
<body id=\"body\">\n\
<div class=\"site\">\n\
<div class=\"site1\">\n\
\n\
\n\
  <div class=\"site_header\">\n\
    {wz}\n\
    {nav_path}\n\
    <div class=\"logo\">\n\
      <span><a href=\".\/index.htm\" accesskey=\"0\">Peťova stránka<\/a><\/span>\n\
      <hr\/>\n\
    <\/div><!--\/\/logo-->\n\
\n\
<div class=\"nav_lvl1\">\n\
  <ul>\n\
    <li><a href=\".\/index.htm\">Uvod<\/a><\/li>\n\
    <li><a href=\".\/o_mne\/index.htm\" >O mně<\/a><\/li>\n\
    <li><a href=\".\/zabava\/index.htm\">Zábava<\/a><\/li>\n\
    <li><a href=\".\/tech\/index.htm\">Technika<\/a><\/li>\n\
    <li><a href=\"#\" title=\"\">Ke stažení<\/a><\/li>\n\
    <li><a href=\"#\" title=\"\">Kontakt<\/a><\/li>\n\
    <li><a href=\"#\" title=\"\">Odkazy<\/a><\/li>\n\
    <!--li><a href=\"#\" title=\"\">Kniha hostů<\/a><\/li-->\n\
    <!--li><a href=\".\/o_strance.htm\">O stránce<\/a><\/li-->\n\
    <!--li><a href=\"#\" title=\"\">Mapa stránek<\/a><\/li-->\n\
    <li><a href=\".\/x\/index.htm\">x<\/a><\/li>\n\
  <\/ul>\n\
<\/div>\n\
  <\/div><!--\/\/site_header-->\n\
\n\
\n\
\n\
<!-- ========================= -->\n\
\n\
\n\
\n\
  <div class=\"site_content\">\n\
    <div class=\"content\">\n\
	{content}\n\
    <\/div><!--\/\/content-->\n\
  <\/div><!--\/\/site_content-->\n\
\n\
\n\
\n\
<!-- ========================= -->\n\
\n\
\n\
\n\
  <div class=\"site_footer_js\">\n\
  <div class=\"site_footer\">\n\
    <hr\/>\n\
    <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">\n\
      <tr>\n\
        <td>2010 Peter Mlích, peter.mlich&#64;volny.cz<\/td>\n\
        <td align=\"right\">\n\
	  <a href=\".\/style.htm\" target=\"_top\">Zm?>nit vzhled<\/a>\n\
          <!--a href=\"http:\/\/www.toplist.cz\/\" target=\"_top\"><img src=\"http:\/\/toplist.cz\/dot.asp?id=118401\" border=\"0\" alt=\"TOPlist\" width=\"1\" height=\"1\"\/><\/a-->\n\
	<\/td>\n\
      <\/tr>\n\
    <\/table>\n\
  <\/div><!--\/\/site_footer-->\n\
  <\/div>\n\
\n\
\n\
\n\
<\/div><!--\/\/site1-->\n\
<\/div><!--\/\/site-->\n\
\n\
<\/body>\n\
<\/html>\n\
"
};

podil text / html na strance
seznam.cz ma 4143/69937 = 0.06 katastrofa :)
google.cz 240/140.000 = 0.0017 hruza :)
 wordpress.org 1.900/13.000 = 0.14
moje testovaci index 1185/1632 = 0.7 (slo by to i mnohem mene, ale pouzitim par tagu navic se vyhnu potizim)
moje testovaci index po vygenerovani js 1185/3381 = 0.35
moje stavajici online stranka 3922/7832 = 0.5 (po smazani komentare se starymi novinkami)

 

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý