template h5bp framework examples customize code bootstrap javascript html css html5 boilerplate

javascript - h5bp - html5 boilerplate customize



Boilerplate HTML5 vs. Restablecimiento de HTML5 (4)

De hecho, casi quiero decir que usar el reset.css tradicional es lo mejor ... No encuentro problemas con la compatibilidad en mis aplicaciones móviles. Sin embargo, estoy desarrollando estas aplicaciones usando el framework móvil jQuery.

Así que supongo que es realmente condicional qué tipo de herramientas estás usando. Phonegap no parece tener problemas para compilar mi código en todo el sistema operativo. Y ver mi código fuente en emuladores se ve perfectamente bien ...

Así que realmente no veo el sentido de una repetición a menos que estés tratando de lograr los polyfills.

Hola a todos: HTML5 Boilerplate y Restablecimiento de HTML5 son dos plantillas de HTML, CSS y JavaScript con muchas mejores prácticas modernas incorporadas. Sus objetivos son básicamente los mismos:

  • Desarrollo web rápido, robusto y moderno
  • HTML5 (¡duh!)
  • La normalización entre navegadores (incluida la compatibilidad con IE6 y navegadores móviles)
  • Mejora progresiva y degradación elegante
  • Optimizaciones de rendimiento
  • No es un marco, sino el punto de partida para su próximo proyecto

Obviamente, son muy similares en función. ¿De qué manera difieren sus implementaciones (por ejemplo, quizás las correcciones de CSS específicas de IE se logran usando diferentes técnicas)? ¿Son de diferente alcance? Parece que HTML5 Boilerplate es un poco más grande (herramientas de compilación, configuración de servidor, etc.), pero es difícil saber dónde va más allá del Restablecimiento de HTML5 cuando se trata del sitio real que las personas verán.


Puedes usar cualquiera de ...

Al igual que @murtaugh dijo (http://5by5.tv/bigwebshow/45), no es necesario que aprenda nada cuando recién comienza con Restablecer. En mi experiencia, trabajando en un departamento de I + D, cuando necesitas hacer una demostración o realizar iteraciones rápidas, puedes usar el Restablecer (o Caldera si ya lo sabes). Cuando necesito construir el producto para el despliegue me dirijo a Boiler simplemente porque tiene más cosas. Funciona para mí, pero ahora porque sé que ambos puedo usar cualquiera de los dos.


Trabajo en un entorno en el que los desarrolladores anteriores hacían que la empresa utilizara tanto JQuery como Prototype ... y es un desastre. No solo tenemos que salir del modo de compatibilidad, sino solo pensar en la sobrecarga adicional que causa. Al depurar, Prototype "secuestra" los mensajes de depuración en Firebug, lo que lleva a un trabajo aún mayor. Y la parte enloquecedora es que he estado deshaciendo este desastre por meses y estoy empezando a estar cerca de terminar con eso ... y justo cuando estoy a punto de desconectar el Prototipo, siempre encuentro otro sección que se basa en eso ...

Es por esta razón que argumento cada vez contra combinaciones de marcos que tienen propósitos similares. Por ejemplo, no importa cuán genial pienses que sea YUI Grids , si cargas todo el Framework YUI , mejor no estarás haciendo Jquery, Moo o Prototype. Estarías simplemente empantanándote innecesariamente. Mata el tiempo de carga (lo que arruina la experiencia del usuario ) y simplemente les da a los desarrolladores dolores de cabeza y trabajo innecesario.

Mire esta fase de su sitio como la construcción de la base. Usted tiene la oportunidad de usar cualquier cosa que quiera usar, pero debe tener cuidado de no "pintarse en una esquina", por así decirlo. Por lo tanto, use herramientas diseñadas especialmente y las mejores en su clase que estén disponibles en función de sus recursos. ¡No uses algo para ser lindo! Tenemos la suerte de que muchas herramientas de muy alta calidad son gratuitas, por lo que tenemos una opción. Pero sepa que está dirigiendo la dirección de su sitio para el futuro, y usted podría ser la persona como yo que tiene que lidiar con las consecuencias si sus decisiones se toman apresuradamente.

Entonces, a menos que NUNCA vayas a utilizar otro framework, recomiendo Reset ... o incluso solo haciendo CSS de calidad superior.


En general, ambos proyectos se propusieron proporcionar un punto de partida sólido para los desarrolladores que trabajan en proyectos web. Ambos se deshacen de la repetición tediosa y algo propensa a errores que muchos desarrolladores se vuelven a crear para cada proyecto. Los detalles en cómo lo hacen son ligeramente diferentes, pero en su mayor parte, logran los mismos resultados.

HTML5Boilerplate, como ha señalado, se ha agregado en algunas piezas de script de compilación para ayudar a los desarrolladores a seguir las mejores prácticas para agilizar sus páginas en términos de elementos del lado del servidor, como el futuro expira los encabezados, etc. donde: como el proyecto HTML5Reset más centrado en la semántica, el contenido y el estilo. Por ejemplo, HTML5Reset tiene más estructura de ejemplo para el contenido de la página en HTML5 (para ayudar a mostrar a las personas cómo usar algunos de los elementos nuevos), mientras que HTML5Boilerplate no lo hace.

Las partes de tiempo de respuesta y velocidad de página que incluye HTML5Boilerplate se vuelven más y más importantes a medida que más usuarios se encuentran en las plataformas móviles, y a medida que Google aumenta los tiempos de respuesta de las páginas de efectos en el ranking de la página . Hay muchos documentos que muestran que un pequeño aumento en el tiempo de respuesta de la página tiene un impacto negativo mensurable sobre cómo se usa y se percibe su sitio ( especialmente en un entorno de comercio electrónico ... a menudo una página de 100 ms más lenta obtendrá un porcentaje menor de artículos vendidos).

En el frente de CSS, la mayoría de la sección de estilo de reinicio para ambos proyectos es muy similar, con algunas diferencias menores en lo que se establece en la línea de base. Los arreglos específicos de IE, sin embargo, son básicamente los mismos, con HTML5Boilerplate afirmando un poco más de control que HTML5Reset sobre cómo IE estilos algunas cosas como elementos de formulario (es decir, casilla de verificación / botones de opción y estados válidos / inválidos)

Dos áreas principales de CSS que HTML5Boilerplate cubre que HTML5Reset no son clases de ayuda comunes para ayudar a hacer los sitios más accesibles, como .hidden y .visuallyhidden , así como algunos ajustes sustanciales a los estilos de impresión que sirven para hacer que la impresión sea más similar navegadores, así como algunos aspectos de ahorro de costos y accesibilidad, como hacer que las imágenes de fondo sean transparentes (para no desperdiciar el tóner) y agregar la URL real a los enlaces y el título a las abreviaturas.

Sugeriría leer a través de la información de ambos proyectos y cómo hacen las cosas en una comparación paralela porque las similitudes, y también las diferencias (y el razonamiento detrás de ellas) son bastante informativas y me han ayudado a decidir mejor qué partes de cada uno que quería usar

En última instancia, al igual que cualquier tipo de proyecto de "biblioteca", usted, como desarrollador, necesita comprender lo que está haciendo y probablemente debería modificar su línea de base para satisfacer las necesidades particulares del proyecto.