Francisco Jr: Bootstrap

Showing posts with label Bootstrap. Show all posts

The idea of the Pangea Panel arose from the need for Petrobras Exploration to view block data in a simple way as in the Well Site Panel. For this reason, the first data panel created was called a block panel.

To build the system, we leverage the lessons learned from the Well Site Panel, and we fully exploit component integration, creating a single interface that through the data and metadata we received would know how to create your display layout, load components, and provide options For navigation, thematization and research.

Gantt drill down view

The screen has a maximum of 6 different visualization components, and an action in one component reflects in updating data in all the others. Among the vision components we use is HighCharts, Google Maps, Almende Timeline, dhtmlxGantt and others. The navigation further includes a recursive drill down system, loading other panels depending on the initial stimulus of the user.

The entire front end was written in TypeScript using existing DefinitelyTypeds or creating ours. We also use Linq.js to treat the data in this layer and Metro UI with Bootstrap for the entire UI.

For the backend was used Asp.net MVC 4 with all the data, metadata and access control and permission provided by HDS.

The system continues to be developed currently by adding more information to existing panels and creating new ones. As information aggregation to this type of system often depends on evolutionary maintenance on other data delivery systems and on the HDS for handling such data, the writing time of a new panel is time consuming.

As suggestions for improvements in my project shutdown I was rewriting using React with Redux, improving the integration between visualization components and improving the filter component to provide ease of use of Select2 but accepting multi-valued fields such as date Initial and final.

For legal reasons, interfaces can not be readable.

Project start year: 2015
Duration: 1 year for first version
Position: Sr Consultant
Role: Developer, System Analyst, Help Desk, Infrastructure Analyst, Designer, Front-end, Back-end
Working for: BRQ
Client: Petrobras
Technologies: C# .Net, Oracle, Css3, HTML5, Xml, Web Services, TFS, WCF, Linq, Nuget, Web API, Asp.net MVC 4, Bootstrap, jQuery, Json, nHibernate, Ninject, TypeScript, HighCharts, Google Maps API, Almende Timeline, DataTables, Select2, Linq.js, Metro UI 3, dhtmlxGantt

Geophysical Activities Tracking was born from rewriting the Seismic Schedule, removing features that were not used, and replacing the drag and drop interface with a Gantt chart. Today it is the system responsible for planning the acquisition and processing of terrestrial or maritime geophysical data.

My participation in the module was just consulting on usability and front-end on some screens.

For legal reasons, interfaces can not be readable.

Project start year: 2015
Duration: 6 months
Position: Sr Consultant
Role: Front-end
Working for: BRQ
Client: Petrobras
Technologies: C# .Net, Oracle, Css3, HTML5, Web Services, TFS, Linq, Asp.net MVC 4, Bootstrap, jQuery, nHibernate, Ninject, Kanban, JavaScript, dhtmlxGantt

The Well Site Panel was created to display the data of a well site to be drilled in chronological order and with easy identification of the complicity state. The idea that managers apply a filter, look at the timeline and identify well sites with problems in the project workflow was the north for system development. In addition, graphs were created in Highcharts, consolidating the data by management and other topics, easily indicating bottlenecks to be attacked.

Highcharts consolidating charts

The system had a strong coupling to the Siplex Well Site module, and a query was built that consolidated the necessary data of the database and services of other systems, loading the complete data model (ORM).

As the data changed throughout the day, a memory cache scheme was created using Quartz.Net, which handled automatic and manual data updates.

The system had its front end adapted to work on mobile devices, the tablet being the minimum supported by a minimum screen size.

The project was so successful that it was used internally in management as an example of software with simple user experience, with pleasant interface and adequate performance to the final public. He was also nominated and winner of the IT Highlights award in the category "Maximize value of IT solutions to the Petrobras system" in 2014.

For legal reasons, interfaces can not be readable.

Project start year: 2013
Duration: 1 year and 4 months
Position: Sr Consultant
Role: Developer, System Analyst, Help Desk, Infrastructure Analyst, Designer, Front-end, Back-end, Coordinator
Working for: BRQ
Client: Petrobras
Technologies: C# .Net, Oracle, Css3, HTML5, Web Services, Asp.Net, JavaScript, TFS, WCF, Linq, Bootstrap, jQuery, Json, nHibernate, Ninject, HighCharts, Kanban, Quartz.Net, Almende Timeline, ORM

The Play Analysis module belongs to the group of scientific systems of Siplex, being the module responsible for registering the geological study of a region to be studied and to make simulations of possibilities of discovery and economic viability for the area.

My participation in the module was just consulting on usability and front-end on some screens.

For legal reasons, interfaces can not be readable.

Project start year: 2013

Duration: 5 months
Position: Sr Consultant
Role: Front-end
Working for: BRQ
Client: Petrobras
Technologies: C# .Net, Oracle, Css3, HTML5, Web Services, TFS, WCF, Linq, Asp.net MVC 4, Bootstrap, jQuery, nHibernate, Ninject, Kanban, JavaScript

Feed Giop was designed to be a data source that could be easily registered and consumed by several Petrobras management.

The system used the RSS standard for data registration, using the label tag to handle the subjects previously registered by the application managers.

The solution also had a feed consumption screen that displayed the data filtered by the consumer profile, as well as displaying the weather forecast with the Foreca API.

For legal reasons, interfaces can not be readable.

Project start year: 2013

Duration: 4 months
Position: Sr Consultant
Role: Developer, System Analyst, Help Desk, Infrastructure Analyst, Front-end, Back-end, Coordinator
Working for: BRQ
Client: Petrobras
Technologies: C# .Net, Oracle, Css3, HTML5, Xml, Web Services, TFS, Linq, Bootstrap, jQuery, Json, nHibernate, Ninject, Foreca API, RSS, Kanban, ForUs

The Analytics Module came from the need to centralize Log4Net and Elmah logs from all Siplex modules that were previously scattered in each module and were accessed by a local page that was not always updated by developers with patches or new features.

Analytics provided a common interface for accessing the log files, and there is no longer any code replication.

Another requirement was the issuance of audit reports and statistics on the use of servers and accesses, which were also issued by the system.

Analytics implements memory and processor data readers of the IIS server, via WMI, from the server where the Siplex modules are running and displaying this data through Highcharts graphics.

Some IT-related features, which are not business-related, have been added later and are used by the Siplex development team.

Project start year: 2012

Duration: Almost 4 months
Position: Sr Consultant
Role: Developer, System Analyst, Designer, Front-end, Back-end
Working for: BRQ
Client: Petrobras
Technologies: C# .Net, Asp.Net, Oracle, Css3, HTML5, TFS, Linq, Adobe Photoshop, Bootstrap, jQuery, Json, HighCharts, Log4Net, Elmah, WMI, IIS, JavaScript, Web Service

Pangea was born to be the georeferenced Exploration data display system. In addition to displaying Basins, Blocks and Wells, he still consolidated some data and colored, according to a selected theme, the items being displayed.

Classic Pangea interface

To start the system, a geometric features drawing component was created. This system was responsible for creating the polygons in the displayed images. By working through the generation of images at each iteration of the user, the system was slow, because if it was zoomed in or out, the whole image was recreated.

A few years later the system was rewritten and the feature design component was no longer used, passing the Google Maps API to be used instead.

Pangea ForUs interface

The system continues to be used, but now inside another larger data display system and has been named Classic Pangea.

I have been primarily at the front end of these systems and more recently I have worked on the backend to reconcile the functionality of Classic Pangea with the Pangea Panel, the new Data Visualization system from Exploration.

For legal reasons, interfaces can not be readable.

Project start year: 2009

Duration: Almost 1 year
Position: Sr System Analyst, Consultant, Sr Consultant
Role: Developer, System Analyst, Designer, Front-end, Back-end
Working for: Atos Origin, Accenture, BRQ
Client: Petrobras
Technologies: C# .Net, Asp.Net, Oracle, Css3, HTML5, Xml, Web Services, TFS, Linq, Nuget, Adobe Photoshop, Asp.net MVC 4, Bootstrap, jQuery, Json, nHibernate, Ninject, Google Maps API, ForUs

The Well Site module was initially designed to control technical meetings to approving or reject drilling of a well.

A few months later the initial purpose of the system became just one item in a larger workflow, the system being completely rewritten and moving to control the entire workflow of well site information until it was drilled.

First version user interface

In 2011 the database objects were mapped using nHibernate and the back end was rewritten to allow for integrations and greater scalability. This rewrite was a facilitator to consume and share data among various systems of Exploration.

I was actively involved in the initial two versions, getting distant at the time of nHibernate adaptation and re-acting during the adaptation of the Well Site Panel module.

For legal reasons, interfaces can not be readable.

Project start year: 2008

Duration: Almost 2.5 years all versions. Still in development.
Position: Sr System Analyst, Consultant, Sr Consultant
Role: Developer, System Analyst, Help Desk, Infrastructure Analyst, Designer, Front-end, Back-end
Working for: Atos Origin, Accenture, BRQ
Client: Petrobras
Technologies: C# .Net, Asp.Net, Oracle, Css3, HTML5, Xml, Web Services, TFS, WCF, Linq, Nuget, Adobe Photoshop, Web API, Asp.net MVC 4, Bootstrap, jQuery, Json, nHibernate, Ninject

The purpose of this system is to follow up on a block acquired by Petrobras, showing the legal obligations assumed by the company, when it was carried out and the current state of the block for the company, indicating if there will be continuity or return of the block, for example.

My participation in this system was very punctual, setting up the basic interface of the first version and some punctual adjustments of design and usability, not acting on the back end.

The system was rewritten and gained a new interface in 2015, where again I acted punctually in some front-end settings. In the back end it has gained several services to provide data to the HDS.

For legal reasons, interfaces can not be readable.

Old Version

Project start year: 2008

Duration: Almost 7 months
Position: Sr System Analyst
Role: Developer, Designer, Front-end
Working for: Atos Origin
Client: Petrobras
Technologies: C# .Net, Asp.Net, Oracle, Css, Html, SourceSafe, Ajax Control Toolkit, Web Services, TFS, Linq, Adobe Photoshop

New Version

Project start year: 2015

Duration: Almost 7 months
Position: Sr Consultant
Role: Designer, Front-end
Working for: BRQ
Client: Petrobras
Technologies: C# .Net, Oracle, CSS 3, HTML 5, Web Services, TFS, WCF, Linq, Asp.Net MVC 4, Bootstrap, jQuery, Json, nHibernate, Ninject, Scrum, Kanban

The Drilling Rigs Schedule was born out of the need to control one of the most expensive and expensive resources in the oil industry. The oil drilling rig are features of slow locomotion and daily high cost, even while traveling to its destination.

The idea behind the timeline was to manage these resources in a way that optimized their travel and usage, thereby reducing the cost to the company, as well as centralizing long-term planning.

The project began as a Siplex module, but after a few years it grew in size, complexity and importance, making it an enterprise system that shares data with Siplex.

Drilling Rigs Schedule - ForUs interface

The application was done with the backend in Java and front end using jQuery, Json and Script.aculo.us. Later the interface was migrated to jQuery UI, later to ForUs and later to Bootstrap. Shortly before the migration to ForUs, the backend was migrated to Asp.net MVC 3 and C# in addition to the use of Node.JS.

The interface is web with drag and drop capabilities to position the wells on their respective oil drilling rig.

I have been in the project since its creation and I participated in creating and defining the layout of the application until his exit from the Siplex team.

Due to the values involved in the system, it is considered an important system for the Petrobras business.

For legal reasons, interfaces can not be readable.

Project start year: 2007 and still in development
Duration: 1 year and a half
Position: System Analyst, Senior System Analyst, Consultant
Role: Developer, Designer, Front-end
Working for: Atos Origin, Accenture
Client: Petrobras
Technologies: Asp.net MVC 3, Css3, HTML 5, Bootstrap, Oracle, TFS, Linq, C# .Net, Adobe Photoshop, jQuery, Script.aculo.us, Node.JS, jQuery UI, ForUs, Java, Json

Siplex Start is the module responsible for listing, according to the user profile, which modules the user has access to and which ones he can request through a justification to the coordinators.

Current Siplex Start interface

It has already had four different interfaces, but always maintaining the same functionality. This module is where the members of the Siplex team are listed as well as the Siplex user service phone.

I was responsible for the interface of the first three versions, and the current one is the creation of Eduardo Derbli, former designer of the team.

Project start year: 2007

Duration: 2 months
Position: Senior System Analyst
Role: Developer, Designer, Front-end, Back-end
Working for: Atos Origin
Client: Petrobras
Technologies: Asp.Net, Asp.net MVC 3, Css3, HTML 5, Bootstrap, Oracle, SourceSafe, TFS, Linq, C# .Net, Adobe Photoshop, jQuery, JavaScript

The Siplex Wallet module was part of Siplex in Visual Basic 6 and was migrated to Siplex Exploratory Projects during its rewriting. It was demanded by the managers that other actors were involved in the control of portfolio data, so the separation of the modules was necessary.

The survey of requirements and interface prototyping with users was carried out on my coordination.

It has adapted the entire access control system and new functionalities for project management and reporting. Another need was a hierarchical filter system with different access profiles and where the final result, the list of projects, could be saved and added to other results for possible scenario simulations.

Over the years other functionalities have been aggregated, such as consolidation charts (with Highcharts) and a simulator of project scenarios. The interface is the same until today, with some screens being included with a slightly different design and Bootstrap support.

For legal reasons, interfaces can not be readable.

Project start year: 2007
Duration: 1 year
Position: System Analyst
Role: Developer, System Analyst, Help Desk, Infrastructure Analyst, Designer, Front-end, Back-end
Working for: Atos Origin
Client: Petrobras
Technologies: C# .Net, Asp.Net, Oracle, Css, Html, Xml, UML, SourceSafe, Ajax Control Toolkit, Web Services, TFS, WCF, Linq, Nuget, Adobe Photoshop, Highcharts, Bootstrap, JavaScript

The Siplex Community was born from the need to exchange technical information among Siplex users. It started as a forum where it was possible to post messages and files and users could comment. After a while, it became only a repository of files.

It was recently rewritten updating front-end and back-end.

For legal reasons, interfaces can not be readable.

Old Version
Project start year: 2006
Duration: 3 months
Position: System Analyst
Role: Developer, System Analyst, Designer, Front-end, Back-end
Working for: Atos Origin
Client: Petrobras
Technologies: Asp.Net, Css, HTML, Oracle, SourceSafe, TFS, C# .Net, JavaScript

New Version

Project start year: 2014
Duration: 1 month
Position: Sr Consultant
Role: Developer, Designer, Front-end
Working for: BRQ
Client: Petrobras
Technologies: Asp.net MVC 3, Css3, HTML 5, Bootstrap, Oracle, TFS, Linq, C# .Net, Adobe Photoshop, jQuery, JavaScript

The Siplex was an idealized system in the master's thesis of the geologists Reneu Rodrigues and Claudio Bettini in 1983 and written by the same ones in Fortran to Mainframe. It was adopted as a tool by the Exploration area of Petrobras and TI assumed its maintenance and continuity. It is the system responsible for studies of the exploration areas, conducting commercial viability simulations and recording the geological parameters of the same. It is one of the main Petrobras Exploration systems in the world.

Fortran interface

In 2003 Siplex was a set of several programs in Fortran, with input and output of data through text files and a "friendly" interface written in Visual Basic 6 that triggered these various cores. This was the system used by geologists to record the information of an exploration phase and to generate simulation scenarios considering the various geological and commercial variables that could influence the exploration of the area.

I was hired by Accenture to work on the system, being responsible for the continuity and mainly the migration of the text files to the Oracle database when the new version of the system, fully rewritten in C # .Net was released.

Siplex 800x600 interface

In January of 2005 was released the new version, with its new interface, in popup format and 800x600 resolution . In January 2007 there was an adaptation of the interface, increasing the resolution to 1024x768. In this adaptation I began to play the design role for the team, being responsible for future systems interfaces until 2013.

Some years later, with the growth of the systems related to Siplex, this system became a module called Exploratory Projects, part of the workflow of exploratory project management. The name Siplex came to become the set of systems of this workflow, becoming SIPLEX - System of Planning and Exploratory Control.

Siplex 1024x768 interface

The development of the system is continuous, adding new technologies and functionalities depending on the demand of the managers.

After 10 years of using Siplex, some limitations began to appear due to the technologies used, which were already outdated, both in the backend and in the front end. Thinking about the continuity and growth of the project, with maintenance facilities, it was decided to rewrite the entire system, implementing technologies such as MVC, Rest, nHibernate and WCF for the back-end and Bootstrap, CSS 3, HTML 5 and Highcharts for the front-end.

In the market there are solutions that do what Siplex proposes, such as GeoX from Schulumberger, REP from Logicom E&P and prospect analysis software from Rose&Associates .

For legal reasons, interfaces can not be readable.

Old Version
Project start year: 2003
Duration: Almost 2 years to migrate
Position: Jr System Analyst, System Analyst
Role: Developer, System Analyst, Help Desk, Infrastructure Analyst, Designer, Front-end, Back-end
Working for: Accenture, Atos Origin
Client: Petrobras
Technologies: Visual Basic 6, C# .Net, COM+, VBScript, Asp.Net, Oracle, Css, Html, Xml, UML, System Architect, Rational Rose/XDE, Windows Performance Counters, SourceSafe, Ajax Control Toolkit, Web Services, TFS, WCF, Linq, Nuget, Adobe Photoshop

New Version
Project start year: 2014
Duration: Almost 1 years to migrate
Position: Sr. Consultant
Role: Developer, Designer, Front-end, Back-end, Infrastructure Analyst
Working for: BRQ
Client: Petrobras
Technologies: C# .Net, Oracle, CSS 3, HTML 5, Web Services, TFS, WCF, Linq, Nuget, Asp.Net MVC 5, Web API, Bootstrap, jQuery, Json, nHibernate, Ninject, Scrum, Kanban, HighCharts

About me

I'mFrancisco Jr

Full stack developer and more

experience

Front-End Web Development

2003-2016

UI/UX Design

2003-2016

Back-End Development

2003-2016

Infrastructure

2003-2016

Mobile Apps

2015-2016

Other Things

2003-2016

service

Easily Customised

MODERN DESIGN

User Friendly

RESPONSIVE DEVELOPMENT

USER EXPERIENCE

Lovely Design

40000

18

21

34

4

15

Portfolio

Top 10 Posts

Labels

testimonial

Durval Borba

Manager @ Petrobras

Eduardo Derbli

Designer @ IBGE and Triplin

Carlos Eduardo

IT Consultant @ BRQ

SEND ME A MESSAGE