Table of Contents
Ajuste de aplicaciones web HTML5 dinámicas mediante herramientas en línea de código abierto
Al comenzar el último artículo de esta serie, espero que haya podido comprender la importancia de HTML 5 y del desarrollo web adaptable a dispositivos móviles. Independientemente de la distribución de escritorio que elija, Netbeans. es un IDE poderoso y cuando se usa junto con las habilidades básicas de línea de comandos de Linux y las herramientas discutidas en la Parte 3, puede ayudarlo a crear aplicaciones sobresalientes sin mucha molestia.
Optimización Web HTML5 dinámico Aplicaciones-Parte 4
Sin embargo, tenga en cuenta que solo hemos cubierto los conceptos básicos de HTML 5 y el desarrollo web en esta serie y asumimos que está algo familiarizado con HTML, pero la WWW. está llena de excelentes recursos, algunos de ellos son software libre, para ampliar lo que hemos compartido aquí.
En esta última guía hablaremos sobre algunas de esas herramientas y le mostraremos cómo usarlas para agregarlas a la página existente en la que hemos estado trabajando Embelleciendo nuestra UI (interfaz de usuario).
Recordará de la Parte 2. de esta serie (“Adición de jQuery y Bootstrap para escribir una aplicación web HTML5”) que el archivo zip Bootstrap viene con un directorio llamado fuentes. Guardamos su contenido en una carpeta con el mismo nombre dentro del SiteRoot. de nuestro proyecto:
Bootstrap Fonts
Como tú Probablemente pueda deducir de la imagen de arriba, Bootstrap incluye un conjunto de elementos llamados glyphicons. que son ni más ni menos los componentes incorporados que proporcionan bonitos iconos para botones y menús en sus aplicaciones. La lista completa de glifos. incluidos en Bootstrap está disponible en http://getbootstrap.com/components/.
freestar. bar en nuestra página principal. Modifique los menús de la barra de navegación de la siguiente manera. Tenga en cuenta el espacio entre cada etiqueta span. de cierre y el texto del menú:
(por cierto, las etiquetas de intervalo se utilizan aquí para evitar que los iconos se mezclen con otros componentes).
Y aquí está el resultado:
Agregar menú de navegación
Glyphicons. aunque útiles, también son limitados. Y aquí es donde Font Awesome. entra en escena. Font Awesome es un conjunto de herramientas completo de íconos/fuentes/CSS que tiene el potencial de integrarse sin problemas con Bootstrap.
No solo puede agregar muchos otros íconos a sus páginas, sino que también puede cambiar su tamaño, proyectar sombras, cambiar de color y muchas otras opciones usando CSS. Sin embargo, dado que tratar con CSS está fuera del alcance de esta serie, solo nos ocuparemos de los íconos de tamaño predeterminado, pero al mismo tiempo lo alentaremos a “ profundizar un poco más. para descubrir qué tan lejos esta herramienta puede llevarte.
Para descargar Font Awesome. e incorporarlo a tu proyecto, ejecuta los siguientes comandos (o siéntete libre de ir directamente al sitio web del proyecto y descargar el zip a través de su navegador y descomprímalo usando herramientas GUI):
# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip
(sí, el nombre de dominio es en realidad FortAwesome. con una R. por lo que no es un error tipográfico).
# unzip font-awesome-4.3.0.zip # cp font-awesome-4.3.0/css/font-awesome.min.css/home/gabriel/NetBeansProjects/TecmintTest/public_html/styles # cp font-awesome-4.3.0/fonts/*/home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
Y agregue el archivo .css a la lista de referencias en la parte superior de nuestra página, al igual que hicimos con jQuery. y Bootstrap. anteriormente (recuerde que no tiene que escribir todo, simplemente arrastre el archivo desde Proyectos. en la ventana de código):
Agregar fuente impresionante
Tomemos la lista desplegable. en nuestra barra de navegación, por ejemplo:
Lista desplegable
Bien, ¿verdad? Todo lo que se necesita es reemplazar el contenido de la clase ul existente llamada menú desplegable. en la parte inferior de index.php. con:
Créame, invertir su tiempo en aprender a usar estas herramientas será una experiencia muy gratificante.
Dónde pedir ayuda
Como persona de TI. debe estar familiarizado con los numerosos recursos de ayuda que Internet ha puesto a su disposición. Dado que el desarrollo web no es una excepción, aquí hay algunos recursos que estamos seguros de que le resultarán útiles al ajustar sus aplicaciones.
Cuando se trabaja con código Javascript (por ejemplo, cuando se trabaja con jQuery como hizo en la Parte 2. , querrá utilizar JSHint. un verificador de código de calidad Javascript en línea que tiene como objetivo ayudar a los desarrolladores a detectar errores y problemas potenciales. Cuando se encuentran esos errores, JSHint. indica el número de línea donde se encuentran y le brinda sugerencias para solucionarlos:
Herramienta JSHint para detectar errores
Seguramente se ve muy bien, pero incluso con esta gran herramienta automatizada, habrá En ocasiones, necesitará que otra persona le eche un vistazo a su código y le diga cómo solucionarlo o mejorarlo, lo que implica compartirlo de alguna manera.
JSFiddle. (un probador de código Javascript/CSS/HTML en línea) y Bootply. (igual que JSFiddle. pero especializado en Bootstrap código) le permiten guardar fragmentos de código (también conocidos como violines. y proporcionarle un enlace para compartirlos muy fácilmente a través de Internet (ya sea por correo electrónico con sus amigos, usando sus perfiles de redes sociales o en foros ).
Resumen
En este artículo, le brindamos algunos consejos para ajustar sus aplicaciones web y compartimos algunos recursos que le serán útiles si se queda atascado o desea otro par de ojos (y no solo uno, sino muchos) para echar un vistazo a su código y ver cómo se puede mejorar.
Es posible que también conozca otros recursos. Si es así, no dudes en compartirlos con el resto de la comunidad de Tecmint. utilizando el formulario de comentarios a continuación y, por cierto, no dudes en hacernos saber si tienes alguna pregunta sobre el contenido presentado. en este artículo.
Esperamos que esta serie le haya dado una idea de las vastas posibilidades del desarrollo web receptivo y compatible con dispositivos móviles.
