Kategoria: HTML

23 maj 2016

Dodanie linku nad animacją flash

Animację flash należy umieścić w divie. Dodatkowo należy utworzyć div o pozycji absolutnej i rozmiarze animacji flash. W zdarzeniu onclick dla diva obsłużyć otwieranie linku w nowym oknie przeglądarki.

<div id="flashContent" style="position:relative">
  <div>
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 width="619" height="116" id="dziendziecka" align="middle">
	   <param name="movie" value="/pliki/dziendziecka.swf" />
	   <param name="quality" value="high" />
	   <param name="bgcolor" value="#ffffff" />
	   <param name="play" value="true" />
	   <param name="loop" value="true" />
	   <param name="wmode" value="window" />
	   <param name="scale" value="showall" />
	   <param name="menu" value="true" />
	   <param name="devicefont" value="false" />
	   <param name="salign" value="" />
	   <param name="allowScriptAccess" value="sameDomain" />
	   <!--[if !IE]>-->
	   <object type="application/x-shockwave-flash" data="/pliki/dziendziecka.swf"
 width="619" height="116">
			<param name="movie" value="/pliki/dziendziecka.swf" />
			....
			<param name="allowScriptAccess" value="sameDomain" />
	   <!--<![endif]-->
			<a href="http://www.adobe.com/go/getflash">
			  <img src="http://www.adobe.com/images/shared/download_buttons/
get_flash_player.gif"
 alt="Pobierz odtwarzacz Adobe Flash Player" />
			</a>
	   <!--[if !IE]>-->
	   </object>
	   <!--<![endif]-->
  </object>
  </div>
  <div style="position:absolute;background:transparent;width:619px;height:116px;
left:0;top:0;cursor:pointer" onclick="window.open('/pliki/dziendziecka.pdf','_blank')">
  </div>
</div>
1 sty 2016

Optymalizacja wordpress

Poniżej kilka trików które pozwoliły mi przyspieszyć bloga z 32/22 w PageSpeed Insigth do 90/100 - oczywiście to zależy od strony, ilości zdjęć, szybkości serwera itp, wszystko ma znaczenie.
I to jest blog ze zdjęciami (blog.grzegorztomicki.pl), jak dla mnie bardzo zacnie 🙂

1. Będziemy potrzebować dostęp do .htaccess
W którym dodajemy (nie będę opisywał co dokładnie jest w nim robione bo wszystko można znaleźć opisane w internecie)

<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
#</ifmodule>



<ifmodule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</ifmodule>

<ifmodule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# Your document html
  ExpiresByType text/html                 "access plus 0 seconds"

# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# RSS feed
  ExpiresByType application/rss+xml       "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
  ExpiresByType text/javascript           "access plus 1 year"

  </ifmodule><ifmodule mod_headers.c>
    Header append Cache-Control "public"
    Header unset ETag
    FileETag None
  </ifmodule>
Czytaj dalej
7 wrz 2015

jQuery UI Autocomplete highlight

Mamy sobie prosty formularz. Do podpowiedzi użyjemy pluginu jquery autocomplite. Chcemy również dodać wyboldowanie podpowiedzi.
Dokładnie uzyskać taki efekt "meble, Waszawa" gdzie highlight jest zmianą koloru na czarny i wyboldowaniem.

<form id="search" action="/" method="GET" role="search">
  <fieldset>
    <input id="query" type="text" name="query" value="" maxlength="255" autocomplete="off"
      placeholder="Produkt, usługa, miasto, ulica"/>
    <button type="submit" id="button-search"></button>
  </fieldset>
</form>

A teraz trochę js 😉

Czytaj dalej
7 cze 2015

Gulp.js - menadżer zadań

Gulp.js jest menadżerem zadań opartym na node, w skrócie mamy kilka czynności do zrobienia w projekcie. I żeby nie robić tego ręcznie gulp wykonuje za nas te operacje.
Oprę się na małym projekcie, chcę less zamienić na css, skopiować do foldera css, zminimalizować i zmienić jego nazwę na style.min.css

1. Instalacja

Do tego oczywiście potrzebny najpierw jest zainstalowany node, jak już jest zainstalowany to instalujemy gulp.

// najpierw instalujemy globalnie - zainstaluje się w folderze C:\Users\Uzytkownik\AppData\Roaming\npm\node_modules\gulp

npm install -g gulp

// następnie instalujemy lokalnie w moim wypadku wchodzimy do D:\xampp\htdocs\test-gulp i tam instalujemy gulp jak i pluginy

npm install gulp --save-dev

Teraz aby móc z gulp skorzystać należy utworzyć plik konfiguracyjny gulpfile.js - musi być on umieszczony w katalogu głównym naszego projektu.

W naszym projekcie będziemy korzystać z gulp-less, gulp-minify-css oraz gulp-rename możemy je zainstalować pojedynczo jak i za jednym razem jak kto woli.

// wszystko instalujemy lokalnie

npm install gulp-less gulp-minify-css gulp-rename install --save-dev

Struktura naszego projektu:
mamy folder "test-gulp" w nim foldery css oraz less, w less jest plik style.less 🙂
W test-gulp znajduje się plik gulpfile.js (nasze taski) oraz package.json (plik generujemy automatycznie lub ręcznie 😉 - zawiera on dependencies itd.)

test-gulp/
|  css/
|  less/
|  |  style.less
gulpfile.js -- ad3
package.json -- ad2

Czytaj dalej
2 mar 2015

Trochę animacji w CSS3 - kafelki

Animacja "kafelków" w css3

Trochę css

.box-flip {
  width: 999px;
  height: 390px;

}

.box-flip .front {
  line-height: 194px;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  color: #c6001f;
  border: 1px solid;

}

.box-flip .item {
  float: left;
  cursor: pointer;
}

.box-flip .item .row-item {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 0.6s -webkit-transform;
  -moz-transition: 0.6s -moz-transform;
  -o-transition: 0.6s -o-transform;
  -ms-transition: 0.6s -o-transform;
  transition: 0.6s transform;
  position: relative;
}

.box-flip .item:hover .row-item {
  -webkit-transform: rotateY(.5turn);
  -moz-transform: rotateY(.5turn);
  -o-transform: rotateY(.5turn);
  -ms-transform: rotateY(.5turn);
  transform: rotateY(.5turn);
}

.box-flip .item .row-item>.back {
  overflow: hidden;
  opacity: 0;
  -webkit-transform: scale(0.4) rotateY(0.5turn) translateZ(1px);
  -moz-transform: scale(0.4) rotateY(0.5turn) translateZ(1px);
  -o-transform: scale(0.4) rotateY(0.5turn) translateZ(1px);
  -ms-transform: scale(0.4) rotateY(0.5turn) translateZ(1px);
  transform: scale(0.4) rotateY(0.5turn) translateZ(1px);
  -webkit-transition: 0.4s .075s opacity, 0.2s -webkit-transform;
  -moz-transition: 0.4s .075s opacity, 0.2s -moz-transform;
  -o-transition: 0.4s .075s opacity, 0.2s -o-transform;
  -ms-transition: 0.4s .075s opacity, 0.2s -ms-transform;
  transition: 0.4s .075s opacity, 0.2s transform;
  display: block;
}

.box-flip .item .row-item>.back {
  display: none\9;
}

.box-flip .item:hover .row-item>.back {
  overflow: visible;
  opacity: 1;
  -webkit-transform: scale(1) rotateY(0.5turn) translateZ(1px);
  -moz-transform: scale(1) rotateY(0.5turn) translateZ(1px);
  -o-transform: scale(1) rotateY(0.5turn) translateZ(1px);
  -ms-transform: scale(1) rotateY(0.5turn) translateZ(1px);
  transform: scale(1) rotateY(0.5turn) translateZ(1px);
}

.box-flip .item:hover .row-item>.back {
  display: block\9;
}

.box-flip .item {
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -o-perspective: 1200px;
  -ms-perspective: 1200px;
  perspective: 1200px;
  overflow: visible;
}

.box-flip div.back {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #f7732f;
  z-index: 2;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
  line-height: 194px;
  text-align: center;
}

.box-flip .box-a {
  width: 333px;
  height: 195px;
  margin-right: 2px;
  margin-bottom: 2px;
}

.box-flip .box-a .back {
  width: 333px;
  height: 195px;
}

.box-flip .box-b {
  width: 664px;
  height: 195px;
  margin-bottom: 2px;
}

.box-flip .box-b .back {
  width: 664px;
  height: 195px;
}

.box-flip .box-c {
  width: 333px;
  height: 194px;
  margin-right: 2px;
}

.box-flip .box-c .back {
  width: 333px;
  height: 194px;
}

.box-flip .box-d {
  width: 331px;
  height: 194px;
  margin-right: 2px;
}

.box-flip .box-d .back {
  width: 331px;
  height: 194px;
}

.box-flip .box-e {
  width: 331px;
  height: 194px;
}

.box-flip .box-e .back {
  width: 331px;
  height: 194px;
}
Czytaj dalej
Copyright © | kodyWiG Theme