https://cleancoders.com/videos
http://blog.cleancoder.com/uncle-bob/2016/03/19/GivingUpOnTDD.html
https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882
Informacija apie WEB technologijas: ASP.NET, C#, PHP, ASP, CSS, JavaScript, JQuery, SEO.
2016 m. gruodžio 22 d., ketvirtadienis
2016 m. spalio 6 d., ketvirtadienis
2016 m. rugsėjo 20 d., antradienis
2016 m. birželio 10 d., penktadienis
2016 m. birželio 9 d., ketvirtadienis
2016 m. gegužės 21 d., šeštadienis
2016 m. kovo 15 d., antradienis
70-480: CSS3 media queries
CSS istorija
1980 - CSS (Cascading Style Sheets) pagrindinius principus paėmęs iš SGML (137 psl.).
1996 - W3C išleido CSS 1 lygio rekomendacijas. Čia žodis rekomendacija reiškia formalus paleidimas.
1998 gegužę - išleistos rekomendacijos CSS 2 lygio ir pradėta dirbti prie CSS3. CSS3 išskirstė į modulius.
2005 - išleido CSS Level 2 Revision 1 (CSS2.1), CSS3 Selectoriai, CSS3 Text - galutinė versija, t.y. ne juodraštinė, pasirodė tik 2011.
Kadangi CSS3 sudarytas iš modulių, tai kiekvieno modulio statusas ir stabilumas - skirtingi. Modulių yra apie 50. Rekomendacinius statusus turi:
- media types
- namespace
- selectors level 3
- color
CSS2.1 įeina į CSS3, nes jie buvo kartu baigti.
Style - taisyklė, kuri apibrėžia HTML elemento dalį.
Style sheet - taisyklių rinkinys.
Bene pats galingiausias CSS įrankis - cascading.
Media queries
Pvz.,@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
HTML4 ir CSS2 palaiko media, todėl žinome, kad galime vieną formatą vaizduoti ekrane, o kitą - spaudsdinimui. Buvo apibrėžti media tipai: print, screen.
Media queries leidžia daryti užklausas su width, color, height. Taigi, dizainas gali būti pritaikytas prie bet kokio įrenginio (išmaniesiems telefonams, tabletams), nekeičiant programinio kodo turinio.
Media tipas gali būti apibrėžtas ir taip:
nurodo į:media="screen, 3d-glasses, print and resolution > 90dpi"
"screen" "3d-glasses" "print and resolution > 90dpi"
Media užklausa susidaro iš media tipo ir nulio arba kelių sąlygų.
Pavyzdys, parašytas su HTML:
Šis pavydzys išreiškia, kad tam tikras style sheet (example.css) naudojamas tam tikro media tipo įrenginyje ("screen") su tam tikra savybe (screen turi būti spalvotas).Pavyzdys CSS su @import-rule:Media užklausa - tai loginė išraiška, turinti rezultatą true arba false.@import url(color.css) screen and (color);
All nurodo, kad tinka visų tipų įrenginiams.@media all and (min-width:500px) { … }@media (min-width:500px) { … }
Jeigu media neapibrėžta, tai reiškia true. Pvz., tas pats jei užrašyta:
@media all { … } @media { … }
Išraiškose naudojami "min-" ir "max-", t.y. "ne mažesnis nei", "ne didesnis nei" - naudojami norint išvengti "daugiau", "mažiau" ženklo su "snapeliu."
Skirtimas tarp properties ir features:
Properties - deklaruoja, suteikia informaciją, kam bus naudojamas dokumentas. Jos gali turėti sudėtingesnių apskaičiavimų.
Features - apibrėžia reikalavimus output įrenginiui. Dažniausiai tai yra raktažodis ir skaičius.
Su media dar galime apibrėžti:
- device-height ()
- orientation (@media all and (orientation:portrait) { … } @media all and (orientation:landscape) { … })
- device aspect ratio - santykis tarp device-with ir device-height
- color - apibrėžia, kiek spalvų turi palaikyti išorinis įrenginys.
- monochrome
- resolution
- grid - naudojamas, kai išorinis atvauzdavimo įranginys yra grid arba bitmap.
http://www.w3.org/TR/css3-mediaqueries/
žymės:
CSS2,
CSS3,
history,
HTML4,
media,
media queries,
media types,
print,
queries,
screen,
style,
style sheet,
styleSheetTheme
70-480: įvairūs
Absolute panaikina float veikimą. Float galima naudoti ne visiems, o tik block-level elementams.
z-index - kaip steke išdėlioja elementus. Su didesne reikšme elementas dedamas aukščiau. Jis veikia tik su pozicionuotais elemetais: position: absolute, position:relavive arba position:fixed.
Position:
- static (default). Elementai išdėstomi ta tvarka, kuria yra dokumente.
- absolute. Elementas pozicionuojamas relative pagal pirmą ne statinį protėvį.
- relative. Elementas pozicionuojamas relative pagal savo relavite poziciją: "left:20". Prideda 20 pikselių į elemento left poziciją.
- fixed. Elementas poziciuojamas relative pagal naršyklės langą
- inherit. Pozicionavimo savybė paveldima iš tėvinio elemento.
parseInt(string, radix) - iš eilutės grąžina skaičių.
radix - parodo, kokią skaičiavimo sistemą naudoti: šešioliktainę (16) ar dešimtainę (10).
Tik pirmas eilutės skaičius yra grąžinamas.
Jeigu radix nėra nurodytas, JavaScrip apdoroja taip:
http://www.w3schools.com/jsref/jsref_parseint.asp
parseFloat - grąžina float tipo skaičių.
CSS3 stilių svarbumas
z-index - kaip steke išdėlioja elementus. Su didesne reikšme elementas dedamas aukščiau. Jis veikia tik su pozicionuotais elemetais: position: absolute, position:relavive arba position:fixed.
Position:
- static (default). Elementai išdėstomi ta tvarka, kuria yra dokumente.
- absolute. Elementas pozicionuojamas relative pagal pirmą ne statinį protėvį.
- relative. Elementas pozicionuojamas relative pagal savo relavite poziciją: "left:20". Prideda 20 pikselių į elemento left poziciją.
- fixed. Elementas poziciuojamas relative pagal naršyklės langą
- inherit. Pozicionavimo savybė paveldima iš tėvinio elemento.
parseInt(string, radix) - iš eilutės grąžina skaičių.
radix - parodo, kokią skaičiavimo sistemą naudoti: šešioliktainę (16) ar dešimtainę (10).
Tik pirmas eilutės skaičius yra grąžinamas.
Jeigu radix nėra nurodytas, JavaScrip apdoroja taip:
- jei eilutė baigiasi 0x, tai bus šešioliktainė sistema;
- jei eilutė baigiasi 0, tai bus 8-ainė sistema. Nebenaudojama.
- jei bet kokia kita reikšmė - bus 10-ainė sistema.
http://www.w3schools.com/jsref/jsref_parseint.asp
parseFloat - grąžina float tipo skaičių.
CSS3 stilių svarbumas
70-480: Creating flexible layouts with CSS3 (16 video)
- flexbox - elementas, į kurį sudėta nav, content ir sidebar. Visiems jiems galima nustatyti, kiek procentų kuriam skirti, pvz., 10 proc, 80 proc ir 10 proc.
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm (atsidarinėti su IE naršykle)
- grid alignment - vietoje lentelių galime naudoti gridą, kuris taip pat turi eilutes, stulpelius. Taip daug paprasčiau nurodyti stilius.
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm - kaip dirbti su ms-grid
-ms-grid-rows: [ auto | height | min-content | max-content | minmax(min, max) ] + | none
width
- multi-column - tekstą galima padalinti į kiek norime stulpelių...
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_multi-column.htm
- exclusions - darbas su SVG elementais
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_positionedfloats.htm - positioned floats
- regions - flox content of lox elements(?)
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_regions.htm
http://www.html5rocks.com/en/tutorials/regions/adobe/ - panaudoti SVG elementai
Rašant CSS vengti dublikavimo, t.y. grupuoti stilius
Daug pavyzdžių: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/
http://caniuse.com
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm (atsidarinėti su IE naršykle)
- grid alignment - vietoje lentelių galime naudoti gridą, kuris taip pat turi eilutes, stulpelius. Taip daug paprasčiau nurodyti stilius.
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm - kaip dirbti su ms-grid
-ms-grid-rows: [ auto | height | min-content | max-content | minmax(min, max) ] + | none
auto
The width of a column is computed based on the widest child element in that column. This keyword is equivalent to minmax(min-content, max-content).
The width of each column specified as one of the following values:
- A length consisting of an integer number, followed by an absolute units designator ("cm", "mm", "in", "pt", or "pc") or a relative units designator ("em", "ex", or "px").
- A percentage of the object width.
- A proportion of the remaining horizontal space (that is, the object width, less the combined widths of other tracks), consisting of an integer number followed by a fractional designator ("fr"). For example, if "200px 1fr 2fr" is specified, the first column is allocated 200 pixels, and the second and third columns are allocated 1/3 and 2/3 of the remaining width, respectively.
min-content
The minimum width of any child elements is used as the width of the column.
max-content
The maximum width of any child elements is used as the width of the column.
minmax(min, max)
The width of the row is between min and max, as available space allows. The min and max parameters can be any other value of the -ms-grid-columns property, except for auto.
none
Initial value. The object has no specified columns. Implicit, auto-sized columns will still be created based on the grid position(s) of the child element(s).
- multi-column - tekstą galima padalinti į kiek norime stulpelių...
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_multi-column.htm
- exclusions - darbas su SVG elementais
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_positionedfloats.htm - positioned floats
- regions - flox content of lox elements(?)
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_regions.htm
http://www.html5rocks.com/en/tutorials/regions/adobe/ - panaudoti SVG elementai
Rašant CSS vengti dublikavimo, t.y. grupuoti stilius
Daug pavyzdžių: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/
http://caniuse.com
70-480: RegExp
http://www.w3schools.com/jsref/jsref_obj_regexp.asp
stogelis - žymi įvedimo pradžią
$ - žymi įvedimo pabaigą
+ rodo, kad įrašų, kaip laužtiniuose skliaustuose galime kartoti kiek norime, t.y. vieną ir daugiau
(foo) - tarp skliaustelių esantis tekstas būtinai t.b. nurodytas, pvz., "foo bar"
\d žymi skaičių, ekvivalentas [0-9]
. žymi vieną simbolį, pvz., /.y/ žymi "my", "ay", o ne "yes"
* leidžia bet kokį kiekį ankščiau nurodytų simbolių
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
70-480: įvairūs, XMLHttpRequest readyState and status
CSS3 nth-child
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.n can be a number, a keyword, or a formula. Pavyzdžiui, li:nth-child(3) pažymės 3 sąrašo elementą.
Taip pat galite naudoti formulę an+b, kai
a- ciklo skaičius
n- ciklo kintamasis
b- nurodo, kurį elementą pažymėsime
Pavyzdžiui, li:nth-child(10n+3) - pažymės 3 elementą iš kiekvienos 10 elementų grupės. Taigi, jei ul turi 45 elementus, tai bus pažymėti 3, 13, 23, 33 ir 43.
Taip pat galime naudoti odd ir even, kad pažymėtume porinius arba neporinius elementus.
Pavyzdžiui, li:nth-child(odd) pažymi 1, 3, 5, 7 ir t.t.
CSS3 nth-of-type
Raudonai pažymės kiekvieną p elementą, kuris yra antras elementas tėviniam elementuip:nth-of-type(2)
{
background:#ff0000;
}
JQuery.ajax
contentType (default:
'application/x-www-form-urlencoded; charset=UTF-8'
)
Type: String
When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to
$.ajax()
, then it is always sent to the server (even if no data is sent). The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding.
type (default:
'GET'
)
Type: String
The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
onLine
navigator.onLine savybė grąžina boolean reikšmę, kuri rodo, ar browseris prisijungęs prie interneto, ar ne.
Navigator objektas laiko informaciją apie browser.
XMLHttpRequest
readyState gražiną dabartinio dokumento statusą:
0 - užklausa neinicializuota (request not inicialized);
1 - serverio ryšys nustatytas (server connection established)
2 - užklausa gauta (request received)
3 - užklausa vykdoma (processing request)
4 - užklausa baigta ir atsakymas paruoštas (request finished and response is ready)
status:
100 - continue
200 - standartinis atsakymas sėkmingai HTTP užklausai
300 - rasti keli atsakymai pagal pateiktus duomenis
400 - bloga užklausa
žymės:
70-480,
even,
navigator,
nth-child,
nth-of-type,
odd,
onLine,
readyState,
status,
XMLHttpRequest
70-480: Įvairūs AJAX
AJAX apibrėžime naudojami autentifikacijai:
password
username
APIs:
XMLHttpRequest
Geolocation - naudojamas geografinei userio pozicijai
Geolocation API
getCurrectPosition - paima dabartinę poziciją
watchPosition -grąžina dabartinę poziciją ir rodo video
Geolocation naudojamas iPhone ir GPS.
http://www.w3schools.com/html/html5_geolocation.asp
Klaidų gaudymo blokas:
trycatch(e)
finally
Draggable elements
Jei norime, kad elementai būtų draggable, reikia pridėti atributą draggable = trueDataTransfer.setData() - siunčia duomenų tipą ir reikšmę tempimui (?)
function drag(ev){
ev.dataTransfer.setData("text", ev.target.id);
};
onDragOver - nurodo, kur tą reikšmę galima dėti. Elementai negali būti dedami ant kitų elementų, tam naudojama:
event.preventDefault();
Kai elementas padedamas, iškviečiamas metodas onDrop.
function drop(ev){
ev.preventDefault(); - naršyklė atidaroma default gaudymui (?)
var data = ev.dataTransfer.getData("Text"); - paimami persiųsti duomenys
ev.target.appendChild(document.getElementById(data));
};
Prototype
Prototype savybė leidžia pridėti metodus ar savybes objektui.
Pridėti savybę:
function employee(name,jobtitle,born)
{
this.name=name;
this.jobtitle=jobtitle;
this.born=born;
}
var fred=new employee("Fred Flintstone","Caveman",1970);
employee.prototype.salary=null;
fred.salary=20000;
Pridėti metodą:
Customer.prototype.GetCommission() = function()
{
alert('payroll');
}
http://www.w3schools.com/jsref/jsref_prototype_string.asp
Error.prototype
Error.prototype - pristatomas klaidos konstruktorius.Error prototype turi šias savybes:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype
CSS legal color values
Colors in CSS can be specified by the following methods:- Hexadecimal colors
- RGB colors - rgb(red, green, blue), reikšmės nuo 0 iki 255, procentais - 0% iki 100%. PVZ.: rgb(0,0,255) ir rgb(0%,0%,100%).
- RGBA colors - išplėstas RGB, pridedant alpha savybę: rgba(red, green, blue, alpha). alpha parametras nurodo skaitinę reikšmę nuo 0.0 (visiškai permatoma) ir 1.0 (visiškai nepermatomas).
- HSL colors - nurodo cilindrinius koordinačių atspalvius, hsl(hue - atspalvis, saturation - sodrumas, lightness - lengvumas). #p1 {background-color:hsl(120,100%,50%);} / * green */
- HSLA colors - išplėstas HSL, pridedant alpha savybę.
- Predefined/Cross-browser color names - yra apibrėžta 140 spalvų vardų: http://www.w3schools.com/cssref/css_colornames.asp
http://www.w3schools.com/cssref/css_colors_legal.asp
Callback gražinti XML duomenis
calback.call(httpRequest.responseXML);
call - naudojamas iškviesti objektą. call([thisObj[, arg1[, arg2[, argN]]}])
responseXML - grąžina duomenis kaip XML duomenis
XMLHttpRequest -leidžia atnaujinti puslapio dalis, neperkraunat puslapio.
input type="email"
SVG - interactive scalable vector graphic
transform - apibrėžia sąrašą transformacijų
setInterval - įvertiną išraišką specialiam intervale (milisekundėmis)
myGraphic.setAttribute("currectScale", 1.5)
JQuery show() vs. visible
$('#btnEdit').show()
$(selector).show(speed,easing,callback)
Su display:none naudoti show()? show(), hide() dirba su display savybe, o ne visibility
Matomi elementai yra tie, kurie:
- nenurodyta display: none
- nėra tipo type=hidden
- plotis ir ilgis nėra 0
- nėra paslėpto elemento dalis
autocomple
autocomplete atributas nurodo, kad laukas gali būti užpildytas automatiškai???
< input type = 'password' required autocomplete = 'off' />
JQuery pažymėti visus header elementus
$(":header")
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
hyphens - teksto lygiavimas, kai į eilučių pabaigą žodis dalijamas ir atskiriamas brūkšneliu
hyphen geriau nei word-break.
CSS3 hyphen veikia nuo Firefox 6 su anglų kalba.
SVG yra kalba, apibrėžianti 2D grafiką XML.
CSS text-transform property
p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
hyphens
hyphens - teksto lygiavimas, kai į eilučių pabaigą žodis dalijamas ir atskiriamas brūkšneliu
hyphen geriau nei word-break.
CSS3 hyphen veikia nuo Firefox 6 su anglų kalba.
SVG
SVG yra kalba, apibrėžianti 2D grafiką XML.
Canvas | SVG |
---|---|
|
|
$.ajax settings: accepts, contentType, dataType
accepts - nurodo, kokio tipo atsakymus leidžia grąžinti
contentType - pagal nutylėjimą 'application/x-www-form-urlencoded; charset=UTF-8'
dataType - galimos reikšmės xml, json, script, html
dataFilter - apvalymo, filtravimo funkcija, kad gautume reikiamus "švarų" atsakymą.
getResponseHeader - headerio informacija apie atsakymą, pvz.,
xmlhttp.getResponseHeader("Server")
xmlhttp.getResponseHeader("Content-Type")
xmlhttp.getResponseHeader("Content-Length")
xmlhttp.getResponseHeader("Last-Modified")
žymės:
70-480,
AJAX,
autocomplete,
Callbacks,
CSS colors,
draggable,
email,
Geolocation,
header,
hyphens,
HSL,
HSLA,
input,
JQuery,
password,
prototype,
RGB,
RGBA,
username,
XMLHttpRequest
2016 m. kovo 6 d., sekmadienis
Cookies (jargons)
A handle, transaction ID, or other
token of agreement between cooperating programs. “I give him a packet, he gives
me back a cookie.” The claim check you get from a dry-cleaning shop is a
perfect mundane example of a cookie; the only thing it's useful for is to
relate a later transaction to this one (so you get the same clothes back). Syn.
magic cookie; see also fortune cookie. Now mainstream in the specific sense
of web-browser cookies.
Užsisakykite:
Pranešimai (Atom)