RoqueFernando•GlaucioDaniel

TechnoEditonEditoraLtda

Posisi, dimensi
dan elemen lainnya dari
HTML5 dan CSS3
Posisi, dimensi
dan elemen lainnya dari
HTML5 dan CSS3

Grupo Impacta • Pemasaran • Februari 2015

 Ringkasan

Ringkasan 04

Pengantar 05

BAB 1 – DIMENSI NYATA DARI ELEMEN 06

BAB 2– MENGATUR MARGINS 08

BAB 3 – MEMPOSISIKAN UNSUR-UNSUR 10

ELEMNTA
BAB 3.1 – POSISI 10

BAB 3.2 – FLOAT 14

BAB 4– MENDEFINISIKAN LAPISAN 17

BAB 5– MENDIFINISIKAN CARA 20

PRESENTASI UNSUR-UNSUR

BAB 6–TABINDEX 22

BAB 7 – JENIS MEDIA 23

BIBLIOGRAFIA

CRÉDITOS
 Posisi, dimensi dan lainnya
elemenHTML5danCSS3

Ringkasan

HTML, bahasa Inggris HyperText Markup Language atau Bahasa Markup

HyperTextos adalah bahasa penandaan standar yang digunakan dalam pembuatan halaman untuk
web, memungkinkan penggabungan gambar dan objek dalam bentuk interaktif dan
dinamis.

OCSS, dari bahasa Inggris Cascading Style Sheets atau Folhas de Estilo em Cascata, juga merupakan
digunakan dalam pembuatan identitas visual, tata letak teks dan fungsi lainnya di
sebuah halaman web. Kedua bahasa tersebut disetujui oleh W3C, yang mendorong
penggunaan alternatifnya untuk menghindari ketergantungan hanya pada satu bahasa.

HTML5 adalah versi terbaru dari bahasa dan membawa perubahan bersamanya
signifikan untuk dunia pemrograman dan pengembangan, di antaranya
kita dapat menonjolkan semantik dan aksesibilitas – yang kedua menjadi poin dari
orientasi soal dimensi dan penempatan elemen, topik dalam
destaquenesse e-book.

Buku digital ini, yang diproduksi oleh Grupo Impacta untuk siswa dan calon siswa program kursus
e pelatihan dari Sekolah Seni & Desain dan Sekolah Pengembangan, memiliki tujuan
tujuan berfungsi sebagai panduan singkat tentang posisi dan dimensi dari
elemen menggunakan HTML5 dan CSS untuk profesional dan mahasiswa pemrograman.

Palavras-chave:HTML; CSS; posicionamento;dimensionamento;camadas; mídia.

04
 Posisi, dimensi, dan lainnya
elementos deHTML5eCSS3

Pendahuluan

Transformasi dari tata letak yang dibuat oleh desainer, dalam format gambar, untuk
sebuah format HTML, yang akan melayani sebuah situs atau Aplikasi Web, adalah sebuah proses yang memerlukan
beberapa langkah. Dalam e-book ini, kita akan membahas bagaimana cara membuat tata letak dan memposisikannya

dengan benar di browser, dengan cara yang melibatkan lembar gaya di

cascata (CSS) elemen dasar pemrograman.

Dahulu, penggunaan tabel untuk struktur dan pembuatan tata letak adalah hal yang umum.
halaman, namun, sejak XHTML tidak ada kebutuhan untuk menggunakannya. Salah satu metode
digunakan untuk pembuatan tata letak dalam HTML adalah yang disebut Tableless, nama yang diberikan
metodologi pembangunan situs tanpa menggunakan tabel (tabel). Untuk melakukan ini
konstruksi, digunakan HTML untuk menentukan struktur data dan lembaran
estiloCSS untuk memformat tampilan Anda.

Kita harus ingat bahwa astags, termasuk <table>, terus digunakan

sesuai dengan fungsinya. Pembangunan situs melalui metodologi
Tanpa tabel, memerlukan format elemen melalui berkas CSS, yang
mewakili lembar gaya.

05
 Posisi, dimensi, dan lainnya
elemen HTML5 dan CSS3

Bab 1 – Dimensi nyata elemen

Dimensi nyata yang ditempati oleh sebuah elemen di dalam sebuah halaman haruslah
dikenal agar memungkinkan pemahaman konsep-konsep yang terlibat dalam proses
dari pembangunan sebuah tata letak. Area yang ditempati oleh masing-masing elemen dari sebuah
halaman disebut kontainer tema bentuk persegi panjang.

Kontainer dari suatu elemen memiliki semua item yang berkaitan dengannya, seperti
isi Anda, ruang kosong Anda, margin Anda, dan garis batas Anda. O
gambar di bawah ini menunjukkan area-area dari kontainer sebuah elemen.

Perhatikan:

MARGIN

BATAS

KONTEN
TEXTO
PADDING

06
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 1 – Dimensi nyata dari elemen

MARGIN:
Ruang yang memisahkan kontainer dari elemen lain yang membentuk halaman.
menyoroti bahwa margin tidak berada dalam batas-batas suatu elemen. Se
margins digunakan dengan tujuan untuk memindahkan elemen yang terlipat;

CONTEÚDO:
Semuaitemyangterkandungdalamelemen,yangtetapberadadidalamwadah;

BORDER:
Batas dari elemen, yaitu, garis batas dari wadah;

PADDING:
Ruang kosong yang ada antara konten dan batas elemen.

Lebar kontainer di mana elemen tersebut berada ditentukan oleh lebar

do konten ditambahkan dengan lebar yang berkaitan dengan border dan padding. Sementara lebar dari
elemen itu sendiri ditentukan hanya oleh lebar yang ditempati oleh kontennya, sehingga
seperti tinggi itu.

Di sebuah halaman, semua elemen yang terlihat adalah grup atau in-line. Elemen dari
blok memiliki lebar yang ditentukan oleh lebar blok di mana mereka berada. Mereka mulai-
se selalu di baris baru dan, setelah selesai, ada perubahan baru dari
elemen inline memiliki lebar yang ditentukan hanya oleh kontennya dan,
berbeda dengan elemen blok, tidak selalu dimulai pada baris baru.
Dengan cara ini, kami menyimpulkan bahwa elemen inline berperilaku dengan cara yang sama
queumtextosimples.

Sebagai contoh elemen blok, kita bisa menyebutkan <table>. Sedangkan

exemplodeumelementoinline, podemosmencionaro<span>.

07
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 2 – Mengatur margin elemen

Dalam CSS, ketebalan margin elemen ditentukan oleh

properti dari margin ini, yang dapat berupa:

. margin-bottom:Permite determinar a espessura referente à margem

inferiordoelemento

. margin-top:Permite determinar a espessura referente à margem

superior doelemento;

. margin-right:Permite determinar a espessura referente à margem

elemenkanan

. margin-left:Permite determinar a espessura referente à margem

kiri elemen.

Nilai properti ini adalah

biasanya ditentukan dalam piksel.

Perhatikan contoh berikut, di mana kita memiliki definisi margin dari sebuah
elemen:

. Berkas CSS
1p{
2 margin-top:70px;
3 margin-kiri:50px;
4}

08
 Penempatan, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 2 – Mengatur margin elemen

Arsip HTML

1<!doctype HTML>
2<html>
3 <kepala>
4 <meta charset="ufo-8">
5 <title>HTML5 Fundamentos - CSS</title>
6 <link type="text/css" href="css/[Link]" rel="StyleSheet"/>
7 </head>
8 <body>
9 <main role="main">
10 <p>
11 Mengujiatributmargin-top.
12 </p>
13 </main>
14 </body>
15<html>

Saat kita menjalankan kode ini, hasil yang diperoleh adalah sebagai berikut:

Atas:70px
Mengujiatributmargin.
Kiri: 50px

09
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 3 – Memposisikan elemen

Ketika kita bekerja dengan file CSS, kita dapat memposisikan elemen dan
membangun layout dengan beberapa properti. Dua properti CSS3
yang digunakan dengan tujuan untuk menciptakan dan memposisikan sebuah tata letak adalah
Flexible Box Layout, atau cukup Flexbox, yang merupakan cara sederhana
e tanpa perhitungan untuk memposisikan layout, dan Modul GridTemplate
Tata Letak.

Selain itu, kami memiliki dua properti lain yang sudah digunakan di
XHTML:posisifloat. Di bagian ini, kita akan melihat bagaimana cara bekerja dengan mereka.

Bab 3.1 – Posisi

Properti posisi, seperti yang disarankan oleh namanya sendiri, memungkinkan

menentukan posisi konten di layar pengguna. Ini
posicionamento pode ser: estático, fixo, absoluto e relativo.

Posisi Statis
Jenis penempatan ini ditentukan melalui nilai static, yang merupakan
tidak perlu, mengingat bahwa posisi statis adalah standar untuk
elemen. Oleh karena itu, properti position: static tidak perlu dinyatakan dari
bentuk eksplisit pada lembar gaya.

Sebuah elemen yang posisinya statis diletakkan segera di bawahnya

elemen sebelumnya dan di atas belakangnya. Namun, perlu dicatat bahwa ini
hanya terjadi jika elemen anterior dan posterior tidak memiliki
penempatan yang ditentukan oleh deformasi berbeda dari statis.

10
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 3.1 – Posisi

Posicionamento Fixo
Jenis penempatan ini menentukan bahwa elemen diposisikan dari
acordo com a parte que pode ser visualizada do User Agent, no qual é exibida a
Halaman. Untuk menentukan bahwa suatu elemen akan memiliki penempatan tetap, diperlukan
menggunakan nilai tetap bersama dengan properti posisi.

Posisi Absolut
Jenis penempatan ini menentukan bahwa elemen tersebut diposisikan dengan mempertimbangkan
se em consideração lokasi di mana elemen terdekat berada, posisi yang
podeserdefinida como tetap, absolut, atau relatif.

Dalam situasi di mana tidak ada elemen yang lebih dekat, dianggap bahwa
penempatan elemen <body>. Untuk menentukan penempatan sebuah
elemen sebagai absolut, cukup gunakan nilai absolut bersamaan dengan
posisi properti.

Perlu dicatat bahwa ada empat sifat yang diterapkan pada elemen-elemen yang
posisi ditentukan sebagai absolut. Mereka adalah: bawah, atas, kiri kanan.

Observeoexemploaseguir:

File CSS

#gambar{
posisi:absolute;
kiri:30px;
atas:60px;
}

11
 Posisi, dimensi, dan lainnya
elementos deHTML5eCSS3

Bab 3.1 – Posisi

Berkas HTML
1<!doctype HTML>
2<html>
3 <kepala>
4 <meta charset="ufo-8">
5 <title>HTML5 Fundamentos - CSS</title>
6 <link type="text/css" href="css/[Link]" rel="StyleSheet"/>
7 </head>
8 <body>
9 <main role="main">
10 <img src="images/[Link]" alt="Logo HTML5" id="imagem">
11 </utama>
12 </body>
13<html>

Saat kita mengeksekusi kode sebelumnya, hasil yang diperoleh adalah sebagai berikut:

60px

30px

Kita dapat mengamati dalam contoh adanya properti posisi, yang menerima
nilai absolut e dilengkapi dengan properti left dan top. Dengan ini,
posisi elemen ditentukan dengan mengambil sudut sebagai dasar
pojok kiri atas viewport. Elemen tersebut diwakili dalam contoh ini oleh img,
yang memiliki id="imagem".
12
 Posisi, dimensi dan lainnya
elemen dari HTML5 dan CSS3

Bab 3.1 – Posisi

Kita juga dapat mengamati bahwa properti left menentukan jarak dari
gambar dari margin kiri dan properti atas menentukan
distansi dari tepi atas.

Posisi Relatif
Jenis penempatan ini menentukan posisi elemen sesuai dengan
posisi sendiri. Untuk menentukan penempatan elemen sebagai relatif,
cukup gunakan nilai relatif bersama dengan properti posisi.

Saat kita bekerja dengan posisi relatif elemen, kita dapat

gunakan properti bawah, atas, kanan, kiri.

Observeoexemploaseguir:

File CSS
.imagem{
posisi:relatif;
kiri:30px;
atas:60px;
}

Arsip HTML
1<!doctype HTML>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>HTML5 Fundamentos - CSS</title>
6 <link type="text/css" href="css/[Link]" rel="StyleSheet"/>
7 </kepala>
8 <body>
9 <main role="main">
10 <img src="images/[Link]" alt="Logo HTML5" class="imagem">
11 <img src="images/[Link]" alt="Logo CSS3" class="imagem">
12 </main>
13 </body>
14<html>
13
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 3.1 - Posisi

Lihat hasil

60px

30px

Bab 3.2 – Float

Elemen yang dideklarasikan sebagai float dikonversi menjadi elemen blok.

forma otomatis, dapat memiliki tinggi dan lebar yang dinyatakan. Lebih spesifik,
karena browser menganggap tidak menyatakan lebar sebagai kesalahan, lebar
dua elemen float harus dideklarasikan.

Mengenai penempatan elemen float, ini terjadi segera setelah

elemen di blok sebelumnya, meskipun elemen tersebut berada di luar aliran. Yang
nilai yang dapat digunakan bersama atribut float adalah: none, left, right dan
warisan - nilai sama dengan nilai properti yang terkait dengan elemen induk.

14
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 3.2 – Float

Tindak lanjuti contoh berikut:

Berkas CSS

.img{
floating:kiri;
lebar:15%;
}
p{
ukuran-font:20px;
margin-top:0px;
}

Arsip HTML
1<!doctype HTML>
2<html>
3 <head>
4 <meta charset="ufo-8">
5 <title>HTML5 Fundamentos - CSS</title>
6 <link type="text/css" href="css/[Link]" rel="StyleSheet"/>
7 </head>
8 <body>
9 <main role="main">
10 <img src="images/[Link]" alt="Logo HTML5" id="imagem">
11 <p>Teks utama</p>
12 </main>
13 </body>
14<html>

15
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 3.2 - Float

Lihat hasil yang diperoleh:

Teksutama

Jika kami tidak menggunakan atribut float dalam contoh sebelumnya, hasil yang diperoleh
akan menjadi sebagai berikut::

Teksutama

16
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 4 – Mendefinisikan Lapisan

Beberapa elemen blok seperti section, div, article, dan lain-lain, menawarkan
atribut yang memungkinkan mendefinisikan lapisan yang akan digunakan dalam pembangunan
atur tata letak halaman.

Lihat, berikut ini adalah atribut-atribut tersebut:

id:Permitedeterminarcomoacamada será identificada;

class: Memungkinkan untuk menentukan kelas mana yang sudah dideklarasikan dalam file CSS harus menjadi

aplikasi

z-index: Diizinkan untuk menentukan tingkat penumpukan;

visibility:Permite determinar a visibilidade da camada. Os valores que

dapat digunakan oleh atribut ini adalah sebagai berikut: visible, inherit dan
tersembunyi.

Atribut z-index, yang bertujuan untuk mengatur prioritas dari

visualisasi elemen, hanya berfungsi dengan elemen yang telah
dikonfigurasi dengan posisi absolut, yang berarti bahwa mereka adalah
elemen yang properti posisinya diatur sebagai [Link]
menekankan bahwa semakin besar nilai atribut z-index, semakin tinggi prioritasnya
visualisasi elemen. Misalnya, elemen yang memiliki z-index: 5
temprioridadesobreumelementoquepossuiz-index:3.

17
 Pemposisian, dimensi dan lainnya
elemenHTML5danCSS3

Bab 4 - Mendefinisikan Lapisan

Observeoexemploaseguir:

Arsip CSS
.posicao{
posisi:absolute;
lebar:170px; tinggi:100px;
font-family:arial;
ukuran-font:16px;
font-weight:bold;
}
#branca{
atas:140px;kiri:100px;
background-color:#ffffff;height:100px;
border:solid;3px;#000;
z-index:4;
}

#biru{
atas:100px; kiri:60px;
warna latar belakang:#0066ff;
border:solid;3px;#000;
z-index:3;
}

#jeruk{
atas:60px; kiri:20px;
warna-latar: #ff0;
border:padat;3px;#000;
z-index:2;
}

#fundo{
atas:20px; kiri:5px;
lebar:300px;tinggi:250px;
warna-latar: #eee;
border:solid;3px;#000;
z-index:1;
}

18
 Posisi, dimensi dan lainnya
elemenHTML5danCSS3

Bab 4 – Mendefinisikan Lapisan

Arsip HTML
1<!doctype HTML>
2<html>
3 <head>
4 <meta charset="ufo-8">
5 <title>HTML5 Fundamentos - CSS</title>
6 <link type="text/css" href="css/[Link]" rel="StyleSheet"/>
7 </head>
8 <body>
9 <main role="main">
10 <div id="amarela">Div - oranye</div>
11 <div id="azul">Div - biru</div>
12 <div id="branca">Div - putih</div>
13 <div id="fundo">Div - latar belakang</div>
14 </main>
15 </body>
16<html>

Vejaoresultado obtido:

Div - dana
Div - dana
Div - laranja
Div - azul
Div - putih

Dalam contoh ini, kita memiliki penempatan beberapa lapisan.

Maaf, beberapa tumpang tindih telah terjadi.
19
 Posisi, dimensi dan lainnya
elementos deHTML5eCSS3

Bab 5 – Mendefinisikan cara penyajian elemen

Atributo display memungkinkan untuk menentukan apakah elemen harus ditampilkan dan, jika perlu
deva, memungkinkan untuk menentukan cara penyajiannya. Nilai-nilai yang dapat ...
digunakan sebagai atribut tampilan adalah sebagai berikut:

Nilai Deskripsi

Tentukan bahwa elemen tersebut ditampilkan sebagai sebuah

meja tabel, di mana ada perubahan baris baik sebelum dari
elemen berapa setelah dia.

Tentukan bahwa elemen tersebut disajikan sebagai

item-daftar item dari daftar.

Tentukan bahwa elemen tersebut ditampilkan tanpa bahwa

dalam garis haja mudança de linha.

Tentukan bahwa elemen tersebut ditampilkan sebagai sebuah

blok elemen blok, dan, berbeda dengan item sebelumnya,
ada jeda baris sebelum dan setelah item.

tidak ada Tentukan agar elemen tidak ditampilkan.

20
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 5 – Mendefinisikan cara penyajian elemen

Contoh yang dijelaskan berikut memungkinkan untuk memahami dengan baik penggunaan
dua nilai yang baru saja didefinisikan:

Berkas CSS
.linha{display:inline; }

Arsip HTML
1<!doctype HTML>
2<html>
3 <head>
4 <meta charset="ufo-8">
5 <title>HTML5 Fundamentos - CSS</title>
6 <link type="text/css" href="css/[Link]" rel="StyleSheet"/>
7 </kepala>
8 <body>
9 <main role="main">
10 <p class="linha">PARAGRAF 1 * UNTUK MENGUJICOBA ATRIBUT DISPLAY</p>
11 <p class="linha">PARAGRAFO 2 * UNTUK PENGUJIAN ATRIBUT DISPLAY</p>
12 <p class="linha">PARAGRAF 3 * UNTUK UJI ATRIBUT DISPLAY</p>
13 </main>
14 </body>
15<html>

Hasil yang dihasilkan akan sebagai berikut:

PARAGRAFO 1 * PARATESTE DO ATRIBUTO DISPLAY PARAGRAFO 2 * PARATESTE

DO ATRIBUTO DISPLAY PARAGRAFO 3 * UNTUK UJI ATRIBUT DISPLAY

21
 Posisi, dimensi, dan lainnya
elemenHTML5danCSS3

Bab 6 –Tabindex

Melalui atribut ini, kita dapat menentukan urutan navigasi sepanjang

semua elemen yang ada dalam dokumen HTML5, seperti tautan dan elemen
formulário. Tanpa penggunaan detabindex, pengguna akan dipaksa untuk menjelajahi semua ini
elemen sesuai dengan urutannya dan bagaimana mereka muncul dalam kode.

Adalah mungkin untuk menentukan indeks tabulasi di bilah navigasi, di

elemen-elemen yang termasuk dalam formulir atau item lain yang merupakan bagian dari kode
XHTML. Agar indeks tabulasi ditentukan dalam sebuah field formulir dan
misalkan, kita harus menggunakan sintaksis sebagai berikut:

<input type="emai" id="login" tabindex="1"/>

22
 Posisi, dimensi dan lainnya
elementos deHTML5eCSS3

Bab 7 - Jenis Media

Beberapa gaya hanya dapat diterapkan dalam beberapa situasi khusus seperti,
misalnya, penggunaan jenis font tertentu segera setelah seorang pengguna
meminta pencetakan halaman. Melalui jenis media (juga disebut
tipe media), sebuah file CSS dapat dibuat hanya untuk satu acara di
tertentu.

Lihat apa saja jenis-jenis media utama untuk diterapkan dalam lembar gaya CSS:

Memungkinkan definisi gaya untuk semua jenis media;

Gaya ditentukan untuk sintetis suara;

braille: Memungkinkan penerapan definisi untuk teks dalam braille;

diekspresikan: Memungkinkan pencetakan pada printer yang dirancang khusus untuk membaca braille;

handheld: Gaya ditentukan untuk perangkat mobile genggam, seperti

ponsel

Memungkinkan penerapan gaya untuk pencetakan halaman di kertas;

proyeksi: Gaya ditentukan untuk presentasi halaman dalam sebuah

proyektor;

screen:Permite que os estilos sejam utilizados para que a página seja exibida
di layar komputer;

tty: Gaya diterapkan untuk presentasi halaman di terminal dengan

sedikit sumber daya;

tv:Permite a exibição da página em uma tela de TV.

23
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 7 - Jenis Media

Melalui aturan @media, adalah mungkin untuk menerapkan berbagai properti terkait dengan
berbagai jenis media dalam satu lembar gaya. Pada contoh berikut, kita memiliki sebuah
demonstrasi aturan ini: halaman akan diformat untuk dicetak di atas kertas dan
eksposisikan di layar. Untuk memulai, file .css akan dibuat:

@mediaprint{
.midia{
font-family:arial;
ukuran-font:11px;
color:black;
teks-berdiri:kiri;
}
}
@media hanya layar dan (maks-width:480px){
.midia{
font-family:arial;
ukuran-font:13px;
warna:merah;
teks-rata:kiri;
}
}

Dalam contoh sebelumnya, kita memiliki satu gaya dengan warna hitam untuk printer dan satu gaya lainnya.
untuk perangkat yang memiliki lebar maksimum 480px.

24
 Posisi, dimensi, dan yang lainnya
elemen HTML5 dan CSS3

Bab 7 - Jenis Media

Untuk melakukan tes ini, kita dapat menggunakan fungsi ubah ukuran dari browser.
Perhatikan bahwa dengan jendela yang sepenuhnya terukur, kami melampaui nilai dari
480px lebar, logo, oestilonão tidak akan diterapkan:

Jenis Media-menguji atribut @media

Sekarang, ketika jendela peramban diubah ukuran menjadi resolusi di bawah 480px,
oestiloéaplicado

Tipe Media-menguji atribut @media

25
 Posisi, dimensi, dan lainnya
elementos deHTML5eCSS3

Bab 7 - Jenis Media

Layout situs web dariFakultas Impacta Teknologigunakan sumber daya ini, yang adalah
disebut Desain Web Responsif, atau hanya Tata Letak Responsif:

Mengurangi dimensi jendela, misalnya, saat digunakan di tablet, kami menyadari bahwa
spanduk utama akan menghilang:

26
 Posisi, dimensi dan lainnya
elemen HTML5 dan CSS3

Bab 7 – Jenis Media

Ecomatelautilizada untuk smartphone:

27
 Bibliografi

•BRUSCAGIN, Henrique Thomaz; OLIVEIRA, Luiz Fernando; SOUZA, Roque Fernando Marcos.

HTML 5 Fundamentos (daring). Techno Edition Editora Ltda. – September 2014, São Paulo.

•Karya turunan dari karya asli HTML 5 Fundamentos. SANTOS, Glaucio Daniel Souza.

Techno Edition Editora Ltda. – Juli 2013, São Paulo.

28
 Kredit

Konten Glaucio Daniel Souza Santos, Henrique

Thomaz Bruscagin, Luiz Fernando Oliveira,
Roque Fernando Marcos Souza
Arah, Adaptasi, dan Tinjauan Adam Junqueira
Konsultasi Wilson Divino, Ednilson Gomes
Diagramaasi André Luiz Ribeiro
Tinjauan Umum Bruno Saes
Direktorat Jenderal Miro Brito

Grupo Impacta • Pemasaran • Februari 2015