Osobiście nie przepadam za wszelkiej maści edytorami wizualnymi (WYSIWYG). Uważam, że więcej z nimi problemów niż korzyści. No ale wiadomo, klienta zdanie web developera za bardzo nie interesuje i chce po prostu dodawać treść tak samo łatwo jak w Wordzie. Co w takiej sytuacji zrobić?
W ostatnim czasie pozytywnie zaskoczył mnie TinyMCE 4. Można go praktycznie w dowolny sposób dostosować – od wyboru funkcji na pasku narzędzi po stworzenie styli dostosowanych do potrzeb klienta. Dodatkowo możemy wewnątrz edytora dostosować CSS tak, by treść wyglądała praktycznie tak jak na docelowej podstronie. Inną bardzo przydatną rzeczą jest możliwość usunięcia wszelkich „śmieci” z tekstu wklejanego prosto z edytora tekstu.
Przykład użycia edytora wraz z formatowaniem wklejanego tekstu:
Kanał ATOM
tinymce.init({
selector: "textarea",
content_css: "tinymce_content.css",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
],
toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect",
toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Wyróżnienie', block: 'h4', classes: 'header1'},
{title: 'Nagłówek', block: 'h5', classes: 'header3'},
{title: 'Tekst standard', block: 'p', classes: 'akapit'},
],
theme_advanced_buttons3_add: "pastetext,pasteword,selectall",
paste_auto_cleanup_on_paste: true,
paste_preprocess: function(pl, o) {
//example: keep bold,italic,underline and paragraphs
o.content = strip_tags(o.content, '<b><u><i><p><ul><ol><li><h1><h3>');
// remove all tags => plain text
//o.content = strip_tags( o.content,'' );
},
language: "pl",
});
// Author: Kevin van Zonne
function strip_tags(str, allowed_tags) {
var key = '', allowed = false;
var matches = [];
var allowed_array = [];
var allowed_tag = '';
var i = 0;
var k = '';
var html = '';
var replacer = function(search, replace, str) {
return str.split(search).join(replace);
};
// Build allowes tags associative array
if (allowed_tags) {
allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
}
str += '';
// Match tags
matches = str.match(/(<\/?[\S][^>]*>)/gi);
// Go through all HTML tags
for (key in matches) {
if (isNaN(key)) {
// IE7 Hack
continue;
}
// Save HTML tag
html = matches[key].toString();
// Is tag not in allowed list? Remove from str!
allowed = false;
// Go through all allowed tags
for (k in allowed_array) { // Init
allowed_tag = allowed_array[k];
i = -1;
if (i != 0) {
i = html.toLowerCase().indexOf('<' + allowed_tag + '>');
}
if (i != 0) {
i = html.toLowerCase().indexOf('<' + allowed_tag + ' ');
}
if (i != 0) {
i = html.toLowerCase().indexOf('</' + allowed_tag);
}
// Determine
if (i == 0) {
allowed = true;
break;
}
}
if (!allowed) {
str = replacer(html, "", str); // Custom replace. No regexing
}
}
return str;
}
Za pomocą strip_tags() wycinam wszystkie znaczniki poza akapitem, listą i podstawową edycją tekstu. Dodatkowo w style_formats definiuję tylko style, które są potrzebne i mam znacząco ograniczoną możliwość rozsypania strony przez klienta 
W dobie coraz większej ilości wszelakich urządzeń mobilnych tworzenie stron dostosowanych pod różne rozdzielczości jest już praktycznie standardem. Dziś opiszę jedną z technik wykorzystywanych w RWD (Responsive web design), a jest nią Fluid layout.
Krótko mówiąc, Fluid layout polega na tworzeniu „płynnych” układów stron. Możemy zrobić tak, że lewa kolumna (np. nawigacja) będzie mieć stałą szerokość, natomiast środek z treścią strony będzie dostosowywać się do rozdzielczości urządzenia. Przeanalizujmy przykład.
<div class="main">
<div id="left">
Sidebar
</div>
<div id="center">
<h1>Title</h1>
<p>Lorem ipsum...</p>
</div?
</div>
.main{
width:80%;
margin: 0 auto;
}
#left{
width:200px;
float: left;
}
#center{
margin-left: 250px;
}
I to by było na tyle 
. Jest to prosta w użyciu technika. Dla lewej kolumny wystarczy nadać atrybut float: left. Natomiast dla środkowej kolumny musimy ustawić lewy margines wynoszący co najmniej tyle co szerokość lewej kolumny. Jak to wygląda możecie zobaczyć na tej stronie. W przykładzie ze strony wykorzystano padding, ale w obu sposobach efekt jest taki sam.
Osoby pracujące jako web developer zapewne nieraz spotkały się z koniecznością stworzenia „klikalnej” mapy Polski. Większość map tworzonych jest z wykorzystaniem Flasha. Nie wszyscy zapewne wiedzą, że taką mapę można również stworzyć za pomocą HTML/CSS z dodatkiem JS.
Na początek musimy przygotować pliki graficzne z mapą. Wykorzystałem mapę Polski ze strony Wikipedii. Mapa będzie w odcieniach szarości, natomiast po najechaniu myszką województwo zmieni kolor.
Jako plik bazowy wykorzystamy mapę Polski w odcieniach szarości. Kolejnymi plikami są poszczególne województwa, które pojawią się po najechaniu myszką. Ważne jest, by wszystkie grafiki miały jednakowe wymiary (obszar poza danym województwem musi być przezroczysty).
Na początek stwórzmy szkielet dokumentu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mapa</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="Description" content="" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Keywords" content="" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="area">
</div>
</body>
</html>
#area będzie kontenerem zawierającym całą mapę. Wrzućmy do niego obrazek z tłem mapy:
<img id="map_poland" usemap="#poland" src="mapa.png" />
Teraz dodajmy listę województw:
<ul>
<li id="lubelskie"><img src="lubelskie.png" usemap="#poland" /></li>
<li id="podkarpackie"><img src="podkarpackie.png" usemap="#poland" /></li>
<li id="podlaskie"><img src="podlaskie.png" usemap="#poland" /></li>
</ul>
Musimy jeszcze „zmapować” obrazek z mapą, żeby obszary do klikania miały mniej więcej kontury takie jak województwa. Służą do tego znaczniki map i area.
<map id="poland" name="poland" >
<area shape="poly" alt="lubelskie" title="lubelskie" coords="571,255,554,275,539,269,541,280,532,280,523,289,488,291,488,305,492,325,476,328,490,335,495,348,490,352,492,357,491,389,500,417,505,417,508,406,522,417,518,429,542,436,546,450,537,449,535,454,536,458,555,459,550,463,575,464,585,451,591,455,598,451,612,468,619,451,639,446,640,431,638,410,630,398,633,388,607,350,614,346,595,306,610,307,618,269" href="#lubelskie" />
<area shape="poly" alt="podkarpackie" title="podkarpackie" coords="608,465,555,546,563,562,561,579,575,595,570,593,554,593,512,576,506,565,477,554,467,562,464,525,455,519,461,513,452,509,455,464,452,461,471,449,483,443,486,433,494,428,495,414,498,416,510,413,514,413,516,423,534,433,542,432,544,447,534,455,545,456,551,462,571,462,583,451,588,451,599,448,602,456,607,462" href="#podkarpackie" />
<area shape="poly" alt="podlaskie" title="podlaskie" coords="537,40,543,32,552,36,555,46,569,51,569,51,577,53,592,76,582,77,614,159,620,187,621,218,594,227,576,256,567,255,552,245,535,247,526,215,523,201,513,208,518,193,500,204,501,183,488,180,478,173,476,148,467,134,484,139,494,132,513,121,536,103,540,87,530,79,530,62,519,57,539,49" href="#podlaskie" />
</map>
Kolejne obszary tworzone są znacznikiem area. Atrybut shape określa kształt zaznaczenia, mamy do wyboru: rect (prostokąt), circle (koło) oraz poly (wielokąt). Atrybut coords zawiera współrzędne obszaru (para liczb – oś X i Y). Trzeba pamiętać, że współrzędne liczone są od lewego, górnego wierzchołka obrazka. Do mapowania wykorzystałem Online Image Map Editor.
