Programuotojo užrašai: HTML

Rodomi pranešimai su žymėmis HTML. Rodyti visus pranešimus

2017 m. sausio 1 d., sekmadienis

Milligram - super small HTML UI framwerok

https://milligram.github.io/

2016 m. vasario 26 d., penktadienis

pure css tabs

http://codepen.io/wallaceerick/pen/ojtal
http://webdesignerhut.com/examples/pure-css-tabs/
http://webdesignerhut.com/create-pure-css-tabs/
https://css-tricks.com/functional-css-tabs-revisited/

2016 m. vasario 3 d., trečiadienis

https://github.com/teleject/hisrc - html kode nurodome img matmenis trijų dydžių, JS pagalba nustato kurį dydį krauti
http://adaptive-images.com/ - mažiausiai riekia keisti kodo. Per Htaccess paveikslėlių užkrovimą perduodame PHP skriptui, kuris pagal prieš tai padėtą cookie arba user-agent nustato kokia raiška reikalinga ir užkrauna reikiamą paveikslėlį, pakešuoja skirtingų dydžių versijas (panašiai daro WP).
https://responsiveimages.org/ - dar geresnis sprendimas, kode leidžiantisn urodyti skiritngas versijas. tik reikia pasikurti php skriptą kuris apdorotų ir pakešuotų paveikslėlius pagal dydį.
https://developers.google.com/web/fundamentals/design-and-ui/media/images/images-in-markup?hl=en - google rekomenduojamos technikos repsonsive paveikslėliams, taip pat Retina ekranams kur pixel density didesnis, nurodant HTML IMG kode skiritngas paveikslėlių versijas

Background paveiksėliams - per media queries - http://www.html5rocks.com/en/mobile/high-dpi/#toc-tech-overview

SVG vektorinių paveikslėlių kompresinimas: https://jakearchibald.github.io/svgomg/

WEBP - naujas paveiksėlių formatas, 22% mažiau užimantis už PNG. Konverteris - http://webp-converter.com/ tik reikia pasidomėti kaip užkrauti ne webp paveikslą jei browseris nepalaiko, kaip tai aptikti: https://developers.google.com/speed/webp/faq (rašo glaima su moderinzer.js)

2016 m. sausio 25 d., pirmadienis

Accelerated mobile pages

https://www.ampproject.org/
gerseniam mobile seo rekomenduojama kurti accelerated web pages

2015 m. rugpjūčio 19 d., trečiadienis

ul > li susitraukinejantis medis su jquery

$('ul li').click(function() {
$(this).parent().find('ul').slideToggle();
});

2015 m. liepos 29 d., trečiadienis

Teksto lygiavimas vertikaliai

This solution will work for a single line and multiple lines of text, but still requires a fixed height container:

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

The CSS just sizes the <div>, then vertically center aligns the <span> by setting the <div>'s line-height equal to its height, and making the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span> so its contents will flow naturally inside the block.

div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

2015 m. kovo 27 d., penktadienis

Google stiliaus mygtukai ir visas user interface

http://code.brucegalpin.com/google-plus-ui-buttons/demo.html#

2015 m. kovo 9 d., pirmadienis

Lengvas CSS fameworkas, responsive

http://purecss.io/ Lengvas CSS fameworkas, responsive

2015 m. vasario 4 d., trečiadienis

Puikus įrankis HTML apvalymui ir optimizavimui iš po eksportavimo iš WORD

http://www.dirtymarkup.com/

2014 m. lapkričio 21 d., penktadienis

Specialieji HTML simboliai

http://www.sabinanore.com/design/html-special-symbols/

2014 m. liepos 24 d., ketvirtadienis

Paspaudžiamas fono paveikslėlis

CSS:

body {
       background-image: url(/images/some_image.jpg);
       background-attachment: fixed;
       background-repeat: no-repeat;
       background-position: center top;
       cursor: pointer;
}

#page {
       cursor: auto;
}

JS:

function recordOutboundLink(link, category, action) 
{
   _gat._getTrackerByName()._trackEvent(category, action);
   setTimeout('window.open("' + link + '")', 100);
}

jQuery(document).ready(function() {
       jQuery("body").click(function(e) {
               var target = jQuery(e.target);
               if (target.attr('id') == 'body_id')
               {
                       recordOutboundLink('http://www.karlmonaghan.com','outbound', 'karlmonaghan')
               }
       });
});

HTML:

<body id="body_id">

2014 m. liepos 12 d., šeštadienis

HTML Image MAP online įrankiai

http://www.image-maps.com/
http://imagemap-generator.dariodomi.de/
http://www.outsharked.com/imagemapster/default.aspx?what.html
Išryškinimui naudoti jQuery pluginą: http://davidlynch.org/projects/maphilight/docs/

2014 m. birželio 27 d., penktadienis

Dizaino frameworkai HTML/CSS

Bootstrap: http://getbootstrap.com/
Geras lengvas švarus skinas: http://www.creative-tim.com/product/get-shit-done-kit

2014 m. kovo 16 d., sekmadienis

HTML simbolių kodai

Kad nupiešti paprastą rodyklytę, ne visada būtina naudoti paveikslėlį. Kiek daug įvairių simbolių - rodyklyčių, ikonėlių galime sugeneruoti naudojant html kodus: http://character-code.com/

2014 m. vasario 8 d., šeštadienis

Raiškiojo teksto wysiwyg redaktoriaus CKEDITOR ir failų įkėliklio CKFINDER integravimas

Vienas geriausių ir labiausiai tobulinamų nemokamų wysiwyg (reiškia - gauni tai ką matai) tipo teskto redaktorių yra CKEDITOR. Su papildomu priedėliu CKFINDER atsiranda galimybė įkėlinėti failus į serverį. Tai puikus komplektas daugumai Turinio Valdymo Sistemų. Šių priemonių integravimo eiga, jeigu jau naudojate JQUERY biblioteką:

parsisiunčiate CKEDITOR ir CKFINDER, juos sukeliate į serverį

HTML kode (pageidautina HEAD dalyje) integruojate eilutes:

 <script src="/ckeditor4/ckeditor.js"></script>
 <script src="/ckeditor4/ckfinder/ckfinder.js"></script>
 <script src="/ckeditor4/adapters/jquery.js"></script>

Sukuriate textarea lauką, suteikiate jam id, pvz redactor, ir sukuriate JavaSript iškvietimą:
$( '#redactor' ).ckeditor(function(){
CKFinder.setupCKEditor( this, '/ckeditor4/ckfinder/' );
});
ckfinder aplanke, ckfinder.php faile nustatote $baseUrl parametrą - kelią iki direktorijos, į kuria bus talpinami vartotojo failai. Šiai direktorijai, žinoma, reikia suteikti 777 chmod.
ckfinder.php faile pakoregutoi funkciją CheckAuthentication() - kai norite, kad failų įkėlimas veiktų (pvz kai vartotojas prisijungės, yra sukurta sesija), f-ja turi grąžinti TRUE, kitu atveju - FALSE reikšmę
Jeigu yra poreikis, su jQuery paimti teksto redaktoriaus turinį, tai galima padaryti kaip įprastai: $('#redactor').val();
Jeigu yra poreikis tinkinti CKEditorių, papildomus parametrus (mūsų pvz - uiColor - sąsajos spalva ) galima užduoti iškart po callback funkcijos :
$( '#redactor' ).ckeditor(function(){
CKFinder.setupCKEditor( this, '/ckeditor4/ckfinder/' );
}, { uiColor: '#9AB8F3' });
Pilnas konfigūracijų sąrašas.

2014 m. sausio 23 d., ketvirtadienis

CSS3 meniu generatorius

Lankstus ir nemokamas CSS meniu generatorius: http://cssmenumaker.com/