(http://www.zona-web-colombia.com/images/Dise%C3%B1o%20paginas%20web%20bogota.png)
Hola a todos los lectores de Underc0de. Esta breve guia esta orientada a los que no saben nada sobre desarrollo de websites, les enseñaré a hacer su primer página desde cero y de una forma muy sencilla.
Quizas muchos recuerdan o usan Dreamweaver... Hoy usaremos una aplicación muy similar llamada Pingendo.
Pingendo permite maquetar rapidamente sitios en HTML, y nos deja personalizar el sitio a nuestro gusto. Podemos usar plantillas ya predeterminadas o armar la nuestra desde cero usando componentes que esta aplicación nos provee.
Sin más vueltas, comencemos con la práctica.
Lo primero que debemos hacer, es descargar Pingendo desde su web oficial: https://pingendo.com/download.html
Cabe aclarar que es multiplataforma, lo pueden usar tanto en Linux, como Windows o MAC.
Una vez descargado e instalado, lo abrimos y veremos lo siguiente:
(https://lh3.googleusercontent.com/ZWMEwyFMF5EaTZkGifD9tmwCMEYnoh9m1QoOO0pUdUZv5vohgS88hEbhBgkBNj-mT7-aN7rJTqSkErQ0n3zi_PzGzkt5E3TMe7VBbOo5WVlsRWmBuo-4ig89IMopsWj3XQb59X69Oveh06FUp-sDbEpOoLeUp1kC3Ite8E43Kr3I0KA7xu2FVXhh7sf37zsZzMSXJqZJ9ysxet0aRgewfsUtHwTgbTcWLHjmZYb_uGYVmnkG9WGaFo7E92kH6tNtGPztMHxxfCytv0XbUqkns41UC1j7GOdfyFI_ZUt_NBRVbMbyfJYwwQlhYS2_bvMZBhyvrZhMh0prR4dSy5wBCURuj6_6v1Ah7sUrZyOon-Y2XZLx2k7s0W2FTXpy7Bx1kmdmEVxxopKbZWMzQCA0SGqocqFdTfPSDkTlO_hIYGs7QxD_MEsWmyT1w-TMj2LKyOnryrNWz0NgSgfOptxqpzw0jCaEU-n0cCQm4m77kg39J6aW-wqaX8ZfChGuA3_pN2Nl-JkoY_U3RYVCLmFVssT3QwzTTNievZSedd1q4NLb2E3aX6u5bkqVvQznkwDkK9f-li8-CxoLR-RGwogNGO_O9AiYu4QGfPZEEBw=w1136-h603-no)
En este paso tenemos la opción de iniciar una web en blanco o abrir un template ya hecho. En este caso usaremos una plantilla armada como para empezar.
Esto nos abrirá una página de Pingendo con algunos templates predeterminados.
(https://lh3.googleusercontent.com/RR-8joPW5C48UNVt_4RvbtFQUFHVqRdoRhDJEm_4ZI8hGDO1pX6fDPprsQnJTT1EbVaSI4X98IUedUAFLWgM813gCt8i9KDqZfq-THkKG0xuEXZb3khRBOw5aoaOSMVwtWrkaM0PrH8TbpjFQWBSYWBklxjBj9sCPSLnUeGjwBA13_-1sI-FDt9j2TOnP94ZyCvy4c1urLQfAspEAacMaoUWcFOphlrnYwMraS1fxtAYHyKqPUzXxUOQpZabZkgZ4bZR1_xnQQIthI0ANZ148vVq01bnLKQ3I4yVc61pdnfXdJU6V8W2owCSb6VYbja8eGL9fJnCAGboHs4WT9VpqsUBYDn3_4DgQjaoH08Gir-xjy8VdugYuC6KY2IJUV43XcwYgU34vGI376IgyDkX_rE4azBBZ5BQK-VFeHmD2qyx64WGmrdTvOurfZhbdzNW3IrFL5GAquOwD60uA8Bj6_U-uG_mPTiOBtWLgMoObUnFtzujJvA_YZc0LWoySBNmIkSD1Y-kWym-UBBwauI0FJi8EhhwUQ_wmrNh2pbCx4WY77PCUcquPDZREW4UrQmkvDwgokTXTJ9TQeX4jmNff7v2JY2sydtSTJxdIZ8=w1364-h602-no)
Para abrirlo, solo ponemos el mouse sobre el template que nos guste y damos click en Open with Pingendo
(https://lh3.googleusercontent.com/feJihtLB0ghQ62B8f7e-LfMUDJx1YezfPSGMStsJJkcnMccKG0tkgwd2u1i08D5GGPvl3fVyjcD49_U_OHY6Dxz6doALe7bS0mPPFSVXY6TUEd-SKNq-2uQP4-ADBVstLQd68dOeyyaVa7pplbBofI34Sf2iIFXDyV-dW3DixNjxEbroaxQTyFYJBbxdhwo2TM6LIMBaPDHYHAMp8ngFmmGWdBIw8TD60kUbfQ6SF9P7hQ55tbMEuVWAmh7VN2N5oBNg71tZ6UEkYPbasTMofEiCps2gakNE2dKpKiZSvB1y1-oS3yjGCSnpicr8Xxb_3Be3qCFr-42RSNQI8sDS_JqquqQ1nQO9s1ulvlONgncqqsgJIT9vKWz6Nl76IXSQWXHy0jVOjRUtKSb6YUCbULgMPi2I4vz3oDRkQQN5Qeu8uh_w_m6gVfObM6sKo8n2Orpv0UCsGQtmGgVwCoiBKlY_fc0kSqkFGHb5LXN4GsOBu_km31Doh68PfJcp1tVrR-D2XyTeg3o_a0ZJjUe3DhO79iURq3L-Xe9WVN7oF_gtkQG1yvuQYZF843qZqL89dXHX2w62RdCg4RQ7hO_8qoWOR2VGXqcdmuWuTPM=w347-h505-no)
Y listo, nos saldrá el siguiente carte:
(https://lh3.googleusercontent.com/fBrEd9U2NWsZ9tL6FflwfBYrTzfXIjvFA2ZhhSrtmcfDN9V0tAzcArE5kIUujt8nRCQSXz3t2neckTK9OOcjENJwOWTf6x8Q51LJnFhGMMREtxsYYy4y2wNXDywUUiDbOBuQsGCmPl23EzvaEMm9g3w14C_q98X-MbX12X1b4Z68U3H-lFgj9pslLbuYsgudqMvyOQ0Rnet32X6yzubjljujggCHu7Lu6R7y-vaGZF62JfpoTJa15zlu-1Ib9pz5xpEUovyLT6nHZcgVPHv76RLmZWkkuNW9cjg6cmIRF4_8_XpnBYTwuFJ9pTcqLrZCoeACnV62U781DtUVA0Udb7XAMEoUzodX-5PnOcwSCuh69T1gMNkVRivvN7gkXD2lCnOgg5UTyohz1wNKctqmP95pULp05m3LuKJZCmAIEE4ycln9ueXCYpkfZTjRl_tsGTGoy_1J1vf-0Y8fSh9K1RmMYgeTq_vRmiDUwui9WDLZeUKYmjHyKRf9rxrTDQXaXrV_lvMX_qj1Q4OkVeVTRnPS0RcMN5tPN2lTKgS5_0WSv6maR5AjJ6J4SY3LGIObnCXOeAJEM6V87Ky92LuUr6PQ1Jt9H0B7v0zi_Bk=w497-h430-no)
Damos en Abrir enlace (teniendo a Pingendo como opción seleccionada)
Seguido a esto, nos dirá que le demos una ubicación de donde quedará almacenado nuestro proyecto y descargará toda la plantilla en ese directorio.
(https://lh3.googleusercontent.com/g7HDxPlkHJc1CxpvXxtxl_xTPW3Z94lc3fWr79qt1BDfbspECh1uKaLjo8aSVsp1mchuPBRvoGXqV8KDc3GaFvvBaGfWQHvfh4UNWa0oNBSZhjbT-WPMpP_sRVxz_sY3uNXxNWFZJs3LLU7Z_ADFAWAUnLYNglx_VwwrZvRuPxsWeUDxREKONNkTHqyusMCex5vpc03LVySiJ_OAAqrcJH6xOyxHYKbkqLfRTz4iMSsNWvY9fdIVftkKWTykC-Hr356LRhiTND1vy5k2U-b_-GQfzUPebDDPZmDOfhbzmxIrkXEmCHQzN1Bvo-eFSlOz1zgdMsO2pG1eVcNrbd03QiggPQ5d8skbDdXNtevHQ4n15jadk5etIMapafd9BhsTe4ntRyhwDrZf5StQ9BdjWD90L0JQWjN-_HkuMkZFyjBBRO9IHKnmNQOk0H_RbX-CHFiGgfnly7G_x6Y9tgDdxVHi6oGtO8I1QFaqx6kYscuUhE-SPm0_B-GxUm-3e9NM1k7AC4vkiWLWLiHmbHBeIYG5vg8k6utj1_FQjX9ukCmy2r0JFH6WFQTSCj19R5dgqQd7a3m584VvTWRA0MXqPVrpnl2hieNdV8ecdSA=w502-h603-no)
Una vez descargado, se abrirá y podremos comenzar a editarlo.
(https://lh3.googleusercontent.com/WlqQsjjGEaxcnti6D56FQwbJmsEAAnmk15g2m5aXCp0mWnDFc2QAY0G_3bz212VKOI8i0vaemfcB8u8_j_p4g2DckwV9ZGxzCUN5jus3s6MVyxhr-046hWPgAW-m4sQj1qYq9zrWX9PWDErgwWUNXUyWiQvlRYXfCPlpX5_2hsCBn83mDXU1Zv7IIqvygvxVBiPn7S3HYjP0hG-GR7kxI3GoYmjx5Q34UvBkeK19CS5sIfAwQKn4fEB4sqKA0Ji9ahDvhOQcB2hwuR336HTx8Vk8fgQi1aCfkhDv8Hqe-2VnkmkvMRbGWqsAUCjPXRbnQ1ApSsXFOVUdxqVRuQO6OEFyA-Q39LJO04YfSp5qUjPXJyrC9vLRaRHShKd_y_acxTPI8bEGhNdde4VHDSyTc7vLdt3bImF9ulouzv12Bjwn29jq1B4YEbkFWipCAum6Dmplg7sid-K0qT5btPN6tCf6MedxfD_qx4B4AwdhrpwHCIwzAtTeI7tWn0R0m9T_mzR22k_QvWbOcDvk_bXdIg_FT9rdjI1298oxssI9ZOoXeI_WsBp_T-t3yE4GJRDHcHGfeliksHCaXzdSJ5TLe7glB3QPrElLW_NJHg4=w1352-h597-no)
Como dije en un principio, es muy sencillo, solo basta con clickear lo que deseamos modificar, por ejemplo un texto, y lo modificamos por el que nosotros queramos.
Ejemplo:
(https://lh3.googleusercontent.com/vyaCUgqcbOvcz45CGJgVZqZwqVZw0tsPROQttAeX0OA03VwzMDSht-eVTYf9-B83088NVp0Ulp39WrRwOZmyurCdvc5jV8nlO5vQC31IqsgpP5oIC9QhidD1irq2HK50-SVeHCe2VLYWEVZ6q3A4sa5kPBKXzV4Bz0XlEVh-W1nUwxgrTqvxJz2mmx5icipTLZywqYFE_kHvpFxNDUNtB4Pe82Y9y5xxKuCgDV_HC3NYn6MdyTBo1BaI-BIBO7ZKUPORaHcnX3qSpXYzxwBkE--e8Av67l7bIe9HAoTB0Nh8MmQuYzycgeeX_RiaPhwnfDa2jN7CQv6S6NTXSpt1vh_OhijJq9sJb-hgY-XnoFcnskTMiBD4FathR-GZaY9ftu3IbikpdHh1mA3asLGJIb7jjvlPsZZyLMFB9XSk_ITgO8-_5-y_Hpn3-m6SER2iQuoXetEsPH2ST-8Fob7maf72HhFo1bjQQE813C5ar6_mK4MMgJn3h0p_OombDYHnDoLg2qwVdqlRfjkEnuH-K3nw_ojaKCVgN7cc0hoVP9Gl0wDZPT-WILY_VH9T52eWv3ttLb0wdD-DBEAyXAkHFdq_lYlLjqETw1pE8aU=w1131-h603-no)
Herramientas y elementosDel lado izquierdo, encontraremos un panel con varios elementos que podemos agregarle a nuestro sitio. Lo unico que debemos hacer, es mantenerlo presionado y arrastrarlo hasta el centro de la página.
(https://lh3.googleusercontent.com/5sXTXOGwaRXU3KtTovEqtCb_SIpnWisiN6vCVY1T1g9ZcjrKTXNgJhnmdWkeTb1KaH5eohVFE2u72eQq4bdztOSzIBNGHexD9OzknNeg9k1EHJGhH0wRgRs808BVzb6VwJuxQWZjt2P4nFs1gJpA2G9Y2DJ-ZpHR7waygLd4GcuXPrJ1v0IhCo4scjo8kRi5O0tDeiw5Z8unEPHOHxIzWBUtvzFGAo12TWs2xnJYH6E2xq8eH6l1zx_oy_VnKVRl99yqtTpBAzEygY3LQ5jD-SdzMtmO42Ci_NQr49OJlvsjPyPR7uOOmlcqs85LxLSd66Eo8hSx3cjfe7dLciPtKziNrCss60LK9oYcgJRZymgzTSAZnTQVnPgYVGVo1VQHaDFrPbi5UIIjJBo8L9_Gaw8zgpiNs4oX55IYH40yecbdpDPlsh_J7zIj83kmd37aydy69-pGpupo6oBbOgccL1h8oqxr7TqM91ZqkURvt4fA6IONirGtFfHKcLxbR1YQ-D-KyGUpKHPD4z9u4SrOt0nzTxBMHeoHqtKWTDf7r_8IqbrDERAxYBSwWdGDucxE1vuFf8H65tSQ3AkKvw1FU_sGzSZtay-xteC-PNA=w1133-h603-no)
(https://lh3.googleusercontent.com/Bg8LuU4Ytf-fhE3E4_VVzRf5PN1AMTtduGGG4LDtbzYif9LYPQlEzSpI5z88gUfBhAj8tua4wVA86W2ngKcd_E0tp5eh5WBd3WsVhYKQ7icx2XVyxNXyANxof_wLSr5_DT58IYWa8faoILHSZtV0xNt7Hnfj-LHVa97vo_JJmAo-0VtrFjnELrRIosVuCTzXCGgN94C7YSuhZXBKyn4UVq3sXl2rytmrlmxnItg3JlHEgO2tn9oHNSW7tyAGQ_-8bIUeurH1M_1NlQAydc4AgTOrWD0Kwiv6rXuZAfnyZnjJYdqyumLRKX_QTPu_Y-CELqrx-bRX0GRifRFNa1tAwl7lar6HOdUbcuyl699v9eWP-mR4X5drTDVwdn7S4mT-xm9CmPT0l9XXZn1fjQ2Q530hveOzbc4nkv2TnJqB0ofXxzVetzwcOtcpSBqCvXV-li_AQhQ7R0SY78PcCfu_9UZVqDD5MX8dl5pkkDig42LvElwrpSxxj4mvjMbxGZakQmhSt6wjC4Qg_XpVVI8hQ6Li6nyWMc37WF1oklOrTlRGbsUGb2_Z9dD3xkHQZuP0M2cmJEB8Ab2pETxdAnn4_zC5ghgTX7VqXX9yTrA=w1129-h603-no)
Del lado derecho encontraremos las propiedades de cada elemento que agreguemos. Por ejemplo colores, tamaños, fuentes, etc.
(https://lh3.googleusercontent.com/2Z7ARv5-6ES11Jgw47uTz6eYuTg6mLCgxL-b0fQtnJdzg4R6tZtP7XNmpGcubKuiliCsdvUrXrprtxPh7TRt7AjdCNGqCCr16T0SuLyJip7Nvxlig9FPxneOEtOXUire92EO8U5hv99ndNBkEHH4zkvJ9CpYWYbfuBdJmUTaO9T0ueC8NywNKxn3ns8LN5RZC_BtqvDlPO5HTDy4neCCdKFWlZygYTXNIkpVxwn4-ewJf4q55UKf7nvD3QbwqOtGTjS4TwVLncQsaoHm_s-09jG90dBEAXlgceNcQ_KiPh0X4Rzbj32dAJxM-e889PVHeY8aCqzB0nUTwC8nVEFgfg1NFzC7seqz7mLUjCgPKIjmR1V_C0mDPSqUvSSL6YakG6Ciyu6YQOeMR2yai_bJPA-du6hqZEK3w4Q52dJvis3UomY1J_fd2zIOhIeG47IPFhLng9O5WR3Y8CnAV4xsZaNOqyLew3KgTRYzGPv041PZsGEZowNwgRqE7unihJYRbTAP8znQuPMBy6SnTKWgDzlMXz6l28oNu0RFtkffjFpNBMVAaFJpDjjMsWuHLf0dCDojWpMLNcHdmZE4ML-k9-Or52ixPDLxkPrn9is=w1144-h603-no)
Otra de las ventajas que tenemos, es que nos permite emular otros dispositivos, tales como tablets o teléfonos móviles y ver como se ve nuestro sitio.
Pingendo tiene su estructura responsive, por lo que los sitios que hagamos también lo serán
(https://lh3.googleusercontent.com/z6DySFrZosWa4a6aAoKfyTBILNDNx-QPrcidKNglYrj0sBWgH7T4hHha7S-0VGT7KfxI6jafV--xpiUZBxlMIirIHXp8R5941q0DRph5qUcEM9hsisT-DlU99TOVCrzPF4iTfwLWdh3I3BS4YeCn794f9aNjNUVxIBItj78tbQp67iAKuTfHUvOATAc7KO69HVgZieGmo9gXgiWmRuQl-7WTsfe0o7XW60BKamlKr4c0iB5YEByHZk7F_h9VbGvnauLEzp0RidfxzmMq-vkPcZ4ZSAIAKOz8x2XYj8yX-5kwYTifnIvcBh2OIaF6j_HI0uVAE1ht9WvV0BHVMWv50FhqmiSuSM2XnVEad6zzeIWiQB9INMu5nOF8tD6Ghs--1XUsf9XcsmgF9BgDI4htKRFRDy5bQiBfH1543xutO-5KGsBr5lQ0IAlu8gsR8QqBs00UYQwThxL7AaQXYNuc52I76n6meXKkPMz0fS2T_Rv1VWDja-6ZN-VR1k-_IpPv9xTk98XnIsBsUBVNz0FiAHyMQB8gGS2qLvhlFqc8uN8-df1N_kq0dfmtQGoLm8kMqopQkbjIPKGjK98AgE_Msypw-Y7LKXsLKG7GTvI=w731-h603-no)
Una vez finalizado todo, solo damos en File >> Save o Save As... y nos descargará todo el proyecto
(https://lh3.googleusercontent.com/-46fn-j2QFha5va967PCD76-PwDMh7IcViYxgS7Cmq0sXYCBQcs5PsUCBdw5Xqr-zOKJ-GJer4xCWM0MPXraq07M-yPRercV7CRri_YGT8Nw3T2fkOBdPo74ApWmZpX1uNcUZQvtAY9SVeNR3_oAIGOQAm8x8Q11hSIFHUs3nEp2d4emvvLFr6SYXt8YSQeWNsGdRhPeKOdReB_zm0hB91AySsTxAmvGQNX0pgkKjmeo1dOixZrSwNsk74xZXLeExAl-buMhZGWUgCBrtack6mON0_tzhdiYx1Zkxj_OKgjv1_ubTPQemUyCzBCzVjvuOghYM-bQnWhQpT4lPOjVkaAt53eOqpkRuTtFgrGuCUhbM-YiCwGaVzVpKucBdFFChYt8cGfcvlQV41vzF6uZRAOcbMrayqe1nNyzFT2OUwaYhYuu1r6bltPC1OyXKpPqyIA86AetZie8ZnsiJr2nqs1q_BKQbD_icsi23eeeG8plpEl5l7pLbFmaJ6wpGK1r2ZXYyNZLmFN-Qu71lYAp2dWJrhP_0pfXlB4tlTYAsl58ZvGm3gVt3tFxUJm1QVp_4XJCXUCYNmW3DXA2VQieGqC76dBawXnRVQtHn1o=w568-h468-no)
Y con eso ya tendremos listo el sitio web.
Armando un sitio desde ceroAhora procederemos a armar un sitio desde cero, para ello abrimos el programa y damos click en New blank Project o File >> New y veremos lo siguiente
(https://lh3.googleusercontent.com/-WzaAioOF3d1buiOcZIST_eiTFXJeIzz1EHxr9Ocql_wQjTUt7gkuU5idg6e9FaR7PyKxYIJYLNPrFI1KawK5FFR1v-lMQlMVWsn_ySFQ1PMhBRjeeKMNqRshirZ29BzVZXsi8NauJo_EDGty90S9nlO8bCbL8162IKsjjpeZcrClJuZW1ACnET33vib5JS8sPOoSsgqQF8eAG81m2UZNdWdPAM0TpnjATdJgpO7LLEvvixbzU4SxojN-t2I03BDgWekyNroYEJRaKOP3K2LtyRnkCXY-KbJ8U_W52c2zmU341TlGZuXDNWEkCbn2Tw7k9icXp8zX2Zoa4gH_ysKzwfMYVp9NC0HHIBunKCF_P-xkWUWqe9jS_xDWI2nhsnG2w1caRegg9JrhuAgqJqodHclNVED2JjBgDGlLD1HnOpMLIJujxXdE5Jm6IErtU8kqFx49REwyCCIKP-GbZI9-xbJrQDu1l616FK60ZEVqpmzTAPsg7JN4dJ_unLJjbszFrcy5RyAcQo6cIETJhTrUjy0_UtOScpVxw-wmA_0cadEnuGCbL3ldp2FhrS0HZ5zX0sa9yH9-2pNLc26-Jk7NrXsG6eVCuSBEVYD7PM=w1133-h603-no)
Y simplemente vamos desplegando el menú de la izquierda, arrastramos los elementos que deseamos utilizar y los vamos editando
(https://lh3.googleusercontent.com/nS-_NqwbALUelfTjsx4e16BkWd1cmOE_V3T26wJikhLWufN_fBi1H0u5W50KqJjjzjbafDcbnIIpFIxYFX5Q5VIJNlqY3ssI-l6EL3FfXmGtXWwrvCYZFbBVcU-d0Imyf0xsea7_gi6vP1lr7BCflzlrjog1Pxpu5WMwmimPWO2_lfyxLxGdQoWbGvdtgFExIpnE2B77aYILR4B-WEXqGvMpgGYrnyiocxv0KCLM0RZtI6NSvHLKFMtl1qj_DU4sCG17PtBMDM3D7Bv_RaJ2GVk_e7tSdJcPzUwElSOZ7fBqRIf387iP0V-_zEcUlgpX6gHQAzFAwBN63tdOlisAuJ9GM8iRWcI1wuXUnq9REz68ANUlZ96gZWD5V0oXdoCFf6SNuuXqVAnAV8zIaZ-U20sKtBRfWFZRKAKfsmjC7mLFqz-dWlttElXKTtL9nv261OK9HMgMlmdGlSrqnPXYIYZDPCCwUpOb_zAv7PhlrX5nlhDs8UqyIUZ4gGQ0jfWnM1Uf5kCpSxaK7HqOUP7G7SOphry8reIlE1JlCtj9jJvHjAUCUHG-MhF2FtTMpZBM8OtosgcC7w2eJ24LBZIuQuCTJZFjQIgljSMYP3s=w1133-h603-no)
Eso es todo por ahora, espero que les sirva y compartan sus creaciones!
ANTRAX
gracias por la información ANTRAX, luego de eso a que servidor gratuito puedo subirlo bueno una recomendación por parte de usted? :)
Hey, ya me habían hablado un poco de esto pero no lo tenia muy claro. Voy a mirarlo de cerca, gracias por la información.
Genial el posteo pero no se porque no puedo ver las imagenes posteadas y estoy logeado :D gracias!