EntradaDiseño web con javascript. Tutorial de vídeo: aprendizaje de JavaScript
V diseño web moderno Javascript es solo un componente esencial. Además de su funcionalidad, Javascript puede mejorar drásticamente la experiencia general del usuario al crear varios efectos de transición, como transiciones suaves y animaciones de diapositivas. Gracias a la arquitectura abierta de Javascript, ya no tenemos que escribir scripts separados desde cero. Aquí hay 47 complementos de Javascript que puede utilizar para mejorar la experiencia y la funcionalidad de su sitio web. Asegúrese de consultar los sitios de muestra que le muestran cómo puede usar estos complementos.
Los dos frameworks Javascript más populares
Los dos frameworks Javascript más utilizados en la actualidad son jQuery y MooTools. Eche un vistazo a la encuesta a continuación:
Imágenes emergentes y zoom
Probablemente esté familiarizado con Lightbox, un Javascript simple que se usa para superponer imágenes en la página actual. El Lightbox original se lanzó en 2005. Desde entonces, se han lanzado muchos scripts con una funcionalidad similar, pero utilizando diferentes enfoques y bibliotecas Javascript.
Este complemento es similar a Lightbox JS, solo escrito en la biblioteca jQuery.
Thickbox es complemento de jQuery que es muy similar a Lightbox, excepto con más funciones. Le permite mostrar: imágenes únicas o múltiples, contenido en línea, contenido en un marco flotante o contenido pasado a través de AJAX en un modelo híbrido.
Nota: Web Designer Wall utiliza Thickbox para mostrar sus galerías de imágenes y tutoriales de demostración.
Highslide JS tiene el mismo propósito que Thickbox, pero también tiene un efecto de zoom que le permite arrastrar la imagen superpuesta.
FancyBox es un complemento de jQuery que fue diseñado para reemplazar el Lightbox usado en exceso. Tiene características similares pero efectos de transición más bonitos (diseño estilo Mac).
jQZoom le permite mostrar imágenes en miniatura ampliadas. Esta técnica se usa comúnmente en sitios web. comercio electronico(consulte el sitio de Gap para ver un ejemplo).
Galerías y presentación de diapositivas
Presentación de diapositivas 2! Esta es una clase javascript para Mootools 1.2 para animar la presentación de imágenes en su sitio.
Usando mootools v1.11, este sistema de galería de presentación de diapositivas y javascript le permite crear galerías de imágenes, presentaciones de diapositivas, carteles y muchos otros gadgets geniales simples y suaves (técnica de transición suave) para su sitio web.
Galleria es una galería de imágenes de JavaScript escrita en jQuery. Carga imágenes una por una de una lista sin clasificar y muestra miniaturas cuando se carga cada imagen. Puede crear diferentes iconos si los selecciona, escalados o sin escalar, centrados o recortados para ajustarse al margen del icono definido en CSS.
NoobSlide es una clase de MooTools que le permite crear presentaciones de diapositivas y controles deslizantes sincronizados con un temporizador. Visite este sitio para ver una demostración.
Aquí hay una demostración de un widget de control deslizante de la biblioteca jQuery UI que se utiliza para crear un control deslizante de producto como el del sitio Apple - Mac.
Carrusel
jCarousel es un complemento de jQuery que le permite controlar una lista de elementos de forma horizontal o vertical. Los elementos, que pueden ser contenido estático en HTML o cargarse con (o sin) AJAX, se pueden desplazar hacia adelante y hacia atrás (con o sin animación).
El componente de volteo gestiona la lista de contenidos ( Elementos HTML LI dentro de la etiqueta UL), que se puede mostrar vertical u horizontalmente. El contenido se puede desplazar hacia arriba y hacia abajo con o sin animación. El contenido puede hacer referencia a contenido HTML estático o la lista de elementos se puede generar dinámicamente sobre la marcha (con o sin AJAX).
Carousel Slideshow es un conocido script DHTML para mostrar imágenes en su sitio web. Muestra imágenes en 3D, como un carrusel.
iCarousel es una herramienta javascript gratuita de código abierto para crear widgets de estilo carrusel. También puede usar iCarousel como un ticker / scroller de noticias o como una galería de imágenes.
Control deslizante del panel
Coda Slider es un complemento de jQuery que imita el efecto deslizante de los paneles, similar al sitio web de Coda.
Sliding Tabs es un complemento de mootools 1.11 con efectos muy agradables. Este es un clon de algo utilizado por el sitio Coda de Panic Software, que a su vez es muy similar a un widget utilizado por el sitio iTunes Music Store.
Pestañas
jQuery Tabs es un complemento de jQuery potente y flexible que te permite crear una navegación con pestañas totalmente personalizable (muy recomendable).
Otro gran tutorial de jQueryForDesigners.com le muestra cómo crear una navegación básica con pestañas usando jQuery.
MooTabs es una clase pequeña (3kb) para MooTools. Como sugiere el nombre, su objetivo principal es ayudarlo a crear pestañas de navegación simples.
Un complemento jQuery muy flexible que le permite animar cuando se desplaza a cualquier posición en una página web con opciones personalizables de borrado y velocidad de desplazamiento.
Un sencillo script de MooTools que puede crear un desplazamiento suave hasta un ancla en una página web.
Un complemento jQuery configurable que muestra información sobre herramientas, ya sea con contenido HTML o AJAX estático.
Otro buen complemento de información sobre herramientas.
Un script jQuery muy simple que muestra una cadena de información sobre herramientas y una vista previa de la imagen (lo uso en Best Web Gallery).
Menú acordeón
Este complemento crea menús en acordeón. Funciona con listas anidadas, listas de definición o simplemente divs anidados.
El complemento Accordion puede resaltar y mostrar perfectamente el contenido que necesita.
Image Menu es un complemento de MooTools que puede crear menús de acordeón horizontales con imágenes.
Reemplazo de texto e imagen Flash
sIFR puede reemplazar fragmentos cortos de texto sin formato del navegador con la fuente renderizada de su elección, independientemente de si está instalada en los sistemas de sus usuarios. Realiza su tarea utilizando una combinación de JavaScript, CSS y Flash.
Un complemento de jQuery que ejecutará las funciones sIFR por ti.
Reemplazo de imagen de estiramiento facial es un script de reemplazo de imagen que genera dinámicamente una representación de texto en una imagen en su página web en fuentes que de otra manera no estarían disponibles para sus visitantes. La imagen generada se inserta automáticamente en su página web a través de Javascript y es visible en todos los navegadores modernos.
Los usuarios, que visitan todo tipo de recursos web, a menudo se encuentran con soluciones no estándar interesantes en ellos y quieren hacer lo mismo en sus sitios. La mayoría de las veces, estas soluciones están vinculadas al uso de JavaScript.
En este artículo, lo guiaré a través de JavaScript, un lenguaje de secuencias de comandos para crear páginas web interactivas, y lo que puede hacer con JS. Veremos ejemplos de uso de JavaScript y veremos cómo puede ayudarnos.
¿Qué puedes hacer usando JavaScript?
Cambie la página, escriba texto en ella, agregue y elimine etiquetas, cambie estilos de elementos.
Reaccionar a los eventos: el script puede esperar a que suceda algo (hacer clic / desplazarse, la página ha terminado de cargarse) y reaccionar ejecutando una función.
Por ejemplo, al pasar el mouse sobre un enlace o imagen, puede mostrar una información sobre herramientas. Al hacer clic con el mouse, puede cambiar el contenido del bloque. Una vez que la página haya terminado de cargarse, muestra una ventana emergente de publicidad. Puede cambiar la apariencia de la página según la hora del día.
JavaScript. Comienzo rápido
Ejecute solicitudes al servidor y cargue datos sin recargar la página.
Por ejemplo, si un usuario dejó un comentario en el sitio o en el libro de visitas, este comentario se mostrará inmediatamente sin volver a cargar la página. También puede cargar archivos al servidor, mientras muestra el progreso de la descarga como un porcentaje.
Configure y lea cookies, valide datos, muestre mensajes y mucho más.
Por ejemplo, en la primera visita al sitio, al usuario se le muestra una ventana emergente y se establece una cookie. Y en visitas posteriores a este recurso, la ventana emergente no se muestra porque la cookie ya se ha configurado.
También puede verificar la exactitud del correo electrónico ingresado, verificar que el número de teléfono ingresado cumpla con el formato requerido y mostrar inmediatamente un mensaje sobre la exactitud o incorrección de los datos ingresados.
Ejemplos de uso de JavaScript
El uso de JavaScript es tan amplio y variado que hay miles de ejemplos de uso, y aún así la lista no estará completa, porque todos los días se escriben nuevos scripts. Estoy seguro de que ha visto muchos de los ejemplos siguientes en varios sitios. Y todo esto se implementa mediante JavaScript.
Por supuesto, la galería presentada en el ejemplo no es la única. Tales galerías, como todo lo demás, podrían imaginarse en cientos. Y yo, para no inflar la lista indefinidamente, di un ejemplo de los grupos de guiones más populares.
¿Qué nos aporta?
1. Cómoda navegación de varios niveles
El uso de JavaScript le permite crear menús compactos de varios niveles, navegación de varios niveles en las barras laterales. Los subelementos del menú se abren al hacer clic o al pasar el mouse.
Muchas tiendas en línea tienen navegación desplegable lateral. Considere shop.by como ejemplo. ¡Imagínese cuánto se estiraría hacia abajo si los subelementos no desaparecieran al pasar el mouse o al hacer clic, sino que fueran todos visibles a la vez!
2. El uso de galerías y controles deslizantes nos permite mostrar fotografías, imágenes de tipos adicionales de productos, organizar de manera conveniente y compacta el portafolio del fotógrafo.
JavaScript. Comienzo rápido
Aprenda los conceptos básicos de JavaScript en ejemplo practico sobre la creación de una aplicación web
Las galerías son especialmente relevantes para la visualización detallada de productos en tiendas en línea, cuando necesita mostrar varios tipos de productos. Con su ayuda, podemos mostrar al usuario todas las imágenes en un pequeño bloque a la vez, proporcionando imágenes pequeñas y ampliadas para su visualización.
¿Cuánto espacio se necesitaría para la galería de abajo?
3. Últimamente, se han mostrado muchos widgets en las columnas laterales de los sitios. Estos son widgets para redes sociales populares, categorías, archivos de publicaciones, calendarios, comentarios recientes de blogs, publicaciones populares y mucho más.
Cabe señalar que en muchos sitios, algunos de los widgets pueden simplemente eliminarse, porque no tienen ningún sentido, pero ocupan espacio.
Pero, ¿y si todavía necesita ajustar de forma compacta muchos widgets?
Aquí es donde la solución de JavaScript con "pestañas" viene al rescate.
Con su ayuda, puede colocar bien todos los widgets en las columnas laterales del sitio. Para una mejor percepción, puede agrupar los widgets en "pestañas".
Por ejemplo, puede colocar widgets de redes sociales en una "pestaña", categorías y archivos en la segunda, y así sucesivamente. Esto ahorrará espacio y hará que el sitio sea más fácil de usar.
4. Con JavaScript, también puede mejorar drásticamente la página de contacto de su sitio o de los sitios de sus clientes.
incrustar sugerencias en campos de formulario;
verifique los datos ingresados en los campos del formulario y muestre mensajes de error;
enviar datos del formulario sin volver a cargar la página;
colocar un mapa con una ruta.
5. Para aquellos que publican datos tabulares en el sitio, será muy útil utilizar la clasificación de datos en la tabla.
6. Aquellos que publiquen estadísticas en el sitio en forma de gráficos y tablas encontrarán muy útil poder crear tablas y gráficos interactivos en JavaScript.
Además, con JavaScript, puede realizar todo tipo de efectos en el sitio, como el deslizamiento suave de elementos, su movimiento, la aparición y desaparición gradual, y todo lo que sea suficiente para su imaginación.
Todo esto puede hacer que el sitio sea más fácil de usar, más interactivo, más tecnológico.
Conclusión
Como puede ver, el alcance de JavaScript es muy amplio. Estas son galerías, controles deslizantes y pestañas, y todo tipo de elementos interactivos, mapas y gráficos, y funcionan con formularios y mucho, mucho más.
Creo que todo el mundo puede encontrar un uso útil de JavaScript por sí mismo y utilizarlo en sus sitios o en los sitios de sus clientes.
Espero que hayas disfrutado del artículo y hayas aprendido de él las nuevas funciones que se pueden implementar gracias a JS.
¿Utiliza JavaScript en sus sitios? ¿Cuáles son sus principales dificultades al utilizar JavaScript?
Háganos saber en los comentarios al artículo.
JavaScript. Comienzo rápido
Aprenda los conceptos básicos de JavaScript con un ejemplo práctico de cómo crear una aplicación web
Resource Creative Bloq publicó material en el que sus autores compartieron con los lectores los mejores, en su opinión, ejemplos del uso de JavaScript para crear sitios. La CPU eligió los 30 recursos más interesantes.
1. Cartera de Mike Coos
El portafolio del diseñador web Mike Kus está diseñado de "manera limpia y discreta", escriben los editores de Creative Bloq. Combina imágenes grandes con elementos simples de la interfaz de usuario.
“Pienso en mi trabajo como una marca. No es necesario agregar a mi sitio elementos extra diseño ”, dice Koos.
La cartera de Kus es igualmente fácil de navegar en todo tipo de pantallas; señala que este fue el efecto más difícil de lograr. Cada uno de los proyectos del diseñador está representado por una imagen o fotografía, de modo que el usuario quiera saber más sobre el trabajo.
2. Hola Lunes
El sitio web de la agencia creativa Hello Monday ha sufrido cambios significativos, señalan los autores del artículo. Los desarrolladores de la empresa han realizado una gran cantidad de trabajo. Se las arreglaron para que la interfaz fuera fácil de usar.
Antiguo sitio de la agencia Hello Monday
Ahora, el sitio contiene ejemplos de pedidos ya completados por la agencia: cada proyecto tiene su propia página, que describe su historial, lo que brinda al usuario una comprensión más profunda de lo que está haciendo Hello Monday.
Sitio web actualizado de Hello Monday
“Intentamos alejarnos del modelo estándar de cómo debería verse el sitio web de una agencia creativa”, dice Katie Hertel, líder del proyecto para el rediseño de la página web Hello Monday. Los autores del material encuentran el sitio muy atractivo y receptivo, lo que se ve facilitado por la organización de proyectos en la página principal: se complementa automáticamente con nuevo trabajo de agencia cuando se desplaza hacia abajo.
3. Multeor
Multeor es un juego en línea multijugador masivo escrito en JavaScript utilizando el elemento lienzo HTML5. Fue diseñado por Arjen de Wise y Philidor Weise y diseñado por Arthur van Hoog. La principal tarea del usuario en el juego es controlar la caída de meteoritos, obteniendo puntos por la destrucción dejada por él.
El juego utiliza un servidor Node.js para administrar la comunicación entre dispositivos móviles y de escritorio mediante WebSockets.
Weise enfatiza que al desarrollar Multeor, no se utilizaron las bibliotecas de juegos existentes:
Escribimos todo nosotros mismos, fue muy emocionante, además, aprendimos muchas cosas nuevas. El hecho de que no dependiéramos de ensamblajes y prefabricados específicos nos dio cierta libertad de acción: no había necesidad de ocuparnos de renderizar gráficos existentes, manejar colisiones y describir por separado el sistema responsable de las explosiones.
4. Cronograma del delito
Crime Timelime es un agregador que recopila datos sobre delitos del Reino Unido mediante API públicas. Permite a los usuarios saber cómo van las cosas en su región.
“Organizamos el sitio de tal manera que mostraba un mapa de la región y el lugar donde se cometieron los delitos, para el mes seleccionado por el usuario en el panel de abajo”, dice el desarrollador del proyecto Alex Miller.
El recurso utiliza la API de Google Maps, jQuery y jQRangeSlider se utilizaron para crear un panel con meses. Cuando un usuario interactúa con el mapa, por ejemplo, hace clic en una ubicación específica en él, el sitio actualiza la imagen mediante JavaScript. Las burbujas del crimen se crearon con CSS y se animaron con usando jQuery.
Aquí es hoy JavaScript se utiliza para crear animaciones. El creador del recurso, el diseñador Luc Twyman, explica su idea de esta manera: “Quería crear algo que les diera a todos una idea de la escala de tiempo. Here is Today ayuda a comprender cuán vasta es la historia del universo ".
Twyman señala que desde el principio decidió abandonar las unidades de medida estándar, los píxeles, y describió las suyas propias en función del tamaño de la pantalla. Esto se hizo para garantizar que el sitio se vea igual en todos los dispositivos.
Este es el segundo proyecto de JavaScript creado por el diseñador, y en él utilizó elementos que no usó en el anterior. Sin embargo, Twyman encuentra en el lenguaje muchas similitudes con otros lenguajes de programación de alto nivel, además, según él, JavaScript tiene documentación bastante detallada y una gran cantidad de ejemplos se han desmontado en Internet (incluso en formas temáticas).
6. Tweetmap
Tweetmap traza los países en el mapa en proporción a la cantidad de tweets enviados desde ellos. El desarrollador de servicios Rob Hawkes enumera varias tecnologías utilizadas en su creación: TopoJSON, D3.js, Node.js, PhantomJS y algoritmos especiales para construir cartogramas adyacentes en tiempo real.
Elegimos Node.js porque ya teníamos experiencia con él y porque es una plataforma simple, rápida y flexible. Para animar el mapa (en formato TopoJSON) usamos D3, una fantástica biblioteca para visualización de datos. En particular, utilizamos ampliamente el módulo geo, que nos permite realizar transformaciones y cálculos geográficos complejos.
Para evitar problemas con la presentación de mapas en el navegador del cliente, el sistema genera mapas en el servidor usando D3, los lanza y los renderiza usando el motor PhantomJS, y solo entonces los transfiere al usuario - esto evita crear "agujeros" al mostrar mapas .
7. El viaje
The Trip es una película interactiva realizada con JavaScript y HTML5 (sin Flash). Otto Nascarella, creador del proyecto, cree que la tarea del desarrollo servicio similar resultó ser muy difícil:
La mayoría de las dificultades que enfrentamos se debieron al hecho de que HTML5 en el momento de redactar el sitio no tenía los medios para el desarrollo de varios navegadores. Luego decidimos que recomendaríamos a los clientes que usen Chrome.
El código del sitio JavaScript usa jQuery para casi todo. Los desarrolladores también utilizaron TextBlur y TextDrop para difuminar y animar el texto.
8.Si Digital
Esta página, escrita en JavaScript, es el nuevo portafolio y blog de la agencia de diseño y marketing Si Digital. El desarrollador líder del proyecto, Alex Kruk, explica la animación en la página de inicio de la siguiente manera: "El fluido que se mueve a través de las tuberías guía a los usuarios a través de nuestra cartera: activa la animación de imágenes en cada etapa de la exploración del sitio del cliente".
Para lograr un efecto similar, Crook utilizó el método jQuery.animate (). Además, agrega, era necesario elegir la velocidad correcta de llenado de las tuberías con líquido; después de todo, todos leen a diferentes velocidades.
Un gráfico interactivo en la página que describe los proyectos completados y el equipo de la agencia, implementado usando jQuery. La línea de tiempo, según Krook, se genera dinámicamente, basada en información de la base de datos, utilizando tecnología Ajax.
9. Sitio web de Jean Halfstein
Jean Halfstein es diseñador web. En su portafolio, los autores del artículo atrajeron más pagina de inicio- y animación en él. “Me lo pasé muy bien jugando con los distintos efectos. Realmente me gusta usar las nuevas tecnologías, así que decidí hacer de la página principal de mi sitio una especie de caja de arena; allí me divierto con Three.js y el elemento de lienzo HTML5 ”, dice Halfstein.
La idea del diseñador era crear un portafolio siguiendo las tendencias actuales: tenía que ser minimalista y, al mismo tiempo, aportar algo nuevo al diseño del sitio web. Así que decidió usar el mouse y los controles de arrastre para las animaciones en lugar de las teclas de navegación.
10. Cartera de Nick Jones
Según Jones, cuando estaba desarrollando el sitio, tenía más experiencia con Flash que con JavaScript, pero quería probar algo nuevo: comprender de lo que era capaz. “Supe de inmediato que la sintaxis de JavaScript era casi la misma que la sintaxis de ActionScript, así que me acostumbré rápidamente”, describe Jones el proceso de codificación.
Jones recuerda que Flash no le dio acceso a trabajar con los movimientos del mouse; fue una nueva experiencia que realmente disfrutó. El desarrollador quería lograr un sitio receptivo que no pudo lograr usando transiciones de clase en CSS. Jones está satisfecho con el resultado:
Si va a cambiar de ActionScript a JavaScript, no lo dude. Mientras construía mi sitio web, quería entender si JavaScript es capaz de lo que Flash es capaz de hacer. Y estoy muy impresionado.
11. MapsTD
MapsTD es un juego online basado en la defensa de una fortaleza. La fortaleza es la propia casa del usuario, que debe proteger de los villanos que deambulan incansablemente por las calles de la zona.
El creador del proyecto, Duncan Barclay, explica cómo funciona: “Usamos la API de Google Maps, MooTools y JavaScript. La parte más difícil es encontrar la ruta que seguirán los enemigos del usuario. Una vez que el jugador ha elegido el punto de partida, el servicio busca la longitud y la latitud y calcula las posibles rutas con Google ".
A medida que avanza el juego, aparecen más y más oponentes en la pantalla. Barclay dice que los desarrolladores tuvieron que "luchar" con el tiempo de los navegadores; el hecho es que la mayoría de ellos con el tiempo reducen la frecuencia de búsqueda de actualizaciones en la página, y era necesario asegurarse de que esto no sucediera.
Otro problema fue que a medida que avanzaba el juego, la cantidad de enemigos aumentaba y la productividad disminuía. Como resultado, los desarrolladores decidieron aumentar el nivel de las habilidades de los villanos, no su número.
12. Catálogos de Glimpse
El recurso Glimpse fue desarrollado conjuntamente por el equipo de Windows IE y el proyecto TheFind, y combina el motor de búsqueda TheFind y la aplicación de los mismos desarrolladores para las compras online en Facebook. Como parte de Glimpse, los programadores han lanzado su propio marco basado en Turn.js.
El objetivo del equipo desde el principio fue hacer de Glimpse una aplicación web, no un sitio web normal. Los desarrolladores utilizaron el paradigma modelo-vista-comportamiento, que separa el modelo de datos en tres componentes separados, interfaz de usuario e interacción con el cliente. El servicio utiliza plantillas de representación de modelos del lado del cliente Thrift o JSON según poder computacional cliente.
La biblioteca Turn.js también se ha utilizado en el desarrollo de directorios. Con la ayuda de CSS y JavaScript, los modelos presentados en el sitio reciben volumen, superponiendo sombras en la imagen.
13. Red Bull Music Academy Radio
RBMA Radio utiliza la herramienta Modernizr, que permite el desarrollo de varios navegadores en HTML5 y CSS. Modernizr se actualiza constantemente para que los creadores de sitios puedan mejorar el código a medida que se introducen nuevas funciones.
Además, al implementar el servicio, se utilizó la biblioteca Backbone.js; con su ayuda, se cargan mosaicos para crear el efecto de una página sin fin.
14. Nouvelle Vague
Nouvelle Vague es un sitio de la agencia de diseño francesa Ultranoir. El servicio le permite "rastrear" tweets mediante un hashtag determinado. Se implementa mediante JavaScript, WebGL y HTML5. HTML5, sin embargo, solo es responsable del avance al abrir un recurso.
Uno de los desarrolladores de la agencia dijo que se necesitaron cuatro meses para crear el sitio y tres personas trabajaron en él. “Fue realmente emocionante para nosotros intentar trabajar con WebGL”, explica.
El objetivo principal del proyecto era recrear la atmósfera del salvapantallas de vídeo utilizando imágenes en 3D. El equipo se ha sumergido en las nuevas tecnologías HTML5, CSS3 y JavaScript, y cree que estos lenguajes pueden convertirse en el estándar para trabajar con 3D en el futuro, debido a su renderizado de alta calidad, su rica interoperabilidad y capacidad de respuesta.
15. La convergencia
The Convergence es un juego de navegador que recuerda a Super Mario Bros. Muestra el asombroso poder de JavaScript y HTML5 y demuestra que HTML5 puede hacer su trabajo tan bien como Flash.
Los desarrolladores prometen agregar audio y nuevos niveles al juego en el futuro, así como soporte para la API de Mozilla Gamepad.
16. Kindle Cloud Reader
Esta aplicación web hace realidad las palabras "compre una vez, lea en todos los dispositivos". Utiliza tecnologías HTML5, API de JavaScript, bibliotecas de interfaz de usuario de jQuery y jQuery, y varios complementos de jQuery, incluido jScrollPane para el desplazamiento de página y plantillas de jQuery. Además, el equipo de desarrollo utilizó WebSQL para admitir el modo fuera de línea.
17. Les Enfants Terrible
El sitio lanzado por el estudio WeFail, según los autores de la nota, parece aterrador, pero sigue siendo genial. El recurso está hecho con un estilo bastante definido. JavaScript se utiliza para animar las interacciones entre el usuario y el sistema. Para hacer el desplazamiento solo para los elementos individuales de la interfaz, el comando usó el complemento jQuery ScrollTo. Para que el video no aparezca en ventanas emergentes, sino directamente en el sitio, se utilizó la biblioteca Shadowbox.js.
Además, el complemento jQuery Cycle se utiliza en el código de Les Enfants: es responsable de mostrar imágenes y ejemplos del trabajo de la agencia.
“Lanzamos Les Enfants para comprender las capacidades de rendimiento de JavaScript. Resultó que en combinación con СSS Transform puedes lograr excelentes resultados"Dice el desarrollador Martin Hugh.
No hace mucho, señala Hugh, este tipo de cosas solo se podía hacer con Flash, pero ahora tiene una alternativa viable, JavaScript.
18. Pinterest
Pinterest es un excelente ejemplo del uso de JavaScript para crear un efecto de página sin fin. Para crear el sitio, necesitaba las herramientas jQuery, la interfaz de usuario jQuery y el complemento PageLess.
Según los autores de la nota, PageLess es vital para Pinterest, porque el desplazamiento sin fin y la carga de nuevos pines es mucho más efectivo para ayudar a mantener la atención del usuario que las funciones sociales como comentar publicaciones.
19. Constructor de bombas de amor
Love Bobm Builder ayuda a los usuarios a expresar su amor o gratitud a alguien. Es un sitio limpio y simple que te permite crear y enviar un mensaje bomba.
El recurso utiliza la herramienta Modernizr para actualizar el código JavaScript y HTML5 de manera oportuna.
20. Michelberger Booze
Cuando un usuario ingresa al sitio, lo primero que ve es el llamado "precargador"; puede parecer que está hecho usando Flash, pero no es así. HTML5 y JavaScript se encargan de llenar el vaso con cerveza mientras se carga.
El recurso utiliza la función de desplazamiento parcial, solo para ciertos elementos de la interfaz, y permite al usuario interactuar de forma interactiva con las imágenes.
Al hacer clic en las máscaras de animales, el cliente es enviado a otras escenas, todos los efectos de animación en los que se realizan con jQuery.animate ().
21. Trello
Trello es una aplicación de programación colaborativa o uno a uno donde los usuarios pueden crear listas de tareas completadas y pendientes y compartir el progreso en tiempo real. El sitio se desarrolla utilizando Node.js, MongoDB y Backbone.js.
El cofundador de Trello, Daniel Le Cerminan, explica que usar un solo idioma al escribir un sitio web ayuda a los nuevos miembros del equipo a ingresar al proceso de desarrollo más rápido.
La comunicación entre usuarios se implementa mediante Web Sockets: Le Cerminan señala que esto es suficiente nueva tecnología, por lo que hubo algunas dificultades para configurarlo.
22. BrowserQuest
Este juego de estilo retro de Little Workshop está diseñado para mostrar el poder de HTML5, JavaScript y, especialmente, Web Sockets. Puede admitir la interacción entre miles de usuarios al mismo tiempo.
“Hacer un juego multijugador es una excelente manera de demostrar cómo estas tecnologías pueden funcionar juntas. BrowserQuest se basa en servidores Node.js, cada uno de los cuales puede ejecutar múltiples instancias del mundo del juego ”, dice el desarrollador del estudio Guillaume Lecolné.
23. JS1k
JS1k es un concurso anual cuya tarea es crear una página en JavaScript sobre un tema determinado (la mayoría de las veces, imágenes animadas). Su peso no debe exceder 1 KB.
El tema de este año es "Aquí hay dragones".
Obra-ganadora del concurso en 2012. Autor - Philip Buchanan, tema - "Amor"
El trabajo del ganador de 2012 pesaba inicialmente 8 KB, pero en un día Philip pudo reducir su tamaño al requerido 1 KB optimizando el algoritmo de generación de árboles:
Mi táctica fue "engañar honestamente" al compilador. Por ejemplo, usando el "a? b: c "en lugar de" if (a) b else c "ahorra 8 bytes.
24. Cronología
El servicio ayuda a los usuarios a crear líneas de tiempo y es muy fácil de usar. La línea de tiempo interactiva puede incluir tweets, videos, fotos y grabaciones de audio. Su línea de tiempo se puede describir usando JSON o Documentos de Google- ya que es más conveniente para el propio cliente.
25. Dibuja un Stickman
La idea principal del servicio es brindar al usuario la oportunidad de divertirse un poco participando en una historia interactiva, ayudando al hombre dibujado a superar varios obstáculos. Los bocetos en el sitio se realizan con el mouse.
JQuery y una biblioteca para trabajar con gráficos vectoriales Raphal.js. La implementación del proyecto con Raphal ayudó a los desarrolladores a evitar problemas de rendimiento en la mayoría de los dispositivos y todos los navegadores.
Ahora que hemos discutido los enfoques para aprender HTML y CSS, es hora de centrar nuestra atención en JavaScript, la tercera habilidad clave de un diseñador web. JavaScript es un lenguaje de secuencias de comandos. Esto significa que su sintaxis es un poco más compleja que la de HTML y CSS. Hay mucho más que aprender antes de poder escribir código JavaScript con fluidez. Quiero decir, la mayoría de la gente tarda un poco más en aprender JavaScript que aprendiendo HTML y CSS. Hay muchas opiniones sobre el mejor enfoque para aprender JavaScript, y no todas estas opiniones son las mismas que las mías.
Sin embargo, en realidad me opongo a usar una forma específica de aprender JavaScript. Mi aprendizaje de JavaScript salió mal. Básicamente, solo estaba recogiendo fragmentos de información sobre el lenguaje, ya sea de tutoriales o fragmentos de código, lo que creó grandes lagunas en mi conocimiento de JavaScript que luego tuve que llenar. Por lo tanto, te recomiendo que tomes una ruta un poco más larga, que espero te lleve a un mejor resultado. Primero, debe comprender qué hace exactamente JavaScript. JavaScript es un lenguaje de programación del lado del cliente. La frase "del lado del cliente" significa que el código no se ejecuta en el servidor, sino en el navegador.
El lenguaje fue creado para trabajar con HTML y CSS, por lo que tiene muchas funciones integradas para facilitar el control del comportamiento del sitio. JavaScript complementa la naturaleza estática de HTML permitiéndole crear elementos interactivos, renderizar elementos basados en condiciones específicas, animar elementos o realizar cualquier número de tareas de programación. Descubrir para qué sirve JavaScript es muy importante porque le ayuda a comprender cuándo usarlo y qué buscar mientras aprende JavaScript.
Como mencioné antes, trate de no aprender JavaScript a partir de fragmentos de código. La mayoría de la gente usa este enfoque, incluyéndome a mí. Con este enfoque, encontrará un fragmento de código que realiza la tarea que necesita, insértelo en uno de sus proyectos, edítelo y ejecútelo. Como sabe, este enfoque le permitirá dominar algunas habilidades de JavaScript a lo largo del tiempo, pero lo más importante es que en este caso se está perdiendo la razón por la que se debe utilizar este lenguaje en particular. Como resultado, no comprenderá completamente este lenguaje de programación.
Además, le recomiendo que primero aprenda los conceptos básicos de JavaScript y luego comience a aprender sobre bibliotecas como jQuery. Usar jQuery es una idea bastante tentadora porque es una herramienta poderosa y mucha gente la usa. Instantáneamente encontrará cientos de tutoriales sobre cómo usar jQuery para su sitio. Pero aprender jQuery incluso antes de aprender JavaScript es un gran error. Como puede imaginar, usar la biblioteca jQuery no siempre es la decisión correcta. Y si solo sabe cómo usar una biblioteca en particular, no podrá comprender cuándo usar JavaScript y cuándo no.
Este enfoque asume que, al menos, debe aprender de manera estructurada y enfocada los conceptos básicos de JavaScript a través de, por ejemplo, un curso o libro específico. Si bien muchos tutoriales le enseñan cómo realizar tareas muy específicas con JavaScript, realmente necesita tener una comprensión clara de sus conceptos y sintaxis para comprender qué hay detrás de cualquiera de sus acciones. Por supuesto, no todos los diseñadores web necesitan dominar JavaScript. Aquellos diseñadores que, por ejemplo, quieran hacer desarrollo frontend, deben dominar JavaScript.
Y para aquellos más interesados en el diseño UX o el diseño visual, solo lo básico debería ser suficiente. Independientemente de cuán profundo deba ser su conocimiento de JavaScript, debe dominar los conceptos más importantes para tener una comprensión práctica del idioma. Lo principal es tener paciencia. Se necesita mucho tiempo para aprender JavaScript, y si deja de aprenderlo demasiado rápido, no podrá recordar lo que aprendió si lo necesita para un proyecto. Le recomiendo que comience con el curso de capacitación esencial de JavaScript de Simon Allardyce, que se puede encontrar en la biblioteca de capacitación en línea en lynda.com.
Observa JavaScript desde el punto de vista de un principiante y realmente describe los conceptos básicos de JavaScript de la manera más sencilla. Además, recomiendo ... perdón si pronuncio mal ... el libro de Marijn Haverbeke. Por cierto, este es un gran tipo. De todos modos, te recomiendo que leas su libro "Eloquent JavaScript", también llamado "Introducción moderna a la programación". Este libro está realmente escrito en un idioma accesible para principiantes. Hay muchos libros escritos en JavaScript, pero este libro está escrito por un programador y para programadores. El libro "JavaScript elocuente" fue escrito de tal manera que es una especie de introducción al lenguaje para principiantes.
Lo más sorprendente es que puede comprar una versión impresa del libro, pero ... Hagamos clic en este enlace ... También hay una versión electrónica de este libro. Cubre todo lo relacionado con JavaScript y proporciona algunos ejemplos prácticos con los que puede experimentar para ver cómo funciona todo. Este es un pequeño sitio realmente genial. Al igual que con HTML y CSS, docs.webplatform.org tiene una sección de JavaScript. Lo encontrará muy útil ya que tiene algunos tutoriales, funciones, objetos, eventos, todas esas cosas básicas que necesita saber al aprender JavaScript.
No puedo subestimar la importancia de stackoverflow.com. Si nunca lo ha encontrado antes, entonces vale la pena señalar que este sitio le permite crear su cuenta y posteriormente publicar preguntas a los miembros de este sitio sobre aquellas cosas que lo confunden cuando trabaja en sus propios proyectos, o hacer preguntas sobre esos. conceptos que le resultan difíciles de aprender. A menudo, la gente da muchos consejos diferentes, las buenas respuestas obtienen votos adicionales y los malos consejos se ven privados de votos. Por lo tanto, después de un tiempo, gracias a los comentarios de los miembros de la comunidad, podrá comprender cuál es la mejor respuesta. No solo puede publicar preguntas, sino también buscarlas en el sitio. Lo más probable es que alguien ya haya hecho la pregunta que le interesa. Por lo tanto, stackoverflow.com es un recurso muy útil. Al igual que con HTML y CSS, la red de desarrolladores de Mozilla también tiene una sección de JavaScript. Contiene mucha información diferente. Además, en el lado derecho del sitio hay una sección que enumera los recursos donde puede obtener información más detallada sobre un tema en particular. Parte de esta información es completamente técnica. Pero, básicamente, cualquier novato en JavaScript puede aprovechar la mayor parte de esta información al principio de aprender este lenguaje de programación. Si, después de dominar los conceptos básicos de JavaScript, desea estudiar este lenguaje con más detalle, puede usar otro libro bastante útil, en mi opinión: "JavaScript profesional para desarrolladores web", cuyo autor es Nicholas. Zakas.
No te engañaré y afirmaré que entendí todo lo que está escrito en este libro, pero lo uso como material de referencia, porque después de aprender los conceptos básicos de JavaScript, pueden surgir situaciones en las que pareces quedarte atascado y no sabes qué hacer. has el siguiente. Este gran libro le permite comprender mejor la sintaxis de JavaScript, aprender a escribir código más eficiente y aplicar no solo conceptos básicos de JavaScript, sino también funciones más avanzadas. Por supuesto, si vuelve a lynda.com, encontrará una sección completa de excelentes cursos de JavaScript allí, incluido el de Simon. Por lo tanto, analice detenidamente qué cursos hay en nuestra biblioteca.
JavaScript es uno de esos lenguajes que solo se pueden entender poniéndolo en práctica. Por lo tanto, el enfoque que elija para estudiarlo debe implicar la implementación de muchos ejemplos prácticos.
jFBL, CHEV-UVTBOYGB TSYCHЈF. chSh OBTYUPCHBMY LBTFYOLY, RPDZPFPCHYMY FELUF, UDEMBMY CHUЈ, UFP IPFEMPUSH, Y ... ABULHYUBMY. rPUENH? dB IPFS VSH RPFPNKH, UFP CHSCHUFTBDBOOBS CHBNY UVTBOYYULB OYLBL OE PFLMYLBEFUS ACERCA DE DEKUFFCHYS CHMBDEMSHGB, TsBDOP YBTSEZP RP OEK LKHTUPTPN. FSHZHH, RPYUFY OERTYMYUOP RPMHYUIMPUSH ... SECADOR DE PELO OE NEOEE, VHDEN MEUUIFSH.
DP FPZP, LBL OBYUBFSH TBUULB P CHUSLIYI FEIOYUEULYI ZHPLKHUBI ACERCA DE RPFEIKH RPUEFYFEMSN Y UEVE, MAVINSCHN, OBDP RTEDUFBCHYFSH, YUPP CHPPVEYT NSCH.
sshl HTML UFBFYUEO. dMS FPZP, YUFPVSH OBKHYUIFSH UVTBOYGKH "TSYFSH", PFLMYLBFSHUS ACERCA DE DEKUFCHYS RPMSHSPCHBFEMS, OKHTSOP OBKFY URPUPV Ybrtpztbnnnytpchbfcheo FP EMPEO. HNOSCHE MADY - OE YUEFB OBN U CHBNY - TEYBAF LFKH RTPVMENH, CHUFBCHMS CH ZYRETFELUF LHULY RTPZTBNNOPZP LPDB, LPFPTSCHE OBSCHCHBAF ultyrfbny. chPVEE ZPCHPTS, ULTIRF - RTPUFP NBMEOSHLBS RTPZTBNNLB, UTBVBFSCHCHBAEBS FPZDB, LPZDB EK ULBTSKHF, Y OBRYUBOB POB NPTSEF VSCHFSHY OBRYUBOB POB NPTSEFP VSCHFSHY OB nSCH U CHBNY VKHDEN ZPCHPTYFSH FPMSHLP PV PDOPN Y'OYI - JavaScript. UYOFBLUYU JavaScript CHSF YY VPMSHYPZP Y UETSHЈBOPZP SJSHLB Java, ACERCA DE LPFPTPN RTPZTBNNYTHAF UVTBYOSCH VPTPDBFSHE DSDY DECHEMPRETSCH, RPMHYUBS JB
OBYE U CHBNY DUMP NBMEOSHLPE, OBN OBDP RTPUFP OBKHYUIFSHUS RYIBFSH LFY UBNSHE ULTYRFSH LKHDB RPRBMP, YUFPVSCHUЈ NYZBMP, LTKHFIPZBMEBMEZHT y FPZDB LPZP-OYVKHSH RMPIPZP PF OBYEK UVTBOYGSCH FPYUOP ICHBFIF LPODTBFYK, B BOBYUIF, NSCH U CHBNY IPTPYE. b EUMY LPODTBFYK ICHBFIF LPZP-OYVHDSH IPTPYEZP? ¡OEFENTEMENTE! ьFINY ЪBDBYUBNY ЪBOYNBAFUS UREGBMYUFSCH RP NBTLEFYOSKH Y TELMBNE, POI JOBAF, UFP FBLPE Gemechbs zthrb, J PFZPOSF CHUEI IPTPYUPYUPY PF oh, UFP-FP S PRSFSH ъBRKHFBMUS: LCS LPZP Ts NSCh FPZDB CHPPVEE FTHDYNUS?
uOPCHB LPOFEKOETSCH
yuFPVSH CHUFFBCHYFSH LHUPL LPDB ACERCA DE JAVING JavaScript CH FEMP HTML -UFTBOYGSCH, OBN U CHBNY PRSFSH RPOBDPVYFUS LPOFEKOET. chPF FBLPK:
EDYOUFCHOOSCHK RBTBNEFT, LPFPTSCHK DEKUFCHYFEMSHOP UVPIF YURPMSHCHBCHBFSH, idioma OBSCHCHBEFUS. EN PRTEDEMSEF, ACERCA DE LBLPN SSCHLE OBRYUBOP CHUЈ FP, UFP OBIPDYFUS CHOHFTY LPOFEKOETB. dche DPRPMOYFEMSHOSHE UFTPULY CHOHFTY ZPCHPTSF UFBTPNKH VTBKHETKH, LPFPTSCHK OILBLYI ULTIRFPCH OE RPOINBEF, UFP CHUЈ, OBIPDSEEEUS NECDKH- LPNNEOFBTYK, LPFPTSCHK OBDP RTPUFP PUFBCHYFSH CH RPLPE Y OYUEZP U OYN OE DEMBFSH. fBLYN PVTBSPN, EUMY LFP-FP PFLTPEF UVTBOYGKH U RPNPESHA LFPZP UBNPZP UFBTPZP VTBKHETB, PO RPMKHYUIF FPMSHLP YUUFSCHK HTML -LPDLTCH, B CHUEFT EUMY JOBLY LPNNEOFBTYS PFUHFUFCHHAF, B CHOHFTY ULTYRFB OBIPDYFUS UFP-FP FBLPE, UEZP VTBKHET OE RPOINBEF, RPUEFYFEYFYUVLEV UPMEYUPHEYUPHEYFEYUFYUVLEY pOP OBN U CHBNY OBDP?
FERETSH P FPN, ZDE UVPIF RPNEEBFSH ULTYRFSH. h RTYOGYRE, POI NPZHF OBIPDYFSHUS ZDE HZPDOP, OP MHYUYE RPNEBFSH JavaScript-LPD CH LPOFEKOETE HEAD. eUMY TBNEUFIFSH LPD CH TBEDEME
..., PO PVSBFESHOP YURPMOIFUS CH FPF NPNEOF, LPZDB VTBKHET DPKDЈF DP OEZP RP NETE BZTKHLY UVTBOYGSCH. h OELPFPTSCHI UMHYUBSI FP FPTSE OEPVIPDYNP, OP IPTPYYN FPOPN SCHMSEFUS PZHPTNMEOYE ULTYRFPCH B CHYDE zhholgyk, LPFPTSCHE NPTSOP RTY OEPVIPDYNPUFY CHSCHCHBFSH dv MAVPZP NEUFB UFTBOYGSCH J LPFPTSCHE OE VHDHF CHSCHRPMOSFSHUS DP FEI RPT, RPLB NShch tiene CHBNY FPZP OE BIPFYN.Dese la vuelta
FEIOUEEULPE ABDBOYE
rPUFBOPCHLB ЪBDBYUI OPNET PDIO.
acerca de UVTBOYGE EUFSH LOPRLB, CHCHRPMOEOOBS CHYDE Y'PVTBCEOIS CH ZhPTNBFE GIF. oKhTsOP, YuFPVShch POB LBLYN-FP PVTBPN NEOSMBUSH RTY OBCHEDOYY ACERCA DE OEЈ LKHTUPTB.
ьФПФ ЬЖЖЕЛФ RP-BOSMYKULI OBSCHCHBEFUS roll-over TH CH TEKFYOSE RPRKHMSTOPUFY ZZHELFPCH JBOYNBEF, UCHETOPE, RETCHPE NEUFP. jFBL, RTYUFHRINE.
TEBMYBGYS
RTECDE CHUEZP OBN RPOBDPVSFUS dche LOPRLY: YUIPDOSCHK CHBTYBOF RMAU FPF, LPFPTSCHK DPMTSEO RPDUFBCHMSFSHUS CHNEUFP OEZP RTY DCHEYTSETOYCHEY NKHTUPSCH LKHTUPYP. PVE LBTFYOLY DPMTSOSCH YNEFSH PDYO Y FPF TSE TBNET. UNSCHUM CHUEEI DBMSHOEKYYI NBOYRKHMSGYK UPUFPIF CH FPN, YUFPVSH BNEOIFSH PDOP Y'PVTBTSEOYE DTHZYN, B RPFPN CHETOHFSH YUIPDOPE ACERCA DE NEUFP.
CHUFBCHMSEN RETCHHA LOPRLH H HTML. LPD VKHDEF CHSCHZMSDEFSH RTYNETOP FBL:
FEZ IMG YURPMSH'KHEFUS DMS TBNEEEOYS ZTBZHYLY ACERCA DE HTML -UFTBOYG. RBTBNEFTSCH nombre, src, ancho І alto ЬBDBAF UPPFCHEFUFCHOOOP YNS CHUFTFEOOOPZP CH HTML PVYAELFB DMS DBMSHOEKYI UUSCHMPL ACERCA DE OEZP, YNS ZTBZHYUEULPHYUFYUPHYBYBYUFYT CH
FERETSH TBNEUFYN CH TBDEME HEAD UMEDHAEYK VMPL:
FERETSH DPVBCHYN EEЈ DCHB RBTBNEFTB CH FES IMG:
Onmouseover = "ImgOn ();" onmouseout = "ImgOff ();"
OPRPNOA, UFP SNSCHL JavaScript YUHCHUFCHAYFEMEO L TEZYUFTKH, RPFPNKH, EUMY CHPPN NEUFE OBRYYEFE imgon, B CH DTHZPN ImgOn, FY PRYUBOIS OEFNSHDHT
pUFBMPUSH UDEMBFSH RPUMEDOEE: DPVBCHYFSH PDYO RBTBNEFT CH FES BODY:
Onload = "ImgPreload ();"
en LPDPN RPLPOYEOP. con OBNETEOOOP OE DBA DEFBMSHOSHI YOUFTKHLGYK: TBKHNEEFUS, YY UPPVTBTSEOYK MЈZLPZP UBDYUNB. OP P FPN, LBL LFP CHUЈ TBVPFBEF, TBUULBTSKH RPDTPPVOP.
PYASUOOEOS
h BZPMPCHLE UVTBOYGSCH - B YNEOOOP CH UELGY HEAD - NSC UPDBMY ULTIRF, CHLMAYUBAEYK CH UEVS FTY ZhHOLGY: ImgPreload, ImgOn Y ImgOff. Función lMAYUECHPE UMPCHP CH VPMSHYOUFCHE SSCHLPCH PRTEDEMSEF LHUPL LPDB, LPFPTSCHK NPTSEF VSHFSH NOPZPLTBFOP CHSCHBO YY TBMYUOSHI NEUF RTPZTBNSCH. pWAYK UMHYUBK UYOFBLUYUB CHCHZMSDIF FBL:
Función func_name (par1, par2, par3) (...)
TBYYZHTPCHSCHBEFUS CHUЈ LFP UMEDHAEYN PVTBPN: ZhHOLGYS U YNEOEN func_name, CH LPFPTKHA RETEDBAFUS RBTBNEFTSCH U YNEOBNY par1, par2 Y parShch3, LPPFP OTP. ZHYZKHTOSCHE ULPVLY PVTBNMSAF FKH YUBUFSH, LPFPTBS, UPVUFCHEOOOP, Y VKHDEF CHCHRPMOSFSHUS, EUMY NSCH LFKH ZhHOLGYA CHSCHUPCHEN, F. E. UPYMЈNUS OBJNEOYPK LP
YBYUEN OKHTSOSCH RBTBNEFTSCH, FEN VPMEE, UFP CH FEI FTЈI JHOLGYSI, LPFPTSCHE NSCH YURPMSHKHEN CH OBDBYUE OBDBYUE, YI OEF? b PPF JBYUEN. rTEDUFFBCHSHFE UEVE, UFP ACERCA DE UVTBOYULE EUFSH oeulpmshlp LOPRPL, DMS LBTSDPK Y'LPFPTSCHI NSCH IPFINE UDEMBFSH UCHPK UPVUFCHEOOSCHK roll-over. SFP TSE, RYUBFSH PFDEMSHOKHA ZhHOLGYA ACERCA DE LBTSDKHA LOPRLKH? b EUMY YI DEUSFPL? ZMHRPUFY LBLEY.
Hm OBRYYEN edyoufcheooha ZHHOLGYA LCA LBTSDPK PRETBGYY, J tienen RPNPESHA RBTBNEFTPCH RETEDBDYN CE yns FPK LBTFYOLY HBS LPFPTPK B DBOOSCHK NPNEOF RTPIPDYF LHTUPT NSCHY J LPFPTBS, UPPFCHEFUFCHEOOP, DPMTSOB HYUBUFCHPCHBFSH B UPDBOYY OHTSOPZP OPL ZHZHELFB. chPF Y CHUЈ.
CHETOЈNUS L OVYENKH LPDH.
zhHOLGYS ImgPreload UMKHTSIF DMS RTEDCHBTYFEMSHOPK ЬBZTHKHLJ CH RBNSFSH LPNRSHAFETB FPZP Y'PVTBCEOIS, LPFPTPPE DPMTSOP VSCHFSH RPDUFDUFBCHPMEOPU OBJECT. POB ABRHULBEFUS FPZDB, LPZDB CHUS UVTBOYGB ABZTHYMBUSH: ABRYUSH onload = "ImgPreload ();" CH FEZE BODY POBUBEF, UFP RP UPVSHFYA onload (PLPOYUBOYA ABZTHALY PFPVTBTSBENPK YUBUFY UVTBOYGSCH VTBKHYETPN) VHDEF CHCHRPMOEOB ZhHOLGYS.
ъBYUEN OKHTSOB FB ZhHOLGYS? DEMP CH FPN, UFP VBZTHALB LBTSDPZP Y'PVTBCEOIS U UETCHETB FTEVHEF CHTENEYOI, PUPVEOP RTY OE PYUEOSH IPTPYEK UCHSYY. eUMY NShch VHDEN FBEYFSH CHFPTHA LBTFYOLH tiene UETCHETB, OP LHTUPT HKDЈF tiene LOPRLY TBOSHYE, Yuen NShch HCHYDYN LBLPK-OP ZHZHELF, FL ZTBZHYYUEULYK PARA ZHBYNHKM LOPRLY. dTHZPE HÚMEDO, LPZDB FTEVKHENBS LBTFYOLB HTSE OBIPDYFUS CH RBNSFY: ABZTKHLB RTPY'PKDЈF NZOPCHEOOP.
FERETSH P UBNPK ZhHOLGY. ъBRYUSH pic2 = nueva imagen (); UP'DBЈF OCHSCHK PVYaELF FIRB Imagen, ACERCA DE LPFPTSCHK U LFPZP NPNEOFB NSCH NPTSEN UUSCHMBFSHUS, B UMEDKHAEBS UVTPYULB pic2.src = button1b.gif; ZPCHPTYF P FPN, LBLPK ZTBZHYUEULYK ZhBKM UPPFCHEFUFCHHEF LFPNKH PVYAELFKH. FERETSH, ЪBRTPUYCH J MAVPZP NEUFB LPDB ЪOBYUEOYE pic2.src, NSCh FHF TSE RPMKHUYN button1b.gif, UFP OBN Y FTEVKHEFUS.
pVTBFYFE CHOINBOYE ACERCA DE FP, LBLYE RBTBNEFTSCH NSCh DPVBCHYMY CH FES IMG. ъBRYUSH onmouseover = "ImgOn ();" P'OBYUBEF, UFP RP UPVSHFYA onmouseover (LHTUPT CHYAEIBM ACERCA DE LBTFIOLKH) DPMTSOSCH VSCHFSH CHSCHBOB ZHHOLGYS ImgOn, B ABRYUSH onmouseout = "ImgOff;" POBUBYUBEF, UFP LKHTUPT HYЈM U LOPRLY, Y FERETSH OKHTSOP ABKHUFIFSH ZhHOLGYA ImgOff. lBL RPOSFOP Y OBCHBOYS, LFY DCHE ZhHOLGY PFCHEYUBAF ЪB RPDNEOH LBTFYOLY (ImgOn) Y CHUCHTBF EЈ CH YUIPDOPE UPUFFPSOYE (ImgOff). FERETSH RPUNPFTINE, LBL LFY ZhHOLGY TBVPFBAF.
h ZHHOLGY ImgOn RETCHBS UVTPLB (temp = mybutton.src;) RETEDBЈF RETENEOOPK temp YNS FPZP ZTBZHYUEULPZP ZHBKMB, LPFPTSCHK UPPFCHEFUEFCHKHEFKHUPUPUPDUPYUP hFPTBS UFTPLB (mybutton.src = pic2.src;) RETEDBЈF LOPRLE YNS ChFPTPZP ZhBKMB, LPFPTSCHK NSC RPDUFBCHMSEN. LBL FPMSHLP LFP RTPYSPYMP, CHNEUFP RETCHPOBYUBMSHOPK LBTFYOLY ACERCA DE NEUFE LOPRLY CHOYLBEF LBTFYOLB button1b.gif, Y OBYB BDBYUB TAMPUMP. OPRPMPCHYOKH, RPFPNKH UFP OBN EEЈ RTDUFPIF CHETOHFSH LOPRLKH CH YUIPDOPE UPUFFPSOYE RPUME FPZP, LBL LHTUPT NSCHY HVETЈFUS CHPUCHPSUY.
ьFYN Y ЪBOYNBEFUS ZHHOLGYS ImgOff. eЈ EDYOUFCHEOOBS UVTPYULB (mybutton.src = temp;) ChPUCHTBEBEF LOPRLE FPF ZhBKM, LPFPTSCHK UPPFCHEFUFCHPCHBM EK CH UBNPN OBYUBME. chuЈ!
dMS RTEINETB RPUNPFTYFE, LBL PTZBOYSPCHBOSCH roll-over ACERCA DE ZMBCHOPK (YMY MAVPK DTHZPK) UVTBOYGE NPEZP UBKFB. ьFP FBLYE NBMEOSHLYE UYOYE FPYUY, CHOOILBAEYE CHOKHFTY NBMEOSHLYI VESCHI LTKHTSPYULPCH, LPZDB CHSCH CHPYFE NSCHYLPK RP RHOLFBN NEOA. rTBCHDB, FBN CHUЈ UDEMBOP YUHFSH-YUHFSH YOBYUE. ;-)
Openwin
TBUUNPFTYN ABDBYUH OPNET DCHB.
FEIOUEEULPE ABDBOYE
jFBL, OBN OKHTSOP, UFPVShch
RTY EEMULE NSCHYSHA ACERCA DE UUSCHMLE PFLTSCHCHBMPUSH DPRPMOYFESHOP PLOP VTBKHETB, UCHPKUFCHB LPFPTPZP NPTSOP VSCHMP VSCH PRTEDEMYFSH VBTBOYE. OERMPIP, EUMY LFP PLOP NPTSOP VKHDEF YBLTSCHFSH EEMULPN RP TBURPMPTSEOOPK CH ON TCE UUSCHMLE.
pZPCHPTLB
ьFKH ЪBDBYULH NPTSOP TEYYFSH Y UTEDUFCHBNY UBNPZP HTML, RTBCHDB, ЪBDBFSh uchpkufchb OPCHPZP PLOB CHUЈ-FBLY OE HDBUFUS, DB Y ЪBLTSCHYFSHYEBOSCH CHURPNOIN UOBUBMB, UFP FBLPE UUSCHMLB.
ChPF FHF X OBU U CHBNY UUSCHMLB.
chFPTPK CHBTYBOF:
oE FBLBS HC VPMSHYBS TBOOYGB, LBLBS YUBUFSH LPOFEOFB CHCHRPMOEOB CH CHYDE UUSCHMLY: FES RTYUHFUFCHHEF CH MAVPN UMKHYUBE, B PO-FP OBN Y OKHTSEO.
fBL CPF, YBDBYUH NPTSOP TEYYFSH DPVBCHMEOYEN RBTBNEFTB objetivo CH FES (objetivo = "zzz"). chNEUFP zzz NPTSOP RPDUFBCHMSFSH PDOP YJ FTЈI ABTEETCHYTPCHBOSCHI JOBYOOIK:
Self _top _blank
ъОБЮЕОЕ _self YURPMSHHHEFUS CH FPN UMKHYUBE, EUMY OCHSCHK DPLHNEOF DPMTSEO VSCHFSH PFLTSCHF CH FPN TCE PLOE (ZHTEKNE), UFP YYUIPDOSCHK; OBYUEOYE _top ZPCHPTYF P FPN, YUFP OPCHSCHK DPLHNEOF VHDEF PFLTSCHF B FELHEEN ploe VTBHETB, CHSCHFEUOYCH dv OEZP Chueh ZHTEKNSCH, EUMY FBLYE OBMYYUEUFCHHAF, B OBYUEOYE _blank LBL TB PRTEDEMSEF, YUFP OPCHSCHK DPLHNEOF VHDEF PFLTSCHF B OPCHPN ploe, LPFPTPE PFLTPEFUS UREGYBMSHOP LCA FPK GEMY. OP - LBL S HTSE ZPCHPTYM - HRTBCHMSFSH RBTBNEFTBNY LFPZP PLOB NSCH OE UNPTSEN.
LUFBFY, URYUPL ABTEETCHYTPCHBOOSHI JOBYUEOYK OE YUYUETRSCHBEFUS FTENS PRYUBOSCHNY YDEUSH RTYNETBNY, OP ЪB F FIN - L FETBRECH LHPPH E.
DEUSh OHTSOP DPVBCHYFSH, YUFP, PE-RETCHSCHI, objetivo LTPNE BTEETCHYTPCHBOOSCHI RBTBNEFTPCH B LBYUEUFCHE NPTSEF VSCHFSH RPDUFBCHMEOP YNS HTSE UHEEUFCHHAEEZP PLOB, B EUMY FBLPZP RFU VTBHET B VPMSHYYOUFCHE UMHYUBECH RPUFBTBEFUS PFLTSCHFSH OPCHPE Plop J BZTHYFSH DPLHNEOF FHDB. chP-CHFPTSHI, CON KhRPNYOBM ZHTEKNSCH, P LPFPTSCHI OBN U CHBNY RPLB YUFP OYUEZP OE YCHEUFOP. acerca de OB DBOOCHK NPNEOF PVPKDЈNUS FEN, UFP ZHTEKNSCH - LFP PLOB OEBCHYUYNSHI DPLHNEOPPCH, LPFPTSCHE CH MAVPN LPMYUEUFCHE NPZKHF OBIPDIFSHUS PYEBYET PVEBYT CHLOEEN DPLHNEOPPCH. rПДТПВОЕ ПЛФПН НЩ РПЗПЧПТЙН ОЕУЛПМШЛП РПЪЦЕ. h FTEFSHYI, YURPMSHPCHBOYE UUSCHMPL LCA PFLTSCHFYS OPCHPZP PLOB CHSCHCHBOP FPMSHLP SECADOR, DE CH YUFP Netscape UPUFPSOYY RPOSFSH UPVSCHFYE onclick (EEMYUPLY UIPUSCHFYE. Internet Explorer DEMBEF ЬFP U MЈZLPUFSHA, OP OBN PF ЬFPZP OE MEZUE: ULTYRFSH DPMTSOSCH TBVPFBFSH CH MAVPN VTBHATE.
TEBMYBGYS
rPDZPFPCHYN ZHBKM newfile.htm, UPDETTSBEYK UMEDHAEYK LPD:
YUFPVSH YBLTSCHFSH PLOP, EMLOYFE YDEUSH.
pVTBFIFE CHOINBOYE, UFP UFTPLB U FESPN
TBPTCHBOB: OYUESP UVTBYOPZP, HTML FBLYE CHEEI RETEOPUIF URPLPKOP. uFTBOOPE OBYUEOE RBTBNEFTB href - "#" - OETEDLP YURPMSHKHEFUS FPZDB, LPZDB UUSCHMLB LBL FBLPCHBS OHTSOB, B RETEIPD RP OEKHEKOEKU DBMTSO
dBMEE. h FPN ZhBKME, YB LPFPTPZP CHSCH IPFIFE PFLTSCHFSH OPCHPE PLOP, OHTSOP UDEMBFSH DCHE CHUFBCHLY. RETCHBS - CH WELGY HEAD.
hFPTBS - ZDE-OYVHDSH CH FEME UVTBOYGSCH:
YUFPVSH PFLTSCHFSH OPCHPE PLOP, EMLOYFE YDEUSH.
FERETSH RPUNPFTYN, UFP X OBU U CHBNY RPMKHYUIMPUSH. lTPNE FPZP, NPTSOP EЈMLOKHFSH.
LOOFBFY, JNECFE CH CHYDKH: ЪBLTSCHFSH PLOP FBLYN PVTBYPN CHCH UNPTSFE FPMSHLP CH FPN UMKHYUBE, EUMY POP VSCHMP PFLTSCHFP RTY RPNPEY JavaScript.
n FPN, LBLYE EEЈ RBTBNEFTSCH NPTSOP ABRYIBFSH PE CHUFTFEOOKHA ZhHOLGYA window.open, CHCH RTPYUIFBEFE CH THLPCHPDUFCHE RP JavaScript PF W3C. ;-)
PYASUOOEOS
jHOLGYS OpenWin UPDETTSIF UVBODBTFOSCHK NEFPD JavaScript window.open, YURPMSHHAEYKUS DMS PFLTSCHFYS OCHPZP PLOB. h LBYUEUFCHE RBTBNEFTPCH NSCh RETEDBЈN LFPNKH NEFPDH (YMY ZHHOLGY, UFP RPUFE FP TSE UBNPE):
1. "newfile.htm" - YNS DPLKHNEOFB, LPFPTSCHK DPMTSEO PFLTSCHFSHUS CH OPCHPN PLOE.
2. "mywindow" - YNS LFPZP PLOB DMS DBMSHOOEKYY UUSCHMPL ACERCA DE OESP. xLBSCHBFSH OE PVSBFESHOP, OP RBTH RHUFSHI LBCHSCHYUEL ("") CHUЈ TBCHOP RTYDЈFUS RPUFBCHYFSH, F.L.
3. "ancho = 300, alto = 250, barra de herramientas = no"- OBVPT UFBODBTFOSHI RBTBNEFTPCH UP YOBYUEOYSNY. h DBOOPN UMKHYUBE - MYOEKOSCHE TBNETSCH PLOB Y YOZHPTNBGYA P FPN, UFP POP OE DPMTSOP YNEFSH RBOEMY YOUFTKHNEOPCH. BNEFSHFE, UFP JOBYUEOIS RBTBNEFTPCH S RYYKH VE LBCHSCHYUEL.
uMEDHAEBS YUBUFSH LPDB ( Edeush) RTEDRYUSCHCHBEF VTBKHETKH YURPMOYFSH ZHHOLGYA (NEFPD) OpenWin RTY EEMULE ACERCA DE UMPCH YDEUSH, PZHPTNMEOOPN LBL RHUFBS UUSCHMLB (href = "#").
fPYUOP FBLKHA TSE ZHPTNKH ABRYUY YURPMSHHEF ULTIRF, TBNEEЈOSCHK CH DPLHNEOFE, LPFPTSCHK PFLTSCHCHBEFUS CH OPCHPN PLOE. uFBODBTFOSCHK NEFPD ventana.Cerrar ЬBLTSCHCHBEF FELHEE PLOP, EUMY POP VSCHMP PFLTSCHFP U RPNPESHA JavaScript. eUMI NSCH IPFEMY VSCH ЪBLTSCHFSH DTHZPE PLOP, RTYYMPUSH VSH OBRYUBFSH mywin.close (), ZDE mywin - YNS PLOB, LPFPTPPE ULTYRFKH RTDUFFPIF BLTSCHFSH.
chSCHOPU ULTIRFPCH CH PFDEMSHOSCHK ZhBKM
eUFSH EEЈ PDYO CHBTYBOF ЪBRYUY LPOFEKOETB SCRIPT.
FFP POBUBEF, UFP CHUE CHBY ULTYRFSH NPZHF ITBOYFSHUS CH PFDEMSHOPN ZHBKME U TBUYYTEOYEN. js. eUFEUFChEOOP, B FPN UMHYUBE OE OHTSOP RYUBFSH LMAYUECHPE UMPCHP SCRIPT H UBNPN ZHBKME: RTPUFP RPNEUFYFE RTYCHEDЈOOHA CHSCHYE UFTPLH B TBDEME CABEZA, NY MAVGF VBYF. ьFP HDPVOP EEЈ Y RPFPNKH, UFP RTY CHP'NPTSOPN YUNEOOOY ULTYRFB CHBN OE RTYDЈFUS YUNEOSFSH CHUE HTML -ZHBKMSCH, LPFPTSCHE ACERCA DE OEZP USUSCHMBAF.
ъБЛМАЮЕОЕЙЕ
rPOSFOP, UFP RPLB EEЈ OYUESP OE RPOSFOP. uPVUFCHEOOP, S OE DBCHBM PVEF HYUIFSH CHBU SISHLH CH RPMOPN PVYAЈNE: DMS LFPZP EUFSH NBUUB KHNOSCHI Y RPMEOSHI LOIZ. rTPVMENB CH FPN, YUPP PYUEOSH YUBUFP X MADEK, RTPYUIFBCHYI FBLYE LOYZY, CHPOBOILBEF NBUUB CHRTPUPCH YNEOP CHTENS RETCHPK RPRSCHFLY TEBMSCHEYUPCHBFSHT y ChPF FHF, S OBDEAUSH, NPЈ NBMEOSHLPE THLPCHPDUFCHP PLBTSEFUS RPMEHOSCHN.
con TBUUNPFTEM CHBTYBOFSH TEYEOYS DCHKHI YBDBYU, LPFPTSCHE YUBEE CHUEZP CHUFTEYUBAFUS RTY RPUFTPEOY CHEV-UVTBOYG. LPOEUOP TSE, CHBN OKHTSOP BOBFSH VPMSHIE P JavaScript: CHP'NPTSOP, YNEOOOP HZMHVMEOYEN OBOYK NSCH Y ABKNЈNUS ACERCA DE UMEDHAEN HTPLE. b UEKYUBU - OBRPUMEDPL - OEULPMSHLP RTBCHYM, LPFPTSCHE OEPVIPDYNP RPNOFSH PE CHTENS RTPZTBNNYTPCHBOYS ACERCA DE JavaScript.
1. JavaScript aceptado YUHCHUFCHAYFEMEO L TEZYUFTH.
lBL HTSE ZPCHPTYMPUSH TBOSHYE, RETENEOOSCHE temp J Temp DMS SJSHLB JavaScript OE PDOP Y FP CHE: X OYI VHDHF TBOBOOCHE BOBYUEOIS, RPFPNKH VHDSHFE CHOINBFEYPE.
2. LBTSDSCHK PRTBFPT DPMTSEO PLBOYUYCHBFSHUS FPULPK U BRSFPK.
FEPTEFYUEULY RPUMEDOIK PRTBFPT VMPLB (...) NPTSOP RYUBFSH Y VE'FULY U BRSFPK, OP MKHYUYE EЈ CHUЈ-FBLY UVBCHYFSH… LTPNE UREGIBMSHCHET PZPBUCHPN
3. ОЕ ЬВЩЧБКФЕ PVTBNMSFSH ULTYRFSH UYNCHPMBNY LPNNEOFBTYS.