Equipe: Danilo Morais, Laerte Júnior, Rafael Tiussi, Rogério Lino
Tecnologias para desenvolvimento de sistemas
HTML5
CSS
JS
BS
JSON
XML
PHP
.NET
REST
SOAP
UX
MVC
CF
DI
UI
OAUTH
HTTP
$('p');
$('div p');
$('body>section a');
$('button.btn-primary');
$('#conteudo');
$('[type]');
$('[type=radio]');
$('#cont .items li a[href=#]:ng-child(odd)');
val, text, prop, data, hide, show, toggle, ajax, on, off, animate, addClass, removeClass, hasClass, toggleClass, find, parent
Principais funções:
$("button").on("click", function(event) {
alert("Hi!");
});
$.ajax({
url: "/hello",
success: function(response) {
console.log(response);
}
});
$('p:even').css('color', 'gray');
$('p')
.on('mouseover', function () {
$(this).addClass('highlight');
})
.on('mouseout', function () {
$(this).removeClass('highlight');
});
Javascript
Resultado
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>
CSS
Javascript
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
HTML
Resultado
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
HTML
Resultado
<h1>Team</h1>
<ul>
<li ng-repeat="developer in developers">
{{developer.name}}
</li>
</ul>
$scope.developers = [
{ name: 'Danilo' },
{ name: 'Laerte' },
{ name: 'Rafael' },
{ name: 'Rogério' },
];
HTML
Javascript
Resultado
<h1>Team</h1>
<ul>
<li ng-repeat="dev in developers|filter: query">
{{dev.name}}
</li>
</ul>
$scope.query = 'Rog';
$scope.developers = [
{ name: 'Danilo' },
{ name: 'Laerte' },
{ name: 'Rafael' },
{ name: 'Rogério' },
];
HTML
Javascript
Resultado
http://pypl.github.io/PYPL.html
The PYPL PopularitY of Programming Language Index is created by analyzing how often language tutorials are searched on Google.
Ranking das linguagens de programação por
repositórios ativos no Github.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<?php
$name = "Rogério";
$_y = (int) (pow(9, 3) / 30 + 5);
echo "Hi, my name is $name. I'm an $_y years old developer.";
?>
</body>
</html>
public function helloAction()
{
$params = [
'message' => 'Hello world!';
];
return $this->render('hello.html.twig', $params);
}
HelloController.php
{% extends 'base.html.twig' %}
{% block body %}
<h1>{{ message }}</h1>
{% endblock %}
hello.html.twig
Resultado
Ferramenta que automatiza o download e instalação das dependências da sua aplicação de acordo com a versão escolhida.
{
"require": {
"monolog/monolog": "1.0.*"
}
}
composer.json
composer install
Respository
(Packagist)
Filesystem
Proxy Authentication Required
Gateway timeout
Sistema de cadastro imobiliário
REpresentational State Transfer
{
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": [
"GML",
"XML"
]
},
"GlossSee": "markup"
}
}
}
}
}
375 bytes
<!DOCTYPE glossary PUBLIC "-//OASIS//DTD DocBook V3.1//EN">
<glossary>
<title>example glossary</title>
<GlossDiv>
<title>S</title>
<GlossList>
<GlossEntry ID="SGML" SortAs="SGML">
<GlossTerm>Standard Generalized Markup Language</GlossTerm>
<Acronym>SGML</Acronym>
<Abbrev>ISO 8879:1986</Abbrev>
<GlossDef>
<para>A meta-markup language, used to create markup languages such as DocBook.</para>
<GlossSeeAlso OtherTerm="GML">
<GlossSeeAlso OtherTerm="XML">
</GlossDef>
<GlossSee OtherTerm="markup">
</GlossEntry>
</GlossList>
</GlossDiv>
</glossary>
527 bytes
dados.vitoria.es.gov.br
dados.vitoria.es.gov.br
[
{
"id": 49,
"descricao": "DA PENHA",
"localidade": {
"id": 4858,
"descricao": "Vitoria",
"estado": {
"id": 8,
"sigla": "ES",
"descricao": "ESPÍRITO SANTO"
}
}
},
{
"id": 32,
"descricao": "JARDIM DA PENHA",
"localidade": {
"id": 4858,
"descricao": "Vitoria",
"estado": {
"id": 8,
"sigla": "ES",
"descricao": "ESPÍRITO SANTO"
}
}
}
]
GET /api/endereco/bairros?descricao=penha
{
"id": 91,
"descricao": "AEROPORTO",
"localidade": {
"id": 4858,
"descricao": "Vitoria",
"estado": {
"id": 8,
"sigla": "ES",
"descricao": "ESPÍRITO SANTO"
}
}
}
GET /api/endereco/bairros/91
valeu fera!