Despre mine

Taina Madalina

Web designer si web developer, cu pasiune pentru Marketing si Stiinta.

Blogs Home » Știință/Tehnică » Software » Madalina Taina - Let's Make Some Great Websites!

Madalina Taina - Let's Make Some Great Websites!

A blog for Web Designers, Web Developers or People interested in Web Tech.

Articole Blog

01. This week: interesting articles, news about web, tech, UX, design and more... - Dec 10, 2016 5:11:00 AM
Here are some things I thought were worth sharing this week on my twitter:

- The Different Ways That Visual Design Can Impact UX - Designmodo #ux #design via @Designmodo



- 5 big graphic design trends of 2016 #design #graphicdesign 

- Pantone reveals their Colour of the Year 2017 #design


- Gallery "Portraits" curayed by Madeline Taina #500px #photography #natural 

- “Slack + Google: Partners at work” #google #productivity by @SlackHQ


- What is Adaptive Design? (And is it Different from Responsive Design? #ux #webdesign  via @sitepointdotcom



02. Work Smart AND Hard! - Mar 16, 2015 5:39:00 AM

The old adage, "Work Smarter, Not Harder!" has become a staple in the way people go about work of any kind.

My advice: "Work Smart AND Hard!". 
The problem with the options "working hard" and "working smart" is that all too often we think we can choose "hard or "smart".

The question is, why aren't we doing both?

Both should be approached as a way to find success because both are essential, and it's time to stop treating them as if they were mutually exclusive.




Working excessively long hours? This may not be helpful because 6 hours , when the work is efficient, can be just as productive as an 8 hours and objectives will be achieved. Working hard? This is different! You do not come across success just by hoping for it! To achieve true success, you need work hard to reach your fullest potential.

Hard-working people are not workaholics!
Many people confuse hard-working people with workaholics.

Workaholism means that someone value work over any other activity, even when it negatively affects him. On the other hand, there are many people who work hard, but still enjoy others activities when they have free time.

How to Work Smarter? There are a few key things that can help people to do this:
- Understand your strengths and weaknesses - this is my golden rule.

- Make the best of resources available -  I learned (the hard way) that always you must explore "what’s right there" in front of you.

- Prioritize: This is very important in time management. Each day, identify the tasks that are the most crucial to complete, and do those first. Devote your entire focus to the task at hand. Pay attention to details.

- Learn to say no and take care of yourself.

What do you think? It is important working hard?
03. It's Spring! - Mar 1, 2015 9:55:00 AM
Hey, it's Spring! Wishing you a bright and warm season!



04. Don't you just love these bright, bold colors? - Jan 12, 2015 7:47:00 PM
Bright, bold colors: Google’s Material Design introduces an inspiring and vibrant color palette.

A couple of months ago, Google started rolling out its new Android 5.0 Lollipop operating system and one of the most prominent changes in the Lollipop release is a redesigned user interface built around the “Material design”.

Here’s Google’s definition of  Material design:  “a visual language for users that synthesizes the classic principles of good design with the innovation and possibility of technology and science”.
Google has left behind the world of skeuomorphic design and the result is something that looks more eye-catching.


Let's see some colors:

Amber (#FFC107)

#FFF8E1
#FFECB3
#FFE082
#FFD54F
#FFCA28
#FFC107
#FFB300
#FFA000
#FF8F00
#FF6F00
#FFE57F
#FFD740
#FFC400
#FFAB00


05. There are good times for you if you have these skills! - Jan 10, 2015 7:51:00 AM
Statistical Analysis and Data Mining? Middleware and Integration Software? There are good times for you if you have these skills!

 "Statistical analysis and data mining" topped LinkedIn's list of the 25 Hottest Skills That Got People Hired in 2014,  moving up from number 5 in 2013.
"We live in an increasingly data driven world, and businesses are aggressively hiring experts in data storage, retrieval, and analysis. Across the globe, statistics and data analysis skills were highly valued"  Sohan Murthy, research consultant at LinkedIn, wrote in a blog post.
Glassdoor reports a median salary of $118,709 for a data scientistand  $64,537 for a programmer.
If you have any involvement in data analytics and want to develop your career, is worth learning some of the most commonly used tools:
- SQL/RDB;- R and Python;- Excel;- SAS and SPSS;-Hadoop.
There are lots of roles that involve working with analytics and big data, but some of the most common titles are:

- Data Analyst - Common skills that you will be asked for include SQL, R, SAS and Excel, and often Hadoop.- Data Scientist - As well as the analytics skills that an analyst will be expected to have, data scientists will be expected to have programming skills (Java or Python).
In 2014, for the second year, O'Reilly Media conducted an anonymous survey to expose the tools successful data analysts and engineers use, and how those tool choices might relate to their salary.
By a considerable margin, the most broadly-used software was SQL , which was selected by 71% of respondents.

R and Python were the next most widely-used tools — they were selected by 43% and 41% of survey-takers, respectively.

"R and Python are likely popular because they are easily accessible and effective open source tools for analysis",the authors of the report note.

Moreover, statistics has been working on collecting and analyzing data even before computers existed. Whatever technological revolutions that may occur, statistics will remain relevant because if we can measure something, we improve it.
Related skills were also ranked highly:6. Business Intelligence 10. Perl/Python/Ruby 11. Data Engineering and Data Warehousing
The rest of the LinkedIn's list was populated by tech skills.
Hottest Skills of 2014 on LinkedIn:1. Statistical analysis and data mining2. Middleware and integration software3. Storage systems and management4. Network and information security5. SEO/SEM Marketing6. Business intelligence7. Mobile development8. Web architecture and development framework9. Algorithm design10. Perl/Python/Ruby
Last year, the top 2013 LinkedIn skill was Social Media Marketing, with Statistical Analysis and Data Mining ranked at 5.



06. JavaScript is not an “ugly duckling” anymore! - Jan 8, 2015 10:52:00 AM
I always find it fascinating to read about trends in the use of programming languages.

Based on a formula assessing Internet searches on languages, the Tiobe Index named JavaScript its Language of the Year for 2014. 
 “After all these years, JavaScript has finally become TIOBE's language of the year. It was a close finish. Swift and R appeared to be the main candidates for the title but due to a deep fall of Objective-C this month, a lot of other languages took advantage of this and surpassed these two candidates at the last moment.”  Tiobe said.
TIOBE programming index is “a measure of popularity of programming languages, calculated from number of search engine results for queries containing the name of the language” (TIOBE Programming Community Index Definition"). TIOBE takes into account only Turing complete languages, so some popular languages like HTML or SQL are not present in ranking.JavaScript has won the award because it had an increase of roughly 1.70 percent of share. "The JavaScript programming language has a long history and is always considered as the 'ugly duckling' from a language design point of view. Nevertheless, JavaScript has become the standard browser language through the years," Tiobe said.


So, is JavaScript the Language of the Future?
Despite being on the 10th ranked programming language in the latest Tiobe Index, JavaScript is the dominant programming language choice for startups (see the growing use of JavaScript on GitHub in recent years – now is the top language. JavaScript is one of the preferred ways of developing applications for Windows 8's new UI. They say being able to use the same language on the front end and the back end makes life easier for development teams.
The PyPL (Popularity of Programming Language) index, which analyzes Google searches on language tutorials (the more a specific language tutorial is searched, the more popular the language is assumed to be), named Swift its Language of the Year for 2014.Swift had a rating of 3 percent for 2014 and ranked ninth on PyPL's index for the month, jumping past two long-established languages: Ruby and Visual Basic.In the January PyPL index, Java was tops, with a 25.8 percent share, followed by PHP (12.4 percent), Python (11.8 percent), C# (9.9 percent), and C++ (8.7 percent). Top 10 were C (8.2 percent), JavaScript (7.4 percent), Objective-C (6.7 percent), Swift (3.1 percent), Ruby (2.7 percent), and Visual Basic (2.1 percent).Source: https://sites.google.com/site/pydatalog/pypl/PyPL-PopularitY-of-Programming-Language





07. Best Google Fonts For Flat Design - Apr 6, 2014 3:55:00 PM
Why Google Web Fonts?
It provides high-quality web fonts that you can include in your pages using the Google Web Fonts API and has three advantages that make it ideal for many freelancers and small businesses: It’s open source and free, it requires no sign-up, and the deployment of fonts is fast.

Flat design focuses on typography, colors, simple shapes to emphasize clarity and usability. Because it often employs bright color schemes, weights and clean lines are important when it comes to lettering.

Here is the list of typefaces that are fit with Flat design most:

1. Droid Sans

Droid is a font family first released in 2007 and created by Ascender Corporation. The fonts are intended for use on the small screens of mobile handsets and were designed by Steve Matteson.

Droid Sans is a sans serif typeface with open forms and a neutral, yet friendly appearance and was optimized for user interfaces. 
droid sans
2. Oxygen 
The basic concept for Oxygen Font was to design a clear, legible, sans serif, that would be rendered with Freetype on Linux-based devices.

Oxygen is a Unicode typeface family that supports languages that use the Latin script and its variants.. 

3. Roboto 
Roboto is also a sans-serif typeface family. Google describes the font as "modern, yet approachable", with "a dual nature". The family includes regular and oblique styles of Thin, Light, Regular, Medium, Bold, Black, and Condensed widths.
4. Open Sans

Open Sans is a clean and modern sans-serif typeface, designed by Steve Matteson.

Since its release in 2010, Open Sans quickly became the preferred typeface by many designers, as it was a fantastic substitute for Helvetica. According to Google, it was developed with an "upright stress, open forms and a neutral, yet friendly appearance" and is "optimized for legibility across print, web, and mobile interfaces."

Its design is almost identical to that of Droid Sans, with the exception of wider characters and the inclusion of italic variants. 



Open Sans is available in a large number of variants. There are 5 variants for weight (300 Light, 400 Normal, Semi-Bold 600, Bold 700 and Extra Bold 800) and each one has an italic version.
5. Lato

“Lato,” meaning “Summer” in Polish, is a sans serif typeface family, developed in summer 2010 and released in December 2010 under SIL Open Font License, with five weights: 100, 300, 400, 700, 900 and corresponding italics.

The semi-rounded letters give Lato a strong yet friendly tone, allowing for flexibility of use in either body text or headlines. “Male and female, serious but friendly” says Łukasz Dziedzic, the designer of Lato.



In 2013 – 2014, the family was greatly extended. The Lato 2.0 family now supports 100+ Latin-​​based languages, 50+ Cyrillic-​​based languages as well as Greek and IPA phonetics.
6. Source Sans Pro

Source Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

Source Sans Pro is a sans serif font designed with a generous width. It is currently available in six weights, from ExtraLight to Black, in upright and italic styles. The typeface has wide language support for Latin script.
7. Raleway

Raleway is an elegant sans-serif typeface, designed by Matt McInerney in a single thin weight.

8. Montserrat 
Montserrat font is sans serif font which is designed by Julieta Ulanovsky. Montserrat font family has 2 weights. 9. Quicksand

This is a display sans serif.

10. PT Sans
PT Sans is based on Russian sans serif types of the second part of the 20th century, but at the same time has distinctive features of contemporary humanistic designs. The family consists of 8 styles: 4 basic styles, 2 captions styles for small sizes, and 2 narrows styles for economic type setting.

11. Libre Baskerville

Libre Baskerville is a web font optimized for body text.

12. Quattrocento Sans

Quattrocento Sans is a Classic, Elegant and Sober typeface.
13. Josefin Slab

Josefin Slab is one of the thinnest slab fonts and have an elegant, upscale look and feel. 14. Philosopher

This font is universal: It can be used in logos, headlines, and for text.
08. Parallax Scrolling Effect with css and jquery, because i love simplicity. - Feb 10, 2014 12:25:00 PM

“There is no greatness where there is not simplicity" - Lev Tolstoy
I made this Parallax Scrolling Effect for my blog in a few minutes, just with css and jquery.Parallax scrolling is a technique, where, as you scroll, the background sections translate slower than the content in the foreground, creating the illusion of 3D depth.

This is my content div:

<div class='content' data-speed='1' data-type='background' style="background:url('http://para.png') 0 0 repeat-y; position:relative;">
</div>
I am using the a div with the attributes data-type & data-speed, which were introduced in HTML5. Since all I need to do is control the speed of the background images, I use data-type="background" and data-speed="1" as key attributes to specify the necessary parameters. For my post I use data-speed="10"

And this is the jQuery:


$(document).ready(function(){
$window = $(window);
    $('div[data-type="background"]').each(function(){
        var $bgr = $(this);
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgr.data('speed'));
            var coord = '0%'+ yPos + 'px';
          $bgr.css({backgroundPosition:coord});
        });
    });
});


09. Radiant Orchid: innovation, creativity and originality - Jan 15, 2014 7:30:00 PM



When it comes to web design, color is an important detail that can make or break your whole design.

Since 2000, the Pantone Color Institute™ has been designating a Color of the Year. The PANTONE Color of the Year is a reflection of what people are looking for.

The color for 2014? The magical Radiant Orchid that symbolize innovation, creativity and originality.

“While the 2013 color of the year, PANTONE 17-5641 Emerald, served as a symbol of growth, renewal and prosperity, Radiant Orchid reaches across the color wheel to intrigue the eye and spark the imagination,” said Leatrice Eiseman, executive director of the Pantone Color Institute®.

"An invitation to innovation, modern and versatile Radiant Orchid encourages creativity and originality. Imbued with a harmony of fuchsia, purple and pink undertones, Radiant Orchid inspires confidence and its rosy undertones emanate great joy, love and health."



10. - Dec 25, 2013 11:25:00 AM
 Wishing  You a Wonderful  Holiday  Season! Merry Christmas!



11. Awesome stuff you can get for free! - Nov 10, 2013 3:46:00 PM
Amazing materials you can get for free! Check out this repository of free programming books.
Swiss developer Victor Felder has taken a list created with the help of the community of web design and development forum Stack Overflow, updated the content with new and corrected links and shared it over on GitHub. The list is indexed in several  ways, covers over 80 programming languages and it has over 500 books.
For example, I found 14 book recommendations to improve my programming skills. Thank you, Victor!



Take a look!

12. My Checklist - Flat and elegant, developed just with html and css - Oct 30, 2013 7:03:00 PM
Here is a png with the psd image and the html code.
 (Because I use just a text-editor on this blog, some css properties are replaced automatically)

The html and the css:


wrap_box{ background: #fff; font-family: Open Sans; } .box{ width: 400px; height: 505px; position: relative; margin-top: 30px; margin-left: 10px; right: 0px; margin: 0px auto; } .h1{ color: #616270; text-align: left; font-size: 35px; font-weight: 100; } .h2 { display: block; font-size: 1.5em; -webkit-margin-before: 0.83em; -webkit-margin-after: 0.83em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } input[type=checkbox] { display: none; } label{ background: #34495E; width: 100%; height: 65px; display: block; border-bottom: 1px solid #2C3E50; color: #fff; text-transform: capitalize; font-weight: 900; font-size: 11px; letter-spacing: 1px; text-indent: 20px; cursor: pointer; position: relative; padding: 5px; transition: all 0.9s ease; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } label h2{ color: #fff; } label h2:checked{ color: #FF8B8B; } label h2 span{ display: block; font-size: 12px; text-transform: capitalize; font-weight: normal; color: #bdc3c7; } label:before{ content:""; width: 20px; height: 20px; background: #fff; display: block; position: absolute; border-radius: 100%; right: 20px; top: 30%; transition: border 0.4s ease } #label-1:checked ~ label[for=label-1], #label-2:checked ~ label[for=label-2], #label-3:checked ~ label[for=label-3], #label-4:checked ~ label[for=label-4], #label-5:checked ~ label[for=label-5]{ background: #2C3E50; border-bottom: 1px solid #34495E; color:#FF8B8B; } #label-1:checked ~ label[for=label-1] h2 span, #label-2:checked ~ label[for=label-2] h2 span, #label-3:checked ~ label[for=label-3] h2 span, #label-4:checked ~ label[for=label-4] h2 span, #label-5:checked ~ label[for=label-5] h2 span{ color:#FF8B8B; } #label-1:checked ~ label[for=label-1]:before, #label-2:checked ~ label[for=label-2]:before, #label-3:checked ~ label[for=label-3]:before, #label-4:checked ~ label[for=label-4]:before, #label-5:checked ~ label[for=label-5]:before{ background: url("http://4.bp.blogspot.com/-e8Sz6slSA3Y/UnFJdMbEPfI/AAAAAAAAAK4/AO-pvXrssGw/s320/done.png") no-repeat center center; } Checklist Busines meeting at 2pm Lorem ipsum dolor Busines meeting at 4pmLorem ipsum dolor Busines meeting at 5pmLorem ipsum dolor Busines meeting at 6pmLorem ipsum dolor Busines meeting at 8pmLorem ipsum dolor


Pretty simple, right?

If you need the code, go here.
13. Just Do Something! - Oct 29, 2013 4:48:00 PM

Sometimes, you don't reach your goals no matter how hard you try, but having goals, whether big or small, is important. It gives you a sense of meaning and purpose, points you in the direction you want to go and gets you interested.



You don’t need to do everything right now. But you can do something.
14. Why didn't I know this before?! MySQL & PHP - Oct 28, 2013 1:34:00 PM
Hm, I just realized that MySQL’s REPLACE() is PHP’s STR_REPLACE(). It is more quicker than doing same job in php. Why didn't I know this before?!
The PHP function that I used was str_replace(). If you aren't familiar with the function, here's what it does:
$string = '28/10/2013';$result = str_replace('_', '-', $string);  //becomes 28-10-2013
In MySQL, this is:UPDATE `table_name` SET `data` = REPLACE( data, '/', '-' )
Using MySQL's function allows me to fix the problem once and it is faster for a big database.
Again, Why didn't I know this before?!
15. - Jul 14, 2013 2:44:00 PM

I finally found about what I want to write on my blog! It is about what I love to do, web desin and web development Follow my blog with Bloglovin