Zleceniodawca: Firma Delta 2 – producent kapci gościnnych.
Technologia: xhtml, css, jQuery.
Zakres pracy: projekt strony www, kodowanie oraz wstępne pozycjonowanie w google.pl na frazę kapcie gościnne.
Adres: http://delta2.jooweb.eu/
Zleceniodawca: Restauracja orientalna Hattori Hanzo Częstochowa.
Zakres pracy: projekt strony www, logotypu oraz menu.
Technologia: xhtml, css, jQuery, flash.
Adres: http://hattorihanzo.com.pl/
Logotyp:
Strona www:
Zdjęcia przedstawiają zespół Strefa, który serdecznie polecam. Możecie ich znaleźć na stronie http://www.strefa.art.pl/ . Chłopaki mają kilka ciekawych kawałków oraz co najważniejsze potrafią grać i bawić się z publicznością! Słuchanie ich było jak grzane winko z moją Madzią – czyt. cudowne. Niestety przez cały okres jaki tam byłem zdążyłem pstryknąć tylko kilka zdjęć…
Siedzę, jem jabłko, pije herbatę, słucham natchnienia.Coś z niczego – …tworzę? Tęsknię, czekam… słucham.
Kwadrat – serce – kropki – ulotne chwile i… droga i… coś więcej… Dla mnie chwila, dla nas? – wieczność.
Informacje ogólne.
…żeby zacząć przygodę z jakim kol wiek skryptem (wordpress, joomla! itd.) musimy znać język html i css. Każdy webdeveloper powinien wiedzieć jak dobrze i czytelnie zakodować pocięty szablon strony www.
Szkielet strony www napisany w xhtml.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="css/template.css" />
<title>Szkielet</title>
</head>
<body>
<div id="html_center">
<div id="header"></div>
<div id="content"></div>
<div class="clr"> </div>
<div id="footer"></div>
</div>
</body>
</html>
Arkusz styli css template.css.
@charset "utf-8";
/*
CSS Document by Tomasz Kotarski
www.tomaszkotarski.pl
*/
.clr { clear:both}
html, body, ul, li, img, tr, td {padding:0; margin:0; border:none; list-style:none} /* reset */
body {}
#html_center{}
#html_center #header{}
#html_center #content{}
#html_center #footer{}
Szkielet strony mamy już opracowany, czas na mały opis znaczników. Postaram się przybliżyć najważniejsze z nich. Zapraszam wszystkich do głębszej lektury na stronę http://www.kurshtml.edu.pl/ – wydaje mi się że lepszej strony nie znajdziemy w internecie. Ja zaczynałem swoją przygodę właśnie od niej.
…let’s start
1. DOCTYPE – znacznik doctype, jak sama nazwa wskazuje – doc – type – mówi przeglądarce z jakim rodzajem dokumentu ma do czynienia. Brak tego znacznika powoduje, że nasza Mozilla renderuje stronę www standardami ustanowionymi w latach 90
XHTML 1.0 Strict, Transitional, Frameset
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 4.01
Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Strict(ścisła) Frameset(ramkowa) Transitional(przejściowa)
2. <head> (ang. head – głowa, header – nagłówek) – sekcja nagłówkowa w dokumencie HTML lub XHTML. Pomiędzy otwierającym i zamykającym znacznikiem <head> znajduje się prolog dokumentu. Zwykle jest to tylko kilka znaczników (a przede wszystkim tytuł strony, informacje o autorze strony, kodowaniu i instrukcje dla przeglądarki oraz wyszukiwarek). Nie wolno w prologu (czyli między znacznikami <head>) wpisywać tekstu, który ma się pojawić na stronie. – źródło http://pl.wikipedia.org/wiki/Head_(HTML)
3. <body> – znacznik body definiuje „ciało” strony www. W nim powinny znajdywać się wszystkie znaczniki języka xhtml, html itp.
4. <div> - blok
ID - unikalny identyfikator dla elementu (np. <div id="header">). CLASS - atrybut definiuje klasę css dla elementu.
Opisałem najważniejsze znaczniki języka xhtml. W następnych artykułach postaram się pokazać jak w łatwy sposób pociąć i zaprojektować layout w photoshopie, a następnie przerobić go na szablon xhtml/css.
Przydatne linki:
- http://validator.w3.org/
- http://www.kurshtml.edu.pl/
- http://pl.wikipedia.org/wiki/Head_(HTML)
Od 1 do 30 kwietnia 2011 roku odbywała się wystawa moich zdjęć. Miała ona tytuł „Moje piękne”. Prace, które pokazałem na niej przedstawiały piękne młode kobiety. Jest to pierwsza moja wystawa oraz początek przygody z fotografią.
Bardzo dziękuję Agacie Fojcik za dostarczenie mi zdjęć z wystawy.
Potrzebujemy zaślepkę w kszrałcie serca!
1. Do zrobienia zaślepki w kształcie serca będziemy potrzebowali: - nożyczki, - arkusz z bloku technicznego lub kawałek tektury, - cyrkiel, - linijka. 2. Ja wydrukowałem sobie zaprojektowane w corelu serduszko wpisane w okrąg. (nie mam zdolności manualnych). 3. Zaznaczamy sobie na naszym arkuszu okrąg o średnicy równej średnicy filtra do twojego obiektywu. U mnie jest to 52mm. Następnie wycinamy w nim serduszko. Nie może być ono za duże, ani za małe. Gdy już mamy naszą zaślepkę zrobioną, wkładamy ją w miejsce filtra (obrazek nr.3) :) 4. Ustawienia aparatu: Puszkę ustawiamy na tryb Av (Preselekcja przysłony), a następnie ustawiamy wartość przysłony na 1.8 (czym większa wartość przysłony tym nasz bokeh robi się liczniejszy, ale bardziej kwadratowy. Jest to związane z wielkością naszego serca w zaślepce. Pozostaje nam tylko testowanie :). Dzięki kawałkowi tekturki możemy otrzymać taki fajny efekt, bardzo przydatny w fotografii portretowej. Warto sprawdzić jak wychodzą inne kształty i zrobić sobie mały zestawik fotoamatora. Pozdrawiam i życzę udanych efektów :).
Przysłona – jest to parametr określający średnicę otworu, przez jaki wpuszczamy światło do aparatu.
Bokeh – czyli odwzorowanie punktów świetlnych znajdujących się poza płaszczyzną ostrości.
Jest już początek wakacji a Ja nie miałem czasu umówić się na sesję zdjęciową z modelką. Proponowałem kilku osobom wypad na zdjęcia, ale niestety zawsze coś wyskoczyło ważniejszego. Postanowiłem poświęcić mój wolny czas praktykowaniu robienia zdjęć na małej głębi ostrości moim ulubionym manualnym obiektywem – Helios. Początki są zawsze trudne. Jak złapię bakcyla to z pewnością wyjdzie coś bardzo fajnego. Chciałem, aby moje zdjęcia miały swój styl, żeby nie były zwykłymi fotkami robionymi przez Kowalskiego.
88 Thisbe – tapeta na pulpit w rozmiarach: 1024×769, 1280×800, 1440×900, 1680×1050, 1920×1200, 1920×1400