myGeeBlog

Właśnie przerobiłem szablon jednej stronki. Gdy robiłem poprzednią wersję, to były moje początki w “divach”. Dziś zrobiłem ten sam layout, ale na nowo - przy wersji poprzedniej były drobne błędy w wyświetlaniu się.

Nie dość, że zmniejszyłem rozmiar zarówno CSS, jak i html, o mniej więcej 1/3, to strona jest bez porównania bardziej poprawna semantycznie. Dość powiedzieć, że poprzednio menu to było kilka <div>ów po sobie, nagłówek to <div> z id=”head” etc. Teraz są ładne elementy <h1> do <h3>, połowę mniej tagów, i strona wyświetla się poprawnie tam gdzie powinna ;)

Patrząc z perspektywy czasu, nauczyłem się dość dużo. Na tyle, że moge być z siebie zadowolony :)

W ramach treningu o zabawy, w wyniku pewnego zapytania napisałem takie coś - może się komuś przyda. Jako parametr należy podać nazwy plików html w których należy uzupełnić tagi <img /> o wymiary obrazków.

#!/usr/bin/env python
# -*- coding: iso-8859-2 -*-
import os.path
import re
import Image
import sys

if len(sys.argv) == 1:
  print 'Podaj nazwy plików'

def replace(html):
  rx = r'''(?im)(<\\s*img\\s*src=(["'])(?P.*?)\\2.*?/>)'''
  imgs = re.findall(rx, html) #, re.I|re.M)
  if imgs:
    for imgtag, tmp, fname in imgs:
      if imgtag.find('width=') == -1 and\\
          imgtag.find('height=') == -1 and\\
          os.path.isfile(fname):
        intag = 'width="%dpx" height="%dpx"' % Image.open(fname).size
        ntag = imgtag[:-2] + intag + ' />'
        html = html.replace(imgtag, ntag)
  return html

files = sys.argv[1:]
for f in files:
  if not os.path.isfile(f):
    print 'Nie znaleziono:', f
    continue
  html = replace(open(f).read())
  open(f, 'w').write(html)

Wymagany jest moduł PIL.

Oczywiście jest to mocno niedopracowane, ale napisanie tego to było dosłownie kilka minut, dla zabawy, a jako że to jest python, to łatwo samemu to dopracować i poprawić :) Ważne, że działa jak powinno…

jako ze chociaz chwilowo minela mi ostatnia niemoc odnosnie moich wysilkow wziecia sie za jakakolwiek prace (czesciowo zwiazana z moja choroba), to opisze sobie dla sportu pewien prosty trick:

wiekszosc osob dluzej zajmujaych sie tematem zna ten sposob, zreszta zostal ladnie opisany przez Yano na pcw faq, ale tutaj bedzie minimalnie zmodyfikowana wersja pozwalajaca na nieznajomosc (teoretyczna) wysokosci obrazka. generalnie trick polega na tym, ze wersja obrazka z hoverem stanowi wraz z wersja bez hovera jedna calosc, dzieki czemu po zaladowaniu sie obrazka, nie ma juz czego doladowywac (jesli chodzi o zmieniajace sie obrazki w hoverze za pomoca js czy tez innych metod… :) ). ja robie to tak:

tworze obrazek (tak jak ladnie opisal Yano), tak ze na dole jest wersja taka, jaka ma sie wyswietlic po ‘najechaniu; kursorem nad obrazek/link. wyzej ma byc wersja jaka sie wyswietla domyslnie. i kod:

html

<a href="http://urzenia.net/"></a>

css

a {
display: block;
width: 10px;
height: 10px;
background: #fff url('obrazek.png') top center no-repeat;
}
a:hover {
background-position: bottom center;
}

co prawda jest trudniej dorobic trzeci stan (wrecz sie nie da, trzeba wtedy skorzystac z przesuniec w pikselach jak w wersji Yano), ale zazwyczaj tego trzeciego stanu sie nie robi, wtedy znacznie prosciej jest zamiast liczyc polowki i wartosci przesuniec, wpisywac top/bottom

inna sprawa jest wai i co zrobic, jesli ktos ma wylaczone sciaganie obrazkow, ale to temat na osobna opowiesc… ;)

pcworld podaje, ze dzis mamy dzien bezpiecznego internetu. wszelkich informacji mozna doczytac sie na stronie poswieconej temu dniu, czyli www.saferinternetday.pl. zajrzalem tam, i jestem w szoku:

strona przygotowana zgodnie z najnowszymi standardami, zero tabelek, elegancki kod (no tu moze lekko przesadzam, nie wczytwywalem sie w tenze kod, tylko z grubsza popatrzylem, ale wyglada na to ze ok). same divy, cssy i takie tam… mam tylko dwa zastrzezenia - pierwsze malo wazne, drugie troche irytujace:

• strona sie nie waliduje - walidator wywala blad:
  

  Sorry! A fatal error occurred when attempting to transcode the character encoding of the document. Either we do not support this character encoding yet, or you have specified a non-existent character encoding (often a misspelling).
  
  The detected character encoding was "default".
  
  The error was "".

  strasznie duzo to mowi.. generalnie nie wykrywa charsetu, i nie chce mi sie sprawdzac (jestem i tak ledwo zywy, jak zawsze musze sie kuzwa pochorowac) czy to dlatego ze meta od charsetu jest za nisko, pod wszystkimi link’ami i script’ami (w sumie bzdura, nie powinno byc bledu) czy dlatego ze atrybut http-equiv ma drugi czlon nazwy (type) z malej litery (jeszcze wieksza bzdura… ale nie takie rzeczy juz widzialem). po ustawieniu sztywnego content type walidator dumnie nagradza strone odpowiednim znaczkiem…

• czy domena nie mogla by byc polska ? czemu zamiast dzienbezpiecznegointernetu.pl jest saferinternetday.pl ? w sumie sie nie wczytywalem za bardzo, byc moze takie sa ogolne zalozenia calej akcji, ze wspolna nazwa tylko inne domeny w roznych krajach, pewnosci nie mam, wiec moze niepotrzebnie sie czepiam. ale imo tak jakos dziwnie…

jako ze larkowi pokazywalem jak najprosciej stworzyc dzialajacy w geckowatych i ie layout 3 kolumnowy, to go tu zamieszcze. moze sie komus przyda (informuje, ze to tylko ogolny zarys, i nie ma dopracowanych wartosci marginesow/paddingow dla innych niz gecko, ale poza tym powinno byc ok)

acha, dzialac bedzie w gecko i ie6 i operze 7.5. w starszych - nie wiem. mam ten luksus, ze moge je olac… :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
                <title>layout 3 kolumnowy</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta http-equiv="Content-language" content="pl" />
                <style type="text/css">
                        body {
                                margin: 0;
                                padding: 0;
                                background-color: #000;
                        }
                        #main {
                                width: 750px;
                                margin: 0 auto;
                        }
                        h1, form {
                                margin: 0;
                                padding: 0;
                        }
                        h1 {
                                display: block;
                                width: 750px;
                                height: 209px;
                                background-color: #999;
                        }
                        #contLeft {
                                width: 174px;
                                float: left;
                                background-color: #fae;
                        }
                        #contRight {
                                width: 186px;
                                float: left;
                                background-color: #faa;
                        }
                        .clear {
                                width: 0px;
                                height: 0px;
                                margin: 0px;
                                padding: 0px;
                                font-size: 0px;
                                clear: both;
                        }
                        #contCenter {
                                width: 390px;
                                float: left;
                                font-size: 12px;
                                background-color: #1aa;
                        }
                        #footer {
                                height: 25px;
                                color: #fff;
                                text-align: center;
                                background-color: #444;
                        }
                </style>
        </meta></meta></head>
        <body>v id="main">
                        <h1>NAGLOWEK</h1>
                        <div id="contLeft">KOLUMNA LEWA</div>
                        <div id="contCenter">SRODEK</div>
                        <div id="contRight">KOLUMNA PRAWA</div>
                        <div class="clear"></div>
                        <div id="footer">STOPKA</div>
        </body>
</html>

tylko nie wiem czy nie wystarczyloby dodac do #footer clear: both; i wywalic .clear (tzn nie wiem czy bedzie dzialac pod ie, bo pod gecko/opera na pewno)

przyklad tutaj