Free Online Courses for Brazilian Developers from Samsung Ocean
-
Similar Topics
-
By SAMSUNG
You’ll never have to compromise on picture quality with Neo QLED 8K. Feel the power and clarity of 33 million pixels on one screen. A new evolution of screens is here. Quantum leap for neo vision Neo QLED 8K See details within the details Real 8K Resolution Feel the power of every frame Greatness never ends, but evolves #NeoQLED8K #8K #SamsungTV
-
By Samsung Newsroom
Start Date Nov 13, 2020
Location Online
A progressive web app is a way to bring a native app experience into the browser, therefore the idea is to have a progressive enhancement of your app, but during our development process we have to keep in mind a few factors in order to make it. During this talk, we are going to discuss possible architectures of a PWA, how we can make sure to apply the right offline strategy (including cache) and which are the tools that can help us to deliver web apps that are fast and progressive (for real!).
Speaker
Laura Morinigo - Developer Advocate at Samsung
About the Speaker
Laura is a software developer, advocate, and mentor. She has been involved in the tech industry for over 10 years, working as a full-stack developer and getting involved with education projects teaching coding in cities like New York and Buenos Aires. She has been recognized as a Google Developer Expert and a Woman Techmakers Ambassador, as a mentor she helped startups participating in accelerator programs like Google Launchpad and the World Food Programme by the United Nations. Currently, she is a web developer advocate for Samsung Internet at Samsung Research Institute UK where the team contributes to open source projects, build demos and participate in conferences getting the word out about advanced web features helping web developers to create great and more inclusive web apps.
Location
Remote on Twitch
https://www.twitch.tv/polyglotdev
Host: Tracy, (CA) Devs
Basic Information
Due to COVID-19 and everyone’s personal safety, we’re making this event an online stream through Twitch. You don’t need an account to watch the stream, but you’ll need one to participate in the chat. Creating an account doesn’t cost anything and it will add warmth to the event.
View the full blog at its source
-
By Samsung Newsroom
Foldable devices
Although new to the industry, the concept of folding devices already has plenty of iterations. Samsung and other OEMs have presented devices with folding capabilities, that allow them to expand into small tablets, compress into smaller footprints, or enable more productive multi-tasking.
Consensus is now, that a “foldable” is a device that folds. While this might seem trivial, the details of how many screens, where/how they fold, and what size and shape the device should be, etc, were all up for discussion. Let’s agree for now that indeed, a foldable is a device that folds. Independent of whether it’s a vertical or horizontal fold, or if it is one big flexible screen or two adjacent ones, how many logical regions the folding translates to, or if it is the size of a phone or a laptop.
different types of “foldables”
Some time ago I wrote about how to make sure websites looked good on the original Samsung Galaxy Fold. All that information, which summarizes into “make your websites responsive”, is very valid and I’d assume already a common practice. This was a good initial approach at making sure that the Web would continue to flow into different screen sizes, but these new devices were more than just expanded screen real estate. Treating them as just more space for Web content was against the intrinsic nature of the hardware itself, and against the full capabilities that could be enabled for the developer and end user. I knew that in the future I would be sharing information regarding more organic layouts for these types of devices.
We realized it made sense to embrace the physicality of the state of the device to provide a seamless (pun intended) experience for the user, by giving the developer access to more information regarding this aforementioned physicality.
Foldable Related APIs
Several lines of work started in parallel to address these challenges at Samsung, Microsoft and Intel. The CSS spanning media query and Window Segments Enum API allow developers to detect where the fold occurs, so that they can avoid positioning content on it. This is very handy especially in scenarios where you have dual screen devices with a physical separation between the screens. Microsoft have written an excellent post about these APIs. With the CSS spanning media query it is possible to know the layout of the foldable device and make sure there’s no content cut in half.
I want to introduce the work that we’ve been doing to address other use cases related to foldable devices here at Samsung with collaboration of our lovely friends at Intel.
Screen Fold API
Screen Fold API logo
We envision the need to adapt content to the physical way a device is being used. I mentioned earlier that foldables are more than just extra on-screen space for content. To embrace them we need to take into account the angle in which the screen(s) is folded. We can abstract this into a concept called the “posture” of the device. Considering posture, we can immediately see the benefits of making our content react to these changes. This is the basic concept behind the Screen Fold API.
The Screen Fold API is an extension to the Screen interface that exposes an angle value, a posture attribute and a change event. It allows developers to identify which posture a device is in and rearrange content accordingly. Working in conjunction with the CSS spanning media queries, one could achieve very interesting layouts. The API identifies a set of predefined postures for common use cases as seen in the image below. (Do note that names or states are not final and we are already considering adding a ‘peek’ state and changing the ‘laptop’ moniker that doesn’t bode well for phones for example.)
diagram of the postures available in the Screen Fold API (laptop, flat, book, tablet, tent, no fold)
Use Cases
These postures respond to different use cases, as detailed in the explainer linked below, you might recognize some of this functionality already shipped in some native apps under the names of ‘flex mode’.
These postures are not always what a developer might need so the API also allows us to directly query the angle values. The image below shows the proposed mapping between postures and angles.
Mapping between postures and angles
Examples
There is a way to query these attributes both from JS and CSS. The former is through the screen object, the latter through handy CSS media queries. You can refer to an example below.
@media (screen-fold-posture: laptop) and (spanning: single-fold-horizontal){ body { display: flex; flex-flow: column nowrap; } .videocall-area, .videocall-controls { flex: 1 1 env(fold-bottom); } } State of the API
If you’ve read up to here, it is very likely you find this interesting and are wondering what is the current state of the API? As I mentioned before, these are all early concepts. Fortunately, there is a specification draft and work under way at W3C. The Screen Fold API is expected to officially be a part of the Devices and Sensors Working Group and is already listed in the DAS WG roadmap.
Devices and Sensors Working Group
Samsung Internet Beta
Furthermore, at Samsung we have been experimenting internally with implementations for the Screen Fold API. We are committed to the Screen Fold API and hope to share an update and more news in the future. This is how a basic example for the Screen Fold API looks running on a Galaxy Z Fold2 device on a custom Samsung Internet build.
Screen Fold API behind a flag in Samsung Internet custom build
html { background-color: blue; } @media (max-screen-fold-angle: 120deg) { html { background-color: red; } } Finally, to enable you to jump into the fun and experimentation with the Screen Fold API, we have a very early version of a Polyfill and a settings widget for browsers that don’t support the specification draft or that do not fold.
Screen Fold Settings widget
Yes, I am aware there are compatibility issues in the settings widget at the moment in some browsers and I’m more than happy to welcome help 😉.
The Road Ahead
The journey to properly supporting the Web on foldable devices is just getting started. There are various efforts from different fronts and discussions in standards groups and among the community are under way. At Samsung, we are committed to continue the conversation and advance the implementation. We are looking into ways to bring experimental support for the API in the future and we are in talks with other vendors to make sure we have more implementations.
As technical co-editor of the specification, I am very interested in knowing what you think of the Screen Fold API and if you have any considerations of things we might have left out. Feel free to contact myself (@diekus) or Daniel Appelquist for any questions.
In the meantime, play with the polyfill and let us know your thoughts and designs, as they will help us better shape the folding future of the Web.
Acknowledgements
I’d like to finish this post with a huge thank you to Jo Franchetti. She has lent her support and her CSS expertize from the beginning with every weird idea that comes into my head. Additionally, even though in it’s infancy, this work is possible due to the great advice from my co-editor, Kenneth, and to the internal support from Daniel Appelquist, Heejin Chung and the amazing engineering team in Suwon, Baul and Kangil. ✨
View the full blog at its source
-
By Samsung Newsroom
If you are a watch face designer and want to distribute your watch face, it is highly recommended that you test your watch face on a real device before publishing it. While Galaxy Watch Studio (GWS) provides an emulator (the Run window) on which to run your watch face, it is not the same as running it on an actual device.
Remote Test Lab (RTL) is a service that allows you to test your app on a real device, access the device remotely through the web, and it’s free! RTL is an amazing solution if you can’t buy a device or if you want to test your watch face on different watch models. This reduces your hardware costs for testing a watch face.
Design a Watch Face
If you don’t have a watch face to test, here is how to create a simple design using GWS.
Launch GWS and create a new project. For simplicity, add a background, analog clock, and digital clock. The digital clock is used to add a time zone selector. The intention behind using the time zone selector is because we can’t test the tap action using the Run window. So, a real device is needed to test the time zone selector. If you want to know how to make a time zone selector, you can read this blog.
After completing the design, you have to build the project so that a .tpk file is created. Go to Project > Build, set the Target API version, enter the password for your author certificate, and click Build (see image below). If you don’t change the location path of the workspace folder, then the .tpk file is saved in C:\Users\user_name\GearWatchDesigner\workspace.
Get Started with RTL
There are a few system requirements to run RTL on your PC. Read about Remote Test Lab from here. The system requirements are:
A Samsung account Standard web browser with JavaScript support Java Runtime Environment 7 or later with Java Web Start. Internet environment where port 2600 is available. First, go to Remote Test Lab and sign in using your Samsung account. If you don’t have a Samsung account, create one and then sign in. Next, click GET STARTED.
Now, select Watch from left sidebar.
There are four types of devices and OS versions that are available (on 26th June, 2020):
Device Name Model Name OS Version Galaxy Watch SM-R800 Tizen 4.0.0.2 Gear Sport SM-R600 Tizen 3.0.0.2 Gear S3 SM-R765A Tizen 3.0.0.2 Gear Fit2 SM-R360 Tizen 2.3.1.6 Choose a device based on your requirements. In the following example, Galaxy Watch is selected for testing.
Select the OS version for the Galaxy Watch.
Select any available device from the Device List. In the device name, IN, KR, or US indicates the country in which the device is located. It is better to choose the closest country to avoid latency issues. For example, if you are in Korea, you should select KR.
Choose the amount of time to reserve the device from Reserve Time. Higher reservation times require more credits (credits are free and you receive a limited number every day), so it would be wise if you don’t reserve unnecessary time.
After selecting all options for your selected device, click Start. The details of your selected device are shown.
If a download window displays, click on start to download the JNLP file. Run the JNLP file to download the RTL client. The download window displays when the RTL Client is downloaded for the first time or an updated version is available. After launching the RTL client, click Run.
The time to launch a device on RTL may vary depending on your network environment. A warning box appears. Read the warnings and click** I understand and wish to proceed.** Next, choose the language of your selected device.
Test Your Watch Face on RTL
After starting the device, follow the steps below to install and run your watch face.
Right-click on the watch to launch the context menu. To learn about all features of the context menu, read RTL client features.
Click on Test > Install Application
From the Look in dropdown menu, navigate to the directory that contains the .tpk file which you want to test.
Select the .tpk file and click Open. A dialog box shows the progress of opening the selected file on the remote device.
Click Install from the Application Manager. Click OK after installing the watch face.
Click on the default watch face.
Rotate the bezel clockwise or counter-clockwise to select your installed watch face.
When you find your installed watch face, click on it to launch it.
Now, click on the digital clock to change the time zone for testing the time zone selector tap action.
Search for and select your desired city to change the time zone
Exit from the Remote Device
It is recommended to uninstall your application from the remote device after completing your test. Tap on the watch face and click on the delete icon to uninstall the watch face.
Now, right-click on the watch and click Exit to close the remote device.
Using RTL, you can test your watch face designs on different watch models and different Tizen versions of your targeted users. You can do it anywhere, even if you are not at home or in the office. Remote Test Lab allows you to test your watch faces on many devices even if you have a small budget.
View the full blog at its source
-
-
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.