DANNY NGUYEN

Interactive Developer From NY

[dannynujen-blog]

It’s interesting yet skeptical because of how business-minded and product delivery influenced the talk was, considering that they are an entertainment company of boy-bands and girl-groups, but it gives a cool outlook on a company in the entertainment industry trying to evolve by following the current technology trends.

[codemyui]

Shattering Images

This amazing code snippet shatters the image from the point where you click. Designed by  Szenia Zadvornykh.

Keep reading

[dxn7335-blog]

Sweet

[dxn7335-blog]

A blog for our team to log and publish our work for New Media Team Project.

The blog and process for my recent Senior Capstone Project. 

[dxn7335arduino-blog]

Created by Danny Nguyen and Lanxi Xing

EXPERIENCE TAXONOMY + OVERVIEW

For this project, my initial intention was to create an interactive set of clothing that would “zelda-fy” your life. There would be a glove that would make the secret unlocking sound when ever the glove is used to open a...

[dev1aday]

Totally not inspired by Naruto.

Code

[sachihapi]

CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ - Photoshop VIP

[dxn7335-blog]

One - Meet People Here

One introduces you to the people you should know.  

[dxn7335-blog]

Stupid Studios – A Design & Branding Agency

Our award winning work connects companies with people in new and engaging ways. We design with purpose and meaning, and we have fun along the way.

[dxn7335-blog]

In Pieces - 30 Endangered Species

30 species, 30 pieces. In Pieces is an interactive exhibition of 30 of the world’s most interesting but unfortunately endangered species — their survivals laying literally, in pieces. Explore information, facts and figures and download assets of each unique species.

[dxn7335-blog]

Danny x Arduino

My arduino projects blog!

[inspiremyweb]

Under Armour Women | I Will What I Want

This is really nice!

[dxn7335-blog]

Not the usual web content I post, but this is still very interesting. Square-Enix, one of the most prominent gaming companies internationally is in the works of developing a cloud-streaming service called, DIVE IN, that would allow users to play their PS3 games, like Final Fantasy XIII, on their tablet or smartphone. With the growing capabilities of smart devices and the combination of their graphic intensive games, this could definitely be the start of a big change in the casual gaming scene.

[dxn7335-blog]

Simplifying the search engine. Literally.

[webdesigntrendsmag]

Cole Townsend http://bit.ly/1nZoDWm DESIGN TRENDS Recognize the best Interactive and Web Design trends

[dxn7335-blog]

A exemplary example of clean design and use of appealing color scheme. The case studies and several other pages are also fluidly structured and easy to read and navigate. 

The only complaint being that on case study pages, the large preview banner above the beginning text seem to blur the transition and feel crowded between the text and banner because it takes on similar colors as the text section below it. Only when you hover over the preview does it gain color and relieve the uncomfortable feeling.

[dxn7335-blog]

Tiempo (Testing Phase 1 Complete ... now on to the next one)

After the several public tests with Tiempo, the reception from the project was generally good. They enjoyed the feel and simplicity of the app, and the aesthetics overall. 

Some suggestions/critics I've received was:

- Add a feature to search locations on different locations

- Enable swiping in between views

- (Majority) The gradient colors are more appealing than the flat colors

- The sizing of the app is good on most mobile devices except for iphones below 5. The bottom section of the current weather view is cut off.

- The transitioning animation of the different days on initializing of the list view is jagged and rough at times.

Taking into consideration of these suggestions and critics, I've recently prioritized my development in the order of importance that I thought was vital to Tiempo's functionality. 

Swipe:

First being the swipe feature. The swipe is a fundamental element of mobile interactivity, thus, it was only natural that people would think to swipe to switch views. To solve this, I used a little jQuery library called TouchSwipe. TouchSwipe is a very simple library that makes it very easy to add touch features, like the swipe to your dom elements, on to your web sites or web apps that are intended for mobile. Simply by calling a swipe function on your element, you can edit the function to do what ever you need on swipe.

In my case:

this.$el.swipe({ //do something })

Simple as that. 

Flat -> Gradient:

The second change that I worked on was changing the colors used from flat colors to gradients background. With the rest of the elements being flat, having a gradient background brings more dimension and character into the app and makes it overall imo, look "cooler." Initially the colors were intended to be gradient backgrounds. To folks who have't read on tiempo before, when the weather data is retireved and the views are rendered the view's background changes color based on the current temperature in your area. The colors are supposed to transition smoothly in between the change. Using css transitions for background, the gradient transition works well from gradient to flat color, but will not work from gradient to gradient. (CSS3 is a growing baby, someday it'll happen). There were a lot of haks and fixes out there on the internet but this was m approach to the issue.

This approach involves having a container, and and overlaying div within the container that will contain the gradient. Essentially, the container will have a flat background color, and the overlaying div will be appended to it. Using css3 animations, the overlay will fade in acting as though it was actually transitioning from the flat color to the gradient. 

Basically this is the css for the animation and how I applied i to my overlay

/* FADE IN ANIMATION W/ POP */ @keyframes transitin { from { opacity: 0;} to { opacity: 1; } } @-webkit-keyframes transitin { from { opacity: 0;} to { opacity: 1;} } /* Firefox < 16 */ @-moz-keyframes transitin { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes transitin { from { opacity: 0; } to { opacity: 1; } } Applying it to your overlay .overlay{ /* styling */ /* fade in animation */ -webkit-animation: transitin 2s; /* Safari, Chrome and Opera*/ -moz-animation: transitin 2s; /* Firefox < 16 */ -ms-animation: transitin 2s; /* Internet Explorer */ -o-animation: transitin 2s; /* Opera < 12.1 */ }

In my case, the original background started as gradient but will still transition smoothly to the flat color. While that transition is happening, the overlay is then appended, and will fade in on creation because of the css I'v added to it. In addition, the flat color that was transition from the original background is the top color of the gradient, so it will be even more convincing that the gradient transitioned directly to another gradient. If you don't enjoy the idea of adding a harmless extra div to your dom, then this solution  might not be best for you, but since Tiempo relies on its visual cues, including its background, doing it this way wasn't too much of an issue to me.

Sizing on Different Mobile Devices

This issue is one that I have not resolved as of yet. Out all all the devices I have tested so far, iphone 5, samsung galaxy 2 and up, ipads, the ones that Tiempo's visuals have become compromised on was on iphones 4s and below, mainly because of their smaller phone size. The issue of this is because of overlapping media queries. In my css, I have media queries for both iphone 5 and iphone 4 but since those queries are both accepted when on both devices, which is strange to me, the styles start to overlap. And since the iphone 5 media queries are placed after the iphone 4's, most of the iphone 5's styling is applied when on either device. If I switched the order, then that would mean compromising the styling when on an iphone 5 device. This issue may be because of the imperfections of CSS3 but it might take some time to mess around and come up with an answer. And with the arrival of the iphone 6 coming very soon, adjusting for that will be another excruciating tail to pin on the donkey. (trying new phrases)

What Tiempo currently looks like now:

[dxn7335-blog]

Current testing interface for Tiempo. Temperature settings moved into the settings section, and an update button added to refresh weather data

[dxn7335-blog]

Tiempo: The crash of weather api

Note: When the worldweatheronline API, the app no longer functions.

Make some kind of adjustments.