Archívum

A(z) ‘HTML’ kategória archívuma

Valósidejű, 3D-s weboldal szerkesztés

2011. nov. 2. 20:08 Nincsenek hozzászólások

Ma jelent meg ez a cikk, kipróbáltan a Firefox kiegészítőt, elég érdekes:

Categories: CSS, HTML Tags: ,

Automatikus kiegészítés megakadályozása

2010. nov. 14. 08:11 2 hozzászólás

Több szempontból is hátrányos lehet a böngészők autocomplete funkciója, egyrészt bizonyos mezőkbe kerülhetnek előre kitöltött adatok a böngésző által, mint név, e-mail, jelszó, másrészt ha elkezdünk gépelni egy beviteli mezőbe máris látszanak a korábban bevitt adatok (ami zavaró is lehet, de komoly biztonsági kérdés is). Ennek elkerülésére használhatjuk a következő – nem W3C valid – kódot:

1
2
3
4

<form name="form1" id="form1" method="post" autocomplete="off"
  action="http://www.example.com/form.cgi">
[...]
</form>

HTTPS esetén automatikusan kikapcsolódik az autocomplete funkció Internet Explorerben. Másik megoldás, hogy véletlenszerű mezőneveket használunk, pl. email_, majd a email_[some number] mintának megfelelően dolgozzuk fel a GET/POST adatokat.

HTML5 már támogatni fogja az autocomplete szabályozását.

Használhatunk jQueryt is a cél elérése érdekében:

1

$('.autoDisable').attr('autocomplete','off');
Categories: HTML, JavaScript Tags: , , ,

Font Squirrel és Google Font API

2010. okt. 3. 17:59 4 hozzászólás

Múltkori bejegyzésemben írtam pár általam próbált és használt font replace módszerről. Azóta két forradalmian új megoldást is találtam, mely még egyszerűbbé teszi fontok beágyazását oldalunkba.

Az egyik ilyen a Font Squirrel, mellyel csupán az oldalán található @font-face Kit Generatort kell használnunk. Úgy (vagy még egyszerűbben) csak  feltöltjük a fontot, mint cufonnál, majd elkészül egy zip, melyben megtalálunk egy eot, svg, ttf, woff kiterjesztásű fájlt, valamint egy css-t. A css-t én célszerűnek tartom átnevezni a többi fájloknak meglelő formátumura, így a következő fájlokat kell a projekt könyvtárunkba másolni:

daxlinepro-light-webfont.css
daxlinepro-light-webfont.eot
daxlinepro-light-webfont.svg
daxlinepro-light-webfont.ttf
daxlinepro-light-webfont.woff

Az oldalunk fejlécébe belinkeljük a CSS-t:

1

<link rel="stylesheet" href="css/daxlinepro-light-webfont.css" type="text/css" charset="utf-8" />

Ezek után már csak a következő pár sort kell elhelyeznünk a css fájlunkban:

1
2
3
4
5
6
7

.DaxlineProLight {
	font-weight: normal;
	font-style: normal;
	line-height:normal;
	font-family: 'DaxlineProLight', sans-serif;
	font-size-adjust: 0.54;
}

Majd ezt az osztály használva azonnal az általunk kiválasztott betűtípussal jelenik meg a vonatkozó szöveg. Ezzel a megoldással szinte bármilyen fontot gyorsan és kényelmesen megjeleníthetünk weben.

Másik lehetőség a nem olyan régen létrejött Google Font API, mely szintaktikára a következőképp nézni ki:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
   <head>
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
      <style>
      body {
         font-family: 'Tangerine', serif;
         font-size: 48px;
      }
      </style>
   </head>
   <body>
      <h1>Making the Web Beautiful!</h1>
   </body>
</html>

Ez ha lehet még az előzőeknél is egyszerűbb, egyetlen hátránya, hogy csak a Google Font Diretory-ból választhatunk. De ok nincs aggodalomra, mert folyamatosan bővül az oldal újabb és újabb betűtípusokkal.

Categories: CSS, HTML Tags: , ,

Static Google Maps

2010. aug. 30. 18:50 Nincsenek hozzászólások

A minap találtam az alábbi érdekes kódot:

1

<img border="0" src="http://maps.google.com/maps/api/staticmap?center=7628+P%C3%A9cs,+Br%C3%B3dy+S%C3%A1ndor+utca+12&zoom=15&size=600x520&markers=color:green|label:*|7628+P%C3%A9cs,+Br%C3%B3dy+S%C3%A1ndor+utca+12&sensor=false" alt="" />

Amellyel előállíthatjuk az alábbi statikus térképet jelölővel együtt:

Categories: HTML Tags: , ,

Tetoválás

2010. jan. 18. 18:09 1 hozzászólás

Categories: HTML, Vicc Tags:

Redirect

2009. jún. 3. 22:35 Nincsenek hozzászólások

Átirányítás.  Na ez pont egy olyan téma, amit jó sok féleképpen meg lehet oldani. Épp ma volt szükségem rá, mivel egy blogszolgáltatónál lévő blogot kellett redirectelni.

Először PHP-vel probálkoztam, ami a legegyértelműbb:

1
2

header('HTTP/1.1 301 Moved Permanently');
header('Location: http://blog.starweb.hu/');

Na mivel ez kapásból nem sikerült, mivel a sablonban ez nem futott le, így jött a HTML:

1

<meta http-equiv="refresh" content="0;URL=http://blog.starweb.hu" />

Itt már majdnem jó volt, csak épp a 0 másodperc is valami, ami épp elég volt ahhoz, hogy a régi lap is feltűnjön a színen. No ezért lett a legjobb megoldás a JavaScript.

1
2
3
4
5

<script type="text/javascript">
<!--
   window.location = "http://blog.starweb.hu/"
//-->
</script>
Categories: HTML, JavaScript, PHP Tags: , , ,

Táblázat szegélyek

2009. máj. 2. 16:09 Nincsenek hozzászólások

Kétféleképp szoktam táblázat szegélyeket használni. Az első, amikor az alap HTML lehetőséget használom, ez főleg admin felületeknél jön jól, ahol nem kell adni a kinézetre:

1
2
3
4
5

<table border="1" cellpadding="0" cellspacing="0">
   <tr>
      <td><td>
   </tr>
</table>

Ennél a verziónál elég CSS-ben egy kis paddingot adni:

1
2
3

table tr td {
   padding: 3px;
}

A másik variáció, amikor is CSS-ből próbálunk megformázni egy táblázatot, itt lehetnek gondjaink, ha nem ismerjük, a border-collapse tulajdonságot. Ez a tulajdonság a táblázaton alkalmazandó keretezési modellt határozza meg. Az inherit értéken kívül két értéke lehet: collapse (alapértelmezés) és separate. Az utóbbi esetben minden cellának különálló kerete van, míg az előbbi esetén a cellákat egyetlen keret választja el egymástól. Tehát az alkalmazandó CSS kód:

1
2
3

table tr td {
   border-collapse: collapse;
}

Demo

Categories: HTML Tags: