Entrada2010
16APR
Muestra Post 1.
38
Curabitur UT CONGUE HAC, DIZ TURPIS [...]
Disposición adaptable Notml5 y CSS3. ¡Creando una página adaptativa en HTML5 y CSS3 para principiantes durante seis pasos! Diseño adaptativo en HTML5 y CSS3.
Del autor: Dado que en la red comenzó a aparecer artículos que muestran nuevas propiedades de HTML5 y CSS3, tuve la idea de crear una creación de sitios sin imágenes. Tomando la mejora de HTML5 y CSS3 a Armared (en comparación con las especificaciones de correo anteriores), no es demasiado difícil perseguir un sitio web digno de aspecto que no tiene que confiar en las imágenes como elementos de Markup.
Aquí está la imagen del sitio que seremos movidos en HTML5 y CSS3:
Antes de continuar con los pasos prácticos, le recomiendo que vea el trabajo de demostración.
Elemento de encabezado (encabezado) representa un grupo introductorio o medios auxiliares de navegación.
Tras sus recomendaciones, el elemento de encabezado contendrá nuestro logotipo, subtítulos y navegación básica. Cuando ingresa al elemento de encabezado de encabezado, tenemos una pieza de marcado que contiene todas esas partes de la página que consideramos intuitivamente el título. (O todos los detalles de la página que se invertirá en el elemento DIV con el ID de encabezado). En la página del elemento del encabezado, puede usar más de una vez, y lo usaremos nuevamente dentro de los elementos del artículo que se incluirán en el publicaciones
Elemento de hgroup
El primero dentro del elemento del encabezado es otra nueva etiqueta - HGROUP. Lo usaremos para que se muestre de acuerdo con el logotipo de nuestro sitio y el subtítulo en las etiquetas H1 y H2.
El elemento HGROUP se utiliza para agrupar los elementos H1-H6 establecidos cuando el título tiene múltiples niveles, como los subplacimientos, nombres alternativos o subtítulos.
El elemento HGROUP puede ser superfluo hasta que envuelva, como de costumbre, titulares en el elemento DIV para el nombre o el (los) Subplacement (s) un fondo o estilo ordinario. Sin embargo, en el esquema de documentos de HGROUP juega un papel importante. El algoritmo del plan verifica su página y transmite la estructura del encabezado. Compruebe el boceto de su trabajo utilizando la herramienta Outliner. Cuando el algoritmo del esquema se encuentra con un elemento HGROUP, ignora todo, excepto el título del nivel más alto (generalmente H1).
Ahora tenemos un problema: el algoritmo del esquema no es impecable y no está completado. Por ejemplo, el siguiente elemento que discutiremos es el elemento NAV, y el marcado lo marca como "sección sin título" (área sin nombre). Los desarrolladores de MarkUp recibieron solicitudes de cambio en el algoritmo del esquema para el elemento de navegación como "navegación". En cualquier caso, el elemento HGROUP le proporciona una forma de agrupar sus titulares y, por lo tanto, organiza estructuralmente y semánticamente.
Elemento de navegación
Vamos al siguiente elemento HTML5 - NAV. En NAV, encenderemos la navegación principal del Sitio, envuelto en una lista desordenada.
El elemento NAV representa el sector de la página que se refiere a otras páginas o áreas dentro de la página: Área con enlaces de navegación.
El uso de NAV para crear el sitio principal de navegación es algo así como un dado, pero las circunstancias son tales que habrá más áreas que contengan enlaces en su sitio; La pregunta es, cuál de ellos debe envolver la etiqueta de navegación. Aquí hay algunos ejemplos de uso que creo que puede acercarse:
Artículos Relacionados.
De acuerdo con la especificación, estos pueden ser casos adecuados o inapropiados de uso del elemento NAV. La especificación no es muy clara, y los ejemplos dados no están ayudando demasiado. Por lo tanto, mientras que la especificación no es definitiva y más específica, para seleccionar método apropiado El uso del elemento de navegación puede ser reed solo a la comunidad de desarrolladores.
Elemento elemento
El siguiente elemento que quiero imaginar - artículo. El área principal de nuestra página de demostración contiene tres citas de las publicaciones, y cada una de ellas envolveremos en el artículo de la etiqueta.
Xhtml
2010
16
abr.
Muestra Post 1.
38
Curabitur UT CONGUE HAC, DIZ TURPIS [...] Escrito por: Nombre del autor. Etiquetas: Fresco Moderno. Hyphe-Friendly.
|
Aquí está la definición de W3C para un artículo:
El artículo es un artículo en el documento de composición modular [...], por lo tanto, está destinada a distribuirse de forma autónoma o se usa repetidamente, por ejemplo, cuando se syndication (publicaciones simultáneamente en varios sitios web).
Esta vez, la especificación es más comprensible y la publicación en el blog (o su paso) es mucho mejor ( preste atención a la mención de la sindicación.) Adecuado para el artículo. Por supuesto, podemos colocar en la página Muchos elementos del artículo.
Sin duda, ha notado que dentro del artículo hemos colocado los elementos del encabezado y el pie de página. Tanto el encabezado como el pie de página se pueden usar más de una vez en una página HTML separada. Dado que el encabezado es un "grupo de introducción o elemento de navegación auxiliar", incluimos la fecha, el nombre y el número de comentarios. A continuación, tenemos un párrafo con un extracto del poste, seguido del pie de página (pie de página).
Elemento de pie de página
Como dije, el pie de página de pie de página se puede usar en una página tantas veces como sea necesario, y es un segmento del pie de fondo de la página de documentos o parte del documento.
El elemento de pie de página representa el pie de página de la sección a la que se dibuja. Por lo general, el pie de página suele contiene información sobre su sección, como autoría, referencias a documentos relacionados, fecha de redacción, etc.
Nuestra página de demostración tiene cuatro elementos de pie de página: uno para cada uno de los tres elementos del artículo y el pie de página general para toda la página. El pie de página en el elemento del artículo contiene el nombre del autor de la publicación, las etiquetas y los enlaces al enlace a versión completa Publicar en el blog.
El pie de página total contiene tres elementos de las secciones y un aviso de copyright. Ambas opciones para usar el elemento de pie de página son legítimas y cumplen con las recomendaciones W3C.
Sección de elementos.
El área del pie de página total de nuestra página de demostración contiene tres elementos de sección. Enumeremos las publicaciones de blog más populares, los últimos comentarios y una breve biografía de su compañía ficticia.
El elemento de la sección representa el área común del documento o la aplicación. La sección en este caso es una agrupación de contenido temático, generalmente usando un encabezado.
El elemento de la sección es más bien astuto, porque en la definición de la especificación parece muy similar al elemento div. Cogí en esta trampa cuando comencé a escribir un código para una página de demostración; Publiqué dentro del elemento de la sección tres elementos del artículo. Pronto entendí la falacia de mis métodos. La única forma de decidir si usar la sección es ver si necesita el área que desea envolver el elemento de la sección, el nombre (título). A partir de la definición, está claro que el elemento de la sección suele tener un encabezado.
Otra pregunta que es útil para especificar para establecer la validez de usar el elemento de la sección es: ¿Agregue exclusivamente para estilos? Lo agrega simplemente porque necesita resaltar esta sección usando JavaScript, o porque debe aplicar el estilo habitual, y en lugar de usar el elemento div.
La envoltura en la sección de los tres elementos del artículo de nuestra página de demostración se justificaría si la sección incluyó el título de "últimos mensajes en los blogs". Tendría sentido; De lo contrario, Etiquete, dentro de qué elementos del artículo están ubicados, solo son los estilos de apoyo, algo que nos ayuda a apuntar. ayuda de JavaScript o CSS.
Un elemento a un lado
Este último utilizado para el elemento de la página de demostración HTML5 - aparte; Lo usamos como un contenedor de columna lateral.
Un elemento a un lado representa una sección de página que consiste en su contenido, asociada superficialmente con el contenido ubicado a un lado, y que se puede percibir por separado de este contenido. Dichas secciones a menudo se presentan en la tipografía como altavoces laterales.
Como se puede ver en la especificación, uno de los ejemplos del uso perfecto de un elemento a un lado es una columna lateral. A continuación, en la tabla, puede ver la ubicación de la jerarquía del elemento a un lado de nuestra página de demostración.
Hemos colocado dos secciones y una navegación. La primera sección de sección contiene enlaces a Twitter y RSS, y el segundo representa el último Tweet (entrada de usuario en Twitter). La segunda sección de elementos, además, uno de los casos raros cuando no tiene un encabezado. Podría tener un nombre, algo así como: "El último Tweet", pero creo que es opcional, porque los lectores están acostumbrados a ver los bloques como este, pero la etiqueta de Twitter bajo la cotización es muy reconocible. El elemento NAV de nuestro altavoz lateral se usa para reflejar la lista de blogs y, a diferencia de la navegación principal, tiene un encabezado.
La última palabra
Por lo tanto, así sucedió a la finalización de la primera parte de nuestro artículo dedicado el diseño del sitio en HTML5 y CSS3. Intenté hacerlo tan corto como sea posible, y no pasar demasiado tiempo en la incertidumbre en la especificación HTML5, ya que aún no está terminado. Mientras tanto, tendremos que confiar en la comunidad y el trabajo de "drogas" HTML5, que se convertirá en nuestras guías para introducir nuevos elementos en los sitios.
Gracias por leer y no perder la segunda parte del artículo, donde discutiremos las propiedades CSS3 utilizadas para decorar Markup.
Como de costumbre, espero con interés cualquier pregunta y comentario. Por favor, no tenga miedo de expresar y comenzar a discutir el uso de nuevos artículos, porque es - la mejor manera Clara su favor.
Editorial: Born Victor y Andrei Bernatsky. Comando WebFormyself.
Sin HTML5 y CSS3 lejos de la licencia.
Los sitios modernos y el desarrollo web ya no son posibles sin HTML5 y CSS3, sin importar qué tan genial.
Cualquier proyecto, cualquier cliente requiere un diseño válido, navegador cruzado y moderno en HTML5 y CSS3, y se adaptan cubieramente para dispositivos móviles.
Si puede volver a HTML5 y CSS3 y adaptar el proyecto a dispositivos móviles, puede aumentar de manera segura el costo de sus horas de trabajo.
Bueno, si creas un sitio web para ti mismo, entonces estos conocimientos ayudarán a mejorarlo, funcional y más conveniente. Como regla general, se convierte en un aumento en las posiciones, un aumento de la asistencia y, en consecuencia, los ingresos.
Lo sabes...
Ahora en los resultados de búsqueda (en la parte superior 10) yandex 55% son sitios con diseños adaptativos que pueden adaptarse a dispositivos móviles. Esto sugiere que Yandex (y Google también) le da mayor preferencia a los sitios con un diseño adaptativo. Esos. Aquellos en los que el usuario es conveniente.
Y HTML5 y CSS3 Añadir al sitio características adicionalesCon lo que podemos hacer que el sitio sea aún más conveniente.
Para ambos usuarios y robots.
Página de destino ( Página de destino, página de destino) Sirve para convertir a los visitantes a suscriptores o clientes.
También se utiliza a veces para segmentar el tráfico.
La página de destino puede ser como una página separada En el dominio y como parte de un sitio web de pleno derecho.
En este caso, el sitio se está moviendo en la búsqueda, y el aterrizaje se usa para publicidad en Yandex.Direct, Google Adwods, Target Vkontakte, etc.
Tal grupo permite que el máximo utilice muchas herramientas de marketing en Internet.
Ahora es posible aprender rápidamente y aplicar todo esto en sus actividades.
HTML5 + CSS3 + Adaptabilidad + Página de destino
Con este curso puedes:
crear sitios y páginas adaptativas.
adaptándolos a dispositivos móviles
Utilice las capacidades HTML y CSS en sus proyectos de clientes o clientes.
Cree cualquier página de LED: páginas de captura, páginas de suscripción, aterrizaje comercial, etc.
Añadir diversos efectos y scripts en la página de destino
Crea y usa formularios avanzados. realimentación y mucho más.
Con este curso de video no será completamente difícil!
Resumen del curso
Parte de entrada
Nuevas características en HTML5 y CSS 3, que simplifican y facilitan el proceso de colocación.
Marcado semántico: sus secretos y para qué se necesita.
Inserción de objetos de medios: cómo insertar audio y video sin jugador.
Parte práctica
Página de destino de creación de fases.
Desde la planificación de la distribución, el diseño de cada bloque de diferentes complejidades, antes de conectar los scripts y handlers PHP De forma
Carrusel / control deslizante, desplazamiento suave, botones, Sprites CSS, validación de formas, etc.
Extra. Materiales
En materiales adicionales, hay todos los scripts y fuentes con las que trabajaremos + cunas con un código que se puede copiar e insertar en el lugar correcto.
Así como otras fuentes útiles.
Número de video tutoriales: 23
¿Qué puedes tener después de pasar este curso?
En la preparación de
Despierta un diseño de PSD con Photoshop
Cortar las imágenes deseadas de la distribución de PSD
Encontrar hermosos diseños Página de aterrizaje y sitios
Bloques de diseño y etapas de capas.
Combinar iconos en Sprites CSS
Trabajar con el programa PHPDesigner
En términos de worski
Conectar hermosas fuentes Del repositorio de Google
Usar efectivamente Pseudoclass
Adaptar sitio bajo todos los dispositivos móviles
Use 2 y más fondo para bloque, animación, transformación, RGBA, etc.
Trabajar con las solicitudes de @media
Mapas interactivos de Yandex
Crea Sprites CSS y acelerar la carga de la página
Use estilos pre-pensados \u200b\u200b(por analogía con marcos, como Bootstrap)
En términos de mejora.
Cree efectos de flores ("revitalización" al flotar)
Haga un desplazamiento suave a los bloques y para el botón "Arriba"
Realizar la validación de la retroalimentación para el jQuery
Crear formularios de retroalimentación inteligente con etiquetas de transmisión UTM
Conecte y configure los objetivos en y.metric usando eventos
Facilita las páginas que los hacen cargar más rápido.
Compruebe y elimine fallas en las páginas.
Diseño adaptativo El sitio permite que las páginas web se adapten automáticamente a las pantallas de tabletas y teléfonos inteligentes. Tráfico de internet móvil Crece cada año y procesa efectivamente este tráfico, debe ofrecer a los usuarios sitios adaptativos con una interfaz conveniente.
Los motores de búsqueda utilizan una serie de criterios para evaluar la adaptabilidad del sitio al ver dispositivos móvilesoh. Google intenta simplificar el uso de Internet para los propietarios de teléfonos inteligentes y tabletas, señalando en la emisión móvil adaptada en los sitios de dispositivos móviles. apto para dispositivos móviles.. El Yandex también funciona el algoritmo que prefiere sitios con una versión móvil / adaptable para los usuarios en una búsqueda móvil.
Puede verificar la visualización de la página en dispositivos móviles en los servicios y.
Higo. 1. Yandex móvil y Google que emite con una nota sobre la amabilidad del sitio a los dispositivos móviles ¿Qué es un diseño adaptativo?
El diseño adaptativo implica la ausencia de una barra de desplazamiento horizontal y áreas escalables al ver en cualquier dispositivo, texto legible y áreas grandes para elementos clichibles. Usando los registros de medios, puede controlar el diseño y la ubicación de los bloques en la página, reconstruyendo el patrón para que se adapte a diferentes tamaños de dispositivos.
Las técnicas principales para crear un sitio adaptativo se dan en el artículo. Para diseño de respuesta El ancho del contenedor principal del sitio se establece en%, mientras que puede ser igual a un ancho 100% de la ventana del navegador y menos. El ancho de las columnas de la cuadrícula también se establece en%. EN diseño adaptativo El ancho del contenedor principal y las columnas de cuadrícula se fijan utilizando los valores en PX.
El diseño de caucho adaptativo, considerado en esta lección, funcionará perfectamente en un patrón de dos columnas, lo que hace que el sitio sea adaptativo y conveniente para verlo en dispositivos móviles. La plantilla asume un diseño diferente de los contenidos principales de las páginas, en esta lección se desmontará a la página principal.
Locker de la página principal
La página consta de tres bloques principales: el pie de página superior (CAP), el contenedor de envoltura para el contenido principal y el SAGEBAR, y el pie de página (pie de página). Como punto de inflexión de puntos de diseño, tome 768px y 480px.
En el primer punto, oculte el menú superior y mueva la barra lateral debajo del contenedor con postes. En el segundo punto, cambiará la ubicación de los elementos del encabezado, cancele el posicionamiento de los botones de las redes sociales en las publicaciones y cancele el flujo alrededor de las columnas de las páginas.
Higo. 2. Ejemplo de diseño adaptativo. 1. Metaagelet y sección.
1) Añadir a la sección
Los archivos requeridos son un enlace a las fuentes utilizadas, la biblioteca de jQuery, así como el complemento de prefijoFree (no para escribir para las propiedades de los prefijos del navegador):
2. PAPA DE PAGE
En el encabezado de la página.
Logo ;
Botón para mostrar / ocultar el menú principal