Pokazywanie postów oznaczonych etykietą formatowanie kodu. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą formatowanie kodu. Pokaż wszystkie posty

poniedziałek, 3 listopada 2008

Jak w blogger.com dodać obiekt Silverlight?

No więc, dziś otrzymałem powyższe pytanko od jednego z czytelników. Ponieważ chciałem odpisać na nie jak najsumienniej, to wyszedł z tego co raz to dłuższy tekst, aż ewaluował do rozmiaru artykułu, w którym to opiszę krótko, jak można na dwa sposoby dodać aplikację Silverlight na stronie html bloga w blogger.com i nie tylko.

Otóż moje dwa najlepsze sposoby na umieszczenie aplikacji, to:

  1. Zagnieżdżenie aplikacji w iframe,
  2. Użycie Live Control

Zanim rozpocznę opisywanie metod, powiem tylko, że mowa o edycji kodu html na blogger.com do którego najłatwiej dostać się poprzez wybranie "Dostosuj" na stronie bloga, a następnie przez Układ -> Edytuj kod HTML. Na tej stronie zobaczymy pełny kod html używany do generowania strony bloga. Tu też będziemy wprowadzać zmiany.

IFrame

Iframe zna chyba każdy i jest to najłatwiejszy sposób na umieszczenie aplikacji Silverlight na stronie html. W ten oto sposób został zamieszczony powyższy nagłówek na blogu. Kod który za to odpowiada, to:

 ..kod html...
<body>
 <div id='outer-wrapper'>

     <iframe frameborder='0' scrolling='no'
      src='http://silverlight.services.live.com/invoke/81369/Blog%20Header/iframe.html'
      style='position:absolute; width:1024px; height:350px; left: 115px; z-index: 10; '/>
   
     <div id='wrap2' style='position:absolute; width: 842px; z-index: 20; left: 100px; top: 260px; '>
          … reszta kodu html

Zwróć uwagę na ustawiony "style" na "position:absolute". Nagłówek ma to do siebie, że się nie przemieszcza, a więc może być na samej górze na stałe. Parametr "z-index" ustawiam na 10 dla nagłówka, a dla pozostałej części tekstu ustawiam 20, dzięki czemu nagłówek jest przykryty contentem z bloga.

Live Control

Live Control jest drugą opcją wymienioną na stronie http://silverlight.live.com, możemy ją znaleźć zaraz po wgraniu aplikacji (Upload application) "Add this Application to a Web Page " -> "Method 2: Use a Live Control". To co należy zrobić, to dodać linki do dwóch plików javascript oraz atrybut do taga <html> :

<html xmlns:devlive=http://dev.live.com  ….inne parametry…>
  …kod html…

  <script src='https://controls.services.live.com/scripts/base/v0.3/live.js' type='text/javascript'/>
  <script src='https://controls.services.live.com/scripts/base/v0.3/controls.js' type='text/javascript'/>
</head>
<body >
 <div>
      <devlive:slscontrol silverlightVersion='2.0' src='/81369/Blog Stopka/'/>
 </div>
      …kod html…

A więc dodałem atrybut do tagu html (xmlns:devlive=http://dev.live.com) oraz dwa pliki javascript (live.js i controls.js). Aby umieścić aplikację wystarczył wpis <devlive:slscontrol …/>. W wyżej wymieniony sposób mam umieszczoną stopkę na stronie bloga. Zaletą tego rozwiązania jest to, że aplikacja jest traktowana jak element strony, nie musi być na stałe umieszczona przez style, np. dzięki temu moja stopka na stronie jest zawsze na końcu artykułu.

Pozdrawiam
Jacek Ciereszko
Autor: Jacek o 18:37 2 komentarze
Etykiety: , , , , , ,

sobota, 1 listopada 2008

„Dlaczego odradzam korzystania z serwerów blogów”

No więc znalazłem dziś na blogu "programista Tomasz" stwierdzenie "Dlaczego odradzam korzystania z serwerów blogów" oraz krótki opis wszystkich wad. Ponieważ od 9 miesięcy sam korzystam z blogger.com i bardzo sobie chwale to miejsce, dlatego też nie mogłem powstrzymać się od słowa komentarza.

Pan "Tomasz" napisał ogólnie bardzo negatywnie na temat darmowych serwisów dla blogerów i dlatego chciałem w kilku punktach opisać moje zdanie na temat opisanych wad. A więc Pan "Tomasz" pisze, że:

  1. "za duże obciążanie, blogi ładują się wolno." – Moim zdaniem Google stać na hosting i blogi tam zamieszone ,zawsze ładują się szybko, czego nie można powiedzieć o prywatnych hostingach.
  2. "Serwisy te są dosyć wolno rozwijane" – Odkąd jestem na bloggerze, wyszło dużo znaczących poprawek i dodatków, a dzięki dużej liczbie użytkowników, blogger jest prowadzony i rozwijany na bardzo wysokim poziomie.
  3. "nie dostaniesz tam wszystkich możliwości jakie możesz mieć na swoim własnym blogu. A jeżeli będziesz mógł je mieć to za opłatą." – W życiu nie musiałem za nic płacić i nie widziałem takiej opcji.
  4. "Blogi te mają różne ograniczenia, przez co nie możesz do końca zmieniać ich wyglądu, zachowania" – Na bloggerze ma się pełny dostęp do strony html i to nie tylko części <body> ale całej strony. Dzięki temu w prosty sposób zamieniłem nagłówki na aplikacje Silverlightowe, ustawiłem w wygodnym edytorze kolorki na style, rozmieściłem szerokości bocznych pasków i ustawiłem stopkę. Naprawdę, nie widzę rzeczy których nie mógłbym zmienić na stronie.
  5. "moderatorzy mogą wykasować Twój blog albo wpisy… gdy Twoje wpisy są kontrowersyjne" – No jak się wrzuca zdjęcia dla "Pedobear-a" to pewnie że wykasują. Ale możliwe jest także prowadzenie blogów dla osób +18, dochodzi tylko klauzula i tyle.
  6. "Nie zawsze jest też możliwość robienia kopii czy eksportów danych" – To chyba na pingerku tylko tak mają.. a i to pewnie da się wyeksportować dane. Dodatkowo masz opcję "FTP Publishing", dzięki której wrzucisz swoje posty na własny hosting.
  7. "No i jeszcze kwestia domeny - jeżeli będziesz chciał zmienić miejsce dla swojego bloga, cała reklama dotychczasowego zostanie stracona" – Własną domenę podpinasz bez żadnych problemów w kilka sekund. Dodatkowo blogger załatwia za Ciebie problem przekierowań ze stron www.* (np. www.mojBlog.pl na mojBlog.pl).
  8. "Jeżeli będziesz chciał zarabiać na blogu, albo przynajmniej zwrócić sobie koszty założenia, będziesz miał problemy" – Kosztów prowadzenia nie ma, a jak chcesz zarobić, to masz nawet "Google AdSense" jako kontrolkę na blog. Co do obcych reklam, to nie wiem ale widziałem że ludzie mają zamieszczone.

Są to trochę wyrwane z kontekstu fragmenty artykułu ale mam nadzieje że zachowują przesłanie opisanych wad.

A wracając do blogger.com, to dodatkowo masz w nim takie "bajerki" jak eksport artykułów z Worda, prosto na blog (to akurat większa zaleta Worda niż bloggera), fotki trzymane są na koncie Picassa, więc łatwo się nimi zarządza, można wrzucić filmik, który wyeksportuje się w odtwarzacz, w bardzo łatwy sposób dodałem także formatowanie kodu, tak aby zamieszczone dema wyglądały czytelnie. Dodatkowo dzięki istnieniu w dużej społeczności na jednej stronie, dostajesz darmowe pozycjonowanie poprzez linki prowadzące do Twojego bloga i innego tego typu funkcje na stronie.

A to moim zdaniem minusy swojego hostingu z blogiem:

  • Babranie się z ustawieniami.
  • Duże koszty hostowania serwera pod blog, no chyba że nikt nie odwiedza strony, wtedy można postawić gdzieś za free.
  • Brak automatyzacji ustawień, zarządzania postami, itd.
  • Ze wszystkim jesteś zdany sam na siebie i zamiast mieć przyjemność z dzielenia się wiedzą, tracisz czas na zarządzanie samym blogiem.

To tyle, mam nadzieje że nie wyszło niegrzecznie ale aż mnie tknęło jak przeczytałem takie.. "nieprawdy". Polecam blogger.com jako bardzo dobre miejsce na blogowanie, wszystko jest za darmo, działa szybko i w prosty sposób możemy dowolnie go dostosować do własnych potrzeb.

Resources

I pytanko na koniec do tych co używają "spaces.live.com", czy wyżej wymienione wady także nie tyczą się tego serwisu? Nidy jakoś nie miałem okazji wypróbować możliwości jakie daje blogowanie na spaces.

Pozdrawiam,

JAcek Ciereszko
Autor: Jacek o 01:26 3 komentarze
Etykiety: , ,

piątek, 29 sierpnia 2008

Formatowanie kodu w blogger

Ci którzy prowadzili blog na http://www.blogger.com (http://www.blogspot.com/)na pewno zetknęli się z problemem formatowania kodu. Otóż blogger nie daje żadnego wsparcie dla tego typu formatowania i jedynym sensownym rozwiązaniem są znaczniki <pre>. Oczywiście można napisać artykuł w Wordzie (2007), wkleić kod prosto z Visual Studio/Eclipse i poprzez opcję publikuj -> blog, umieścić cały artykuł wraz z ładnie sformatowanym kodem bezpośrednio na blog, jednak rozwiązanie to nie pozostaje bez wad. Opublikowany kod rozjeżdża się, tworzą się ekstra linie pomiędzy wierszami, a sama czcionka wygląda inaczej. To co zyskujemy tą metodą, to tylko kolorowanie składni.

Taką też metodą radziłem sobie od ponad 9 miesięcy, pisanie artykułu w Wordzie, opcja publikuj -> blog i później ładowanie grafiki i ręczne poprawianie formatowania kodu. Dużo roboty, a efekt i tak mógłby być lepszy.

Google-Code-Prettify (Pretty Printing Styles)

No ale na szczęście pojawił się projekt Google Code Prettify (http://code.google.com/p/google-code-prettify/). Projekt ten dostarcza nam dwa pliki:

  • prettify.css – spis kolorów do styli
  • prettify.js – plik z kodem javascript, który zapewnia nam odpowiednie kolory oraz ładną ramkę w około kodu

Aby podłączyć Google-Code-Prettify, należy w ustawieniach bloggera, w kodzie html, podłączyć w/w pliki. Normalnie kod podłączenia wygląda tak:

<head>
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
</head>
<body onload="prettyPrint()">
<!-- content -->

Aby użyć go w bloggerze, należy przejść do ustawień bloga -> Układ -> "Edytuj kod html" oraz odnaleźć wpis <body> i zastąpić go kodem:

<script src='http://<adres>/prettify.js' type='text/javascript'/>
<link href='http://<adres>/prettify.css' rel='stylesheet' type='text/css'/>
</head>
<body onload='prettyPrint()'>

Uwaga adres (<adres>) do plików należy zastąpić swoim własnym lub (niepolecane) skorzystać z czyjegoś, o ile ktoś pozwoli. Taki czyjś można łatwo znaleźć w Google, wpisując nazwę plików. Opcjonalnie można skorzystać z plików w projekcie, choć wydaje mi się że najlepiej hostować je samemu.

http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js
http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css

Teraz można już używać formatowania. Formatowanie kodu można włączyć na 2 sposoby. Umieszczając kod w znacznikach <pre class="prettyprint">...</pre> oraz w znacznikach <code class="prettyprint">...</code>.

Języki wspierane przez projekt to:

  • odmiany C
  • Java
  • Python
  • Bash
  • SQL
  • HTML
  • XML
  • CSS
  • Javascript
  • Makefiles
  • Ruby
  • PHP
  • Awk
  • Perl

Program sam rozpoznaje w jakim języku napisany jest kod i dopasowuje odpowiednie formatowanie.

Przykłady

Kod formatowany ręcznie

public void OnHtmlButtonClick(object sender, HtmlEventArgs args)
{
HtmlElementCollection htmlElements = _htmlDocument.GetElementsByTagName("p");
   foreach (HtmlElement h1Element in htmlElements)
   {
       h1Element.SetStyleAttribute("color", "#FFFF00");
   }
}

Kod formatowanych przy użyciu Google Code Prettify

public void OnHtmlButtonClick(object sender, HtmlEventArgs args)
{
  HtmlElementCollection htmlElements = _htmlDocument.GetElementsByTagName("p");
  foreach (HtmlElement h1Element in htmlElements)
  {
      h1Element.SetStyleAttribute("color", "#FFFF00");
  }
}

Istnieje także opcja ręcznego wybrania języka w którym ma być wyświetlany kod ("prettyprint lang-*") oraz dodania numeracji linii (<span class="nocode">).

<pre class="prettyprint lang-html">
<span class="nocode">1:</span> <body>
<span class="nocode">2:</span> Kod html
<span class="nocode">3:</span> </body>
</pre>

 1: <body>
 2: Kod html
 3: </body>

Więcej przykładów można znaleźć na stronie projektu link.

Resources

  • Człowiek od którego dowiedziałem się o istnieniu google-code-prettify - Łukasz Gorgol link
  • Strona główna projektu link
  • Opis użycia, przykłady, FAQu itd. link


Pozdrawiam,

Jacek Ciereszko
Autor: Jacek o 20:59 3 komentarze
Etykiety: ,
Subskrybuj: Posty (Atom)