Melissa Serrao | Software Developer
Contact

E-Mail:   mserra17@fau.edu
Gmail ID:   mserra17faucs
Blogger:   www.melisbloggin.blogspot.com

Languages
Experienced in:
  • Java
  • Python
  • C/C++
  • C#
  • HTML/XHTML
  • CSS
  • JavaScript
  • jQuery
  • PHP/MySQL
  • SQL
IDEs
Experienced in:
  • Eclipse
  • JDeveloper
  • Oracle SQL Developer
  • IPython Notebook
  • Microsoft Visual Studio
  • Adobe Dreamweaver
  • Adobe Fireworks
School Status
Florida Atlantic University - Spring 2015
Classes
  • Advanced Algorithm Analysis
  • Web 2.0 Architectures & Algorithms
  • Web Mining
  • Directed Independent Study
Awards & Recognitions

Bachelor of Science in Computer Science, Summa Cum Laude

FAU Outstanding Academic Achievement Award

Upsilon Pi Epsilon Member

Links to Sample Work

  • Intro to Internet Computing Splash Page
    All projects Fall 2013

  • Siempre Bella Beauty Salon
    local business website

  • Northlake Washbowl
    local business website

    • Grade A Work
    • Current Projects
    A simple local business website bootstrapped to perfection.
    Combining Bootstrap with HTML5 and CSS3.

    HTML5 & CSS3 with Bootstrap

    Intro to Internet Computing

    This website was created as a project for an Intro to Internet Computing class.

    Bella Siempre Beauty Salon

    It demonstrates how the use of a framework such as bootstrap gives your site a modern and sleek look. By incorporating Bootstrap into the development of this site, I was able to optimize usability of the site on mobile devices; the layout remains sleek and consistent even when the window is resized or it is viewed on a tablet or smartphone.

    Learn more about BootStrap

    C# in Windows Foundation Presentation 3-D Canvas was used to Develop a 3-D photo viewer
    C# in Windows Foundation Presentation 3-D Canvas was used to Develop a 3-D photo viewer

    C# using Windows Presentation Foundation
    3-D Canvas

    Graphical Application Development

    Video Demonstration

    This program allows the user to add images to a cube rotating in a 3-D canvas. The user can add shapes to the 3-D canvas, change the background color, and stop the camera movement. The opacity of the color or images applied to the 3-D cube can be adjusted by a scrollbar placed inside the stackpanel on the left side of the application. When the user adds random shapes to the canvas, the Vector 3D Position of the shape is limited to a random number in between -10 and +10 to keep the objects around the center rotating cube. If you have never worked with any type of 3-D modeling before, then working with WPF's 3-D canvas takes a little getting used to.

    AJAX, jQuery, HTML5, CSS3, PHP/MySQL
    AJAX, jQuery, HTML5, CSS3, PHP/MySQL

    A Car Ordering Site
    Using AJAX, jQuery, HTML5, CSS3, PHP/MySQL

    Intro to Internet Computing

    This project's requirements were to create a website where something could be "ordered" and each field had to be dependent on the previous field. Each field is retrieved from the MySQL database. PHP was used for the database scripting; AJAX and jQuery were used to update each option field. To complete this project I used Dreamweaver, XAMP, and MyPhpAdmin on the localhost on my local machine for development; Once everything was complete I used putty to connect to FAU's LAMP server and WinSCP to transfer the files to my webspace on FAU's server, allowing me to connect and use their database.

    Order your car now


    Customize your own dashboard
    JavaScript was used to change CSS properties and add elements to the DOM

    Dashboard Customization
    with JavaScript, jQuery and CSS3

    Intro to Internet Computing

    This class project was created to demonstrate the use of JavaScript to manipulate the DOM and CSS properties. The site allows the user to customize certain aspects of a simple dashboard such as their name, and background color. The user is also given a list of widgets which they can add to their dashboard. jQuery was used to make the widgets draggable and minimizable in the customized dashboard.

    Create your own custom dashboard

    A demonstration of the graphical capabilities available by using HTML5 and JavaScript.
    A demonstration of the graphical capabilities available by using HTML5 and JavaScript.

    HTML5 & JavaScript

    Graphical Application Development

    This was a demonstration of some of the graphical capabilities available with the HTML5 canvas. HTML5 was used to rotate and transform text, shapes, and images. Javascript was used for the interactivity, as well as the animation and slideshow timer. The only CSS used was for the button styles. The JavaScript file has an onload event handler which sets the canvas width and height relative to the dimensions of the user's inner window. From there, everything was drawn or positioned relative to these dimensions. The purpose of this was to demonstrate the great accessibility that HTML5 offers, this site can be viewed from any device.

    Using HTML5 & Javascript in Graphical Application Development - Check it out for yourself

    Linux on Ubuntu - Running on a Virtual Machine
    Linux on Ubuntu - Running on a Virtual Machine

    C/C++ - Ubuntu Linux

    Operating Systems

    While learning about the basic elements of operating systems I got a lot of practice using a virtual machine. Most of the projects were Linux based and by using Oracle's VM VirtualBox I created them using a Unix shell on Ubuntu. I set the VirtualBox up on my local machine and loaded the Ubuntu OS. I ran many Unix Shell Scripts from here throughout the semester.
    I used common Unix commands creating projects like a pipe application to redirect processes and a multithreaded summing application using the Pthreads library. Additionally I implemented that same summing program with a thread pool (without using any thread pool library.)

    Use C# in Windows Foundation Presentation 2-D Canvas to Develop an Interactive Software to Create Art
    Use C# in Windows Foundation Presentation 2-D Canvas to Develop an Interactive Software to Create Art

    C# using Windows Presentation Foundation
    2-D Canvas

    Graphical Application Development

    This program was created for a class assignment: Create software that an adult can use to interactively create art. The program has many features such as importing pictures and shapes into your canvas with effects applied to the graphics. It is a tabbed canvas, with one of the tabs being an ink canvas allowing the user to draw freehand. There is a save feature so the user can save the art they create. The interface was setup using a toolbar across the top and a stackpanel along the left side both filled with buttons and sliders. The alpha channel of an applied color is controlled by a slider in the stack panel; with intervals set at ScrollBar.LargeChange = .01 & ScrollBar.SmallChange = .001 the artist can adjust the opacity, draw some shapes, and create some really neat affects.

    Local Business Website created by Melissa Serrano
    Local Business Website created by Melissa Serrano

    HTML, CSS, Javascript

    SEO & Social Media Marketing

    Website Devlopment

    www.NorthlakeWashbowl.com

    The Norhtlake Washbowl is a laundrymat that wanted to modernize the promotion of the coin laundry and drop-off services offered. The site was created using HTML, CSS, and JavaScript in Adobe Dreamweaver and Fireworks. Custom buttons with 3 states were created in Adobe Fireworks and then exported to HTML. The rollover image on the homepage was also created in Fireworks, then the image with it's slices were exported to Dreamweaver. Northlake Washbowl's website has applied SEO practices complete with a social media component.

    XYZ Database, a BST can quickly search many lines of text
    XYZ Database, a BST can quickly search many lines of text

    C++ XYZ Database

    Data Structures

    The XYZ Database uses a linked list to separate a text file by lines. The program isn't actually a database, but works as a sort of electronic index that keeps the list of text files being searched persistent. It then further separates those lines into words, each word being a BST (Binary Search Tree) node. The user can search the database, containing a number of text files, and search for a word; the program will return a list of every occurrence of the word along with the complete line and line number of it's location. There is also a query function which allows the user to enter an expression with logical operators to perform a more detailed search. This was achieved by using the set container class in the C++ Standard Template Library.

    Labs: Microprocessors
    Labs: Microprocessors
    Labs: Microprocessors
    Labs: Microprocessors

    Labs: Microprocessors

    Programming in Assembly Language

    In Intro to Microprocessors I learned to program in assembly language using the Motorola 68000 microprocessor. Easy68K was used to compile, assemble, and execute (emulate) 68000 programs on a PC. I then used FAU's microprocessor lab to test the program, running it on the actual 68000 board, using the lab's 68000 training kit. The final lab illustrated here, required a special supporting chip, the 68230 Parallel Interface and Timer(PIT). The 68000 board connects to the PIT, then the program reads 8-bit DIP switches from PIT's PortB which are used for pattern entry and control commands. The LEDs display an 8-bit pattern outputted from PIT's PortA. Each of the dip switches create a different pattern in which the LEDs are displayed.

    The Circle Game, a C++ circular linked list demonstration
    The Circle Game, a C++ circular linked list demonstration

    C++ Circle Game

    Data Structures

    The Circle Game is a demonstration of a singly linked circular list. We don't really know what game the players are playing, that's not important. What is important is that all the players are in a large circle, as in many games when the last participant plays the next turn goes back to the first player. When a new player joins the game they always sit in the position that gives them the next turn. The game, isn't really a game....no pretty user interface - The point of this application is to illustrate my ability to customize basic data structures. Although the C++ STL has a list container class, there may be times where it is necessary for a programmer to create their own data structure so that it may be customized to the needs of the application. The same game was also implemented as an array.

    Labs: Foundations of Computer Science
    Labs: Foundations of Computer Science
    Labs: Foundations of Computer Science

    Labs: Foundations of Computer Science

    C++ Programming

    In this lab, I completed weekly labs consisting of several experiments to implement the computer science fundamental being taught that week. One of the labs illustrated here is on recursion, where for several different scenarios, we compared the iterative implementation versus the recursive implementation. Most of the labs were completed using Miscrosoft Visual Studio 2010, in which we also completed a lab on debugging to understand setting up breakpoints, running in debug mode and debugging step by step, and Step Into versus Step Over. We also used Unix in one of the labs, where I logged into Unix, practiced some basic commands to manipulated files and directories, edited a file using pico, and compiled a C++ program using g++.









    Share FaceBook in CityVille Android App
    Share FaceBook in CityVille Android App

    Java

    Android Development with FaceBook integration

    As a directed independent study intended to gauge and increase STEM interest among middle school students, I enhanced an Android app to allow middle schoolers using the app during a 5-week summer camp to create a profile and share events reported in the CityVille Android App on FaceBook. I captured data in Parse.com like users, activities posted, and shares. So that student empowerment could later be analyzed. I also optimized usability by creating methods to handle compatibility with Google Map and Android OS updates.

    Check out the EmpowerMe on Github

    Twitter Trends
    Twitter Trends

    Python, GeoMaps

    Social Media Mining - Mining Twitter

    In my Social Media mining course I used IPython Notebook to get the Twitter trends for 5 locations of interest today, by using the countries WOEID. I used a modified version of pygmaps. This modified version enables the use of labels for the maps pinpoints. When the user hovers over the pinpoint I display the top 5 trending topics on Twitter for the area indicated by the pin point on the map.

    Check out the code in my IPython Notebook

    Census Data June 2015


    Census Data June 2015

    Python, GeoMaps

    Social Media Mining - Census Data Analysis

    In my Social Media mining course I used IPython Notebook to parse U.S. Census data from June 2015 and then display it on a GeoMap by income, education, and race.     U.S. Census Data Dictionary for June 2015 was downloaded from here. I extracted the data from this dictionary for the income, education, ethnicity and state. The U.S. Census Bureau documents this data as people have self-identified for each question on a Census survey. Then I displayed this information on a google GeoMap, displaying a visualization of the data on it's corresponding state from which it was recorded.

    Check out the code in my IPython Notebook


    HTML5 Offline Caching
    Offline Storage using WebSQL Database

    HTML5, CSS3, JavaScript, & WebSQL

    Offline Storage with HTML5
    AppCache & WebSQL Database

    Hit the site, then disconnect from the internet
    and see for yourself!

    This web application implements both WebSQL database and HTML5 AppCache. The WebSQL simply stores the data, I tested this implementation by loading a JSON file, parsing the data and inserting it into the database. While the WebSQL database holds the data, this data (or the web page itself) would not available if the internet connection is lost unless HTML5 AppCache is implemented. This is why implementing the AppCache is essential for implementing offline accessibility of a web application, it allowed me to define what to cache and be accessible offline in the manifest.appcache file.

    Advanced Algorithm Analysis
    Advanced Algorithm Analysis

    Java

    Advanced Analysis of Algorithms

    I created a program to illustrate the efficiency of an algorithm in this graduate level algorithm analysis course. To generate the comparison for Brute Force and KML pattern matching algorithms I tested Text (T) with a length of 100 up to 3000 in increments of 100. I also changed the length of the Pattern (P) accordingly such that P.length = T.length/10 and randomly chose the starting index of the pattern to be between 0 and n. I did 5 trials for each scenario and plotted the average time.

    Pattern Matching Efficiency Comparison Chart
    Theoretical Vs Simulation Run-Times
    Complete Analysis Report

    Check out the Java Source Code

    Analysis of Algorithms
    Analysis of Algorithms

    Java

    Analysis of Algorithms

    I created a program to illustrate the efficiency of an algorithm. The program ran several iterations of sorting the same set of random numbers using sorting algorithms such as insertion sort, merge sort, and quick sort. Each sort's execution time was measured in microseconds. The result of running the program demonstrates that even though quick sort has a theoretical run time of O(n2) it actually runs very fast in practice. I will continue my study of algorithm efficiency in my Graduate level Analysis of Algorithms course in Spring 2015.

    Sorting Efficiency Comparison Chart
    Theoretical Vs Simulation Run-Times

    Check out the Java Source Code


    Web Mining
    Web Mining

    Spam-Filtering with WEKA

    Web Mining

    I applied spam-filtering to a dataset using WEKA. Supplied with three folders (Normal, Spam, Test), which included normal emails, spam emails, and test messages (with known labels in a result.txt file). I also used skip_words.txt which listed words that could be ignored when building the learning model. I used WEKA's NaiveBayesMultinonial classifier, then used the TextDirectoryLoader in the Weka SimpleCLI to convert all the files to .arff format and then applied the StringtoWordVector filter. I also compared 0/1 occurrence vs. word frequency representation model. My results showed that the 0/1 occurrence classification produced more accurate results.

    0/1 Occurence Vs Word Frequency

    I also created a simple Preferential Web Crawler in this course
    Check out the Java Source Code

    NightOwl App - A Gryphon Media Project


    NightOwl App - A Gryphon Media Project

    HTML/XHTML, CSS, JavaScript, PHP, Java

    Software Engineering

    Gryphon Media Group:
    Melissa Serrano, Busra Demirci, Pierre-Michel Denis,
    Jebin Shakya, Marlow Charite, Keith Haizlett

    Software Engineering EXPO Brochure
    Summer 2013

    The Nightowl App was created by the Gryphon Media team during the Summer 2013 semester for our group project in Software Engineering. As a team we created the Nightowl App to improve the current Nightowl Transportation Service offered at Florida Atlantic University's Boca Raton Campus. The user of the service will be able to download the app and request a ride from any Android device, the Nightowl dispatcher will be able to view a list of ride requests from the web admin control.

    Pearson Coding Competition
    Pearson Coding Competition

    Pearson Coding Competition

    Efficacy in Education

    September 1st 2014 - January 28th 2015

    The overall concept of Significantly Notable is to encourage note-taking during lectures, provide an accurate and concise set of notes on a topic, and allow instructors the opportunity to see what lecture material was conveyed well and what topics students did not understand clearly.

    Check out the details of the 2014 Pearson Coding Competition

    Here's the Wire Frame For The Significantly Notable App


    Melissa Serrano's Portfolio - This site!
    Melissa Serrano's Portfolio - This site!

    HTML5, CSS3, JavaScript, & jQuery

    My Portfolio - This page!

    This site was created so that, through the completion of my studies at FAU and as I begin to enter the job market, I could have an easily accessible medium to display my projects for anyone interested. The accordion and tabs were created using Spry Widgets, which seems to be a dieing technology. While creating this project I had some desires to apply some customization to the Spry widgets, in my searching I found that in the most recent versions of Adobe Dreamweaver all widgets will be jQuery based - no more Spry support. The scrollable display that shows all the different projects as well as each overlay was created by using jQuery Tools. There are some touches of CSS3 in the accordion with it's rounded corners. The overlays also have a box shadow and rounded corners which are implemented with CSS3.

    All projects and assignments for Intro to Intertnet Computing
    All projects and assignments for Intro to Intertnet Computing

    HTML5, CSS3
    JavaScript, jQuery, AJAX
    PHP, MySQL

    Intro to Internet Computing - Splash Page

    This site is a link to all the projects I created during the semester of Fall 2013 in Intro to Internet Computing. To create the sites a variety of programming languages and web technologies were used. Bootstrap was used to make this simple site look sleek and modern. In addition to the projects already listed on this portfolio this site links to some "fun" assignments like a google blogger site and a yahoo pipes site. Additionally there is a link to the final project for the class (which is not listed here on my portfolio); the task was to "fix" and add features to a badly written social media site. Although not really an original project of mine, it gave me experience on pickin up the pieces of someone elses code and extensively multiple tables throughout a MySQL database.

    Quick and Easy Document Services website
    Quick and Easy Document Services website

    HTML and CSS using WordPress.org


    Quick and Easy Document Services is a local mobile document preparation and notary service. The business required a simple site just to give themselves a web presence and to be able to display price listings. The business also required blogging capabilities so that they can post advice, suggestions, links, or news related to Florida's notary laws. This site was developed on Wordpress.org to have the capabilities available to develop custom widgets for the customers.









    Valid XHTML 1.0 Transitional Valid CSS!