triunfoweb.com

Entradas con la etiqueta ‘CSS’

Un framework , según la Wikipedia es una estructura de soporte definida, mediante la cual otro proyecto puede ser organizado y desarrollado . Puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros software para ayudar a desarrollar y unir los diferentes componentes de un proyecto. Provee una estructura y una metodología de trabajo la cual extiende o utiliza para diferentes aplicaciones. Por lo tanto un framework de CSS, son instrumentos para el desarrollo de diseño, una biblioteca que está preparado de antemano lo que hace que la creación de normas de estilo para la codificación CSS de una página sea más fácil de realizar. La programación mucho más rápida y las colecciones de secuencias de comandos que podemos usar agilizan  el trabajo. Por lo tanto la estructura de CSS que cortará la mayor parte de nuestro tiempo de desarrollo sera tomar decisiones de compatibilidad con los navegador compatible y alguna cosa más. El artículo 11 Best CSS Frameworks , de GraphicAlerts , aparte de comentar las ventajas y los inconvenientes de usar estas herramientas, nos dejan una lista de los mejores framework para la edición de los códigos CSS de las hojas de estilo en cascada, nos deja la siguiente lista con sus enlaces: Blueprin [ Official website | Using Blueprint CSS Framework tutorial ] Yui Grids [ Official website |  Using YUI CSS Framework tutorial ] Yaml [ Official website |  Using Yaml CSS Framework tutorial ] Elastic CSS [ Official website |  Using Elasticss framework to create 2 column based layout tutorial ] 960 Grid system [ Official website |  Using 960 grid system framework tutorial ] Emastic [ Project website |  Using emastic css framework tutorial ] Snowdust [ Official website |  Project website ] Scaffold [ Project website |  Using scaffold css framework tutorial ] Compass [ Official website |  Using Compass css framework tutorial ] Tripoli [ Official website ] Elements CSS framework [ Official website ]

11 mejores frameworks para CSS

Los complementos son pequeños programas que modifican o añaden características a la apariencia o funcionalidad de Firefox. Hay tres tipos de complementos: extensiones , temas y plugins . Todos ellos permiten personalizar tu navegador Firefox a la medida de tus necesidades: Extensiones : Las extensiones añaden nuevas funcionalidades a Firefox. Pueden añadir distintas cosas, desde un botón en la barra de herramientas hasta una característica completamente nueva. Las extensiones permiten que la aplicación que será personalizada se ajuste a las necesidades de cada usuario, y al mismo tiempo, minimizan el tamaño y la apariencia de la aplicación misma. Temas : Los temas modifican la apariencia externa de Firefox y te permiten personalizarla a tu gusto. Un tema puede modificar solamente la apariencia de los botones de la barra de herramientas, o puede modificar por completo la apariencia y el funcionamiento de Firefox. Plugins : los plugins ayudan a que Firefox realice funciones específicas, como por ejemplo visualizar formatos gráficos especiales o reproducir archivos multimedia. Los plugins son levemente diferentes de las extensiones, la cuales modifican o añaden alguna característica las funcionalidades existentes. El objetivo característico de un plugin es añadir herramientas multimedia, tales como la posibilidad de insertar y reproducir videos en una página web. Puedes descargar e instalar muchos complementos desde Complementos de Firefox . Si buscas en Internet encontrarás muchos otros sitios con los citados complementos. De forma predeterminada, Firefox verificará periódicamente si están disponibles las nuevas versiones para tus complementos instalados, lo que nos facilita su seguimiento. Si aún no eres un usuario de Firefox, puede que desees convertirse en uno después de leer el siguiente artículo 26 awesome Firefox add-ons for web workers , de Designer-Daily .  Esta colección te ofrece algunos de los mejores complementos de Firefox para los que trabajamos en línea o en diseño y desarrollo web . Algunos de estos complementos ya hemos habado en más de una ocasión, pero es bueno ver otras lista y comparar. Por supuesto, es no quiere decir que tengas que instalar todos los complementos, pues existen miles de ellos , de lo contrario hinchamos en exceso a nuestro pobre Firefox. Para desarrolladores web . Estos son los clásicos, probablemente ya sabe todo eso, si usted estás usando Firefox desde hace un tiempo: Web Developer toolbar . Barra de herramientas con diferentes herramientas para desarrollo web, esta es la primera extensión que se instala cuando se hace una nueva instalación de Firefox. Firebug . Para editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web. Firebug, también permite instalar muchos complementos para ampliar sus capacidades, estos son algunos de ellos: CSS Usage : escanear varias páginas de tu sitio para ver si cumples con las reglas CSS. YSlow : analiza las páginas web y por qué son tan lentas basadas en las normas de Yahoo! ’s para los sitios web de alto rendimiento. CodeBurner : material de referencia para HTML y CSS. XRefresh : la automatización de actualización del navegador para desarrolladores web. Inline Code Finder : encuentra elementos HTML en línea con los eventos de JavaScript, estilo en línea y javascript: enlaces. Firecookie : ver y administrar las cookies en tu navegador. Pixel Perfect : facilidad de superposición de una composición sobre la parte superior de la web con el código HTML desarrollados. FireQuery : Firebug mejoras para jQuery. Pencil . Es un add-on para hacer prototipos de interfaz gráfica y simple boceto. Trabajando con el color . Firefox puede ser extendido para gestionar y crear paletas de colores, que puedes comprobar con estas herramientas: ColorZilla . Puedes obtener una lectura de color desde cualquier punto que aparezca en tu navegador, y muchas más. FirePalette . Esta extensión hace es añadir un selector de color para el panel de Firebug CSS. ColorSuckr . Pulsa sobre cualquier imagen en la web y te da el extracto de los 12 colores más comunes de ella. A partir de ello puedes crear esquemas de color de los resultados, así como muchas otras características. Análisis del sitio web . Vas a aprender mucho analizando otros sitios web o incluso los tuyos, puede probar algunas de estas herramientas para ello: Dust-Me Selectors . Extrae todos los selectores de todas las hojas de estilo en la página que estás viendo, los puedes analizar. Los datos se almacenan de modo que cuando pruebas las páginas siguientes, los selectores pueden ser tachados de la lista a medida que los consultas. GridFox . Dibuja una cuadrícula en la parte superior de la página web. Esto es útil para el control de los diseños de los diferentes elementos de la página en un diseño de rejilla. MeasureIt . Sacar una regla para obtener mediciones en cualquier parte de los elementos que componen una página web. View Dependencies . Añade una pestaña a la ventana de la Página de Información, en la que muestra todos los archivos que fueron cargados para mostrar la página actual. Los ordena del servidores y por los tipos (imagen, hoja de estilo, la escritura, etc.). Muestra el tamaño de cada archivo, y el tamaño total por servidor y página. Library Detector . Detecta qué bibliotecas JavaScript se utilizan en la página actual y muestra el resultado en forma de iconos con consejos detallados en la barra de estado. Aardvark . Potente y fácil de selector de utilidad amigable para seleccionar los elementos y realizar diversas acciones sobre ellos. Puede ser utilizado para limpiar una página antes de imprimir, y para el desarrollo web. Pruebas . Realizar tus pruebas de diseño de páginas web es más fácil con estos complementos: Window Resizer . Cambiar el tamaño de tu resolución en tu navegador para comprobar distintos tamaños de resolución de una página web, la barra de herramientas Web Developer Toolbar ya hace esto, pero con un acceso más rápido a esta función. Total Validator . Proporciona validación de HTML verdadero (2,0 HTML a XHTML 1.1) utilizando el DTDs oficial, además de añadir el atributo de chequeo. También se realiza la validación de la accesibilidad (WCAG, US-508), la comprobación de vínculos rotos, la revisión ortográfica (5 idiomas), y toma capturas de pantalla utilizando 36 navegadores en Windows, Linux y OS / X. Para ahorrar tiempo . Estas herramientas no son realmente relacionados con el diseño, pero van a ahorrar mucho tiempo si eres un trabajador web: Extended Copy Menu . Agrega un “Copiar como HTML” y “Copiar como Texto sin formato” para el contexto del menú del botón derecho del rató. Es útil para copiar el texto o HTML subyacente de una página web en los documentos, mensajes u otras aplicaciones. Dummy Lipsum . Generador del texto simulado “ Lorem Ipsum ”. Easy DragToGo . Le permite abrir enlaces en nuevas pestañas, guardar imágenes y hacer más con el gesto de arrastrar y soltar. PDF Download . Para hacer lo que quiera con los archivos PDF en la web. Recuperar el control, eliminar los problemas del navegador, ver los PDFs directamente en Firefox como HTML, y muchas más cosas.

26 buenos complementos para Firefox para trabajar con la Web

Nos encontramos totalmente inmersos en lo que se ha llamado en inglés el cloud computing , algo así como la computación en nube , es un paradigma que permite ofrecer servicios de computación a través de Internet, lo de la nube es por tanto una metáfora de Internet. inmersos en esa nube, pasamos tanto tiempo en ella, que muchos mantenemos y gestionamos nuestra vida social, trabajo, y otras cosas en línea , sobre todo los bloggers, diseñadores de páginas web, web master, etc. Todos ellos aparte de su equipo con sus aplicaciones habituales, donde terminan sus trabajos, en ocasiones necesita algunas herramientas útiles para aumentar su productividad, por eso en el artículo 22 Really Useful Online Tools for Web Designers and Bloggers , de DesiznTech , nos proporcionan un total de 22 herramientas en línea de gran variedad para diferentes cosas que puedes hacer . Han reunido algunos editor de código, editor de HTML para la edición de la página, cosas divertidas que puedes integrar en su sitio web y algunas herramientas para la vida social en línea. si tienes alguna herramientas en línea que puedas añadir a la colección, me encantará que lo comentes, así que gracias por adelantado. Editores de texto, CSS y HTML : 1. Online-HTML-Editor.org . Editor WYSIWYG. 2. Edit Pad . Editor de texto plano. 3. DarkCopy . Sencillo editor de texto en pantalla completa. 4. SiteGuts . Editor CSS, HTML y PHP. 5. PractiCode . Editor HTML, CSS y Javascript. 6. MyTextFie . Editor de texto plano. 7. Bespin . Editor de código de Mozilla (necesitas registrarte). 8. CSSFly . Editor CSS en tiempo real. 9. The Workshop . Editor CSS. 10. The Whole Internet . Editor CSS. Herramientas para blogs : 11. embedit.in . Incorporar cualquier tipo de documento en Tu sitio web. 12. Printfriendly . Hacer una impresión de la versión amistosa de su sitio web. 13. SikBox . Búsqueda en vivo para Tu sitio web. 14. Gazup . Subir archivos a varios hosts. 15. Closr.it . Compartir e integrar imágenes. 16. Feevy Home . Mostrar los canales desde otro sitio web en la barra lateral. Herramientas personales : 17. SketchFu . Diversión con dibujos, para publicar y compartir. 18. BeFuny.com . Efectos en las fotos de inmediato 19. Avartize.com . Avatar o perfil de usuario de Twitter con símbolos. 20. DailyBooth . Captura e intercambio de fotos. 21. Hi, I’m . Crear una página web personal. 22. Card.ly . Crear tarjetas de visita.

22 herramientas útiles para diseñadores web y bloggers

Leer el resto de esta entrada »

El uso de listas en HTML ( para una lista ordenada, y para una lista no ordenada) son unos de los elementos más comunes en la Web o los blogs. Como recordatorio, aquí podemos ver una lista ordenada y otra desordenada como se ve por defecto: Elemento de la lista ordenada # 1 Elemento de la lista ordenada # 2 Elemento de la lista ordenada # 3 Elemento de lista no ordenada # 1 Elemento de lista no ordenada # 2 Elemento de lista no ordenada # 3 En el artículo 8 different ways to beautifully style your lists , de MarcoFolio , van un poco más allá de la creación de las típicas listas aburridas, y nos muestran 8 diferentes maneras de darle un bonito estilo a las listas de HTML pero esta vez utilizando los estilos CSS , para dejar de ver de una vez por todas las típicas listas. En dicho artículo nos dejan todo explicado y con toda su codificación, es muy sencillo de seguir, aunque no sepas inglés. Podemos darle un vistazo a la demo o descargar los estilos directamente. Se ve mucho mejor, esas listas con estilo ¿no? Puedes obtener esos resultados, simplemente añadiendo un par de cosas al CSS. ¿Quieres saber cómo? pues no dejes de darle un vistazo al artículo mencionado.

Fuente:

http://www.cosassencillas.com/2009/10/21/8-maneras-darle-estilo-listas/

http://www.webs.com/index.jsp

Hay veces que por alguna razón personal u otra, uno se ve obligado a obtener un lugar dentro de la web, pero la mayoría de veces es por gustos personales o también por entretenimiento, y por estas razones deseas tener tu propio blog o pagina web para mostrarte ante todo el mundo y compartir ideas personales y razonables entre otras cosas.

Anteriormente conocida como Freewebs.com, ahora solamente es webs.com, esta herramienta y alojamiento gratis al mismo tiempo, nos permite crear páginas web con pasos realmente muy sencillos, permite a cualquier persona común a realizar su propia página web sin tener conocimientos a gran escala de CSS, PHP o Html.

Con tal facilidad podemos crear una página web decente, también puedes incluir blogs, galerías de imágenes, discusiones, sistemas de votaciones, pequeñas salas de chat, funciones de google y muchas más cosas interesantes.

Webs.com, también ofrece la posibilidad de obtener servicios Premium, esto quiere decir características de pagos, lo cual dependiendo de las funciones será el precio en dólares que pagaras anualmente, dentro de estas funciones se encuentran obtener un dominio de primer nivel, quitando el tusitio.webs.com por tusitio.com, .net, .org u otro, aumentando considerablemente el consumo de transferencia mensual y agregando más características para poder realizar tu pagina web.

Crear páginas web gratis | Sitio: www.Webs.com

Related posts:

1. Crear un blog gratis en Blogger.com Blogger.com te permite crear blogs personales y no tan personales,…
2. Crear avatares gratis online

   Faceyourmanga

   [/caption] FaceYourManga es una herramienta o…
3. Dominios gratis para tu blog o web ¿No tienes dinero para tu dominio?, ¿Quieres tener un…

Related posts brought to you by Yet Another Related Posts Plugin.

Fuente:

http://ayuda-blogger.com/utilidades/crear-una-web-o-blog-completamente-gratis/

http://tools.pingdom.com/

Hay veces que en nuestro sitio web o blog se encuentran archivos muy pesados que sin darnos cuenta, roban un montón de ancho de banda, estos pueden ser publicidad (los flash son los que consumen más ancho), imágenes del mismo CSS de tu blog, entre otras cosas, que sin darte cuenta hace que se cargue más lenta la vista de la página principal o de las paginas internas.

Pingdom Tools: es una de las herramientas online, en la cual puedes localizar los archivos más pesados que se visualizan en tu blog, una información muy valiosa por si quieres hacer algo para que tus visitantes reproduzcan tu blog más rápido que antes.

Solo con insertar tu URL sin el HTTP, el sistema se encargará de mostrarte las estadísticas completas de tu blog, acerca de los archivos que se localizan en el Index y el tiempo que se llevan para poder visualizarse, con esto podrás evitarte o deshacerte de algunos archivos que pienses que tardan mucho en cargar y son innecesarios.

Más abajo se mostraran las estadísticas totales de carga de tu sitio, en donde se puede ver el total de lo que se tarda en cargar tu blog, en diferentes cuestiones, como el CSS, el Html, las imágenes, los scripts, los objetos externos e internos entre otros. Esta herramienta es muy útil y podrás guiarte para quitar los archivos innecesarios de tu blog y así, hacer más rápida la carga de tu blog.

Ir al sitio | Tools.pingdom.com

Related posts:

1. Dominios gratis para tu blog o web ¿No tienes dinero para tu dominio?, ¿Quieres tener un…
2. Proteger el contenido de tu blog con CopyScape
   [/caption] Algo muy conocido en todos…
3. Crear una web o blog completamente gratis

   http://www.webs.com/index.jsp

   copyscape