This repository has been archived by the owner on Jul 6, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
executable file
·961 lines (806 loc) · 51.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Mosaicode</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- Temporary navbar container fix -->
<style>
.navbar-toggler {
z-index: 1;
}
@media (max-width: 576px) {
nav>.container {
width: 100%;
}
}
</style>
</head>
<body class="index" id="page-top">
<!-- Navigation -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-light" id="mainNav">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false" aria-label="Toggle navigation">
Menu <i class="fa fa-bars"></i>
</button>
<div class="container">
<img hspace="10px" src="media/logo64.ico" width="100">
<a class="navbar-brand" href="#page-top">Mosaicode</a>
<div class="collapse navbar-collapse" id="navbarExample">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#video">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#publications">Publications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#members">Members</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#documentation">Documentation</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container">
<div class="intro-text">
<img src="media/logo.png" width="400">
<span class="name">Mosaicode</span>
<hr class="star-light">
<span class="skills">Visual Programming Environment</span>
</div>
</div>
</header>
<!-- About Section -->
<section id="about">
<div class="container">
<h3 class="text-center">About</h3>
<hr class="star-primary">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<p>Mosaicode is a visual programming environment that aims to meet the specific demands of the field of Digital Arts and generate applications for this field.</p>
</div>
<div class="col-lg-4">
<p>It is aimed that this tool will help artists to develop their work in a simple and practical way.</p>
</div>
</div>
</div>
</section>
<!-- Video Grid Section -->
<section class="success" id="video">
<div class="container-fluid">
<h3 class="text-center">Video</h3>
<hr class="star-light">
<div id="carousel-video-section" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-video-section" data-slide-to="0" class="active"></li>
<li data-target="#carousel-video-section" data-slide-to="1"></li>
<li data-target="#carousel-video-section" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/-EhAwKlYJhY"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"
style="height: 95% !important;"></iframe>
</div>
</div>
<div class="carousel-item active" >
<div class="embed-responsive embed-responsive-16by9">
<video style="height: 95% !important;" controls>
<source src="media/sbsoft-2018.mp4" type="video/mp4" >
</video>
</div>
</div>
<div class="carousel-item" >
<div class="embed-responsive embed-responsive-16by9">
<video style="height: 95% !important;" controls>
<source src="media/lab-alice-01.mp4" type="video/mp4" >
</video>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-video-section" data-slide="prev">‹</a>
<a class="right carousel-control" href="#carousel-video-section" data-slide="next">›</a>
</div>
</div>
</section>
<!-- Publications Grid Section -->
<section id="publications">
<div class="container">
<h3 class="text-center">Publications</h3>
<hr class="star-primary">
<div id="accordionPublications" role="tablist" aria-multiselectable="true">
<!-- Publication 9 -->
<div class="card">
<div class="card-header" role="tab" id="headingP9" idCollapse="#collapseP9">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
SOUND DESIGN COM O MOSAICODE (MONOGRAPH 2017)
</a>
</b><h7>
</div>
<div id="collapseP9" class="collapse" role="tabpanel" aria-labelledby="headingP9">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Sound Design com o Mosaicode</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Luan Luiz Gonçalves</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
The music has been influenced by digital technology over the last few decades, providing
the creation of new electronic instruments and new ways of music making.
With the computer, the musical composition could tresspas the human limitations and
analogical instruments, requiring musicians and composers computer programming knowledge
for the development of musical applications. In order to simplify
the creation of musical applications, this work presents the construction of a set
of blocks for audio applications in the Mosaicode programming environment, simplifying Sound Design and making the synthesis and manipulation of audio more
accessible to digital artists. This construction resulted in a Visual Programming
Language (VPL) and libmosaic-sound library, both for the specific domain of Music
Computing.
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">Mosaicode; libmosaic-sound; Library; VPL; DSL; Computer Music; Digital Art.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="http://ieeexplore.ieee.org/document/8114438/" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/SoundDesign-Mosaicode.pdf')">Article</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/SoundDesign-Mosaicode.txt')">Bibtex</button>
</dt>
</div>
</div>
<!-- END Publication 9 -->
<!-- Publication 8 -->
<div class="card">
<div class="card-header" role="tab" id="headingP8" idCollapse="#collapseP8">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
FROM VIRTUAL REALITY TO DIGITAL ARTS WITH MOSAICODE (SVR 2017)
</a>
</b><h7>
</div>
<div id="collapseP8" class="collapse" role="tabpanel" aria-labelledby="headingP8">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">From Virtual Reality to Digital Arts with Mosaicode</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Flávio Luiz Schiavoni</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Luan Luiz Gonçalves</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
Visual programming languages (VPL) simplifies the process of writing a program by letting users create programs through manipulation of graphical elements. Many VPLs focuses on a single domain, simplifying some complicated concepts of a General Purpose
Language (GPL), being called Domain Specific Language (DSL). In Digital Art, PureData and EyesWeb are examples of VPLs that allow artists to do advanced projects with basic programming skills. In this paper, we introduce
Mosaicode, a Visual Programming Environment to Digital Art domain, presenting some features of digital art and possibilities to implement these features in our VPL.
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">
Virtual Reality; Digital Arts; Mosaicode; VPL; DSL.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="http://ieeexplore.ieee.org/document/8114438/" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/VR-DigitalArts-Mosaicode.pdf')">Article</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/VR-DigitalArts-Mosaicode.txt')">Bibtex</button>
</dt>
</div>
</div>
<!-- END Publication 8 -->
<!-- Publication 7 -->
<div class="card">
<div class="card-header" role="tab" id="headingP7" idCollapse="#collapseP7">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
WEB AUDIO APPLICATION DEVELOPMENT WITH MOSAICODE (SBCM 2017)
</a>
</b><h7>
</div>
<div id="collapseP7" class="collapse" role="tabpanel" aria-labelledby="headingP7">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Web Audio application development with Mosaicode</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Flávio Luiz Schiavoni</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Luan Luiz Gonçalves</dd>
<dd class="col-sm-9 offset-sm-3 text-justify"> André Lucas Nascimento Gomes</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
The development of audio application demands a high knowledge about this application domain, traditional programming logic and programming language. It is possible to use a Visual Programming Language to ease the application development, including experimentations
and creative exploration of the Language. In this paper we present a Visual Programming Environment to create Web Audio applications called Mosaicode. Different from other audio creation platforms that use visual approach,
our environment is a source code generator based on code snippets to create complete applications.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="http://compmus.ime.usp.br/sbcm/2017/assets/SBCM2017Proceedings.pdf" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/WebAudio-Mosaicode.pdf')">Article</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/WebAudio-Mosaicode.txt')">Bibtex</button>
</dd>
</dd>
</dt>
</div>
</div>
<!-- END Publication 7 -->
<!-- Publication 6 -->
<div class="card">
<div class="card-header" role="tab" id="headingP6" idCollapse="#collapseP6">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
EMPACOTAMENTO DE SOFTWARE: O CASO DA FERRAMENTA HARPIA (XXIV SIC)
</a>
</b><h7>
</div>
<div id="collapseP6" class="collapse" role="tabpanel" aria-labelledby="headingP6">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Empacotamento de software: O caso da ferramenta Harpia</dd>
<dt class=" col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Carlos Magno Geraldo Barbosa</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Flávio Luiz Schiavoni</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
Empacotamento de software é uma etapa essencial no desenvolvimento e na distribuição de uma ferramenta. Portanto, esta pesquisa teve como seu principal objetivo realizar um estudo sobre empacotamento de software e aplicar este conhecimento no processo
de empacotamento da ferramenta Harpia / Mosaicode. Este trabalho possui como objetivos secundários discutir questões iniciais relacionadas a distribuição e resolução de dependências de software.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="https://ufsj.edu.br/ntinf/cpc_anais.php" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/Empacotamento-Harpia.pdf')">Article</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/Empacotamento-Harpia.txt')">Bibtex</button>
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">
Empacotamento de Software; Seminário de Iniciação Cientifica; Mosaicode.
</dd>
</dt>
</div>
</div>
<!-- END Publication 6 -->
<!-- Publication 5 -->
<div class="card">
<div class="card-header" role="tab" id="headingP5" idCollapse="#collapseP5">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
PERCEPÇÃO MUSICAL APOIADA POR COMPUTADOR: ALÉM DAS ALTURAS E TEMPOS (XXIV SIC)
</a>
</b><h7>
</div>
<div id="collapseP5" class="collapse" role="tabpanel" aria-labelledby="headingP5">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Percepção musical apoiada por computador: além das alturas e tempos</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Luan Luiz Gonçalves</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Flávio Luiz Schiavoni</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
Este artigo apresenta a proposta de desenvolver uma ferramenta de treinamento de percepção musical baseada em atributos sonoros. O desenvolvimento da ferramenta é pensado de forma a possibilitar a expansão da mesma, de forma que os usuários possam criar
seus próprios exercícios de percepção musical. Para facilitar a criação dos exercício foi definido um conjunto de blocos para a ferramenta Mosaicode que gera código em Javascript baseados na API Web Audio. Por ser um ambiente
de Programação Visual para domínios específicos, o Mosaicode torna mais acessível a criação de novos exercícios.
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">
Percepção Musical; Treinamento; Aplicação Web; Mosaicode.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="https://ufsj.edu.br/ntinf/cpc_anais.php" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/PercepcaoMusical-Computador.pdf')">Article</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/PercepcaoMusical-Computador.txt')">Bibtex</button>
</dd>
</dt>
</div>
</div>
<!-- END Publication 5 -->
<!-- Publication 4 -->
<div class="card">
<div class="card-header" role="tab" id="headingP4" idCollapse="#collapseP4">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
SUPORTE A PLUGINS PARA A FERRAMENTA HARPIA (XXIV SIC)
</a>
</b><h7>
</div>
<div id="collapseP4" class="collapse" role="tabpanel" aria-labelledby="headingP4">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Suporte a plugins para a ferramenta Harpia</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Lucas Geraldo Silva Cruz</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Daniel Luiz Alves Madeira</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
A necessidade constante de atualização e desenvolvimento de melhorias em um aplicativo faz com que seu desenvolvimento seja pensado de forma a prever atualizações, as quais podem ser feitas por meio de plugins. Neste cenário, este projeto teve como onjetivo
dar continuidade ao projeto Harpia inicialmente desenvolvido pelo grupo de pesquisa S2i da Universidade Federal de Santa Catarina, aprovado dentro do edital CT-INFO 2003 - Software Livre da FINEP, acrescentado a ele a funcionalidade
de suporte a plugins. Como a capacidade de suportar novos plugins, abriu-se a possibilidade de que novas funcionalidades pudessem ser acrescentadas ao software pelos próprios usuários do mesmo, de forma simples e fácil.
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">
Plugins; Harpia; Atualização de Software.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="https://ufsj.edu.br/ntinf/cpc_anais.php" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/RESUMO_Suporte-Plugins-Harpia.pdf')">Abstract</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/RESUMO_Suporte-Plugins-Harpia.txt')">Bibtex</button>
</dd>
</dt>
</div>
</div>
<!-- END Publication 4 -->
<!-- Publication 3 -->
<div class="card">
<div class="card-header" role="tab" id="headingP3" idCollapse="#collapseP3">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
TESTES DE SOFTWARE EM TEMPO REAL PARA O AMBIENTE HARPIA (XXIV SIC)
</a>
</b><h7>
</div>
<div id="collapseP3" class="collapse" role="tabpanel" aria-labelledby="headingP3">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Testes de Software em tempo real para o ambiente Harpia</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Lucas Júnio Calsavara Andrade</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Flávio Luiz Schiavoni</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
O desenvolvimento de um software exige certa cautela para que todos os requisitos necessários sejam atendidos de acordo com a documentação proposta. Porém, na busca pela objetivo dado, é de se esperar que aconteçam erros, o que implica no acometimento
de defeitos e falhas incisos no software. Embora, em alguns casos possam ser imperceptíveis ao usuário final, em uma futura manutenção desse os erros e falhas não tratados podem ocasionar em diversos problemas. O trabalho
proposto expõe a fundamentalidade de testes de software na manutenção do ambiente Harpia, posteriormente renomeado a Mosaicode. A priori, foi desenvolvido testes sob a linguagem Python visando o encontro de pequenos erros.
Em seguida, de forma a abranger a eficácia dos testes, aplica-se um framework para a análise de cobertura destes (Coverage) sobre o código em desenvolvimento de forma a ressaltar pontos não tratados. Apesar dos erros encontrados
e devidamente tratados, ressalta-se que os testes são completamente mutáveis à medida que o software é desenvolvido.
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">
Mosaicode; Testes de Software; Testes Unitários.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="https://ufsj.edu.br/ntinf/cpc_anais.php" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/RESUMO_TestesSoftware-Harpia.pdf')">Abstract</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/RESUMO_TestesSoftware-Harpia.txt')">Bibtex</button>
</dd>
</dt>
</div>
</div>
<!-- END Publication 3 -->
<!-- Publication 2 -->
<div class="card">
<div class="card-header" role="tab" id="headingP2" idCollapse="#collapseP2">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
ANÁLISE DE REFATORAÇÃO DA FERRAMENTA HARPIA (XXIV SIC)
</a>
</b><h7>
</div>
<div id="collapseP2" class="collapse" role="tabpanel" aria-labelledby="headingP2">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Análise de Refatoração da ferramenta Harpia</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Valney de Paiva Faria</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Dárlinton Barbosa Feres Carvalho</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
A ferramenta Harpia foi criada com o intuito de facilitar a geração de códigos de software. Sua criação foi realizada na UFSC, mas que acabou sendo abandonada após o término do projeto, sendo disponibilizada na web a versão estável 1.0 de 2009. Recentemente,
o Prof. Flávio Schiavoni da UFSJ retomou seu desenvolvimento juntamente com outros professores e alunos. Além de atualizar o código de modo a satisfazer as evoluções das bibliotecas utilizadas, também já estão sendo incluídas
novas funcionalidades. A interface foi totalmente refeita, as estruturas de geração de código remontadas, a usabilidade foi aprimorada, alguns recursos foram ativados e outros desativados, e isso levou a uma ferramenta
mais rápida, mais limpa e de manutenção facilitada. O objetivo deste projeto é analisar o processo de refatoração em busca de uma reflexão e aprendizados interessantes para a comunidade. Um dos passos mais importantes para
a reforma no código da ferramenta Harpia, foi o processo de refatoração. Dividido em duas partes, o processo consistiu em analisar cada linha do código por meio de ferramentas automatizadas e elaborar um estudo sobre os
resultados coletados. Estas ferramentas foram obtidas por meio de uma busca a web. As ferramentas utilizadas são capazes de ler todo o código, identificar anomalias e erros, e gerar um relatório contendo a posição exata
dos problemas encontrados e costumeiramente, sugerem possíveis soluções para os problemas. Uma delas, a ferramenta AutoPEP8, é capaz de adequar o código, automaticamente, às diretrizes de programação formal em Python, o
PEP8. Mais uma vez, as comunidades online foram aqui de grande valia para o entendimento dos problemas encontrados, possíveis soluções, modo de uso da ferramenta e até como corrigir os erros encontrados no código. Cada
ferramenta foi encontrada em sites especializados, alguns com foco na linguagem Python, outros em desenvolvimento confiável de código e algumas, em sites de distribuição de ferramentas open-source.
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">
Geração de códigos; Refatoração; Ferramentas automatizadas; PEP8.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="https://ufsj.edu.br/ntinf/cpc_anais.php" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/RESUMO_Analise-Refatoracao-Harpia.pdf')">Abstract</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/RESUMO_Analise-Refatoracao-Harpia.txt')">Bibtex</button>
</dd>
</dt>
</div>
</div>
<!-- END Publication 2 -->
<!-- Publication 1 -->
<div class="card">
<div class="card-header" role="tab" id="headingP1" idCollapse="#collapseP1">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
PROGRAMAÇÃO MUSICAL PARA A WEB COM O MOSAICODE (XXVII ANPPOM)
</a>
</b><h7>
</div>
<div id="collapseP1" class="collapse" role="tabpanel" aria-labelledby="headingP1">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Programação musical para a web com o Mosaicode</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Flávio Luiz Schiavoni</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Luan Luiz Gonçalves</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
Este artigo apresenta um ambiente de programação visual para a criação de aplicações musicais. Estas aplicações musicais são baseadas na API webaudio e funcionam em navegadores da Internet. A ferramenta em questão utiliza a programação por blocos e conexões
e gera código de aplicações baseado em seus diagramas.
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">
Code generation; Visual Programming Environment; Webaudio.
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="http://www.anppom.com.br/congressos/index.php/27anppom/cps2017/schedConf/presentations" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/ProgramaçãoMusicaWeb-Mosaicode.pdf')">Article</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/ProgramaçãoMusicaWeb-Mosaicode.txt')">Bibtex</button>
</dd>
</dt>
</div>
</div>
<!-- END Publication 1 -->
<!-- Publication 0 -->
<div class="card">
<div class="card-header" role="tab" id="headingP0" idCollapse="#collapseP0">
<b><h7 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="" aria-expanded="true">
USABILITY TESTING OF MOSAICODE SYSTEM (SBSI 2017)
</a>
</b><h7>
</div>
<div id="collapseP0" class="collapse" role="tabpanel" aria-labelledby="headingP0">
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Title</dt>
<dd class="col-sm-9 text-justify">Teste de Usabilidade do Sistema Mosaicode</dd>
<dt class="col-sm-3 text-justify">Alternative Title</dt>
<dd class="col-sm-9 text-justify">Usability Testing of Mosaicode System</dd>
<dt class="col-sm-3 text-justify">Authors</dt>
<dd class="col-sm-9 text-justify">Flávio Luiz Schiavoni</dd>
<dd class="col-sm-9 offset-sm-3 text-justify">Luan Luiz Gonçalves</dd>
<dt class="col-sm-3 text-justify">Abstract</dt>
<dd class="col-sm-9 text-justify">
The Mosaicode System is a Visual Programming Environment that supports the development of applications on Digital Art and Virtual Reality domains. For this reason, this tool is characterized as a visual programming language and a specific domain language.
This work presents a usability test of this programming environment in order to evaluate how easy and eficient it is to use and learn it, basic features for these categories of programming languages. The tests also pointed
out suggestions of future modifications and an identification of system problems to be solved
</dd>
<dt class="col-sm-3 text-justify">Keywords</dt>
<dd class="col-sm-9 text-justify">
Mosaicode, VPL, DSL, Usability Testing, HCI
</dd>
</dl>
<dl class="row mx-auto">
<dt class="col-sm-3 text-justify">Download</dt>
<dd class="col-sm-9 text-justify">
<button class="btn btn-primary" type="button" data-target="#navbarExample">
<a href="http://sbsi2017.dcc.ufla.br/download/wicsi.pdf" style="color:white">
Proceedings
</a>
</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/articles/TesteUsabilidade-Mosaicode.pdf')">Article</button>
<button class="btn btn-primary" data-target="#navbarExample" type="submit" onclick="window.open('./publications/bibtex/TesteUsabilidade-Mosaicode.txt')">Bibtex</button>
</dd>
</dt>
</div>
</div>
<!-- END Publication 0 -->
</div>
</div>
</section>
<section class id="members">
<div class="container">
<h3 class="text-center"> MEMBERS </h3>
<hr class="star-primary">
<h4 class="text-center card-header" style="color: #18bc9c">
CURRENT MEMBERS</h4>
<div class="container">
<div class="row">
<div class="col-lg-4 offset-lg-2 my-4">
<ul class="list-unstyled">
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Avner Maximiliano</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/9540878384675406">Lattes</a>
<br><a href="https://github.com/avnermax" target="_blank">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">André Gomes</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/0762220978450376" target="_blank">Lattes</a>
<br><a href="https://github.com/andgomes95" target="_blank">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Flávio Schiavoni</h5>
Teacher
<br>UFSJ
<br><a href="http://lattes.cnpq.br/1259591090948385" target="_blank">Lattes</a>
<br><a href="https://github.com/flschiavoni" target="_blank">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Fred Resende</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/6452558884220881" target="_blank">Lattes</a>
<br><a href="https://github.com/frederr97" target="_blank">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Gabriel Lopes</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/9312567127659801" target="_blank">Lattes</a>
<br><a href="https://github.com/gbr-cdc" target="_blank">Github</a>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 my-4">
<ul class="list-unstyled">
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">José Mauro Sandy</h5>
Graduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/5849035895177823" target="_blank">Lattes</a>
<br><a href="https://github.com/jmsandy" target="_blank">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Luan Gonçalves</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/6417460072852293" target="_blank">Lattes</a>
<br><a href="https://github.com/llgoncalves" target="_blank">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Paulo Nunes</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/1652487371469843" target="_blank">Lattes</a>
<br><a href="https://github.com/Paulognc" target="_blank">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Rodrigo Araujo</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/3572175830606296">Lattes</a>
<br><a href="https://github.com/RodrigoRArauj" target="_blank">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/coffee.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Thiago Souto</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/6678601857973713" target="_blank">Lattes</a>
<br><a href="https://github.com/thiagosouto" target="_blank">Github</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<h4 class="text-center card-header" style="color: #18bc9c">Former Members</h4>
<div class="container">
<div class="row">
<div class="col-lg-4 offset-lg-2 my-4">
<ul class="list-unstyled">
<li class="media my-4">
<img class="mr-3" src="media/user.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Carlos Magno</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/6834558718626360" target="_blank">Lattes</a>
<br><a href="https://github.com/Exterminus">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/user.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Lucas Andrade</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/1083747665881376">Lattes</a>
<br><a href="https://github.com/lucasxaum">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/user.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Lucas Cruz</h5>
Undergraduate Student
<br>UFSJ
<br><a href=" http://lattes.cnpq.br/1457377562715354" target="_blank">Lattes</a>
<br><a href="https://github.com/Lucasgscruz">Github</a>
</div>
</li>
</ul>
</div>
<div class="col-lg-4 my-4">
<ul class="list-unstyled">
<li class="media my-4">
<img class="mr-3" src="media/user.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Roney Ribeiro</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/2693817221574436" target="_blank">Lattes</a>
<br><a href="https://github.com/ronesantos">Github</a>
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="media/user.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">Valney Faria</h5>
Undergraduate Student
<br>UFSJ
<br><a href="http://lattes.cnpq.br/8448041674461737" target="_blank">Lattes</a>
<br><a href="https://github.com/ValneyFaria">Github</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Documentation Section -->
<section class id="documentation">
<div class="container">
<h3 class="text-center">Documentation</h3>
<hr class="star-primary">
<div align="center">
<p>Documentation can be accessed by clicking on the link > <a target='doc' href="doc/build/html/index.html">Documentation</a></p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-6">
<h3>Keep in Touch</h3>
<p><i class="fa fa-envelope"></i> [email protected]</p>
</div>
<div class="footer-col col-md-6">
<h3>Follow Us</h3>
<a href="https://github.com/mosaicode/" target="_blank" title="Mosaicode Github"><i class="fa fa-github"></i> Mosaicode Github</a>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Mosaicode 2017
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top hidden-lg-up">
<a class="btn btn-primary page-scroll" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/tether/tether.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<!-- Custom scripts for this template -->
<script src="js/freelancer.min.js"></script>
<!-- Scripts for index.html -->
<script src="js/index.js"></script>
</body>
</html>