Tutoriales

Cómo crear un proyecto HTML5 simple en Ubuntu usando Netbeans

En esta serie de 4 artículos sobre desarrollo web móvil, lo guiaremos a través del proceso de configuración. Frijoles netos como un AQUÍ (también conocido como Entorno de desarrollo integrado) en Ubuntu para comenzar a desarrollar aplicaciones web HTML5 receptivas y amigables para dispositivos móviles.

A continuación encontrará la serie de 4 artículos sobre Desarrollo de sitios web HTML5 para móviles:

Parte 1: Cómo crear un proyecto HTML5 simple en Ubuntu usando Netbeans

Un entorno de trabajo sofisticado (como veremos más adelante), autocompletar para los idiomas admitidos y una perfecta integración con los navegadores web son algunas de las características más importantes de Netbeans en nuestra opinión.

Recordemos también que el HTML5 La especificación brindó a los desarrolladores muchas ventajas, por nombrar solo algunos ejemplos: código limpio gracias a muchos elementos nuevos, funciones integradas de reproducción de video y audio (que reemplazan a Flash), compatibilidad cruzada con navegadores populares y optimización para dispositivos móviles.

Aunque primero probaremos nuestras aplicaciones en nuestra máquina de desarrollo local, eventualmente trasladaremos nuestro sitio web a un servidor LAMP y lo convertiremos en una herramienta dinámica.

En el camino haremos uso de jQuery (una conocida biblioteca de Javascript multiplataforma que simplifica enormemente las secuencias de comandos del lado del cliente) y Oreja (el popular marco HTML, CSS y JavaScript para desarrollar sitios web receptivos). Consulte artículos detallados para descubrir lo fácil que es configurar una aplicación compatible con dispositivos móviles con estas herramientas HTML 5.

Después de trabajar en esta breve serie, puede:

  1. Utilice las herramientas que se describen aquí para crear aplicaciones dinámicas HTML5 básicas y
  2. Proceda a aprender habilidades avanzadas de desarrollo web.

Sin embargo, tenga en cuenta que a pesar del uso de Ubuntu para esta serie, las instrucciones y procedimientos también se aplican a otras distribuciones de escritorio (Linux Mint, Debian, CentOS, Fedora, Ellos lo llaman).

Para ello, hemos decidido instalar el software necesario (Frijoles netos y el Java JDKcomo verá en un momento) con un tarball genérico (.tar.gz) como método de instalación.

Dicho esto, comencemos con Parte 1.

Instalar Java JDK en Ubuntu

Este tutorial asume que ya tiene una instalación de escritorio de Ubuntu. Si no lo hace, lea el artículo de nuestro colega Matei Cezar sobre la instalación de escritorio de Ubuntu antes de continuar.

Desde el Frijoles netos La versión que se puede descargar de los repositorios oficiales de Ubuntu está un poco desactualizada, descargaremos el paquete del sitio web de Oracle para obtener una versión más nueva.

Tienes dos opciones para esto:

  • Opción 1: Descargue el paquete que contiene Netbeans + JDK, o
  • Opción 2: Instale ambas utilidades por separado.

En este artículo lo haremos elige el n. ° 2 porque eso no solo significa una descarga un poco más pequeña (ya que solo instalamos Netbeans con soporte para HTML5 y PHP), sino que también nos permite tener un instalador JDK independiente en caso de que lo necesitemos para otro conjunto que no requiera Netbeans ni desarrollo web (principalmente en conexión con otros productos de Oracle).

Descargar JDK, vaya al sitio de Oracle Technology Network y navegue hasta el JavaJava SEDescargas Sección.

Al hacer clic en la imagen resaltada a continuación, se le pedirá que acepte el acuerdo de licencia y luego podrá descargar los requeridos. JDK Versión (que en nuestro caso el tarball es para 64 bits Maquinaria). Cuando se lo solicite su navegador web, guarde el archivo en lugar de abrirlo.

Descarga el JDK de Java

Cuando se complete la descarga, vaya a ~ / Descargas y descomprime el tarball /usr/local/bin:

$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Extraer Java JDK
Extraer Java JDK

Instalar Netbeans en Ubuntu

Instalar Frijoles netos con apoyo para HTML5 y PHP, vaya a https://netbeans.org/downloads/ y haga clic en Descargar o use el siguiente comando wget para descargar como se muestra.

$ cd ~/Downloads
$ wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh
$ chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh
$ sudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1

A partir de ahora, siga las instrucciones en pantalla para completar la instalación y deje los valores predeterminados:

Instale el IDE de NetBeans en Ubuntu
Instale el IDE de NetBeans en Ubuntu

y espere a que finalice la instalación.

Instalación de NetBeans completada
Instalación de NetBeans completada

Crea un proyecto HTML5 simple en Ubuntu

Abierto Frijoles netos, selecciónalo Menú del tablero:

Inicie el IDE de NetBeans en Ubuntu
Inicie el IDE de NetBeans en Ubuntu

Para crear un nuevo proyecto HTML5 utilizando la plantilla base proporcionada por Netbeans, vaya a expedienteNuevo proyectoHTML5Aplicación HTML5. Elija un nombre significativo para su proyecto y luego haga clic en Fin (Actualmente no incluye una plantilla de sitio web externo o bibliotecas de JavaScript):

Crea un nuevo proyecto HTML5
Crea un nuevo proyecto HTML5
Nombra el proyecto HTML5
Nombra el proyecto HTML5

Entonces nos convertiremos en el Interfaz de usuario de Netbeansdonde podemos agregar carpetas y archivos a los nuestros Raíz del sitio según sea necesario. En nuestro caso, esto significa agregar carpetas para fuentes, imágenes, archivos Javascript (scripts) y hojas de estilo en cascada (estilos) para organizar mejor nuestro contenido en los próximos artículos.

Para agregar una carpeta o archivo, haga clic con el botón derecho Raíz del sitio y luego elige Nuevocarpeta o HTML Expediente.

Crea un proyecto HTML5
Crea un proyecto HTML5

Ahora presentamos algunos nuevos HTML5 Elementos y cambio del cuerpo lateral:


  1. y Defina un encabezado o pie de página para un documento o sección.
  2. representa el contenido principal de un documento en el que se presenta el tema central o la funcionalidad.
  3. se utiliza para material autónomo como imágenes o código, por nombrar solo algunos ejemplos.
  4. muestra un título para un Elemento y, por lo tanto, debe estar dentro del Palabras clave.
  5. está reservado para contenido que de alguna manera está relacionado con el contenido de la página, generalmente éste. Se puede colocar como una barra lateral con la ayuda de CSS (más sobre esto en los próximos artículos).

.
Ahora copie el siguiente fragmento de código en su index.html Archivo en Netbeans.

CIMA: No se limite a copiar y pegar esta ventana en su entorno de desarrollo, tómese el tiempo de escribir cada día para visualizar las funciones de autocompletar de Netbeans que serán útiles más adelante.

!DOCTYPE html>
<html>
	<head>
    	<title>TODO supply a title</title>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
    	<header style="background-color: #6699CC">THIS IS A HEADER</header>
    	<main>
        	<article>
            	<p>This is some sample text.</p>
            	<p>Another line of sample text for this HTML 5 article</p>
                	<aside>
                    	<figure>
                        	<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
                        	<figcaption>Figure 1: The HTML 5 logo</figcaption>
                    	</figure>
                        	<h2>Web development basics series at Tecmint.com</h2>
                        	<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
                        	<p>Some text here</p>
                	</aside>
        	</article>
    	</main>
    	<footer style="background-color: #CC6699">THIS IS A FOOTER</footer>
	</body>
</html>

Puede ver la página seleccionando un navegador web (preferiblemente Zorro de fuegocomo en la imagen de abajo) y haga clic en juego Símbolo:

Abra la página HTML5 en Firefox
Abra la página HTML5 en Firefox

Ahora puede ver el progreso de su desarrollo hasta ahora:

Página de desarrollo HTML5
Página de desarrollo HTML5

resumen

En este artículo, tenemos algunas de las ventajas de escribir sus aplicaciones web con usted. HTML5 y configurar un entorno de desarrollo Frijoles netos en Ubuntu.

Descubrimos que esta especificación introduce nuevos elementos en el lenguaje, lo que nos permite escribir código más limpio y reemplazar componentes que consumen muchos recursos, como películas Flash, con controles integrados.

En los próximos artículos presentaremos jQuery y Oreja para que no solo pueda usar estos controles y ver que sus páginas se cargan más rápido, sino que también puede hacerlas compatibles con dispositivos móviles.

Mientras tanto, siéntase libre de experimentar con otros controles en Frijoles netosy háganos saber si tiene alguna pregunta o comentario mediante el formulario a continuación.

Si valora lo que hacemos aquí en TecMint, aquí hay algunas cosas a considerar:

TecMint es el sitio comunitario más confiable y de más rápido crecimiento para todo tipo de artículos, guías y libros de Linux en Internet. ¡Millones de personas visitan TecMint! para navegar o buscar en los miles de artículos publicados disponibles GRATIS para todos.

Si le gusta lo que lee, recuerde comprarnos un café (o 2) como muestra de agradecimiento.

Apoyanos

Agradecemos su apoyo sin fin.

.

LEER  Proyecto de aplicación web completamente inseguro !!! Kali Linux

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba