Pro všechny co hledají řešení stále viditelného bočního panelu, ve kterém můžete mít umístěné menu nebo reklamní bloky, tu mám návod jak si takový vytvořit. Řešení je psáno validním HTML, CSS a Javascript.

1. HTML

Základem bude jednoduchý html layout. Skládá se ze standardních částí : Hlavička, Obsah, Menu, Patička a hlavně Boční panel 

<div id="wrap">
	<div id="head">HEAD</div>	
	<div id="menu">MENU</div>
	<div id="content">CONTENT</div>
	<div id="banner">SIDE PANEL</div>
	<div id="footer">FOOTER</div>
</div>

2. CSS

            * {
                margin: 0;
                padding: 0;
                border: 1px solid black;
                font-size: 55px;
            }
            html {
                border: 0;
            }
            body {
                border: 0;
                text-align: center;
            }
            #wrap {
                text-align: left;
                width: 1000px;
                height: auto;
                margin: 0 auto;
                border: 0;
            }
            #head {
                width: 100%;
                height: 250px;
            }
            #menu {
                text-align: center;
                width: 100%;
                min-height: 35px;
            }
            #content {
                width: 700px;
                float: left;
                min-height: 3000px;
                height: auto;
            }
            #banner {
                position: absolute;
                top: 315px;
                width: 290px;
                min-height: 500px;
                height: 500px;
                margin-left: 710px;
            }
            #footer {
                clear: both;
                min-height: 20px;
                width: 100%;
            }

3. Javascript

Potřebujeme pouze knihovnu jQuery a její plugin Dimensions

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.dimensions.pack.js" type="text/javascript"></script> 

4. Teorie skriptování

jQuery vám dovoluje využívat tzv. handler události. To se nám velmi hodí, protože jak z logiky věci vyplývá, panel mění svou vertikální pozici vůči vrchnímu okraji zobrazovací plochy prohlížeče pokaždé když uživatel scrolluje dolů nebo nahoru.

To se dělá tímto způsobem:

$(window).scroll(function () {
//kód který se spustí pokaždé když se změní vertikální pozice pohledu
});

My potřebujeme při každé kontrole (při každém spuštění kódu při scrollování) změnit vertikální odsazení absolutně pozicovaného bloku, který má být stále viditelný. Pozice vrchního okraje zobrazovací plochy prohlížeče vůči počátku stránky je uložena ve volání:

$(document).scrollTop();

pak už jen stačí porovnat pozici horního okraje vůči počátku rozhodnout se zda je potřeba již blok posunout nebo ne.

Aktuální výšku jakéhokoli bloku (nezávisle na výšce uvedené v CSS) lze zjistit tímto kódem:

parseInt($("#id_prvku").css("height").substring(0,$("#id_prvku").css("height").indexOf("px")))

(Zde konkrétně pro blok s id "id_prvku").

Logicky tedy stačí zjistit aktuální velikost všech prvků nad naším blokem a poté prvek posouvat když tuto hranici překročí horní okraj obrazovky.

5. Javascript

var name = "#banner";

            $(document).ready(function(){
                $(window).scroll(function () {
                    var stop = $(document).scrollTop();
                    var limit = parseInt($("#head").css("height").substring(0,$("#head").css("height").indexOf("px")))
                        + parseInt($("#menu").css("height").substring(0,$("#menu").css("height").indexOf("px")));
                    if(stop < limit - 10){
                        var offset = limit + 10+ "px";}
                    else{
                        var offset = stop + 20 + "px";
                    }
                    $(name).animate({top:offset},{duration: 0,queue: false});
                });
            });

Vysvětlení:

var name -> jméno našeho posouvaného bloku

var stop -> aktuální vzdálenost okraje zobrazovací plochy od počátku stránky

var limit -> výška prvků které jsou nad naším posouvaným blokem a o ně se má jakoby "zarazit" (nemá se dotýkat horního okraje obrazovky)

var offset -> výsledné odsazení posouvaného bloku od počátku stránky

V rozhodovacím bloku IF/ELSE porovnáváme aktuální pozici pohledu s výškou nadřazených bloků, odebíráme 10px pro efekt hladkého scrolování. V případě kladné podmínky se blok neposouvá, v případě záporné se posune na pozici pohledu + 20px jako odsazení od horního okraje obrazovky

Poslední příkaz bloku je:

$(name).animate({top:offset},{duration: 0,queue: false});

zde se zašle požadavek na změnu css vlastnosti odsazení absolutně pozicovaného bloku zvrchu (top), kde parametry duration znamená frekvenci obnovování a queue je zařazování do fronty úloh. Druhou vlastnost nedoporučuji nastavovat na true, protože se celý proces animace řazením požadavků velice zpomalí.

Zdroje:

[1] http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

[2] Demo (projekt Netbeans)

Možná jste na ten problém také narazili

Při pokusu o přidání komentáře na blogu kde máte nainstalované Croogo a používáte anti-spambot reCaptcha (by Google(tm)), dostanete hlášku "Could not open socket". To je důsledek změny adres serverů reCaptcha, který nastal od posledního commitu souboru s reCaptcha komponentou v dubnu 2010

Oprava je ale velice jednoduchá, stačí změnit pouze pár řádek v souboru /app/controllers/components/recaptcha.php

Řádky 16-18

        Configure::write("Recaptcha.apiServer","http://www.google.com/recaptcha/api");
        Configure::write("Recaptcha.apiSecureServer","https://www.google.com/recaptcha/api");
        Configure::write("Recaptcha.verifyServer","www.google.com");

Proměnná $response na řádcích 67-74

            $response = $this->_recaptcha_http_post(Configure::read('Recaptcha.verifyServer'), "/recaptcha/api/verify",
                                              array (
                                                     'privatekey' => $privkey,
                                                     'remoteip' => $remoteip,
                                                     'challenge' => $challenge,
                                                     'response' => $response
                                                     ) + $extra_params
                                              );

A to je všechno. Dost jednoduché, ne?

V příštím commitu by měla být komponenta již opravena.

Zdravím vás, dnes bych vám chtěl ukázat způsob jak komunikovat v objektech mezi jazyky Java a PHP

Ukážeme si způsob jak použít Java knihovnu Gson pro komunikaci Java programu a PHP webového API

Na úvod mi dovolte abych trochu představil technologii JSON.

JSON (JavaScript Object Notation) je odlehčený datový zápis původně určený, jak už vyplývá z názvu, programovacímu jazyku JavaScript. Vlastně by se dalo říct že je to velmi zjednodušená verze XML. Ovšem tento dobrý nápad byl záhy portován téměř do každého programovacího jazyka (jejich kompletní seznam [1])

Dokáže jednoduše zapsat pole primitivních datových typů i pole objektů. Mezi hlavní přednosti patří to že podporuje jmenné seznamy, generické typy a rozlišuje primitivní datové typy (string,number,object,array, TRUE / FALSE, NULL).

Ukázka toho jak vypadá v JSON zápis objektu Osoba:

{
"firstName"  : "John",
"lastName"   : "Doe",
"age"        : 23
};

Pokud vám bude zápis něco nutně připomínat, tak to bude jazyk CSS (Cascading Style Sheets).

Co je ale hlavní pro tento článek je že PHP má zabudovanou JSON podporu od verze 5.2.0 [4] a že knihovna GSON [3] je velice jednoduše použitelná v jakémkoli Java programu.

JSON navíc vytvořila oficiální třídy pro práci s JSON objekty a zápisem [2], ty však nejsou dost jednoduše použitelné pro začátečníky v tomto tématu.

Proto jsem si ji zvolil jako komunikační standard při tvoření API (Application Programming Interface), kdy klientská aplikace je normální Java program (JFrame) a serverová část je LAMP (Linux Apache Mysql PHP)

Začněme ukázkou velice jednoduché třídy v PHP:

class ListReply {
     var $count; 
     var $columns; 
     var $list; 
} 

A její obdobou v kódu Java: 

import java.util.ArrayList;
import java.util.List;

public class ListReply {

    public int count;
    public String[] columns;
    public ArrayList list;

    public ListReply(int c, String[] cols, ArrayList l) {
        count = c;
        columns = cols;
        list = l;
    }

    public ListReply() {
       
    }
}

Je to jednoduchá ukázka komunikačního rámce, například pro přenos Tabulky vytvořené z dotazu na databázi.

Zápis obou tříd pak bude vypadat po naplnění daty úplně stejně.

Příklad pro výpis Uživatele z tabulky [ ID , NAME , PASS]:

{"count":1,"columns":["id","name","pass"],"list":[["1","Marek","heslo123"]]}

Jak jednoduché ne? 

A jak komunikovat? 

V PHP  není převod objektu do JSON ničím těžkým. Stačí příkaz:   echo json_encode($var);

V Javě je proces trochu komplikovanější, za předpokladu že jsme importovali knihovnu Gson (com.google.gson.Gson) tak zní příkaz takhle: System.out.println(new Gson().toJson(Objekt));

ten však data neodešle na server, komunikaci můžeme vytvořit prostým Vytvořením HTTP spojení na server. Příklad připojení je níže

URL url = new URL("http","api.domain.com", 80, "/api.php");   
// URL objekt připojení na server, všimněte si že druhý argument zadáváme bez "http://"

URLConnection conn = url.openConnection(); // otevření spojení na server

conn.setDoOutput(true); // důležité aby byl vytvořen kanál pro odesílání dat

conn.setDoInput(true); // důležité aby byl vytvořen kanál pro přijímání dat

OutputStreamWriter osw = new OutputStreamWriter(conn.getOutputStream());

String data = new Gson().toJson(new ListReply(pocet_sloupcu,jmena_sloupcu,hodnoty_tabulky)); 
// Textový řetězec data bude obsahovat JSON zápis objektu třídy ListReply

osw.write(data); // Zápis dat do bufferu výstupního proudu

osw.flush(); // odeslání, vypuštení bufferu

osw.close(); // zavření kanálu pro odesílání dat

BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));

String line;

while ((line = bsr.readLine()) != null) {

System.out.println(line); 
// vypíše každý řádek odpovědi do konsole (standardní výstupní proud System.out )

}

Převod JSON zpět na objekt třídy JAVA probíhá takto:

String line = "{\"count\":1,\"columns\":[\"id\",\"name\",\"pass\"],"+
              "\"list\":[[\"1\",\"Marek\",\"heslo123\"]]}";
ListReply lr = new GSON().fromJson( line, ListReply.class )

Přistupovat poté můžete k členům třídy ListReply naprosto běžně

Pokud nerozumíte některé části kódu nebo vám zde něco chybí, zmiňte se v komentáři, opravím to :)

Pro dnešek vše, níže jsou užitečné odkazy

Odkazy:

[1] Hlavní stránka a seznam všech programovacích jazyků podporujících JSON [http://www.json.org/]

[2] JSON originální třídy pro Javu [http://www.json.org/java/index.html]

[3] GSON, oficiální stránky projektu [http://code.google.com/p/google-gson/]

[4] JSON v PHP [http://php.net/manual/en/book.json.php]

[5] GSON příklady [http://sites.google.com/site/gson/gson-user-guide]

Už jste někdy presentovali svůj produkt, svoje stránky nebo jste chtěli někomu něco ukázat na internetu? A znáte tuhle situaci?

"Pojď sem, něco ti chci ukázat"

"Tak ukaž"

"Podívej se tam kde mám kurzor"

"Kde? Zkus s ním zahýbat"

"Vždyť s ním hýbu..."

"Já nic nevidím."

Je to zcela běžný problém. Potřebujete na něco upozornit a musíte se domluvit rukama, nohama nebo gestikulací (v případě promítačky třeba laserovým ukazovátkem).

Mám pro vás zcela jiné řešení. Zkuste službu nabízenou na adrese markup.io

Dovolí vám doslova kreslit do webové stránky. 

Má základní tvary KRUH, OBDELNÍK A ŠIPKU, a samozřejmě normální štětec.

Hodí se nejen pro zvýrazňování prvků nebo částí webových stránek ale dá se s ním i slušně vyblbnout ;)

Dalšími vlastnostmi jsou různé barvy vyznačovacích nástrojů a schopnost namalovaný objekt smazat (stačí na něj jednou kliknout a zmáčkount delete/backspace)

Instalace

Pokud vás tento nástroj zaujal a chtěli byste si jej nainstalovat, tak vězte že jako používání tak i instalace je jednoduchá, stačí si přetáhnout tento obrázek do záložek a pak na něj kliknout na stránce kde si chcete "malovat" :)

Pokud jste také programátoři webových stránek, či správci, administrátoři, revizoři nebo jenom máte zájem udržovat svůj web v pořádku, tento malý nástroj vám velmi pomůže.

Jmenuje se Integrity, od společnosti PeacockMedia (http://peacockmedia.co.uk/integrity/)

Dnes již ve verzi 3.4. A co vlastně všechno umí?

Hlavní nástroje jsou tyto:

• Kontrola všech odkazů na webové stránce (Kontrola HTTP 301,403,404,500 chyb)
• Vytváření Sitemapy

To jsou velmi silné prostředky. Kontrola odkazů probíhá ve vrstvách (Iteracích) a máte možnost si určit do jaké hloubky skenování půjde, také vám tento nástroj ukáže jaký nejmenší počet prokliků je třeba z hlavní stránky aby se návštěvník na danou stránku dostal. To může být velmi užitečné např. při diagnóze návštěvnosti stránek nebo oblíbenosti produktů.

XML Sitemap je na druhou stranu zase dobrým nástrojem pro SEO. Například nástroj Google Webmasters přijímá soubor sitemap a vychází z něj při indexování stránek.

Co je ale největší předností? To že je tento program zcela ZDARMA (doslovně má licenci Donationware, což znamená přispějte pokud se vám produkt líbí)

Pokud vás toto zaujalo, stahujte na oficiálních stránkách produktu PeacockMedia ZDE